// Home.jsx — main landing page

function HeroBlock() {
  const { t } = useT();
  return (
    <section className="hero" aria-labelledby="hero-names">
      <div className="hero-names" id="hero-names">
        <h1 className="hero-h" style={{ fontWeight: 500 }}>
          Sara
        </h1>
        <span className="hero-amp" aria-hidden="true">
          &amp;
        </span>
        <h1 className="hero-h" style={{ fontWeight: 500 }}>
          Lorenzo
        </h1>
      </div>

      <Diamond />

      <div className="hero-date">
        <div className="hero-day-row">
          <span className="hero-day-rule" aria-hidden="true"></span>
          <p className="hero-date-line" style={{ fontSize: "22px" }}>
            {t("home.day")}
          </p>
          <span className="hero-day-rule" aria-hidden="true"></span>
        </div>
        {t("home.year") ? <p className="hero-year">{t("home.year")}</p> : null}
        {t("home.ceremonyAt") ? (
          <p className="hero-ceremony">
            <span className="hero-ceremony-dot" aria-hidden="true">
              ◇
            </span>
            <span
              style={{
                fontFamily: '"Cormorant Garamond"',
                fontWeight: "400",
                fontSize: "18px",
                color: "rgb(122, 90, 63)",
              }}
            >
              {t("home.ceremonyAt")}
            </span>
            <span className="hero-ceremony-dot" aria-hidden="true">
              ◇
            </span>
          </p>
        ) : null}
        {t("home.dayItalian") ? (
          <p className="hero-date-italian">{t("home.dayItalian")}</p>
        ) : null}
      </div>

      <div className="hero-venue">
        <p className="hero-villa">{t("home.villa")}</p>
        <p className="hero-place">{t("home.place")}</p>
      </div>
    </section>
  );
}

function PhotoStripe() {
  const { t, lang } = useT();
  const captions =
    STRINGS[lang]?.home?.photoCaptions || STRINGS.en.home.photoCaptions;
  const carUrl = "wedding/images/couple-car.png";
  const gondolaUrl = "wedding/images/couple-gondola.png";
  const formalUrl = "wedding/images/couple-formal.png";
  const imgStyle = (url) => ({
    backgroundImage: `url("${url}")`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  });
  return (
    <section className="photo-stripe" aria-label="Photographs">
      <div
        className="photo tall has-image"
        style={imgStyle(carUrl)}
        aria-label={captions[0]}
      ></div>
      <div
        className="photo wide-mid has-image"
        style={imgStyle(gondolaUrl)}
        aria-label={captions[1]}
      ></div>
      <div
        className="photo tall has-image"
        style={imgStyle(formalUrl)}
        aria-label={captions[2]}
      ></div>
    </section>
  );
}

function NoteSection() {
  const { t } = useT();
  return (
    <section className="section note-section">
      <div className="page-chapter">{t("home.noteChapter")}</div>
      {t("home.noteTitle") ? (
        <h2 className="section-title centered">{t("home.noteTitle")}</h2>
      ) : null}
      {t("home.noteSub") ? (
        <p className="section-sub centered">{t("home.noteSub")}</p>
      ) : null}
      <Diamond />
      <div className="prose">
        <p>{t("home.noteP1")}</p>
        <p>{t("home.noteP2")}</p>
        <p>{t("home.noteP3")}</p>
        <p className="signature">{t("home.noteSig")}</p>
      </div>
    </section>
  );
}

function WeekendSection() {
  const { t } = useT();
  return (
    <section className="section weekend-section">
      <div className="weekend-grid">
        <div className="weekend-card">
          <div className="weekend-day">02</div>
          <div className="weekend-month">July · Friday</div>
          <div className="weekend-what">{t("agenda.d1Title")}</div>
        </div>
        <div className="weekend-card weekend-card-main">
          <div className="weekend-day">03</div>
          <div className="weekend-month">July · Saturday</div>
          <div className="weekend-what">{t("agenda.d2Title")}</div>
          <div className="weekend-time">18:00 → 00:00</div>
        </div>
        <div className="weekend-card">
          <div className="weekend-day">04</div>
          <div className="weekend-month">July · Sunday</div>
          <div className="weekend-what">{t("agenda.d3Title")}</div>
        </div>
      </div>
      <div className="weekend-foot">
        <div className="page-chapter" style={{ marginBottom: 14 }}>
          {t("home.whenChapter")}
        </div>
        <h2 className="section-title centered">{t("home.whenTitle")}</h2>
        <p className="section-sub centered">{t("home.whenSub")}</p>
        <Diamond />
        <p className="lede">{t("home.whenP")}</p>
        <div style={{ marginTop: 28, textAlign: "center" }}>
          <a className="btn btn-ghost" href="#/agenda">
            {t("home.whenCtaAgenda")} →
          </a>
        </div>
      </div>
    </section>
  );
}

function RsvpSection() {
  const { t } = useT();
  return (
    <section className="section rsvp-section" id="rsvp">
      <div className="page-chapter centered">{t("home.rsvpChapter")}</div>
      <h2 className="section-title centered">{t("home.rsvpTitle")}</h2>
      <p className="section-sub centered">{t("home.rsvpSub")}</p>
      <Diamond />
      <p className="lede" style={{ marginBottom: 36 }}>
        {t("home.rsvpIntro")}
      </p>
      <RsvpForm />
    </section>
  );
}

function Home() {
  return (
    <main className="home">
      <HeroBlock />
      <PhotoStripe />
      <RsvpSection />
      <WeekendSection />
    </main>
  );
}

window.Home = Home;