/* App — top nav, tweaks integration, section composition */

const { useState, useEffect } = React;

const DEFAULT_COUPLE = /*EDITMODE-BEGIN*/{
  "firstName": "Marina",
  "secondName": "Eduardo",
  "date": "08.08.2026",
  "dateText": "Sábado, 8 de agosto de 2026",
  "dateISO": "2026-08-08T11:30:00-03:00",
  "place": "Campinas · Sousas",
  "palette": "mist"
}/*EDITMODE-END*/;

const NAV_ITEMS = [
  { id: "inicio",      label: "Início" },
  { id: "historia",    label: "História" },
  { id: "o-dia",       label: "O Dia" },
  { id: "detalhes",    label: "Detalhes" },
  { id: "presentes",   label: "Presentes" },
  { id: "rsvp",        label: "RSVP" },
  { id: "como-chegar", label: "Como Chegar" },
  { id: "faq",         label: "FAQ" },
];

function TopNav({ couple }) {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("inicio");
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 30);
      // find which section is in view
      let cur = NAV_ITEMS[0].id;
      for (const item of NAV_ITEMS) {
        const el = document.getElementById(item.id);
        if (!el) continue;
        if (el.getBoundingClientRect().top - 120 <= 0) cur = item.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={"topnav " + (scrolled ? "scrolled" : "")}>
      <a href="#inicio" className="brand">{couple.first} &amp; {couple.second}</a>
      <button
        className="menu-btn"
        aria-label="Menu"
        onClick={() => setMenuOpen(o => !o)}
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M3 6h18M3 12h18M3 18h18" />
        </svg>
      </button>
      <div className={"links " + (menuOpen ? "open" : "")}>
        {NAV_ITEMS.map(item => (
          <a
            key={item.id}
            href={"#" + item.id}
            className={active === item.id ? "active" : ""}
            onClick={() => setMenuOpen(false)}
          >
            {item.label}
          </a>
        ))}
      </div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(DEFAULT_COUPLE);

  // Apply palette to body
  useEffect(() => {
    document.body.setAttribute("data-palette", t.palette || "mist");
  }, [t.palette]);

  const couple = { first: t.firstName, second: t.secondName };

  return (
    <>
      <TopNav couple={couple} />

      <Hero
        couple={couple}
        date={t.date}
        place={t.place}
        dateText={t.dateText}
        dateISO={t.dateISO}
      />
      <Story couple={couple} />
      <DaySchedule />
      <Details place={t.place} dateText={t.dateText} />
      <Gifts />
      <RSVP />
      <Travel />
      <FAQ />
      <Footer couple={couple} date={t.date} place={t.place} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Casal">
          <TweakText label="Primeiro nome" value={t.firstName} onChange={v => setTweak("firstName", v)} />
          <TweakText label="Segundo nome" value={t.secondName} onChange={v => setTweak("secondName", v)} />
        </TweakSection>

        <TweakSection label="Data & Local">
          <TweakText label="Data curta" value={t.date} onChange={v => setTweak("date", v)} />
          <TweakText label="Data por extenso" value={t.dateText} onChange={v => setTweak("dateText", v)} />
          <TweakText label="Local" value={t.place} onChange={v => setTweak("place", v)} />
          <TweakText label="ISO (para countdown)" value={t.dateISO} onChange={v => setTweak("dateISO", v)} />
        </TweakSection>

        <TweakSection label="Paleta">
          <TweakRadio
            label="Tom de fundo"
            value={t.palette}
            options={[
              { value: "mist",  label: "Mist" },
              { value: "cream", label: "Cream" },
            ]}
            onChange={v => setTweak("palette", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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