/* global React, ReactDOM, HeroWatercolor, LeafFlourish, COPY, WEDDING_DATE,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */

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

// ── Editable tweak defaults ───────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sage",
  "script": "vibes",
  "showWatercolor": true,
  "showCountdown": true
}/*EDITMODE-END*/;

// ── Tiny hooks ───────────────────────────────────────────────────────
function useCountdown(target) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now.getTime());
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { d, h, m, s };
}

// ── Navigation ───────────────────────────────────────────────────────
function Nav({ lang, setLang, copy }) {
  return (
    <nav className="nav">
      <div className="nav-logo">D &amp; M</div>
      <div className="nav-links">
        <a href="#schedule">{copy.nav.schedule}</a>
        <a href="#venue">{copy.nav.venue}</a>
        <a href="#travel">{copy.nav.travel}</a>
        <a href="#dress">{copy.nav.dress || "Dress"}</a>
        <a href="#rsvp">{copy.nav.rsvp}</a>
        <a href="#faq">{copy.nav.faq}</a>
      </div>
      <div className="nav-lang">
        <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        <button className={lang === "pt" ? "active" : ""} onClick={() => setLang("pt")}>PT</button>
      </div>
    </nav>
  );
}

// ── Hero ─────────────────────────────────────────────────────────────
function Hero({ copy, showWatercolor }) {
  return (
    <header className="hero">
      {showWatercolor && <HeroWatercolor />}
      <div className="hero-inner">
        <div className="hero-eyebrow"><span>{copy.hero.eyebrow}</span></div>
        <h1 className="hero-names script" aria-label="Derin and Miguel">
          <span className="derin">Derin<span className="amp">&amp;</span></span>
          <span className="m">Miguel</span>
        </h1>
        <p className="hero-tag">{copy.hero.tag}</p>
        <div className="hero-meta">
          <span>{copy.hero.meta[0]}</span>
          <span className="dot" />
          <span>{copy.hero.meta[1]}</span>
          <span className="dot" />
          <span>{copy.hero.meta[2]}</span>
        </div>
        <div className="hero-venue italic">{copy.hero.venue}</div>
        <div className="hero-couple">
          <img src="assets/couple-scene.png" alt="" aria-hidden="true" />
        </div>
      </div>
    </header>
  );
}

// ── Countdown ────────────────────────────────────────────────────────
function Countdown({ copy }) {
  const t = useCountdown(WEDDING_DATE);
  return (
    <section style={{ padding: "0 40px", marginTop: "-20px" }}>
      <div className="section-inner">
        <div className="countdown">
          {[
            [t.d, copy.countdown.d],
            [t.h, copy.countdown.h],
            [t.m, copy.countdown.m],
            [t.s, copy.countdown.s],
          ].map(([n, lbl]) => (
            <div className="countdown-cell" key={lbl}>
              <div className="countdown-num">{String(n).padStart(2, "0")}</div>
              <div className="countdown-lbl">{lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Section header ───────────────────────────────────────────────────
function SectionHead({ eyebrow, title, sub }) {
  return (
    <>
      <div className="section-eyebrow">{eyebrow}</div>
      <h2 className="section-title">{title}</h2>
      {sub && <p className="section-sub">{sub}</p>}
      <div className="divider"><LeafFlourish /></div>
    </>
  );
}

// ── Story ────────────────────────────────────────────────────────────
function Story({ copy }) {
  return (
    <section id="story">
      <div className="section-inner">
        <SectionHead eyebrow={copy.story.eyebrow} title={copy.story.title} sub={copy.story.sub} />
        <div className="story-grid">
          <div className="story-photo">
            <image-slot id="story-photo" shape="rect" placeholder="A photo of the two of you" style={{ width: "100%", height: "100%" }}></image-slot>
          </div>
          <div className="story-text">
            <p className="lede">{copy.story.lede}</p>
            {copy.story.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Schedule ─────────────────────────────────────────────────────────
function Schedule({ copy }) {
  return (
    <section id="schedule" className="schedule">
      <SectionTree side="left" top={80} size={220} opacity={0.28} />
      <SectionTree side="right" top={120} size={200} opacity={0.28} />
      <div className="section-inner">
        <SectionHead eyebrow={copy.schedule.eyebrow} title={copy.schedule.title} sub={copy.schedule.sub} />
        <div className="day-grid">
          {copy.schedule.rows.map((row, i) => (
            <div key={i} className="day-card">
              <div className="day-icon"><ScheduleIcon kind={row.icon} /></div>
              <div className="day-time">{row.time}</div>
              <div className="day-name">{row.name}</div>
              <div className="day-desc">{row.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Venue ────────────────────────────────────────────────────────────
// ── Venue ────────────────────────────────────────────────────────────
// Google Maps embed, centered between Lisbon and Comporta with the
// Herdade do Perú marker visible. No API key needed for the basic embed.
function VenueMap() {
  // Centered roughly on Setúbal peninsula (38.55, -8.95) with zoom that
  // keeps Lisbon to the north and Comporta to the south in view.
  const src =
    "https://maps.google.com/maps" +
    "?q=Herdade+do+Per%C3%BA+Brejos+de+Azeit%C3%A3o" +
    "&ll=38.62,-9.02&z=10&t=m&ie=UTF8&iwloc=&output=embed";
  return (
    <div className="map-wrap">
      <iframe
        title="Map of Herdade do Perú, between Lisbon and Comporta"
        src={src}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      />
    </div>
  );
}

function Venue({ copy }) {
  return (
    <section id="venue">
      <SectionFlowers side="left" bottom={-40} width={340} opacity={0.45} />
      <SectionFlowers side="right" bottom={-40} width={340} opacity={0.45} />
      <div className="section-inner">
        <SectionHead eyebrow={copy.venue.eyebrow} title={copy.venue.title} />
        <div className="venue-grid">
          <div className="venue-map-col">
            <VenueMap />
            <div className="map-legend">
              <div className="map-legend-item">
                <div className="from">{copy.venue.fromLisbon}</div>
                <div className="duration"><span className="num">40</span> min by car</div>
              </div>
              <div className="map-legend-item">
                <div className="from">{copy.venue.fromComporta}</div>
                <div className="duration"><span className="num">1h 20</span> by car</div>
              </div>
            </div>
          </div>
          <div>
            <div className="venue-name">{copy.venue.name}</div>
            <div className="venue-loc">{copy.venue.loc}</div>
            <p className="venue-desc">{copy.venue.desc}</p>
            <a className="btn" href="https://maps.google.com/?q=Herdade+do+Per%C3%BA+Brejos+de+Azeit%C3%A3o" target="_blank" rel="noreferrer">
              {copy.venue.cta} <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Travel ───────────────────────────────────────────────────────────
function Travel({ copy }) {
  return (
    <section id="travel">
      <SectionTree side="left" top={200} size={180} opacity={0.28} />
      <SectionTree side="right" top={260} size={170} opacity={0.28} />
      <div className="section-inner">
        <SectionHead eyebrow={copy.travel.eyebrow} title={copy.travel.title} sub={copy.travel.sub} />
        <div className="travel-cards">
          {copy.travel.cards.map((c, i) => (
            <div className="travel-card" key={i}>
              <h4>{c.tag}</h4>
              <div className="title">{c.title}</div>
              <p>{c.body}</p>
              <div className="meta">{c.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Dress code ───────────────────────────────────────────────────────
function DressCode({ copy }) {
  const swatches = [
    { c: "var(--sage)",      label: copy.dress.labels[0] },
    { c: "var(--bg-paper)",  label: copy.dress.labels[1] },
    { c: "var(--blush)",     label: copy.dress.labels[2] },
    { c: "var(--terracotta)",label: copy.dress.labels[3] },
    { c: "var(--sage-deep)", label: copy.dress.labels[4] },
  ];
  return (
    <section id="dress" className="dresscode">
      <div className="section-inner">
        <SectionHead eyebrow={copy.dress.eyebrow} title={copy.dress.title} sub={copy.dress.sub} />
        <div className="palette">
          {swatches.map((s, i) => (
            <div key={i} className="swatch" style={{ background: s.c }} title={s.label} />
          ))}
        </div>
        <div className="swatch-label">{copy.dress.labels.join(" · ")}</div>
      </div>
    </section>
  );
}

// ── RSVP ─────────────────────────────────────────────────────────────
// Google Form integration — POSTs to formResponse, then shows the in-page confirmation.
const GOOGLE_FORM_ACTION =
  "https://docs.google.com/forms/d/e/1FAIpQLSfMAUYB0bvtbekvqrx-G6c3358EXTMIGh5d0UgyLIbGe4P3BA/formResponse";
const GOOGLE_FORM_ENTRIES = {
  name:     "entry.603046447",
  email:    "entry.1771187138",
  attending:"entry.550422547",   // values: "Yes, of course" / "Sadly no"
  plusone:  "entry.1393660073",  // mapped to the free-text "anything else we should know" field
  diet:     "entry.2040192314",
  song:     "entry.47084107",
};

function RSVP({ copy }) {
  const [attending, setAttending] = useState(null);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", plusone: "", diet: "", song: "" });

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || attending === null || submitting) return;
    setSubmitting(true);

    // Build the form-encoded body Google Forms expects
    const body = new FormData();
    body.append(GOOGLE_FORM_ENTRIES.name, form.name);
    body.append(GOOGLE_FORM_ENTRIES.email, form.email);
    body.append(GOOGLE_FORM_ENTRIES.attending, attending ? "Yes, of course" : "Sadly no");
    if (attending) {
      if (form.plusone) body.append(GOOGLE_FORM_ENTRIES.plusone, form.plusone);
      if (form.diet)    body.append(GOOGLE_FORM_ENTRIES.diet, form.diet);
      if (form.song)    body.append(GOOGLE_FORM_ENTRIES.song, form.song);
    }

    // Google Forms doesn't return CORS headers; no-cors gives an opaque response,
    // but the submission itself is recorded server-side. Treat both outcomes as success.
    const finish = () => {
      setSubmitting(false);
      setSubmitted(true);
      try { localStorage.setItem("rsvp", JSON.stringify({ ...form, attending })); } catch {}
    };

    fetch(GOOGLE_FORM_ACTION, { method: "POST", mode: "no-cors", body })
      .then(finish)
      .catch(finish);
  };

  return (
    <section id="rsvp">
      <SectionFlowers side="left" bottom={0} width={340} opacity={0.55} />
      <SectionFlowers side="right" bottom={0} width={340} opacity={0.55} />
      <div className="section-inner">
        <SectionHead eyebrow={copy.rsvp.eyebrow} title={copy.rsvp.title} sub={copy.rsvp.sub} />
        <div className="rsvp-wrap">
          {submitted ? (
            <div className="rsvp-success">
              <div className="check script">{copy.rsvp.success.ay}</div>
              <div className="msg">{copy.rsvp.success.msg}</div>
              <div className="small">{copy.rsvp.success.small}</div>
            </div>
          ) : (
            <form onSubmit={submit}>
              <div className="field">
                <label>{copy.rsvp.labels.name}</label>
                <input value={form.name} onChange={update("name")} required />
              </div>
              <div className="field">
                <label>{copy.rsvp.labels.email}</label>
                <input type="email" value={form.email} onChange={update("email")} required />
              </div>
              <div className="field">
                <label>{copy.rsvp.labels.attending}</label>
                <div className="choices">
                  <button type="button" className={`choice ${attending === true ? "active" : ""}`}
                          onClick={() => setAttending(true)}>{copy.rsvp.labels.yes}</button>
                  <button type="button" className={`choice ${attending === false ? "active" : ""}`}
                          onClick={() => setAttending(false)}>{copy.rsvp.labels.no}</button>
                </div>
              </div>
              {attending === true && (
                <>
                  <div className="field">
                    <label>{copy.rsvp.labels.plusone}</label>
                    <input value={form.plusone} onChange={update("plusone")} placeholder={copy.rsvp.labels.plusonePh} />
                  </div>
                  <div className="field">
                    <label>{copy.rsvp.labels.diet}</label>
                    <input value={form.diet} onChange={update("diet")} placeholder={copy.rsvp.labels.dietPh} />
                  </div>
                  <div className="field">
                    <label>{copy.rsvp.labels.song}</label>
                    <input value={form.song} onChange={update("song")} placeholder={copy.rsvp.labels.songPh} />
                  </div>
                </>
              )}
              <div style={{ marginTop: 32, textAlign: "center" }}>
                <button type="submit" className="btn solid" disabled={submitting}>
                  {submitting ? (copy.rsvp.labels.sending || "Sending…") : copy.rsvp.labels.submit}
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────────────────
function FAQ({ copy }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="schedule">
      <SectionTree side="left" top={140} size={200} opacity={0.3} />
      <SectionTree side="right" top={180} size={180} opacity={0.3} />
      <div className="section-inner">
        <SectionHead eyebrow={copy.faq.eyebrow} title={copy.faq.title} />
        <div className="faq-list">
          {copy.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────────
function Footer({ copy }) {
  return (
    <footer>
      <SectionFlowers side="left" bottom={0} width={420} opacity={0.7} />
      <SectionFlowers side="right" bottom={0} width={420} opacity={0.7} />
      <div className="footer-inner">
        <div className="signature script">D &amp; M</div>
        <div className="with-love italic">{copy.footer.love}</div>
        <div className="date-foot">{copy.footer.date}</div>
      </div>
    </footer>
  );
}

// ── Palette + script overrides ───────────────────────────────────────
const PALETTES = {
  sage:       { sage: "#6b7d5a", sageDeep: "#4a5a3e", sageLight: "#c7d1b8", sageMist: "#dde3d0", blush: "#e8c9be", terra: "#c97f55", paper: "#f5f0e6", paper2: "#ece5d4" },
  olive:      { sage: "#7a7a4a", sageDeep: "#525a2e", sageLight: "#cfd0a8", sageMist: "#e3e0c0", blush: "#e8c9be", terra: "#b86a3e", paper: "#f3ecd8", paper2: "#e9dfc2" },
  bloom:      { sage: "#7e8a64", sageDeep: "#4a5a3e", sageLight: "#c7d1b8", sageMist: "#dde3d0", blush: "#deb2a3", terra: "#c47a4d", paper: "#f6ebe4", paper2: "#eed9ce" },
  dusk:       { sage: "#5d6e62", sageDeep: "#3b4a3f", sageLight: "#b9c4b4", sageMist: "#d3dbcc", blush: "#cfb8ae", terra: "#a86b50", paper: "#ebe6dc", paper2: "#ddd5c4" },
  terracotta: { sage: "#b5673f", sageDeep: "#8a3f23", sageLight: "#e8c2a8", sageMist: "#f0d8c6", blush: "#e8c9be", terra: "#c97f55", paper: "#f7ebdc", paper2: "#ecd6bd" },
};
const SCRIPTS = {
  vibes:    '"Great Vibes", "Allura", cursive',
  allura:   '"Allura", "Pinyon Script", cursive',
  pinyon:   '"Pinyon Script", "Allura", cursive',
  petit:    '"Petit Formal Script", "Allura", cursive',
  parisi:   '"Parisienne", "Allura", cursive',
};

// ── App ──────────────────────────────────────────────────────────────
function App() {
  const [lang, setLang] = useState("en");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply palette + script via root vars
  useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES.sage;
    root.style.setProperty("--sage", p.sage);
    root.style.setProperty("--sage-deep", p.sageDeep);
    root.style.setProperty("--sage-light", p.sageLight);
    root.style.setProperty("--sage-mist", p.sageMist);
    root.style.setProperty("--blush", p.blush);
    root.style.setProperty("--terracotta", p.terra);
    root.style.setProperty("--bg-paper", p.paper);
    root.style.setProperty("--bg-paper-2", p.paper2);
    root.style.setProperty("--f-script", SCRIPTS[t.script] || SCRIPTS.allura);
    root.setAttribute("data-mood", t.palette);
  }, [t.palette, t.script]);

  const copy = COPY[lang];

  return (
    <>
      <Nav lang={lang} setLang={setLang} copy={copy} />
      <main>
        <Hero copy={copy} showWatercolor={t.showWatercolor} />
        {t.showCountdown && <Countdown copy={copy} />}
        <Schedule copy={copy} />
        <Venue copy={copy} />
        <Travel copy={copy} />
        <DressCode copy={copy} />
        <RSVP copy={copy} />
        <FAQ copy={copy} />
      </main>
      <Footer copy={copy} />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio  label="Colour mood" value={t.palette}
                     options={[
                       { value: "sage",       label: "Sage" },
                       { value: "olive",      label: "Olive" },
                       { value: "bloom",      label: "Bloom" },
                       { value: "dusk",       label: "Dusk" },
                       { value: "terracotta", label: "Terracotta" },
                     ]}
                     onChange={(v) => setTweak("palette", v)} />
        <TweakSection label="Typography" />
        <TweakRadio  label="Script font" value={t.script}
                     options={[
                       { value: "vibes",  label: "Great Vibes" },
                       { value: "allura", label: "Allura" },
                       { value: "pinyon", label: "Pinyon" },
                       { value: "petit",  label: "Petit" },
                       { value: "parisi", label: "Parisienne" },
                     ]}
                     onChange={(v) => setTweak("script", v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="Watercolor backdrop" value={t.showWatercolor}
                     onChange={(v) => setTweak("showWatercolor", v)} />
        <TweakToggle label="Countdown" value={t.showCountdown}
                     onChange={(v) => setTweak("showCountdown", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);