// sections-bottom.jsx — Depoimentos · Instagram · FAQ · CTA · Footer
const { useState: useStateB } = React;

/* ---------------- DEPOIMENTOS ---------------- */
const TESTIMONIALS = [
  { q: "O bolo do nosso casamento foi um espetáculo à parte — o melhor que já provamos, e todos os convidados comentaram.", n: "Marina & Rafael", r: "Casamento · Goiânia" },
  { q: "Profissionalismo do início ao fim. O coffee break impressionou nossos clientes e elevou o nível do evento corporativo.", n: "Camila Drummond", r: "Evento corporativo" },
  { q: "Atendimento que faz a diferença. O design do bolo superou tudo que eu tinha imaginado para os 5 anos da minha filha.", n: "Carolina Sá", r: "Festa infantil" },
];

function Depoimentos() {
  return (
    <section className="section container" id="depoimentos">
      <SecHead eyebrow="Quem provou, amou" title={<React.Fragment>A confiança de<br />quem celebrou</React.Fragment>} lead="Histórias reais de clientes que confiaram seus momentos especiais à Butter Cream." />
      <div className="test-grid">
        {TESTIMONIALS.map((t, i) => (
          <figure className={`test reveal d${i}`} key={t.n}>
            <div className="stars">{[0,1,2,3,4].map((s) => <Icon.star key={s} />)}</div>
            <blockquote>“{t.q}”</blockquote>
            <figcaption className="who">
              <div className="av"><Ph label="" icon={false} /></div>
              <div><div className="n">{t.n}</div><div className="r">{t.r}</div></div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

/* ---------------- INSTAGRAM ---------------- */
const IG = [
  { img: "public/instagram1.jpg", label: "Post 1" },
  { img: "public/instagram2.jpg", label: "Post 2" },
  { img: "public/instagram3.jpg", label: "Post 3" },
  { img: "public/instagram4.jpg", label: "Post 4" },
];

function Instagram() {
  return (
    <section className="section tight container">
      <div className="ig-head reveal">
        <div>
          <p className="eyebrow">Siga nossa doçaria</p>
          <h3>@buttercream.doces</h3>
        </div>
        <a className="link-arrow" href="https://www.instagram.com/buttercreamdoces/" target="_blank" rel="noreferrer">Ver no Instagram <Icon.arrow /></a>
      </div>
      <div className="ig-grid reveal d1">
        {IG.map((p) => (
          <a className="ig-item" key={p.img} href="https://www.instagram.com/buttercreamdoces/" target="_blank" rel="noreferrer">
            <img src={p.img} alt={p.label} className="hero-img" />
            <div className="ig-ov"><Icon.ig style={{ width: 26, height: 26 }} /></div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
const FAQS = [
  { q: "Com quanto tempo de antecedência devo encomendar?", a: "Para bolos de casamento e eventos maiores, recomendamos de 30 a 60 dias. Festas e bolos menores, com pelo menos 10 dias. Datas muito concorridas (dezembro, maio) costumam fechar antes." },
  { q: "Como funciona a degustação?", a: "Após o primeiro contato, agendamos uma degustação presencial ou enviamos um kit. Você experimenta nossas combinações de massas, recheios e coberturas antes de fechar o pedido." },
  { q: "Vocês entregam e montam no local?", a: "Sim. Fazemos a entrega refrigerada e a montagem final no local do evento, no horário combinado, para que tudo chegue impecável." },
  { q: "Atendem restrições alimentares?", a: "Trabalhamos com opções sem glúten, sem lactose e com baixo açúcar mediante consulta. Conte para nós no briefing e adaptamos a receita sem abrir mão do sabor." },
  { q: "Qual a região de atendimento?", a: "Atendemos Goiânia e região metropolitana. Para outras cidades, consulte — avaliamos a logística caso a caso." },
];

function FaqItem({ item, open, onToggle }) {
  const ref = React.useRef(null);
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        {item.q}
        <span className="faq-ic" />
      </button>
      <div className="faq-a" style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + 8 : 300) : 0 }}>
        <div className="faq-a-inner" ref={ref}>{item.a}</div>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section container" id="faq">
      <SecHead eyebrow="Dúvidas frequentes" title={<React.Fragment>Tudo que você<br />precisa saber</React.Fragment>} />
      <div className="faq-wrap reveal">
        {FAQS.map((f, i) => (
          <FaqItem key={f.q} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 44 }} className="reveal">
        <p className="lead" style={{ marginBottom: 20 }}>Ainda com dúvidas? Fale direto com a gente.</p>
        <WaButton msg="Olá! Tenho uma dúvida sobre encomendas.">Conversar no WhatsApp</WaButton>
      </div>
    </section>
  );
}

/* ---------------- CTA FINAL ---------------- */
function CtaFinal() {
  return (
    <section className="section cta-final">
      <div className="glow a" /><div className="glow b" />
      <div className="container inner">
        <p className="eyebrow center" style={{ color: "var(--gold)" }}>Vamos adoçar seu evento</p>
        <h2 className="display reveal" style={{ marginTop: 18 }}>Pronta para tornar seu<br />momento inesquecível?</h2>
        <p className="lead reveal d1">Nossas vagas mensais são limitadas para garantir exclusividade e qualidade artesanal. Garanta a sua data.</p>
        <div className="hero-actions reveal d2">
          <WaButton msg="Olá Butter Cream! Quero garantir minha data e solicitar um orçamento." size="btn-lg">Solicitar orçamento no WhatsApp</WaButton>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="foot-top">
          <div className="foot-about">
            <a className="logo" href="#top"><img src="public/logo.png" alt="Butter Cream Doces" className="logo-img logo-img-footer" /></a>
            <p>Confeitaria artesanal de alto padrão em Goiânia. Elevamos a arte da confeitaria de luxo para que suas celebrações mereçam.</p>
          </div>
          <div className="foot-col">
            <h5>Navegação</h5>
            <a href="#portfolio">Portfólio</a>
            <a href="#processo">Processo</a>
            <a href="#depoimentos">Depoimentos</a>
            <a href="#faq">Dúvidas</a>
          </div>
          <div className="foot-col">
            <h5>Ocasiões</h5>
            <a href="#portfolio">Casamentos</a>
            <a href="#portfolio">Festas infantis</a>
            <a href="#portfolio">Corporativo</a>
            <a href="#portfolio">Bem-casados</a>
          </div>
          <div className="foot-col foot-contact">
            <h5>Contato</h5>
            <div className="line"><Icon.whatsapp className="ic" /> +55 62 99419-8503</div>
            <div className="line"><Icon.mail className="ic" /> contato@buttercream.com.br</div>
            <div className="line"><Icon.pin className="ic" /> Goiânia · GO</div>
            <a className="link-arrow" style={{ marginTop: 8, color: "var(--gold)" }} href={waLink()} target="_blank" rel="noreferrer">Solicitar orçamento <Icon.arrow /></a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Butter Cream Doces · Confeitaria artesanal. Todos os direitos reservados.</span>
          <div className="foot-social">
            <a href="https://www.instagram.com/buttercreamdoces/" target="_blank" rel="noreferrer" aria-label="Instagram"><Icon.ig /></a>
            <a href={waLink()} target="_blank" rel="noreferrer" aria-label="WhatsApp"><Icon.whatsapp /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Depoimentos, Instagram, Faq, CtaFinal, Footer });