/* ============================================================
   FLORÍADE — Páginas: A Spagíria, Diário, Contato
   ============================================================ */

function Alquimia({ go }){
  const planets = [
    {g:"☉",n:"Sol",v:"Vitalidade, coração, identidade"},
    {g:"☽",n:"Lua",v:"Emoção, sonho, intuição"},
    {g:"☿",n:"Mercúrio",v:"Mente, palavra, nervos"},
    {g:"♀",n:"Vênus",v:"Amor, beleza, vínculos"},
    {g:"♂",n:"Marte",v:"Coragem, impulso, defesa"},
    {g:"♃",n:"Júpiter",v:"Expansão, fé, propósito"},
    {g:"♄",n:"Saturno",v:"Limite, estrutura, desapego"},
  ];
  return (
    <div className="view view-alquimia" data-screen-label="A Spagíria">
      <PageHead eyebrow="Ars Spagyrica · O Método"
        title="A Arte Spagírica"
        sub="Da palavra grega spáo (separar) e ageíro (reunir): separar para purificar, reunir para exaltar."/>
      <section className="section">
        <div className="wrap alq-intro">
          <div className="alq-wheel" aria-hidden="true"><AlchemicalWheel size={420}/></div>
          <div className="alq-text">
            <p className="lead">A spagíria é o ramo da alquimia dedicado ao reino vegetal. Onde a fitoterapia comum extrai princípios ativos, a arte spagírica trabalha a planta inteira — corpo, alma e espírito — separando seus três princípios e recombinando-os numa medicina viva.</p>
            <p>Cada essência Floríade nasce da observação do céu e da terra: a flor é colhida na hora planetária correta, dissolvida em seu espírito, calcinada até o sal e finalmente recomposta. O resultado não é apenas um remédio — é um retrato condensado da virtude da planta.</p>
            <div className="tria">
              {[["Sal","🜔","O corpo · a matéria fixa, as cinzas purificadas"],["Enxofre","🜍","A alma · a essência aromática e medicinal"],["Mercúrio","☿","O espírito · a força vital volátil"]].map(([n,g,d])=>(
                <div className="tria-card" key={n}>
                  <span className="tria-glyph glyph">{g}</span>
                  <span className="tria-name display">{n}</span>
                  <span className="tria-desc">{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="band corr-band">
        <div className="wrap">
          <div className="sec-head center">
            <div className="eyebrow"><Glyph g="✶"/> Tabula Correspondentiae</div>
            <h2 className="display sec-title">Os Sete Selos Planetários</h2>
          </div>
          <div className="planet-grid">
            {planets.map(p=>(
              <div className="planet-cell" key={p.n}>
                <span className="planet-glyph glyph" style={{color: p.g==="☽"?"var(--silver)":"var(--gold)"}}>{p.g}</span>
                <span className="planet-name display">{p.n}</span>
                <span className="planet-virt">{p.v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section center closing">
        <div className="wrap">
          <Seal size={120}/>
          <h2 className="display closing-title">Pronto para a obra?</h2>
          <button className="btn btn--solid" onClick={()=>go("loja")}><span>Conhecer as Essências</span></button>
        </div>
      </section>
    </div>
  );
}

function Diario(){
  const posts = [
    {k:"Lunário",t:"O calendário da colheita: por que a hora planetária importa",d:"Sobre colher a flor quando o astro regente está em força."},
    {k:"Ofício",t:"Calcinação: a paciência do fogo lento",d:"O gesto mais longo da bancada, e o mais transformador."},
    {k:"Herbário",t:"Datura, a guardiã da soleira",d:"A planta de Saturno e a sabedoria dos limites."},
    {k:"Ritual",t:"Como tomar uma essência spagírica",d:"Pequenos gestos que tornam o uso uma oração."},
  ];
  return (
    <div className="view view-diario" data-screen-label="Diário">
      <PageHead eyebrow="Ephemeris · Notas do Laboratório" title="O Diário" sub="Crônicas da bancada, do herbário e do céu."/>
      <section className="section">
        <div className="wrap-wide diario-grid">
          {posts.map((p,i)=>(
            <article className="post reveal" key={i} style={{"--i":i}}>
              <div className="post-img imgholder"><span className="lbl">ilustração</span></div>
              <div className="post-body">
                <span className="eyebrow eyebrow--ink">{p.k}</span>
                <h3 className="post-title serif">{p.t}</h3>
                <p className="post-desc">{p.d}</p>
                <span className="post-link">ler ↗</span>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

function Contato(){
  return (
    <div className="view view-contato" data-screen-label="Contato">
      <PageHead eyebrow="Correspondência" title="Fale com o Laboratório" sub="Atendemos por carta, encomenda e consulta de correspondências."/>
      <section className="section">
        <div className="wrap contato-grid">
          <form className="contato-form" onSubmit={e=>e.preventDefault()}>
            <label>Nome<input type="text" placeholder="como o cosmos o chama"/></label>
            <label>Correio<input type="email" placeholder="seu e-mail"/></label>
            <label>Mensagem<textarea rows="5" placeholder="sua questão à bancada"></textarea></label>
            <button className="btn btn--solid"><span>Enviar pomba-correio</span></button>
          </form>
          <div className="contato-aside">
            <Seal size={96}/>
            <div className="contato-line"><span className="eyebrow eyebrow--ink">Atelier</span><p className="serif">Rua das Sete Flores, 7 · Vale Encantado</p></div>
            <div className="contato-line"><span className="eyebrow eyebrow--ink">Horas planetárias</span><p className="serif">Lua a Saturno · 9h às 18h</p></div>
            <div className="contato-line"><span className="eyebrow eyebrow--ink">Correio</span><p className="serif">opus@floriade.lab</p></div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Alquimia, Diario, Contato, PageHead });