/* ============================================================
   CRUIG — Landing page
   ============================================================ */
function Landing({onEnter, onLogin}){
  useReveal();

  return (
    <div style={{background:'var(--beige)'}}>
      <LandNav onEnter={onEnter} onLogin={onLogin}/>
      <Hero onEnter={onEnter}/>
      <TrustBar/>
      <ValueProps/>
      <NicheShowcase/>
      <VideoBlock/>
      <FinalCTA onEnter={onEnter}/>
      <Footer/>
    </div>
  );
}

function LandNav({onEnter, onLogin}){
  const [scrolled,setScrolled] = useState(false);
  useEffect(()=>{
    const f=()=>setScrolled(window.scrollY>20 || document.querySelector('.land-scroll')?.scrollTop>20);
    window.addEventListener('scroll',f,true); return ()=>window.removeEventListener('scroll',f,true);
  },[]);
  return (
    <header style={{position:'sticky', top:0, zIndex:50, transition:'all .25s',
      background: scrolled?'rgba(251,247,225,.86)':'transparent', backdropFilter: scrolled?'blur(12px)':'none',
      borderBottom: scrolled?'1px solid var(--line)':'1px solid transparent'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'16px 28px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <Logo variant="green" height={30}/>
        <nav className="land-nav-links" style={{display:'flex', alignItems:'center', gap:30}}>
          <a href="#como" style={{fontWeight:600, fontSize:14.5, color:'var(--green-dark)'}}>Como funciona</a>
          <a href="#nichos" style={{fontWeight:600, fontSize:14.5, color:'var(--green-dark)'}}>Nichos</a>
        </nav>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <button className="btn btn-ghost btn-sm" onClick={onLogin}>Entrar</button>
          <button className="btn btn-lime btn-sm" onClick={()=>onEnter('creator')}>Começar grátis</button>
        </div>
      </div>
    </header>
  );
}

function Hero({onEnter}){
  return (
    <section style={{maxWidth:1200, margin:'0 auto', padding:'46px 28px 30px', position:'relative'}}>
      <div className="hero-grid" style={{display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:40, alignItems:'center'}}>
        <div>
          <span className="badge badge-lime" style={{marginBottom:20}}><Icon name="bolt" size={13} fill/> Conexões reais, dados em tempo real</span>
          <h1 style={{fontSize:'clamp(40px,5.2vw,66px)', lineHeight:1.0, marginBottom:22, fontWeight:700, letterSpacing:'-.03em', textWrap:'balance'}}>
            Marcas e criadores que <span className="tag-hl">combinam<span className="tag-spark" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8L12 2Z" fill="#FFA732"/></svg></span></span> de verdade.
          </h1>
          <p style={{fontSize:'19px', lineHeight:1.55, color:'var(--ink-soft)', maxWidth:480, marginBottom:30}}>
            Mesmo criadores pequenos monetizam encontrando as empresas certas. E as empresas acham o influenciador ideal sem inseguranças — perfis conectados por API, métricas reais.
          </p>
          <div style={{display:'flex', gap:13, flexWrap:'wrap'}}>
            <button className="btn btn-lime btn-lg" onClick={()=>onEnter('creator')}>Sou criador<Icon name="arrow" size={18}/></button>
            <button className="btn btn-dark btn-lg" onClick={()=>onEnter('company')}>Sou empresa<Icon name="arrow" size={18}/></button>
          </div>
          <div style={{display:'flex', gap:26, marginTop:30, flexWrap:'wrap'}}>
            {[["3.900+","criadores"],["+12K","campanhas"],["98%","dados verificados"]].map(([a,b])=>(
              <div key={b}>
                <div className="mono-num" style={{fontSize:24, fontWeight:700, color:'var(--green-dark)'}}>{a}</div>
                <div className="faint" style={{fontSize:13}}>{b}</div>
              </div>
            ))}
          </div>
        </div>
        <HeroVisual/>
      </div>
    </section>
  );
}

function HeroVisual(){
  // Floating info/creator bubbles orbiting the frog mascot
  const bubbles = [
    {kind:'creator', name:"Marina Lopes", niche:"Moda", idx:0, f:"128K", pos:{top:'4%', left:'-4%'}, delay:0},
    {kind:'creator', name:"Júlia Fernandes", niche:"Skincare", idx:6, f:"430K", pos:{top:'30%', right:'-6%'}, delay:1.1},
    {kind:'info', icon:'verified', title:"Perfil verificado", sub:"Dados via API · tempo real", pos:{bottom:'20%', left:'-7%'}, delay:0.6},
  ];
  return (
    <div className="hero-visual" style={{position:'relative', minHeight:500}}>
      {/* soft lime glow */}
      <div style={{position:'absolute', top:'46%', left:'52%', width:'78%', height:'78%', transform:'translate(-50%,-50%)',
        background:'radial-gradient(circle, rgba(148,199,0,.32), rgba(148,199,0,0) 68%)', filter:'blur(6px)', animation:'glowPulse 6s ease-in-out infinite', pointerEvents:'none'}}></div>

      {/* connecting curve from heading toward the mascot, echoing the network motif */}
      <svg viewBox="0 0 460 500" style={{position:'absolute', inset:0, width:'100%', height:'100%', overflow:'visible'}} aria-hidden="true">
        <path d="M-60 250 C 40 170, 120 360, 230 250" fill="none" stroke="var(--lime)" strokeWidth="2.4" strokeLinecap="round" strokeDasharray="2 11" opacity=".75"/>
        <circle cx="230" cy="250" r="5" fill="var(--orange)"/>
        <circle cx="-60" cy="250" r="5" fill="var(--lime)"/>
      </svg>

      {/* ground contact shadow */}
      <div style={{position:'absolute', bottom:'7%', left:'50%', transform:'translateX(-50%)', width:'46%', height:34,
        background:'radial-gradient(ellipse, rgba(0,57,0,.22), rgba(0,57,0,0) 70%)', filter:'blur(3px)'}}></div>

      {/* mascot */}
      <img src="assets/frog.png" alt="Cruig — sapo detetive" className="hero-frog"
        style={{position:'absolute', bottom:'5%', left:'50%', height:'92%', width:'auto', transform:'translateX(-50%)',
          filter:'drop-shadow(0 22px 32px rgba(0,57,0,.18))', animation:'frogBob 5.5s ease-in-out infinite', zIndex:2}}/>

      {/* floating bubbles */}
      {bubbles.map((b,i)=>(
        <div key={i} className="card" style={{position:'absolute', padding:'11px 14px', display:'flex', alignItems:'center', gap:11,
          boxShadow:'var(--sh-md)', zIndex:3, ...b.pos, animation:`floaty 5s ease-in-out ${b.delay}s infinite`}}>
          {b.kind==='creator' ? (
            <>
              <Avatar name={b.name} size={38} colorIdx={b.idx} verified/>
              <div>
                <div style={{fontWeight:700, fontSize:13.5, color:'var(--green-dark)'}}>{b.name.split(' ')[0]}</div>
                <div className="faint" style={{fontSize:11.5, display:'flex', gap:6, alignItems:'center'}}>
                  <span style={{width:6,height:6,borderRadius:'50%',background:CRUIG.nicheColor(b.niche)}}></span>{b.niche} · {b.f}
                </div>
              </div>
            </>
          ) : (
            <>
              <span style={{width:38,height:38,borderRadius:11,background:'var(--lime-100)',color:'var(--lime-700)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Icon name={b.icon} size={20}/></span>
              <div>
                <div style={{fontWeight:700, fontSize:13.5, color:'var(--green-dark)'}}>{b.title}</div>
                <div className="faint" style={{fontSize:11.5}}>{b.sub}</div>
              </div>
            </>
          )}
        </div>
      ))}

      {/* small lightning 'match' chip near frog's magnifier */}
      <div style={{position:'absolute', top:'2%', right:'14%', zIndex:3, animation:'floaty 4.4s ease-in-out .3s infinite'}}>
        <div style={{display:'flex', alignItems:'center', gap:7, background:'var(--lime)', color:'var(--green-dark)', padding:'7px 13px', borderRadius:'var(--r-pill)', boxShadow:'var(--sh-lime)', fontWeight:700, fontSize:13}}>
          <Icon name="bolt" size={14} fill/>match
        </div>
      </div>
    </div>
  );
}

function TrustBar(){
  return (
    <section style={{borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', background:'rgba(255,255,255,.5)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'26px 28px', display:'flex', alignItems:'center', gap:30, flexWrap:'wrap', justifyContent:'space-between'}}>
        <span className="faint" style={{fontSize:13, fontWeight:700, whiteSpace:'nowrap'}}>Empresas que confiam</span>
        <div style={{display:'flex', gap:34, flexWrap:'wrap', alignItems:'center', flex:1, justifyContent:'space-around', opacity:.62}}>
          {CRUIG.TRUST.map(t=> <span key={t} style={{fontFamily:'var(--display)', fontWeight:700, fontSize:18, color:'var(--green-dark)', letterSpacing:'-.02em'}}>{t}</span>)}
        </div>
      </div>
    </section>
  );
}

function ValueProps(){
  const items = [
    {icon:"verified", title:"Dados reais, via API", body:"Perfis conectados a Instagram, TikTok e YouTube. Seguidores, engajamento e audiência atualizados em tempo real — sem prints, sem fraude."},
    {icon:"filter", title:"Match por nicho", body:"Filtros dinâmicos e interligados. A empresa filtra por nicho, região e engajamento; só aparecem criadores compatíveis."},
    {icon:"cash", title:"Todo tamanho monetiza", body:"De nano a mega influenciador. Inscreva-se em campanhas, receba propostas e ainda ganhe indicando amigos."},
  ];
  return (
    <section id="como" style={{maxWidth:1200, margin:'0 auto', padding:'72px 28px 30px'}}>
      <div className="reveal" style={{textAlign:'center', maxWidth:640, margin:'0 auto 48px'}}>
        <span className="eyebrow">Como funciona</span>
        <h2 style={{fontSize:'clamp(28px,3.4vw,42px)', margin:'14px 0 0', lineHeight:1.08}}>Uma plataforma, dois lados que se encontram.</h2>
      </div>
      <div className="vp-grid" style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22}}>
        {items.map((it,i)=>(
          <div key={i} className="card card-pad reveal" style={{padding:30, transitionDelay:`${i*0.08}s`}}>
            <div style={{width:54, height:54, borderRadius:16, background:'var(--lime-100)', color:'var(--lime-700)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18}}>
              <Icon name={it.icon} size={26}/>
            </div>
            <h3 style={{fontSize:21, marginBottom:10}}>{it.title}</h3>
            <p style={{fontSize:15, lineHeight:1.55, color:'var(--ink-soft)'}}>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function NicheShowcase(){
  const featured = ["Moda","Fitness","Skincare","Tecnologia","Viagem","Culinária","Games","Finanças","Pets","Maternidade","Decoração","Humor"];
  return (
    <section id="nichos" style={{maxWidth:1200, margin:'0 auto', padding:'60px 28px'}}>
      <div className="niche-show card reveal" style={{background:'var(--green-dark)', borderRadius:'var(--r-xl)', padding:'clamp(30px,5vw,56px)', overflow:'hidden', position:'relative', border:'none'}}>
        <div className="niche-show-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center'}}>
          <div>
            <span className="eyebrow" style={{color:'var(--lime)'}}>Super prioridade</span>
            <h2 style={{color:'#fff', fontSize:'clamp(26px,3.2vw,38px)', margin:'14px 0 16px', lineHeight:1.1}}>Filtros de nicho que conversam entre si.</h2>
            <p style={{color:'rgba(255,255,255,.8)', fontSize:16, lineHeight:1.6, marginBottom:24}}>
              O criador escolhe seus nichos em tags. A empresa filtra por esses mesmos nichos na busca — e a lista reage na hora. Match instantâneo, sem ruído.
            </p>
            <div style={{display:'flex', gap:18, flexWrap:'wrap'}}>
              <div style={{display:'flex', alignItems:'center', gap:9, color:'#fff', fontSize:14, fontWeight:600}}><span style={{width:9,height:9,borderRadius:'50%',background:'var(--lime)'}}></span>36 nichos prontos</div>
              <div style={{display:'flex', alignItems:'center', gap:9, color:'#fff', fontSize:14, fontWeight:600}}><span style={{width:9,height:9,borderRadius:'50%',background:'var(--orange)'}}></span>Seleção múltipla</div>
              <div style={{display:'flex', alignItems:'center', gap:9, color:'#fff', fontSize:14, fontWeight:600}}><span style={{width:9,height:9,borderRadius:'50%',background:'var(--lime)'}}></span>Reativo em tempo real</div>
            </div>
          </div>
          <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
            {featured.map(n=>(
              <span key={n} className="chip" style={{background:'rgba(255,255,255,.08)', borderColor:'rgba(255,255,255,.16)', color:'#fff', cursor:'default'}}>
                <span style={{width:8,height:8,borderRadius:'50%',background:CRUIG.nicheColor(n)}}></span>{n}
              </span>
            ))}
            <span className="chip" style={{background:'var(--lime)', borderColor:'var(--lime)', color:'var(--green-dark)', cursor:'default'}}>+24 nichos</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function VideoBlock(){
  const [playing,setPlaying] = useState(false);
  return (
    <section style={{maxWidth:1000, margin:'0 auto', padding:'40px 28px 60px'}}>
      <div className="reveal" style={{textAlign:'center', marginBottom:30}}>
        <span className="eyebrow">Veja em ação</span>
        <h2 style={{fontSize:'clamp(26px,3.2vw,38px)', margin:'14px 0 0'}}>2 minutos para entender a Cruig</h2>
      </div>
      <div className="reveal card" style={{position:'relative', aspectRatio:'16/9', borderRadius:'var(--r-xl)', overflow:'hidden',
        background:'linear-gradient(135deg, #0a4f10, #003900)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', border:'none'}}
        onClick={()=>setPlaying(p=>!p)}>
        {/* decorative network */}
        <svg viewBox="0 0 800 450" style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:.18}} aria-hidden="true">
          {Array.from({length:14}).map((_,i)=>{
            const x=(i*123+60)%760+20, y=(i*97+40)%400+25;
            return <circle key={i} cx={x} cy={y} r="3.5" fill="#94C700"/>;
          })}
        </svg>
        <div style={{textAlign:'center', position:'relative', zIndex:2}}>
          <div style={{width:84, height:84, borderRadius:'50%', background:'var(--lime)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px', boxShadow:'var(--sh-lime)', transition:'transform .2s', transform: playing?'scale(.9)':'scale(1)'}}>
            <Icon name={playing?"close":"play"} size={34} fill style={{color:'var(--green-dark)', marginLeft: playing?0:4}}/>
          </div>
          <p style={{color:'#fff', fontWeight:700, fontSize:16}}>{playing? 'Reproduzindo demonstração…' : 'Assistir demonstração'}</p>
          <p style={{color:'rgba(255,255,255,.6)', fontSize:13, marginTop:4}}>Espaço reservado para o vídeo oficial</p>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({onEnter}){
  return (
    <section style={{maxWidth:1200, margin:'0 auto', padding:'10px 28px 70px'}}>
      <div className="reveal" style={{background:'var(--lime)', borderRadius:'var(--r-xl)', padding:'clamp(34px,5vw,60px)', textAlign:'center', position:'relative', overflow:'hidden'}}>
        <h2 style={{fontSize:'clamp(28px,3.6vw,46px)', color:'var(--green-dark)', lineHeight:1.06, marginBottom:16}}>Pronto pra fazer match?</h2>
        <p style={{fontSize:17, color:'rgba(0,57,0,.78)', maxWidth:520, margin:'0 auto 28px'}}>Crie seu perfil em minutos e comece com inscrições gratuitas hoje mesmo.</p>
        <div style={{display:'flex', gap:13, justifyContent:'center', flexWrap:'wrap'}}>
          <button className="btn btn-dark btn-lg" onClick={()=>onEnter('creator')}>Criar conta de criador</button>
          <button className="btn btn-white btn-lg" onClick={()=>onEnter('company')}>Criar conta de empresa</button>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer style={{background:'var(--green-dark)', color:'rgba(255,255,255,.7)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'50px 28px 30px', display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1fr', gap:30}} className="footer-grid">
        <div>
          <Logo variant="white" height={28}/>
          <p style={{fontSize:14, lineHeight:1.6, marginTop:16, maxWidth:280}}>A ponte entre marcas e criadores de conteúdo. Dados reais, conexões que convertem.</p>
        </div>
        {[["Produto",["Como funciona","Nichos","Planos","Afiliados"]],["Empresa",["Sobre","Blog","Carreiras","Contato"]],["Legal",["Termos","Privacidade","Cookies"]]].map(([h,items])=>(
          <div key={h}>
            <h4 style={{color:'#fff', fontSize:14, marginBottom:14, fontFamily:'var(--body)', fontWeight:700}}>{h}</h4>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
              {items.map(x=> <li key={x}><a href="#" onClick={e=>e.preventDefault()} style={{fontSize:14, cursor:'pointer'}}>{x}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{borderTop:'1px solid rgba(255,255,255,.12)'}}>
        <div style={{maxWidth:1200, margin:'0 auto', padding:'20px 28px', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12, fontSize:13}}>
          <span>© 2026 Cruig. Todos os direitos reservados.</span>
          <span>Feito no Brasil 🇧🇷</span>
        </div>
      </div>
    </footer>
  );
}

window.Landing = Landing;