/* Sections — Hero, Story, Day, Details, Gifts, RSVP, Travel, FAQ, Footer */

const { useState, useEffect, useMemo, useRef } = React;

/* ---------- COUNTDOWN HOOK ---------- */
function useCountdown(target) {
  const [c, setC] = useState(() => calc(target));
  function calc(t) {
    const diff = t.getTime() - Date.now();
    if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    return {
      days: Math.floor(diff / 86400000),
      hours: Math.floor(diff % 86400000 / 3600000),
      minutes: Math.floor(diff % 3600000 / 60000),
      seconds: Math.floor(diff % 60000 / 1000)
    };
  }
  useEffect(() => {
    const id = setInterval(() => setC(calc(target)), 1000);
    return () => clearInterval(id);
  }, [target]);
  return c;
}

/* ---------- HERO ---------- */
function Hero({ couple, date, place, dateText, dateISO }) {
  const target = useMemo(() => new Date(dateISO), [dateISO]);
  const cd = useCountdown(target);

  return (
    <section id="inicio" className="hero">
      {/* Floating decorations */}
      <div className="deco tl float">
        <Dragonfly size={92} color="#5A8FA0" />
      </div>
      <div className="deco tr float d2">
        <Lotus size={94} color="#9BBDC8" />
      </div>
      <div className="deco ml float flip d4">
        <Lotus size={78} color="#9BBDC8" />
      </div>
      <div className="deco mr float d6">
        <Dragonfly size={72} color="#9BBDC8" flip />
      </div>
      <div className="deco bl float flip d2">
        <Lotus size={88} color="#5A8FA0" />
      </div>
      <div className="deco br float d4">
        <Dragonfly size={86} color="#5A8FA0" flip />
      </div>

      <div className="hero-frame">
        <span className="eyebrow">Save&nbsp;the&nbsp;Date</span>

        <div className="names-stack">
          <h1>{couple.first}</h1>
          <span className="amp">&amp;</span>
          <h1>{couple.second}</h1>
        </div>

        <div className="date">{date}</div>
        <div className="date-rule" />

        <div className="meta">
          <div className="meta-block">
            <span className="caps">Quando</span>
            <span className="val">{dateText}</span>
          </div>
          <span className="meta-sep" />
          <div className="meta-block">
            <span className="caps">Onde</span>
            <span className="val">{place}</span>
          </div>
        </div>

        <p className="note">mais detalhes nas próximas seções abaixo</p>

        {/* Countdown chips inside frame */}
        <div className="countdown">
          {[
          { v: cd.days, l: "dias" },
          { v: cd.hours, l: "horas" },
          { v: cd.minutes, l: "min" },
          { v: cd.seconds, l: "seg" }].
          map(({ v, l }) =>
          <div className="chip" key={l}>
              <div className="num">{String(v).padStart(2, "0")}</div>
              <div className="lbl">{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- STORY ---------- */
function Story({ couple }) {
  const s = window.STORY || {};
  return (
    <section id="historia" className="section-pad bg-base">
      <div className="section-inner">
        <Separator />
        <div className="section-eyebrow caps">Nossa História</div>
        <h2 className="section-title">{s.title || "Como tudo começou"}</h2>
        <p className="section-sub">
          {s.lede || ""}
        </p>

        <div className="story-grid">
          <div
            className="story-photo"
            data-has-photo={s.photoUrl ? "true" : "false"}>
            
            {s.photoUrl ?
            <img src={s.photoUrl} alt="Casal" className="photo-img" /> :
            <div className="photo-label">{s.photoLabel || "FOTO · 4:5"}</div>
            }
            <div className="photo-frame" />
          </div>
          <div className="story-copy">
            {(s.paragraphs || []).map((p, i) =>
            <p key={i} className={i === 0 ? "lede" : ""}>{p}</p>
            )}
            {s.signature && <p className="sig">— {s.signature}</p>}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- O DIA (Timeline) ---------- */
const SCHEDULE = [
{ time: "11h50", title: "Chegada ao local", note: "Sintam-se em casa", side: "right" },
{ time: "12h00", title: "Abertura do restaurante", note: "Servimos as entradas", side: "left" },
{ time: "12h30", title: "Cerimônia", note: "Assinatura dos papéis", side: "right" },
{ time: "13h00", title: "Almoço & bebidas", note: "À vontade — almoço e bar liberados", side: "left" },
{ time: "16h00", title: "Cortamos o bolo", note: "Café, doces e fotos com vocês", side: "right" },
{ time: "17h00", title: "Encerramento", note: "Despedidas e lembrancinhas na saída", side: "left" }];


function DaySchedule() {
  return (
    <section id="o-dia" className="section-pad bg-alt">
      <div className="section-inner">
        <div className="section-eyebrow caps">O Dia</div>
        <h2 className="section-title">Programação</h2>
        <p className="section-sub">
          Reservamos o restaurante para vocês — fiquem o quanto puderem.
        </p>

        <div className="timeline">
          {SCHEDULE.map((s, i) =>
          <div key={i} className={"step " + s.side}>
              <div className="time">{s.time}</div>
              <div className="dot" />
              <div className="body">
                <h4>{s.title}</h4>
                <p>{s.note}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- DETAILS ---------- */
function IconCalendar() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3">
      <rect x="3" y="5" width="18" height="16" rx="1" />
      <path d="M3 9h18M8 3v4M16 3v4" />
    </svg>);

}
function IconPin() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M12 21s-7-7.2-7-12a7 7 0 1 1 14 0c0 4.8-7 12-7 12z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>);

}
function IconShirt() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M4 7l4-3 4 2 4-2 4 3-2 4-2-1v11H8V11L6 12 4 7z" />
    </svg>);

}

function Details({ place, dateText }) {
  return (
    <section id="detalhes" className="section-pad bg-base">
      <div className="section-inner">
        <Separator />
        <div className="section-eyebrow caps">Detalhes</div>
        <h2 className="section-title">O essencial</h2>
        <p className="section-sub">
          Três coisas para guardar no calendário, no celular e no coração.
        </p>

        <div className="cards">
          <div className="card">
            <span className="ic"><IconCalendar /></span>
            <h3>Quando</h3>
            <p>{dateText}</p>
            <p className="small">Cerimônia às 12h00</p>
            <a className="link" href="#" onClick={(e) => {e.preventDefault();downloadICS();}}>
              Adicionar ao calendário
            </a>
          </div>

          <div className="card">
            <span className="ic"><IconPin /></span>
            <h3>Onde</h3>
            <p>Brera Wine Bar &amp; Bistro</p>
            <p className="small">R. Cel. Alfredo A. do Nascimento, 107</p>
            <p className="small">{place} · 13106-000</p>
            <a className="link" href="https://maps.google.com/?q=Brera+Wine+Bar+Sousas+Campinas" target="_blank" rel="noopener">
              Ver no mapa
            </a>
          </div>

          <div className="card">
            <span className="ic"><IconShirt /></span>
            <h3>Traje</h3>
            <p>Esporte fino</p>
            <p className="small" style={{ fontStyle: "italic", marginTop: 8, color: "var(--color-ink-soft)" }}>
              Sugestão: tons de azul, verde-musgo, areia
            </p>
            <p className="small" style={{ marginTop: 10, color: "var(--color-sky-deep)", letterSpacing: "0.04em" }}>
              Branco é só para a noiva — qualquer tom barra a entrada.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function downloadICS() {
  const ics = [
  "BEGIN:VCALENDAR",
  "VERSION:2.0",
  "PRODID:-//Wedding//EN",
  "BEGIN:VEVENT",
  "UID:pipa-eduardo-2026@wedding",
  "DTSTAMP:20260101T000000Z",
  "DTSTART:20260808T143000Z",
  "DTEND:20260808T220000Z",
  "SUMMARY:Casamento Pipa & Eduardo",
  "LOCATION:Brera Wine Bar & Bistro, Sousas, Campinas - SP",
  "DESCRIPTION:Sábado, 8 de agosto de 2026 — 11h30. Esporte fino.",
  "END:VEVENT",
  "END:VCALENDAR"].
  join("\r\n");
  const blob = new Blob([ics], { type: "text/calendar" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;a.download = "pipa-eduardo-2026.ics";
  a.click();
  URL.revokeObjectURL(url);
}

/* ---------- GIFTS ---------- */
function Gifts() {
  const list = window.GIFTS || [];
  return (
    <section id="presentes" className="section-pad bg-alt">
      <div className="section-inner">
        <div className="section-eyebrow caps">Lista de Presentes</div>
        <h2 className="section-title">Presentear, se quiser</h2>
        <p className="section-sub">
          A presença de vocês já é o maior presente. Mas se quiserem ajudar
          a montar a casa nova, escolhemos algumas coisas com carinho.
        </p>

        <div className="gifts">
          {list.map((g, i) =>
          <GiftCard key={i} g={g} />
          )}
        </div>
      </div>
    </section>);

}

function GiftCard({ g }) {
  const [pixOpen, setPixOpen] = useState(false);
  const [cartaoOpen, setCartaoOpen] = useState(false);
  const pct = Math.min(100, g.raised / g.price * 100);
  const fmt = (n) => "R$ " + n.toLocaleString("pt-BR") + ",00";
  return (
    <>
      <div className="gift">
        {g.done && <span className="badge">✓ Concluído</span>}
        <div className="ph">
          {g.imageUrl ?
          <img src={g.imageUrl} alt={g.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> :
          "FOTO · 4:3"}
        </div>
        <div className="body">
          <h4>{g.name}</h4>
          <p className="desc">{g.desc}</p>
          <p className="price">{fmt(g.price)}</p>

          <div className="bar"><div className="fill" style={{ width: pct + "%" }} /></div>
          <div className="progress-meta">
            {g.done ?
            "presenteado com carinho" :
            `${fmt(g.raised)} de ${fmt(g.price)} — ${Math.round(pct)}%`}
          </div>

          {!g.done &&
          <div className="cta">
              <button className="btn" onClick={() => setPixOpen(true)}>Pix</button>
              <button className="btn ghost" onClick={() => setCartaoOpen(true)}>
                Cartão · Valor total
              </button>
            </div>
          }
        </div>
      </div>

      {!g.done &&
      <>
          <PixDialog open={pixOpen} onClose={() => setPixOpen(false)} gift={g} />
          <CartaoDialog open={cartaoOpen} onClose={() => setCartaoOpen(false)} gift={g} />
        </>
      }
    </>);

}

/* ---------- RSVP ---------- */
function RSVP() {
  const [step, setStep] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");
  const [form, setForm] = useState({
    name: "", email: "", attending: null,
    diet: "nenhuma", allergyDetail: "",
    drink: "vinho",
    message: ""
  });

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || form.attending === null) return;
    setErrorMsg("");

    const payload = {
      ...form,
      submittedAt: new Date().toISOString()
    };

    const cfg = window.RSVP_CONFIG || {};

    // If no endpoint is configured, just show the success screen.
    // (See RSVP_BACKEND.md for how to wire Supabase / Formspree.)
    if (!cfg.endpoint) {
      console.log("RSVP (no backend configured):", payload);
      setStep(1);
      return;
    }

    setSubmitting(true);
    try {
      const headers = { "Content-Type": "application/json", ...(cfg.headers || {}) };
      const body = cfg.transform ? cfg.transform(payload) : JSON.stringify(payload);
      const res = await fetch(cfg.endpoint, { method: "POST", headers, body });
      if (!res.ok) throw new Error("HTTP " + res.status);
      setStep(1);
    } catch (err) {
      console.error("RSVP submit failed:", err);
      setErrorMsg(
        "Não conseguimos registrar agora. Tente de novo, ou mande mensagem no WhatsApp."
      );
    } finally {
      setSubmitting(false);
    }
  };

  if (step === 1) {
    return (
      <section id="rsvp" className="section-pad bg-base">
        <div className="section-inner">
          <div className="section-eyebrow caps">Confirme Presença</div>
          <div className="rsvp-wrap rsvp-success">
            <div className="check">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M5 12l5 5L20 7" />
              </svg>
            </div>
            <h4>{form.attending === "yes" ? "Estaremos te esperando!" : "Vamos sentir sua falta"}</h4>
            <p>
              {form.attending === "yes" ?
              "Sua confirmação chegou — em breve mandamos mais detalhes." :
              "Obrigado por nos avisar. Te queremos por perto de outras formas."}
            </p>
            <button
              type="button"
              className="btn ghost"
              style={{ marginTop: 28, maxWidth: 200, marginLeft: "auto", marginRight: "auto" }}
              onClick={() => setStep(0)}>
              
              Confirmar outra pessoa
            </button>
          </div>
        </div>
      </section>);

  }

  return (
    <section id="rsvp" className="section-pad bg-base">
      <div className="section-inner">
        <Separator />
        <div className="section-eyebrow caps">Confirme Presença</div>
        <h2 className="section-title">RSVP</h2>
        <p className="section-sub">
          Pedimos a gentileza de confirmar até <em style={{ fontSize: "6px", fontWeight: "900" }}>30 de junho de 2026</em>.
          Cada confirmação ajuda a gente a planejar o dia.
        </p>

        <form className="rsvp-wrap" onSubmit={submit}>
          <div className="form-row" style={{ marginBottom: 28 }}>
            <div className="field">
              <label>Você vem?</label>
              <div className="choice-group">
                {[
                { id: "yes", label: "Sim, com alegria", sub: "Conto presença" },
                { id: "no", label: "Infelizmente não", sub: "Não vou poder ir" }].
                map((opt) =>
                <div
                  key={opt.id}
                  className={"choice " + (form.attending === opt.id ? "sel" : "")}
                  onClick={() => setForm((f) => ({ ...f, attending: opt.id }))}>
                  
                    <span className="dot" />
                    <div>
                      <div className="label">{opt.label}</div>
                      <div className="sub">{opt.sub}</div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="form-row two" style={{ marginBottom: 22 }}>
            <div className="field">
              <label>Nome completo</label>
              <input
                required
                value={form.name}
                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                placeholder="Como devemos te chamar" />
              
            </div>
            <div className="field">
              <label>E-mail</label>
              <input
                type="email" required
                value={form.email}
                onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
                placeholder="seu@email.com" />
              
            </div>
          </div>

          {form.attending === "yes" &&
          <>
              <div className="form-row" style={{ marginBottom: 22 }}>
                <div className="field">
                  <label>Restrição alimentar</label>
                  <div className="choice-group three">
                    {[
                  { id: "nenhuma", label: "Nenhuma" },
                  { id: "veg", label: "Vegetariana" },
                  { id: "alergia", label: "Alergia" }].
                  map((opt) =>
                  <div
                    key={opt.id}
                    className={"choice " + (form.diet === opt.id ? "sel" : "")}
                    onClick={() => setForm((f) => ({ ...f, diet: opt.id }))}>
                    
                        <span className="dot" />
                        <div className="label">{opt.label}</div>
                      </div>
                  )}
                  </div>
                </div>
              </div>

              {form.diet === "alergia" &&
            <div className="form-row" style={{ marginBottom: 22 }}>
                <div className="field">
                  <label>Qual alergia?</label>
                  <input
                  type="text"
                  value={form.allergyDetail}
                  onChange={(e) => setForm((f) => ({ ...f, allergyDetail: e.target.value }))}
                  placeholder="Ex: amendoim, lactose, frutos do mar…" />
                </div>
              </div>
            }

              <div className="form-row" style={{ marginBottom: 22 }}>
                <div className="field">
                  <label>Bebida preferida</label>
                  <div className="choice-group three">
                    {[
                  { id: "vinho", label: "Vinho" },
                  { id: "cerveja", label: "Cerveja" },
                  { id: "sem-alcool", label: "Sem álcool" }].
                  map((opt) =>
                  <div
                    key={opt.id}
                    className={"choice " + (form.drink === opt.id ? "sel" : "")}
                    onClick={() => setForm((f) => ({ ...f, drink: opt.id }))}>

                        <span className="dot" />
                        <div className="label">{opt.label}</div>
                      </div>
                  )}
                  </div>
                </div>
              </div>
            </>
          }

          <div className="form-row">
            <div className="field">
              <label>Recado para os noivos {form.attending === "no" && "(opcional)"}</label>
              <textarea
                value={form.message}
                onChange={(e) => setForm((f) => ({ ...f, message: e.target.value }))}
                placeholder="Uma palavra, uma lembrança, um pedido de música…" />
              
            </div>
          </div>

          <button
            type="submit"
            className="btn"
            style={{ width: "100%", height: 48, marginTop: 30 }}
            disabled={submitting}>
            
            {submitting ? "Enviando…" : "Enviar confirmação"}
          </button>

          {errorMsg &&
          <p style={{ marginTop: 14, fontSize: 13, color: "#b4541c", textAlign: "center" }}>
            {errorMsg}
          </p>
          }
        </form>
      </div>
    </section>);

}

/* ---------- TRAVEL ---------- */
const TRAVEL = [
{ type: "hotel", name: "Royal Palm Plaza Resort", note: "Resort completo · Café da manhã incluso", dist: "2.6 km" },
{ type: "hotel", name: "Vitória Hotel Concept", note: "Boutique no centro de Campinas", dist: "8.4 km" },
{ type: "park", name: "Estacionamento no local", note: "Vagas gratuitas para convidados", dist: "no local" },
{ type: "uber", name: "Aplicativo recomendado", note: "Cobertura completa na região", dist: "≈ R$ 35" }];


function IconHotel() {return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3 21V8h18v13M3 13h18M7 17h2M11 17h2M15 17h2M9 5h6v3H9z" /></svg>;}
function IconPark() {return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3"><rect x="3" y="3" width="18" height="18" rx="1" /><path d="M10 17V8h3.5a2.5 2.5 0 0 1 0 5H10" /></svg>;}
function IconCar() {return <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3 13l2-6h14l2 6v6h-2v-2H5v2H3z" /><circle cx="7" cy="16" r="1.4" /><circle cx="17" cy="16" r="1.4" /></svg>;}
function iconFor(t) {return t === "hotel" ? <IconHotel /> : t === "park" ? <IconPark /> : <IconCar />;}

function Travel() {
  return (
    <section id="como-chegar" className="section-pad bg-alt">
      <div className="section-inner">
        <div className="section-eyebrow caps">Como Chegar</div>
        <h2 className="section-title">Hospedagem &amp; transporte</h2>
        <p className="section-sub">
          Sousas fica a 20 minutos do centro de Campinas. Para quem vem de longe,
          separamos algumas sugestões.
        </p>

        <div className="travel-grid">
          <div className="map-frame">
            <svg className="map-svg" viewBox="0 0 400 300" preserveAspectRatio="none">
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(90,143,160,0.10)" strokeWidth="0.5" />
                </pattern>
                <linearGradient id="riverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="rgba(90,143,160,0.18)" />
                  <stop offset="100%" stopColor="rgba(90,143,160,0.30)" />
                </linearGradient>
              </defs>

              {/* Subtle block grid */}
              <rect width="400" height="300" fill="url(#grid)" />

              {/* Atibaia River — wide diagonal band on the left */}
              <path
                d="M 55 -5 L 90 -5 L 70 90 L 50 175 L 30 240 L 5 305 L -5 305 L -5 200 L 10 130 L 25 60 Z"
                fill="url(#riverGrad)"
                stroke="rgba(90,143,160,0.55)"
                strokeWidth="0.8" />

              {/* Ribeirão das Cabras — thin curvy stream entering top-right */}
              <path
                d="M 405 80 C 340 60, 280 110, 220 78 S 130 60, 75 100"
                fill="none"
                stroke="rgba(90,143,160,0.55)"
                strokeWidth="1.4" />
              <path
                d="M 405 80 C 340 60, 280 110, 220 78 S 130 60, 75 100"
                fill="none"
                stroke="rgba(90,143,160,0.2)"
                strokeWidth="4" />

              {/* Praça Beira Rio — small green park west of Brera */}
              <ellipse cx="125" cy="180" rx="34" ry="14"
              fill="rgba(138,158,140,0.18)"
              stroke="rgba(138,158,140,0.45)"
              strokeWidth="0.8" />

              {/* Main horizontal street (R. Cel. Alfredo A. do Nascimento) — passes through Brera */}
              <path d="M 50 162 C 140 156, 240 160, 400 168"
              stroke="rgba(120,135,148,0.35)" strokeWidth="9" fill="none" strokeLinecap="round" />
              <path d="M 50 162 C 140 156, 240 160, 400 168"
              stroke="rgba(255,255,255,0.55)" strokeWidth="6" fill="none" strokeLinecap="round" />

              {/* Secondary horizontal street further south */}
              <path d="M 70 235 C 160 230, 260 232, 400 238"
              stroke="rgba(120,135,148,0.28)" strokeWidth="5" fill="none" strokeLinecap="round" />

              {/* Cross streets running roughly north-south */}
              <path d="M 175 -5 C 180 80, 168 160, 178 305"
              stroke="rgba(120,135,148,0.28)" strokeWidth="5" fill="none" strokeLinecap="round" />
              <path d="M 268 -5 C 262 90, 274 180, 270 305"
              stroke="rgba(120,135,148,0.28)" strokeWidth="5" fill="none" strokeLinecap="round" />
              <path d="M 360 -5 L 358 305"
              stroke="rgba(120,135,148,0.24)" strokeWidth="4" fill="none" strokeLinecap="round" />

              {/* A few subtle building blocks for texture */}
              <g fill="rgba(255,235,200,0.18)" stroke="rgba(120,135,148,0.18)" strokeWidth="0.5">
                <rect x="195" y="125" width="32" height="22" rx="1" />
                <rect x="235" y="125" width="20" height="22" rx="1" />
                <rect x="195" y="175" width="22" height="18" rx="1" />
                <rect x="225" y="175" width="30" height="18" rx="1" />
                <rect x="100" y="125" width="40" height="22" rx="1" />
                <rect x="290" y="125" width="44" height="22" rx="1" />
                <rect x="290" y="175" width="44" height="20" rx="1" />
                <rect x="290" y="200" width="44" height="20" rx="1" />
              </g>
            </svg>
            <span className="pin" />
            <span className="pin-label">Brera</span>
          </div>

          <div className="travel-list">
            {TRAVEL.map((t, i) =>
            <div className="travel-item" key={i}>
                <div className="ic">{iconFor(t.type)}</div>
                <div>
                  <h4>{t.name}</h4>
                  <p>{t.note}</p>
                </div>
                <div className="dist">{t.dist}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
const FAQS = [
{
  q: "Posso levar acompanhante?",
  a: "O convite leva o nome dos convidados — fica como está. Se houver alguma dúvida ou exceção, fale com a gente direto pelo WhatsApp e a gente combina."
},
{
  q: "Crianças são bem-vindas?",
  a: "As crianças convidadas são muito bem-vindas — estão na lista do convite. Para qualquer dúvida ou caso especial, fale com a gente."
},
{
  q: "Quanto custa um Uber até o local?",
  a: "Do centro de Campinas, cerca de R$ 30–40. Do aeroporto de Viracopos, cerca de R$ 100. A região tem cobertura completa."
},
{
  q: "Tem estacionamento?",
  a: "Sim, na região há estacionamentos próximos e vagas na rua. Como o local é um restaurante, não há manobrista; sugerimos chegar com um pouco de antecedência ou vir de aplicativo."
},
{
  q: "E se eu não puder ir?",
  a: "Vamos sentir sua falta, mas entendemos completamente. Confirme pelo formulário acima — assim a gente sabe e pode te abraçar de outras formas."
},
{
  q: "Posso fotografar a cerimônia?",
  a: "Pedimos para guardar o celular durante a cerimônia. Teremos fotógrafo e as fotos serão compartilhadas depois. Na festa, à vontade!"
}];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section-pad bg-base">
      <div className="section-inner">
        <Separator />
        <div className="section-eyebrow caps">Perguntas Frequentes</div>
        <h2 className="section-title">Antes que você pergunte</h2>
        <p className="section-sub">Se ainda restar dúvida, mande mensagem — a gente responde rápido.</p>

        <div className="faq">
          {FAQS.map((f, i) =>
          <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus" />
              </button>
              <div className="ans">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer({ couple, date, place }) {
  return (
    <footer className="footer">
      <div className="corner l">
        <Dragonfly size={80} color="#B8D9E3" />
      </div>
      <div className="corner r">
        <Lotus size={80} color="#B8D9E3" />
      </div>
      <p className="names">{couple.first} &amp; {couple.second}</p>
      <p className="sub">com vocês, o dia inteiro</p>
      <div className="rule" />
      <p className="meta">{date} · {place}</p>
    </footer>);

}

Object.assign(window, { Hero, Story, DaySchedule, Details, Gifts, RSVP, Travel, FAQ, Footer });