// Instructor + Certificate + Guarantee
function Instructor() {
  const ref = useReveal();
  const refImg = useReveal();
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '60px 0' : '120px 0'}} id="instrutor">
      <div className="container">
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 40 : 80,
          alignItems:'center',
        }}>
          <div ref={ref} className="reveal">
            <span style={{
              display:'inline-block', background:'var(--accent)', color:'#000',
              padding:'6px 12px', borderRadius:4,
              fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.15em', fontWeight:800, marginBottom:24,
            }}>PRAZER</span>
            <h2 className="section-title" style={{marginBottom:24}}>Quem é o Bruno?</h2>
            <p style={{color:'var(--fg-2)', fontSize:15, lineHeight:1.7, marginBottom:16}}>
              Há <strong style={{color:'var(--fg)'}}>3 anos</strong> dedicado exclusivamente a dominar e ensinar Inteligência Artificial aplicada a negócios reais. Já formou mais de <strong style={{color:'var(--accent)'}}>1.000 alunos</strong> que hoje usam IA para criar conteúdo, vender produtos e escalar suas marcas.
            </p>
            <p style={{color:'var(--fg-2)', fontSize:15, lineHeight:1.7, marginBottom:16}}>
              Parceiro oficial da <strong style={{color:'var(--fg)'}}>Meta</strong> e do <strong style={{color:'var(--fg)'}}>CapCut</strong>, Bruno é referência quando o assunto é transformar ferramentas de IA em resultados concretos, mesmo para quem nunca mexeu com tecnologia.
            </p>
            <p style={{color:'var(--fg-2)', fontSize:15, lineHeight:1.7}}>
              Com mais de <strong style={{color:'var(--fg)'}}>20 anos</strong> de experiência como empreendedor, criou o método <strong style={{color:'var(--accent)'}}>Fábrica de Influencer AI</strong> para que qualquer pessoa consiga criar seu próprio influencer digital do zero, usando apenas o celular.
            </p>
          </div>

          {/* Photo — shown below text on mobile */}
          <div ref={refImg} className="reveal" style={{maxWidth: isMobile ? 360 : '100%', margin: isMobile ? '0 auto' : 0}}>
            <div style={{aspectRatio:'4/5', borderRadius:16, overflow:'hidden', position:'relative', border:'1px solid var(--line-2)'}}>
              <img src={`assets/bruno.webp?v=2`} alt="Bruno Pereira" loading="lazy" decoding="async"
                style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center top'}}/>
              <span className="mono" style={{
                position:'absolute', top:16, left:16, fontSize:10,
                padding:'6px 10px', background:'rgba(0,0,0,0.6)',
                borderRadius:4, backdropFilter:'blur(6px)', color:'var(--fg-2)',
              }}>BRUNO PEREIRA · FUNDADOR</span>
            </div>
          </div>
        </div>

        {/* Partners marquee */}
        <div style={{
          marginTop:60, overflow:'hidden',
          borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)',
          padding:'24px 0', position:'relative',
        }}>
          <div style={{display:'flex', width:'max-content', animation:'marquee 18s linear infinite', alignItems:'center'}}>
            {[...Array(4)].flatMap((_,rep) =>
              ['assets/logo1.png','assets/logo2.png','assets/logo3.png'].map((src,i) => (
                <div key={`${rep}-${i}`} style={{padding:'0 50px', display:'inline-flex', alignItems:'center', flexShrink:0}}>
                  <img src={src} alt={`parceiro ${i+1}`} loading="lazy" decoding="async"
                    style={{height: isMobile ? 24 : 34, width:'auto', filter:'brightness(0) invert(1)', opacity:0.8}}/>
                </div>
              ))
            )}
          </div>
          <div style={{position:'absolute',left:0,top:0,bottom:0,width:80,background:'linear-gradient(90deg,var(--bg),transparent)',pointerEvents:'none'}}/>
          <div style={{position:'absolute',right:0,top:0,bottom:0,width:80,background:'linear-gradient(-90deg,var(--bg),transparent)',pointerEvents:'none'}}/>
        </div>
      </div>
    </section>
  );
}

// Certificate
function Certificate() {
  const ref = useReveal();
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '60px 0 40px' : '120px 0 60px'}}>
      <div className="container">
        <div ref={ref} className="reveal" style={{marginBottom:48}}>
          {/* Tablet mockup */}
          <div style={{
            width:'100%', maxWidth:780, margin:'0 auto',
            aspectRatio: isMobile ? '3/2' : '4/3',
            borderRadius:isMobile ? 14 : 22,
            padding: isMobile ? 8 : 14,
            background:'linear-gradient(180deg, #2a2a30 0%, #1a1a20 100%)',
            border:'1px solid var(--line-2)',
            boxShadow:'0 20px 60px rgba(0,0,0,0.6)',
            position:'relative',
          }}>
            <div style={{
              width:'100%', height:'100%',
              background:'#0a0a0b', borderRadius: isMobile ? 8 : 10,
              overflow:'hidden',
              display:'grid',
              gridTemplateColumns: isMobile ? '1fr 1fr' : '1.2fr 1fr',
            }}>
              <div style={{padding: isMobile ? '20px 16px' : '40px', position:'relative', overflow:'hidden'}}>
                <Logo/>
                <div style={{marginTop: isMobile ? 20 : 48}}>
                  <div className="mono" style={{color:'var(--fg-3)', marginBottom:10, fontSize: isMobile ? 8 : 11}}>CERTIFICAMOS QUE</div>
                  <div style={{fontFamily:'var(--font-display)', fontSize: isMobile ? 14 : 24, fontWeight:500, letterSpacing:'-0.01em', marginBottom:16}}>
                    DÉBORA ALCÂNTARA DE AZEVEDO
                  </div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize: isMobile ? 8 : 10, lineHeight:1.7, color:'var(--fg-2)', letterSpacing:'0.08em', textTransform:'uppercase'}}>
                    PARTICIPOU DA IMERSÃO MÁQUINA DE CONTEÚDO COM IA, COM CARGA HORÁRIA DE 8 HORAS, REALIZADA NO DIA 16 DE MAIO DE 2026.
                  </div>
                </div>
              </div>
              {/* Right photo — always shown, smaller on mobile */}
              <div style={{background:'linear-gradient(180deg,#1a0d06,#0a0503)', position:'relative', overflow:'hidden'}}>
                  <img src="assets/cert-img.webp" alt="Influencer IA" loading="lazy" decoding="async"
                    style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center top'}}/>
                  <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.5) 100%)'}}/>
                </div>
            </div>
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr auto',
          gap:32, alignItems:'flex-end',
        }}>
          <div>
            <h2 className="section-title" style={{marginBottom:10}}>Certificado de conclusão</h2>
            <p style={{color:'var(--fg-2)', fontSize:15}}>Após 7 dias você recebe o certificado de participação da imersão.</p>
          </div>
          <div style={{
            padding:'12px 18px', border:'1px solid var(--accent)',
            borderRadius:999, fontSize:12, color:'var(--accent-2)',
            background:'var(--accent-soft)', flexShrink:0,
          }}>
            * Precisa ter assistido o dia completo.
          </div>
        </div>
      </div>
    </section>
  );
}

// Guarantee
function Guarantee() {
  const ref = useReveal();
  return (
    <section style={{padding:'60px 0 40px'}}>
      <div className="container" style={{textAlign:'center'}}>
        <div ref={ref} className="reveal" style={{display:'inline-block'}}>
          <div style={{position:'relative', width:160, height:160, margin:'0 auto 28px'}}>
            <svg viewBox="0 0 200 200" style={{animation:'rotate 18s linear infinite', width:'100%', height:'100%'}}>
              <defs>
                <path id="circlePath" d="M 100, 100 m -75, 0 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0"/>
              </defs>
              <circle cx="100" cy="100" r="90" fill="none" stroke="var(--line-2)" strokeWidth="1"/>
              <circle cx="100" cy="100" r="60" fill="none" stroke="var(--line)" strokeWidth="1"/>
              <text fontFamily="var(--font-mono)" fontSize="11" fill="var(--fg-2)" letterSpacing="3">
                <textPath href="#circlePath">GARANTIA INCONDICIONAL · GARANTIA INCONDICIONAL ·</textPath>
              </text>
            </svg>
            <div style={{
              position:'absolute', top:'50%', left:'50%',
              transform:'translate(-50%,-50%)',
              width:62, height:62, background:'var(--bg-3)',
              borderRadius:'50%', border:'1px solid var(--line-2)',
              display:'grid', placeItems:'center', color:'var(--accent)',
            }}>
              <Icon.Shield style={{width:26,height:26}}/>
            </div>
          </div>
          <h2 className="section-title" style={{marginBottom:14}}>Garantia estendida</h2>
          <p style={{color:'var(--fg-2)', fontSize:16, maxWidth:600, margin:'0 auto', lineHeight:1.7}}>
            Damos garantia estendida até um dia <strong style={{color:'var(--accent)'}}>depois</strong> do evento ao vivo. Assistiu e não gostou? Pode pedir seu dinheiro de volta. Sem perguntas.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Instructor, Certificate, Guarantee });