/* ============================================================
   FLORÍADE — Home
   ============================================================ */

function Hero({ go }){
  const wheelRef = useRef(null);
  const frameRef = useRef(null);
  useEffect(()=>{
    const frame = frameRef.current, wheel = wheelRef.current;
    if(!frame || !wheel) return;
    if(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if(window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return;
    let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e)=>{
      const r = frame.getBoundingClientRect();
      tx = ((e.clientX - r.left)/r.width - 0.5);
      ty = ((e.clientY - r.top)/r.height - 0.5);
      if(!raf) raf = requestAnimationFrame(tick);
    };
    const tick = ()=>{
      cx += (tx - cx)*0.08; cy += (ty - cy)*0.08;
      wheel.style.transform = `translate(${cx*26}px, ${cy*26}px) rotate(${cx*2}deg)`;
      if(Math.abs(tx-cx)>0.001 || Math.abs(ty-cy)>0.001){ raf = requestAnimationFrame(tick); }
      else raf = 0;
    };
    const onLeave = ()=>{ tx = 0; ty = 0; if(!raf) raf = requestAnimationFrame(tick); };
    frame.addEventListener("mousemove", onMove);
    frame.addEventListener("mouseleave", onLeave);
    return ()=>{ frame.removeEventListener("mousemove", onMove); frame.removeEventListener("mouseleave", onLeave); if(raf) cancelAnimationFrame(raf); };
  },[]);

  return (
    <section className="hero" data-screen-label="Home / Herói">
      <div className="hero-frame" ref={frameRef}>
        <div className="vine hero-vine hero-vine--t"></div>
        <div className="vine hero-vine hero-vine--b"></div>
        <div className="vine vine--v hero-vine hero-vine--l"></div>
        <div className="vine vine--v hero-vine hero-vine--r"></div>

        <div className="hero-wheel" aria-hidden="true" ref={wheelRef}><AlchemicalWheel size={760}/></div>

        <div className="hero-inner">
          <SolLuna size={88} breathe className="hero-emblem reveal"/>
          <div className="eyebrow reveal" style={{whiteSpace:"nowrap"}}><Glyph g="✶"/> Spagyria · Sol et Luna · Opus Floralis</div>
          <h1 className="display hero-title reveal">
            O Segredo Alquímico<br/><span className="hero-amp">da</span> Cura Floral
          </h1>
          <p className="lead hero-lead reveal">
            Essências botânicas elaboradas pela antiga via spagírica — onde o ouro do Sol
            e a prata da Lua se reúnem no cuidado do espírito, da alma e do corpo.
          </p>
          <div className="hero-cta reveal">
            <button className="btn btn--solid" onClick={()=>go("loja")}><span>Descobrir as Essências</span></button>
            <button className="btn btn--luna" onClick={()=>go("alquimia")}><span>A Arte Spagírica</span></button>
          </div>
        </div>

        <div className="hero-corners" aria-hidden="true">
          <span className="glyph glyph--gold hc hc-tl">☉</span>
          <span className="glyph glyph--silver hc hc-tr">☽</span>
          <span className="glyph glyph--silver hc hc-bl">☽</span>
          <span className="glyph glyph--gold hc hc-br">☉</span>
        </div>
      </div>
      <div className="hero-scroll"><span className="glyph">⟡</span> role para descer ao laboratório</div>
    </section>
  );
}

function FeaturedStrip({ go }){
  const featured = PRODUCTS.slice(0,4);
  return (
    <section className="section feat">
      <div className="wrap-wide">
        <div className="sec-head">
          <div className="eyebrow"><Glyph g="✶"/> Da Bancada do Alquimista</div>
          <h2 className="display sec-title">Essências da Estação</h2>
          <Divider glyph="✥"/>
        </div>
        <div className="grid grid-4">
          {featured.map((p,i)=> <ProductCard key={p.id} p={p} index={i} onOpen={id=>go("produto",id)}/>)}
        </div>
        <div className="sec-foot">
          <button className="btn btn--ghost" onClick={()=>go("loja")}><span>Ver todas as essências</span></button>
        </div>
      </div>
    </section>
  );
}

const OPUS = [
  { g:"🜍", roman:"I", name:"Solve", title:"Separar", desc:"A flor é dissolvida — pétala e espírito apartados de sua matéria bruta pela água e pelo fogo." },
  { g:"☉", roman:"II", name:"Purifica", title:"Purificar", desc:"Calcinamos o corpo até suas cinzas-sal, lavando-o sete vezes até restar apenas o puro." },
  { g:"🜔", roman:"III", name:"Coagula", title:"Recompor", desc:"Sal, enxofre e mercúrio se reúnem — a essência renasce, viva, em sua forma mais sutil e perfeita." },
];

function OpusBand(){
  return (
    <section className="section band opus" data-screen-label="Home / O Opus">
      <div className="wrap">
        <div className="sec-head center">
          <div className="eyebrow"><Glyph g="✶"/> Solve et Coagula</div>
          <h2 className="display sec-title">A Grande Obra em Três Tempos</h2>
          <p className="lead sec-sub">Toda essência Floríade percorre o opus alquímico — a separação, a purificação e a recomposição da virtude viva da planta.</p>
        </div>
        <div className="opus-grid">
          {OPUS.map((o,i)=>(
            <div className="opus-card reveal" key={o.name} style={{"--i":i}}>
              <div className="opus-node">
                <span className="opus-ring"></span>
                <span className="opus-glyph">{i===0
                  ? <ElementMark element="agua" size={26} color="var(--silver)"/>
                  : i===1
                  ? <span className="glyph glyph--silver" style={{fontSize:"1.5rem"}}>☽</span>
                  : <span className="glyph glyph--gold" style={{fontSize:"1.5rem"}}>☉</span>}</span>
              </div>
              <span className="opus-roman">{o.roman}</span>
              <h3 className="opus-name display">{o.name}</h3>
              <p className="opus-sub serif">{o.title}</p>
              <p className="opus-desc">{o.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Collections({ go }){
  const tiles = LINES.slice(1).map(l=>({
    ...l,
    p: PRODUCTS.find(p=>p.line===l.id),
    n: PRODUCTS.filter(p=>p.line===l.id).length,
    glyph: { elixir:"☽", tintura:"♀", oleo:"☿", ritual:"♄" }[l.id],
  }));
  return (
    <section className="section coll">
      <div className="wrap-wide">
        <div className="sec-head">
          <div className="eyebrow"><Glyph g="✶"/> Quatro Vias</div>
          <h2 className="display sec-title">Coleções do Laboratório</h2>
          <Divider glyph="✥"/>
        </div>
        <div className="coll-grid">
          {tiles.map((t,i)=>(
            <button className="coll-tile reveal" key={t.id} style={{"--i":i}} onClick={()=>go("loja",t.id)}>
              <span className="coll-glyph glyph" style={{color: t.glyph==="☽"?"var(--silver)":"var(--gold)"}}>{t.glyph}</span>
              <span className="coll-name display">{t.label}</span>
              <span className="coll-n">{t.n} essências</span>
              <span className="coll-arrow">→</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuoteBand(){
  return (
    <section className="band band--deep quote-band">
      <div className="wrap center">
        <span className="quote-mark glyph" aria-hidden="true">❧</span>
        <p className="display quote-txt">“Aquilo que está embaixo é como o que está em cima; e o que está em cima é como o que está embaixo, para realizar os milagres de uma só coisa.”</p>
        <p className="eyebrow quote-cite">— Tábua de Esmeralda · Hermes Trismegisto</p>
      </div>
    </section>
  );
}

function ClosingCTA({ go }){
  return (
    <section className="section closing center">
      <div className="wrap">
        <Seal size={130}/>
        <h2 className="display closing-title">Deixe a flor operar em você</h2>
        <p className="lead closing-sub">Cada frasco é numerado, selado à mão e acompanhado de sua carta de correspondências astrais.</p>
        <button className="btn btn--solid" onClick={()=>go("loja")}><span>Entrar na Loja</span></button>
      </div>
    </section>
  );
}

function Home({ go }){
  return (
    <div className="view view-home">
      <Hero go={go}/>
      <FeaturedStrip go={go}/>
      <OpusBand/>
      <Collections go={go}/>
      <QuoteBand/>
      <ClosingCTA go={go}/>
    </div>
  );
}

Object.assign(window, { Home });