// Pages.jsx — all sub-pages (Agenda, Travel, Stay, Montalcino, Gallery, Registry, FAQ)

function ComingSoonNotice({ tagKey, titleKey, bodyKey }) {
  const { t } = useT();
  return (
    <div className="notice">
      <div className="tag">★ {t(tagKey)} ★</div>
      <h3 className="title">{t(titleKey)}</h3>
      <p className="body">{t(bodyKey)}</p>
    </div>
  );
}

// ---------------------------------------------------------------- Agenda

function AgendaDay({ labelKey, titleKey, subKey, itemsKey, num }) {
  const { t, lang } = useT();
  const items =
    STRINGS[lang]?.agenda?.[itemsKey] || STRINGS.en.agenda[itemsKey];
  return (
    <section className="section agenda-day">
      <div className="section-head">
        <span className="num">{num}</span>
        <h2 className="title">{t("agenda." + titleKey)}</h2>
        <span className="meta">{t("agenda." + labelKey)}</span>
      </div>
      <ul className="timeline">
        {items.map((it, i) => (
          <li key={i}>
            <div className="time">{it.time}</div>
            <div>
              <h3 className="what">{it.what}</h3>
              <p className="note">{it.note}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

function AgendaPage() {
  const { t } = useT();
  return (
    <main>
      <PageHead chapter={t("agenda.chapter")} title={t("agenda.title")} />
      <p className="lede">{t("agenda.lede")}</p>

      <AgendaDay
        labelKey="d1Label"
        titleKey="d1Title"
        subKey="d1Sub"
        itemsKey="d1Items"
        num="1"
      />
      <AgendaDay
        labelKey="d2Label"
        titleKey="d2Title"
        subKey="d2Sub"
        itemsKey="d2Items"
        num="2"
      />
      <AgendaDay
        labelKey="d3Label"
        titleKey="d3Title"
        subKey="d3Sub"
        itemsKey="d3Items"
        num="3"
      />

      <div className="section" style={{ textAlign: "center" }}>
        <Diamond />
        <p className="lede" style={{ fontSize: 20, color: "var(--mushroom)" }}>
          {t("agenda.dressNote")}
        </p>
      </div>
    </main>
  );
}

// ---------------------------------------------------------------- Travel

function TravelPage() {
  const { t } = useT();
  const sections = [{ key: "sectionAir", body: "sectionAirBody", num: "i" }];
  return (
    <main>
      <PageHead
        chapter={t("travel.chapter")}
        title={t("travel.title")}
        sub={t("travel.sub")}
      />
      <p className="lede">{t("travel.lede")}</p>

      <div className="section">
        <ComingSoonNotice
          tagKey="travel.comingSoonTag"
          titleKey="travel.comingSoonTitle"
          bodyKey="travel.comingSoonBody"
        />
      </div>

      {sections.map((s) => (
        <section key={s.key} className="section">
          <div className="section-head">
            <span className="num">{s.num}</span>
            <h2 className="title">{t("travel." + s.key)}</h2>
          </div>
          <div className="prose">
            <p>{t("travel." + s.body)}</p>
          </div>
        </section>
      ))}
    </main>
  );
}

// ---------------------------------------------------------------- Stay

function StayPage() {
  const { t } = useT();
  const sections = [];
  return (
    <main>
      <PageHead
        chapter={t("stay.chapter")}
        title={t("stay.title")}
        sub={t("stay.sub")}
      />
      <p className="lede">{t("stay.lede")}</p>

      <div className="section">
        <ComingSoonNotice
          tagKey="stay.comingSoonTag"
          titleKey="stay.comingSoonTitle"
          bodyKey="stay.comingSoonBody"
        />
      </div>

      {sections.map((s) => (
        <section key={s.key} className="section">
          <div className="section-head">
            <span className="num">{s.num}</span>
            <h2 className="title">{t("stay." + s.key)}</h2>
          </div>
          <div className="prose">
            <p>{t("stay." + s.body)}</p>
          </div>
        </section>
      ))}
    </main>
  );
}

// ---------------------------------------------------------------- Montalcino

function MontalcinoPage() {
  const { t, lang } = useT();
  const items = STRINGS[lang]?.montalcino?.items || STRINGS.en.montalcino.items;
  const romans = ["i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x"];
  return (
    <main>
      <PageHead
        chapter={t("montalcino.chapter")}
        title={t("montalcino.title")}
        sub={t("montalcino.sub")}
      />
      <p className="lede">{t("montalcino.lede")}</p>

      <div className="section">
        <div className="linked-list">
          {items.map((it, i) => (
            <div className="item" key={i}>
              <span className="num">{romans[i]}</span>
              <div>
                <h3 className="name">{it.name}</h3>
                <p className="desc">{it.desc}</p>
              </div>
              <span className="meta">{it.meta}</span>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

// ---------------------------------------------------------------- Gallery

function GalleryPage() {
  const { t } = useT();
  const villaUrl = "wedding/images/villa-hero.jpeg";
  const interiorUrl = "wedding/images/villa1.jpg";
  const sittingUrl = "wedding/images/vibe1.png";
  const terraceUrl = "wedding/images/vibe2.png";
  const longTableUrl = "wedding/images/loc5.png";
  const pianoUrl = "wedding/images/vibe5.png";
  const orciaUrl =
    "https://dynamic-media.tacdn.com/media/photo-o/31/28/6c/24/caption.jpg?w=700&h=500&s=1";
  // Curated grid — varied sizes for editorial rhythm
  const slots = [
    { kind: "big", label: "the villa", img: villaUrl },
    {
      kind: "big",
      label: "the view at golden hour",
      img: "wedding/images/villa-hero2.jpg",
    },
    { kind: "wide", label: "val d\u2019orcia · cypresses", img: orciaUrl },
    { kind: "", label: "brunello, on the marble", img: interiorUrl },
    { kind: "", label: "a quiet corner", img: sittingUrl },
    { kind: "tall", label: "the terrace, looking out", img: terraceUrl },
    { kind: "wide", label: "long table \u00b7 dinner", img: longTableUrl },
    { kind: "", label: "the salone \u00b7 piano", img: pianoUrl },
    { kind: "", label: "us · 03" },
  ];
  return (
    <main>
      <PageHead
        chapter={t("gallery.chapter")}
        title={t("gallery.title")}
        sub={t("gallery.sub")}
      />
      <p className="lede">{t("gallery.lede")}</p>

      <div className="section">
        <div className="gallery" aria-label="Photo gallery placeholders">
          {slots.map((s, i) => (
            <div
              key={i}
              className={`photo ${s.kind}${s.img ? " has-image" : ""}`}
              style={
                s.img
                  ? {
                      backgroundImage: `url("${s.img}")`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      backgroundRepeat: "no-repeat",
                    }
                  : undefined
              }
              aria-label={s.img ? s.label : undefined}
            >
              {s.img ? null : <span>{s.label}</span>}
            </div>
          ))}
        </div>
        <p
          className="prose"
          style={{
            textAlign: "center",
            marginTop: 28,
            fontStyle: "italic",
            color: "var(--mushroom)",
          }}
        >
          {t("gallery.caption")}
        </p>
      </div>
    </main>
  );
}

// ---------------------------------------------------------------- Registry

function RegistryPage() {
  const { t } = useT();
  return (
    <main>
      <PageHead
        chapter={t("registry.chapter")}
        title={t("registry.title")}
        sub={t("registry.sub")}
      />
      <p className="lede">{t("registry.lede")}</p>

      <div className="section">
        <ComingSoonNotice
          tagKey="registry.comingSoonTag"
          titleKey="registry.comingSoonTitle"
          bodyKey="registry.comingSoonBody"
        />
      </div>

      <section className="section two-col">
        <div className="card">
          <div className="card-label">{t("registry.comingSoonTag")}</div>
          <h3 className="card-title">{t("registry.sectionHoney")}</h3>
          <p className="prose" style={{ margin: 0 }}>
            {t("registry.sectionHoneyBody")}
          </p>
        </div>
        <div className="card">
          <div className="card-label">{t("registry.comingSoonTag")}</div>
          <h3 className="card-title">{t("registry.sectionHome")}</h3>
          <p className="prose" style={{ margin: 0 }}>
            {t("registry.sectionHomeBody")}
          </p>
        </div>
      </section>
    </main>
  );
}

// ---------------------------------------------------------------- FAQ

function FaqPage() {
  const { t, lang } = useT();
  const items = STRINGS[lang]?.faq?.items || STRINGS.en.faq.items;
  return (
    <main>
      <PageHead
        chapter={t("faq.chapter")}
        title={t("faq.title")}
        sub={t("faq.sub")}
      />
      <p className="lede">{t("faq.lede")}</p>

      <div className="section faq">
        {items.map((it, i) => (
          <details key={i}>
            <summary>{it.q}</summary>
            <div className="answer">{it.a}</div>
          </details>
        ))}
      </div>
    </main>
  );
}

Object.assign(window, {
  AgendaPage,
  TravelPage,
  StayPage,
  MontalcinoPage,
  GalleryPage,
  RegistryPage,
  FaqPage,
});