/* global React, Button, Eyebrow, Flower, Icon, SectionHead, PlainHero */
// Espalhe Gardênias — Loja (vitrine)

function LojaScreen({ onNav }) {
  const [filtro, setFiltro] = React.useState("Todos");
  const [popup, setPopup] = React.useState(false);

  React.useEffect(() => {
    let visto = false;
    try { visto = sessionStorage.getItem("eg-newsletter-popup") === "1"; } catch (_) {}
    if (visto) return;
    const t = setTimeout(() => {
      setPopup(true);
      try { sessionStorage.setItem("eg-newsletter-popup", "1"); } catch (_) {}
    }, 6000);
    return () => clearTimeout(t);
  }, []);


  const produtos = [
    { t: "Brinco Espalhe Gardênias", d: "Brinco delicado em metal com acabamento artesanal, símbolo do movimento de florescer.", cat: "Acessório", img: "/site/brinco.png" },
    { t: "Brinco Flor", d: "Brinco em formato de flor, leve e delicado, para quem carrega a gardênia como símbolo.", cat: "Acessório", img: "/site/produtos/brinco-flor.jpg" },
    { t: "Colar Espalhe Gardênias", d: "Colar curto com pingente de gardênia, leveza e elegância para o dia a dia.", cat: "Acessório", img: "/site/colar.png" },
    { t: "Colar Longo Gardênia", d: "Colar alongado com detalhe floral, perfeito para compor looks com propósito.", cat: "Acessório", img: "/site/colar2.png" },
    { t: "Blusa Espalhe Gardênias Branca", d: "Camiseta branca com a assinatura do movimento. Conforto e propósito no dia a dia.", cat: "Vestuário", img: "/site/produtos/blusa-eg-branca.jpg" },
    { t: "Blusa Espalhe Gardênias Preta", d: "Camiseta preta com a assinatura do movimento. Clássica e cheia de significado.", cat: "Vestuário", img: "/site/produtos/blusa-eg-preta.jpg" },
    { t: "Blusa Coragem", d: "Camiseta com a palavra que abre caminhos. Para vestir a força de recomeçar.", cat: "Vestuário", img: "/site/produtos/blusa-coragem.jpg" },
    { t: "Blusa Florescer", d: "Camiseta inspirada no florescer de cada mulher, em qualquer estação da vida.", cat: "Vestuário", img: "/site/produtos/blusa-florescer.jpg" },
    { t: "Blusa Recomeço", d: "Camiseta para lembrar que sempre é possível começar de novo.", cat: "Vestuário", img: "/site/produtos/blusa-recomeco.jpg" },
    { t: "Blusa Minha História", d: "Camiseta que celebra a história de cada uma — raiz, memória e futuro.", cat: "Vestuário", img: "/site/produtos/blusa-minha-historia.jpg" },
    { t: "Blusa Seja Gardênia", d: "Camiseta convite: seja gardênia onde você estiver.", cat: "Vestuário", img: "/site/produtos/blusa-seja-gardenia.jpg" },
    { t: "Boné Coragem", d: "Boné com bordado Coragem, para levar o movimento aonde você for.", cat: "Vestuário", img: "/site/produtos/bone-coragem.jpg" },
    { t: "Boné Florescer", d: "Boné com bordado Florescer, leve e confortável para o dia a dia.", cat: "Vestuário", img: "/site/produtos/bone-florescer.jpg" },
    { t: "Boné Força", d: "Boné com bordado Força, um lembrete diário da sua potência.", cat: "Vestuário", img: "/site/produtos/bone-forca.jpg" },
    { t: "Boné Recomeço", d: "Boné com bordado Recomeço, para quem escolhe seguir em frente.", cat: "Vestuário", img: "/site/produtos/bone-recomeco.jpg" },
    { t: "Boné Sertão", d: "Boné com bordado Sertão, homenagem às raízes que sustentam a história.", cat: "Vestuário", img: "/site/produtos/bone-sertao.jpg" },
    { t: "Nécessaire Coragem", d: "Nécessaire prática e resistente, com a palavra que inspira a seguir.", cat: "Acessório", img: "/site/produtos/nec-coragem.jpg" },
    { t: "Nécessaire Florescer", d: "Nécessaire para o dia a dia, com o convite de florescer sempre.", cat: "Acessório", img: "/site/produtos/nec-florescer.jpg" },
    { t: "Nécessaire Gardênia", d: "Nécessaire com a identidade do movimento, delicada e funcional.", cat: "Acessório", img: "/site/produtos/nec-gardenia.jpg" },
    { t: "Nécessaire Sertão", d: "Nécessaire inspirada nas raízes sertanejas que atravessam a história de Gardênia.", cat: "Acessório", img: "/site/produtos/nec-sertao.jpg" },
    { t: "Gloss Espalhe Gardênias", d: "Brilho leve, hidratante e com toque delicado. Um lembrete diário de florescer.", cat: "Beleza", img: "/__l5e/assets-v1/c893a134-4c2b-4282-8ccb-d24da424ea07/gloss-espalhe-gardenias.jpg" },
    { t: "Batom Coragem", d: "Cor marcante inspirada na força feminina. Textura confortável e longa duração.", cat: "Beleza", img: "/__l5e/assets-v1/7ae2ff65-cbb6-453a-92ff-8dfc6170b3d4/batom-coragem.jpg" },
    { t: "Broche Gardênia", d: "Peça artesanal em metal e resina, símbolo do movimento. Presente afetivo e institucional.", cat: "Acessório", img: "/site/produtos/broche-1.jpg" },
    { t: "Broche Florescer", d: "Broche delicado para marcar presença com leveza em qualquer look.", cat: "Acessório", img: "/site/produtos/broche-2.jpg" },
    { t: "Broche Coragem", d: "Broche artesanal que traduz a força de recomeçar todos os dias.", cat: "Acessório", img: "/site/produtos/broche-3.jpg" },
    { t: "Anel Gardênia", d: "Anel com detalhe floral, acabamento artesanal e presença delicada.", cat: "Acessório", img: "/site/produtos/anel-1.jpg" },
    { t: "Brinco Encanto", d: "Brinco encantador, feito para quem gosta de brilhar com sutileza.", cat: "Acessório", img: "/site/produtos/brinco-encanto.jpg" },
    { t: "Brinco Florescer", d: "Brinco leve com inspiração floral, para usar do dia à noite.", cat: "Acessório", img: "/site/produtos/brinco-3.jpg" },
    { t: "Brinco Raiz", d: "Brinco de acabamento artesanal, homenagem às raízes que sustentam a história.", cat: "Acessório", img: "/site/produtos/brinco-4.jpg" },
    { t: "Brinco Coragem", d: "Brinco marcante para quem escolhe seguir em frente com atitude.", cat: "Acessório", img: "/site/produtos/brinco-5.jpg" },
    { t: "Brinco Sertão", d: "Brinco inspirado no sertão, com traço rústico e elegante.", cat: "Acessório", img: "/site/produtos/brinco-6.jpg" },
    { t: "Brinco Recomeço", d: "Brinco delicado que celebra cada novo começo.", cat: "Acessório", img: "/site/produtos/brinco-7.jpg" },
    { t: "Brinco Essência", d: "Brinco de design limpo, para compor com propósito.", cat: "Acessório", img: "/site/produtos/brinco-8.jpg" },
    { t: "Colar Florescer", d: "Colar com pingente floral, símbolo de renascimento e leveza.", cat: "Acessório", img: "/site/produtos/colar-florescer.jpg" },
    { t: "Colar Gardênia", d: "Colar com a gardênia como pingente — a marca do movimento no peito.", cat: "Acessório", img: "/site/produtos/colar-gardenia.jpg" },
    { t: "Lenço Gardênia", d: "Lenço em estampa exclusiva do movimento, versátil e cheio de personalidade.", cat: "Acessório", img: "/site/produtos/lenco-1.jpg" },
    { t: "Tênis Espalhe Gardênias", d: "Calçado com identidade do movimento, para caminhar espalhando gardênias.", cat: "Vestuário", img: "/site/produtos/calcado-1.jpg" },
    { t: "Jaqueta Coragem", d: "Jaqueta com bordado Coragem, peça statement do movimento.", cat: "Vestuário", img: "/site/produtos/jaqueta-coragem.jpg" },
    { t: "Jaqueta Essência", d: "Jaqueta Essência, para vestir quem você é sem pedir licença.", cat: "Vestuário", img: "/site/produtos/jaqueta-essencia.jpg" },
    { t: "Jaqueta Flor", d: "Jaqueta com aplicação floral, delicadeza e força na mesma peça.", cat: "Vestuário", img: "/site/produtos/jaqueta-flor.jpg" },
    { t: "Jaqueta Florescer", d: "Jaqueta Florescer, um convite a desabrochar em qualquer estação.", cat: "Vestuário", img: "/site/produtos/jaqueta-florescer.jpg" },
    { t: "Jaqueta Recomeço", d: "Jaqueta Recomeço, para quem transforma recomeços em história.", cat: "Vestuário", img: "/site/produtos/jaqueta-recomeco.jpg" },
    { t: "Bonequinha Gardênia", d: "Bonequinha colecionável feita à mão, celebrando raízes, memória e afeto.", cat: "Colecionável", img: null },
    { t: 'Livro "Gardênia"', d: "Uma história real de coragem, fé e superação. Autobiografia de Gardênia Cavalcanti.", cat: "Livro", img: "/site/capa-livro.png" },



  ];

  const categorias = ["Todos", ...Array.from(new Set(produtos.map((p) => p.cat))).sort()];
  const visiveis = filtro === "Todos" ? produtos : produtos.filter((p) => p.cat === filtro);

  return (
    <div style={{ background: "var(--cream)" }}>
      <PlainHero kicker="Loja Espalhe Gardênias" title="Peças que carregam propósito"
        intro="Uma vitrine curada com produtos que celebram a essência do movimento. Em breve, disponíveis para compra." />

      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(48px,7vw,80px) clamp(24px,5vw,40px)" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center", marginBottom: 36 }}>
          {categorias.map((cat) => {
            const ativo = filtro === cat;
            return (
              <button
                key={cat}
                onClick={() => setFiltro(cat)}
                style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 500,
                  fontSize: 11,
                  letterSpacing: ".14em",
                  textTransform: "uppercase",
                  padding: "10px 18px",
                  border: "1px solid " + (ativo ? "var(--vinho)" : "var(--border-faint)"),
                  background: ativo ? "var(--vinho)" : "transparent",
                  color: ativo ? "var(--pessego)" : "var(--fg1)",
                  cursor: "pointer",
                  transition: "background .25s, color .25s, border-color .25s, transform .25s",
                }}
                onMouseEnter={(e) => { if (!ativo) e.currentTarget.style.background = "var(--vinho-tint)"; }}
                onMouseLeave={(e) => { if (!ativo) e.currentTarget.style.background = "transparent"; }}
              >
                {cat}
              </button>
            );
          })}
        </div>

        <div className="eg-shop" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {visiveis.map((p) => (
            <article key={p.t} style={{ background: "var(--linen)", border: "1px solid var(--border-faint)", display: "flex", flexDirection: "column" }}>
              <div style={{ position: "relative", background: "var(--blush)", aspectRatio: "4 / 5",
                display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
                {p.img ? (
                  <img src={p.img} alt={p.t} style={{ maxWidth: "82%", maxHeight: "88%", objectFit: "contain" }} />
                ) : (
                  <Flower which={p.cat === "Beleza" ? 2 : 1} simple={false} size={180} opacity={.28} />
                )}
                <span style={{ position: "absolute", top: 14, left: 14, fontFamily: "var(--font-serif)",
                  fontSize: 10.5, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--vinho)",
                  background: "var(--cream)", padding: "5px 10px" }}>{p.cat}</span>
              </div>
              <div style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", flex: 1 }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 20, color: "var(--fg1)", margin: "0 0 10px" }}>{p.t}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.65, color: "var(--fg2)", margin: 0, flex: 1 }}>{p.d}</p>
                <div style={{ marginTop: 18, fontFamily: "var(--font-serif)", fontSize: 11.5, letterSpacing: ".18em",
                  textTransform: "uppercase", color: "var(--terracota)" }}>Em breve</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--vinho)", padding: "clamp(48px,7vw,72px) clamp(24px,5vw,40px)", textAlign: "center" }}>
        <Eyebrow color="#d08a63">Vitrine em preparação</Eyebrow>
        <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(20px,2.6vw,26px)",
          color: "var(--pessego)", margin: "16px auto 26px", maxWidth: 620 }}>
          Cadastre seu e-mail para ser avisada quando a loja abrir as vendas.
        </p>
        <Button variant="outlineLight" onClick={() => setPopup(true)}>Quero ser avisada</Button>
      </section>

      {popup && <NewsletterModal onClose={() => setPopup(false)} />}
    </div>
  );
}

// ---------------------------------------------------------------- Pop-up newsletter
function NewsletterModal({ onClose }) {
  const [email, setEmail] = React.useState("");
  const [nome, setNome] = React.useState("");
  const [erro, setErro] = React.useState("");
  const [ok, setOk] = React.useState(false);

  React.useEffect(() => {
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", esc);
    return () => document.removeEventListener("keydown", esc);
  }, [onClose]);

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim())) {
      setErro("Digite um e-mail válido.");
      return;
    }
    setErro("");
    try {
      const key = "eg-newsletter-loja";
      const list = JSON.parse(localStorage.getItem(key) || "[]");
      list.push({ nome: nome.trim(), email: email.trim().toLowerCase(), data: new Date().toISOString() });
      localStorage.setItem(key, JSON.stringify(list));
    } catch (_) { /* ignora */ }
    setOk(true);
  };

  const input = {
    width: "100%", padding: "14px 16px", border: "1px solid var(--border)",
    background: "var(--cream)", color: "var(--fg1)", borderRadius: 0,
    fontFamily: "var(--font-body)", fontSize: 14, outline: "none", boxSizing: "border-box",
  };

  return (
    <div onClick={onClose} role="dialog" aria-modal="true" aria-label="Receber aviso de lançamento"
      style={{ position: "fixed", inset: 0, zIndex: 300, background: "rgba(44,20,20,.62)",
        backdropFilter: "blur(3px)", display: "flex", alignItems: "center", justifyContent: "center",
        padding: "24px", overflowY: "auto" }}>
      <div onClick={(e) => e.stopPropagation()}
        style={{ position: "relative", background: "var(--linen)", border: "1px solid var(--border-faint)",
          maxWidth: 480, width: "100%", padding: "clamp(28px,5vw,44px)", textAlign: "center",
          boxShadow: "0 32px 70px -30px rgba(76,29,29,.55)" }}>
        <button onClick={onClose} aria-label="Fechar"
          style={{ position: "absolute", top: 12, right: 12, background: "none", border: "none",
            cursor: "pointer", padding: 6, lineHeight: 0 }}>
          <Icon name="x" size={20} color="var(--vinho)" />
        </button>

        <div style={{ display: "flex", justifyContent: "center", marginBottom: 10 }}>
          <Flower which={2} simple={false} size={72} opacity={.5} style={{ objectFit: "contain" }} />
        </div>

        {ok ? (
          <React.Fragment>
            <Eyebrow>Inscrição confirmada</Eyebrow>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(22px,3vw,28px)",
              color: "var(--vinho)", margin: "14px 0 12px" }}>Obrigada por florescer com a gente</h3>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.7, color: "var(--fg2)", margin: "0 0 24px" }}>
              Assim que a loja abrir as vendas, você será uma das primeiras a saber.
            </p>
            <Button variant="primary" full onClick={onClose}>Fechar</Button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <Eyebrow>Loja em breve</Eyebrow>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(22px,3vw,28px)",
              color: "var(--vinho)", margin: "14px 0 10px" }}>Receba o aviso de lançamento</h3>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.7, color: "var(--fg2)", margin: "0 0 22px" }}>
              Cadastre seu e-mail e avisamos você quando os produtos estiverem disponíveis para compra.
            </p>
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 12, textAlign: "left" }}>
              <input style={input} type="text" placeholder="Seu nome (opcional)" value={nome}
                onChange={(e) => setNome(e.target.value)} />
              <input style={input} type="email" placeholder="Seu melhor e-mail" value={email}
                onChange={(e) => setEmail(e.target.value)} required />
              {erro && <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--terracota)" }}>{erro}</span>}
              <Button variant="primary" full>Quero ser avisada</Button>
            </form>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 11.5, lineHeight: 1.6, color: "var(--fg2)", margin: "16px 0 0", opacity: .8 }}>
              Enviamos apenas avisos de disponibilidade ou novidades. Sem spam.
            </p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LojaScreen, NewsletterModal });

