/* ============================================================
   FLORÍADE — UI compartilhada
   ============================================================ */

/* Triângulo alquímico do elemento */
function ElementMark({ element, size=16, color="var(--gold)" }){
  const t = ELEMENT_TRI[element] || ELEMENT_TRI.fogo;
  return (
    <svg width={size} height={size} viewBox="-9 -9 18 18" aria-hidden="true"
         style={{display:"inline-block",verticalAlign:"middle"}}>
      <polygon points={t.points} fill="none" stroke={color} strokeWidth="1"/>
      {t.bar && <line x1="-3.4" y1="0" x2="3.4" y2="0" stroke={color} strokeWidth="1"/>}
    </svg>
  );
}

/* Correspondências (planeta · signo · elemento) */
function Corr({ p, mono=true }){
  return (
    <span className={"corr"+(mono?" corr--mono":"")}>
      <span className="glyph" style={{color: p.planet==="☽"?"var(--silver)":"var(--gold)"}}>{p.planet}</span>
      <span className="corr-dot">·</span>
      <span className="glyph">{p.sign}</span>
      <span className="corr-dot">·</span>
      <ElementMark element={p.element} size={13}/>
    </span>
  );
}

/* Imagem de produto (slot preenchível pelo usuário) */
function ProductImage({ p, tall=true, sigil=true }){
  return (
    <div className={"prod-img"+(tall?" prod-img--tall":"")}>
      <image-slot id={"product-"+p.id} shape="rect" fit="cover"
        placeholder="frasco · foto"
        style={{width:"100%",height:"100%"}}></image-slot>
      {sigil && (
        <span className="prod-sigil" aria-hidden="true">
          <span className="glyph" style={{color: p.planet==="☽"?"var(--silver)":"var(--gold)"}}>{p.planet}</span>
        </span>
      )}
    </div>
  );
}

/* Cartão de produto */
function ProductCard({ p, onOpen, index=0 }){
  const cart = useCart();
  return (
    <article className="card reveal" style={{ "--i":index }}>
      <button className="card-img-btn" onClick={()=>onOpen(p.id)} aria-label={p.name}>
        <ProductImage p={p}/>
        <span className="card-line">{p.lineLabel}</span>
      </button>
      <div className="card-body">
        <div className="card-corr"><Corr p={p}/></div>
        <h3 className="card-name serif" onClick={()=>onOpen(p.id)}>{p.name}</h3>
        <p className="card-latin">{p.latin}</p>
        <p className="card-tag">{p.tag}</p>
        <div className="card-foot">
          <span className="card-price serif">{brl(p.price)}</span>
          <button className="btn btn--sm card-add" onClick={(e)=>{ flyToCart(e.currentTarget, p.planet); cart.add(p.id); }}>
            <span>Adicionar</span>
          </button>
        </div>
      </div>
    </article>
  );
}

/* ---------- CABEÇALHO ---------- */
function Header({ route, go, palette, setPalette }){
  const cart = useCart();
  const [solid, setSolid] = useState(false);
  const [bump, setBump] = useState(false);
  useEffect(()=>{
    const onScroll = ()=> setSolid(window.scrollY>40);
    window.addEventListener("scroll", onScroll, {passive:true});
    return ()=> window.removeEventListener("scroll", onScroll);
  },[]);
  useEffect(()=>{ if(cart.pulse){ setBump(true); const t=setTimeout(()=>setBump(false),420); return ()=>clearTimeout(t);} },[cart.pulse]);

  return (
    <header className={"hdr"+(solid?" hdr--solid":"")}>
      <div className="hdr-bar">
        <div className="eyebrow hdr-tagline"><Glyph g="✶"/> Florais Spagíricos · desde MMXIX</div>
        <div className="hdr-bar-right">
          <span className="hdr-ship">Oferenda livre acima de R$ 280</span>
        </div>
      </div>
      <div className="vine vine--thin"></div>
      <div className="hdr-main wrap-wide">
        <nav className="hdr-nav hdr-nav--l">
          {NAV.slice(0,2).map(n=>(
            <button key={n.id} className={"navlink"+(route===n.id?" is-active":"")} onClick={()=>go(n.id)}>{n.label}</button>
          ))}
        </nav>
        <button className="hdr-brand" onClick={()=>go("home")} aria-label="Floríade — início">
          <Logo className="hdr-logo"/>
          <span className="hdr-word display">Floríade</span>
          <span className="hdr-sub">Florais Spagíricos</span>
        </button>
        <nav className="hdr-nav hdr-nav--r">
          {NAV.slice(2).map(n=>(
            <button key={n.id} className={"navlink"+(route===n.id?" is-active":"")} onClick={()=>go(n.id)}>{n.label}</button>
          ))}
          <button className={"cart-btn"+(bump?" bump":"")} onClick={()=>cart.setOpen(true)} aria-label="Carrinho">
            <span className="cart-glyph glyph glyph--silver">☽</span>
            {cart.count>0 && <span className="cart-count">{cart.count}</span>}
          </button>
        </nav>
      </div>
    </header>
  );
}

/* ---------- RODAPÉ ---------- */
function Footer({ go }){
  return (
    <footer className="ftr">
      <div className="vine"></div>
      <div className="ftr-main wrap">
        <div className="ftr-brand">
          <Seal size={150}/>
          <p className="display ftr-word">Floríade</p>
          <p className="ftr-motto serif">Solve et Coagula — dissolve e recompõe.</p>
        </div>
        <div className="ftr-cols">
          <div className="ftr-col">
            <p className="eyebrow eyebrow--ink">Navegar</p>
            {NAV.map(n=> <button key={n.id} className="ftr-link" onClick={()=>go(n.id)}>{n.label}</button>)}
          </div>
          <div className="ftr-col">
            <p className="eyebrow eyebrow--ink">O Laboratório</p>
            <button className="ftr-link" onClick={()=>go("alquimia")}>A Arte Spagírica</button>
            <button className="ftr-link" onClick={()=>go("alquimia")}>Correspondências</button>
            <button className="ftr-link" onClick={()=>go("loja")}>Coleções</button>
            <a className="ftr-link" href="#">Modo de uso</a>
          </div>
          <div className="ftr-col ftr-col--news">
            <p className="eyebrow eyebrow--ink">A Carta dos Astros</p>
            <p className="ftr-news-txt">Receba a lua nova, os ofícios sazonais e essências em primeira mão.</p>
            <form className="ftr-form" onSubmit={e=>e.preventDefault()}>
              <input type="email" placeholder="seu correio" aria-label="E-mail"/>
              <button className="btn btn--sm btn--solid"><span>Selar</span></button>
            </form>
          </div>
        </div>
      </div>
      <div className="ftr-base wrap">
        <span>© MMXXVI Floríade · Opus Floralis</span>
        <span className="ftr-glyphs" aria-hidden="true">
          {["☉","☽","☿","♀","♂","♃","♄"].map((g,i)=>(
            <span key={i} className={g==="☉"?"txt-sol":g==="☽"?"txt-luna":""}>{g}</span>
          ))}
        </span>
        <span>Feito por mãos, sob os astros.</span>
      </div>
      <div className="vine"></div>
    </footer>
  );
}

Object.assign(window, { ElementMark, Corr, ProductImage, ProductCard, Header, Footer });
