const { useState, useEffect, useRef } = React;

// ===== Photo =====
// Renders an <img> when `src` is set (path is resolved against window.MEDIA_BASE
// unless it's already absolute). Falls back to a labeled placeholder otherwise.
//
// Alt text resolution order:
//   1. explicit `alt` prop (overrides everything)
//   2. window.PHOTOS[src]  ← the lookup in src/photos.jsx
//   3. `label` prop (used as the placeholder text too)
function Photo({ label, aspect = "4/5", style = {}, src = null, alt = null }) {
  const resolved = src && (/^https?:\/\//.test(src) || !window.MEDIA_BASE)
    ? src
    : src ? `${window.MEDIA_BASE}/${src.replace(/^\/+/, "")}` : null;
  const lookup = src && window.PHOTOS ? window.PHOTOS[src] : null;
  const finalAlt = alt ?? lookup ?? label ?? "";
  return (
    <div className="photo" style={{ aspectRatio: aspect, width: "100%", ...style }}>
      {resolved ? (
        <img
          src={resolved}
          alt={finalAlt}
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          loading="lazy"
        />
      ) : (
        <span className="photo-label">{label}</span>
      )}
    </div>
  );
}

// ===== Fade-up on intersect =====
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add("is-visible");
          }
        });
      },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}
function Reveal({ delay = 0, children, className = "", as: Tag = "div", ...rest }) {
  const ref = useReveal();
  const delayCls = delay ? ` delay-${delay}` : "";
  return (
    <Tag ref={ref} className={`fade-up${delayCls} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// ===== CHAPTER 1: LETTER =====
function ChapterLetter() {
  return (
    <section className="chapter" data-screen-label="01 Letter" id="chapter-letter">
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)", gap: "clamp(2rem, 5vw, 5rem)", alignItems: "center", width: "100%", maxWidth: "1400px", margin: "0 auto" }} className="letter-layout">
        <Reveal className="letter-left">
          <div className="eyebrow" style={{ marginBottom: "1.5rem" }}>Chapter 01 · A letter to you</div>
          <h1 className="display display-xl" style={{ marginBottom: "2rem" }}>
            Hello<br/>from Boise.
          </h1>
          <Photo label="beth + zach, hells canyon" aspect="5/6" style={{ maxWidth: "420px" }} src="leisure/on the river/Hells_Canyon_Hike.jpg" />
        </Reveal>
        <Reveal delay={2} className="letter-right">
          <div style={{ maxWidth: "32rem" }}>
            {window.LETTER_PARAGRAPHS.map((p, i) => (
              <p key={i} className="prose" style={{ marginBottom: "1.1em" }}>{p}</p>
            ))}
            <p className="prose" style={{ marginTop: "2rem", fontStyle: "italic" }}>
              With love,<br/>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "1.35em", fontStyle: "normal" }}>Zach & Beth</span>
            </p>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .letter-layout { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 2: ABOUT US =====
function ChapterAbout() {
  const people = [
    {
      name: "Beth, 32",
      role: "Marketing and PR · MBA finished 2025",
      photo: { src: null, label: "beth · portrait" },
      bio: [
        "(Written by Zach.) Beth grew up in nine states and one English village. Air Force family, nineteen moves before she was twenty. She knows how to land in a new place. She is also the one who wants to plant roots.",
        "Beth organizes the hangouts, writes the thank you notes, and notices a half second before anyone else when someone in the room needs something. Modest about her own work, generous with everyone else's. Loud laugh, oldies on the kitchen speaker, a half marathon every year, and a Sims save she's tended for as long as I've known her.",
      ],
      details: [
        ["Work",   "Marketing and PR for a defense engineering team · MBA finished in 2025"],
        ["Loves",  "Long runs, oldies on shuffle, planning a trip"],
        ["Will",   "Have a meal in the freezer for you before she's asked"],
      ],
    },
    {
      name: "Zach, 35",
      role: "Air Force pilot · founder of an engineering company",
      photo: { src: null, label: "zach · portrait" },
      bio: [
        "(Written by Beth.) Zach grew up on the Colorado high prairie. Franktown, dirt roads, a long leash, and a dad who taught him to fly a small plane in high school. Air Force Academy, then a PhD at Purdue, then Air Force pilot, then in 2020 he founded an engineering company here in Boise.",
        "Quiet on first meeting, silly with his people. Currently running a 60% success rate on dad jokes, which is improving. The detail person, the patient one. He is the one who teaches our friends to whitewater kayak, fixes the flat, sets up the tent, and finishes the math problem because the math problem is fun. Books on tape on every drive, coffee in his hand at every hour.",
      ],
      details: [
        ["Work",   "Air Force pilot · founded his engineering company in 2020"],
        ["Loves",  "Anything outside, the engineering side of anything, a long drive with a view"],
        ["Will",   "Teach a kid how to do nearly anything, slowly and with patience"],
      ],
    },
    {
      name: "Bergen, 7",
      role: "Our golden retriever",
      photo: { src: null, label: "bergen · portrait" },
      bio: [
        "We brought Bergen home in May 2019 and named him after Bergen, Norway, where we spent our first Christmas in 2016, around the time we first started talking about marriage. He has accompanied every adventure since.",
        "Calm in the house, ridiculous in the yard. Patient with kids, gentle with strangers, and the reason we never sleep past 6 a.m. The river belongs to him. So does the back of any couch.",
      ],
      details: [
        ["Loves", "The Boise River, snow, any couch he's not supposed to be on"],
        ["Job",   "Greeter, foot warmer, official 'turkey' of the family"],
      ],
    },
  ];

  return (
    <section className="chapter" data-screen-label="02 About" id="chapter-about" style={{ background: "var(--bg-soft)" }}>
      <div style={{ width: "100%", maxWidth: "1300px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)", maxWidth: "44rem" }}>
          <div className="eyebrow" style={{ marginBottom: "1rem" }}>Chapter 02</div>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>About us.</h2>
          <p className="prose">
            We're Beth, Zach, and Bergen. Two of us writing about each other, and one of us along for every walk. Married since December 2017, in Boise since November 2018.
          </p>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(1.5rem, 3vw, 2.5rem)" }} className="about-grid">
          {people.map((p, i) => (
            <Reveal key={p.name} delay={Math.min(i + 1, 4)}>
              <Photo label={p.photo.label} aspect="4/5" src={p.photo.src} style={{ marginBottom: "1.25rem" }} />
              <div className="eyebrow" style={{ fontSize: "0.65rem", marginBottom: "0.4rem" }}>{p.role}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.75rem, 2.6vw, 2.25rem)", lineHeight: 1.05, marginBottom: "1rem" }}>{p.name}</div>
              {p.bio.map((para, j) => (
                <p key={j} className="prose" style={{ fontSize: "0.92rem", marginBottom: "0.85em" }}>{para}</p>
              ))}
              <dl style={{ marginTop: "1.1rem", paddingTop: "0.9rem", borderTop: "1px solid var(--rule)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.4rem 0.9rem", fontSize: "0.82rem" }}>
                {p.details.map(([k, v]) => (
                  <React.Fragment key={k}>
                    <dt style={{ fontFamily: "var(--font-ui)", fontSize: "0.65rem", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", paddingTop: "2px" }}>{k}</dt>
                    <dd style={{ fontFamily: "var(--font-body)", color: "var(--ink)", margin: 0 }}>{v}</dd>
                  </React.Fragment>
                ))}
              </dl>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          .about-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 4: WE MAKE EACH OTHER STRONGER =====
function ChapterStronger() {
  return (
    <section className="chapter" data-screen-label="02 Stronger" id="chapter-stronger">
      <div style={{ width: "100%", maxWidth: "1300px", margin: "0 auto", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "clamp(2rem, 5vw, 5rem)", alignItems: "center" }} className="stronger-layout">
        <Reveal>
          <h2 className="display display-lg" style={{ marginBottom: "1.5rem", lineHeight: 1.05 }}>
            We make each other<br/>stronger.
          </h2>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            We are very different people, and that's the whole point. Zach is the detail person, guided by facts and logic, capable of staring at a problem until it solves itself. Beth is faster, more emotional, and reads the people in a room before she reads the agenda. We've taught each other a lot about how the other half thinks, and we balance each other in nearly every decision worth making.
          </p>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            We've been through hard seasons (military deployments and relocations, two years of trying for a baby and the losses inside that), and they didn't pull us apart. They taught us how we work. We disagree well: quietly, with humor, and almost always before things harden. We celebrate every win we can find, big or small, and we look for the joy on the way to it.
          </p>
          <p className="prose">
            Whatever this child needs, they will have two of us. Different, complementary, and on the same side.
          </p>
          <div style={{ marginTop: "2rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid var(--rule)" }} className="stronger-stats">
            <div>
              <div className="eyebrow" style={{ fontSize: "0.65rem", color: "var(--accent)", marginBottom: "0.35rem" }}>Together since</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "1.5rem" }}>January 2016</div>
            </div>
            <div>
              <div className="eyebrow" style={{ fontSize: "0.65rem", color: "var(--accent)", marginBottom: "0.35rem" }}>Married</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "1.5rem" }}>Dec 2017 · Tetons</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-sm)" }}>
            <Photo label="us · the tetons" aspect="3/4" />
            <Photo label="us · river day" aspect="3/4" style={{ marginTop: "2.5rem" }} />
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .stronger-layout { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 520px) {
          .stronger-stats { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 5: HOME =====
function ChapterHome() {
  return (
    <section className="chapter" data-screen-label="04 Home" id="chapter-home">
      <div style={{ width: "100%", maxWidth: "1300px", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(2rem, 5vw, 5rem)", alignItems: "center" }} className="home-layout">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: "1rem" }}>Chapter 04</div>
          <h2 className="display display-lg" style={{ marginBottom: "1.5rem" }}>Our home in Boise.</h2>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            We own a two story house in southeast Boise: five bedrooms, three baths, and a small backyard that does more work than it should. The bedroom across the hall from ours is currently empty; it's the one we'd make into a nursery.
          </p>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            Our street is the back of the neighborhood, so it doesn't get much traffic. On a warm afternoon there are typically a dozen-plus kids out riding bikes and scooters up and down the block. We're close with our next-door neighbors. Beth runs the riverpath alone and has never thought twice about it.
          </p>
          <p className="prose">
            We're a mile from the Boise River and the bike and run paths that follow it. There's a calm stretch for canoeing five minutes from the house, a kids' park with a swimming beach ten minutes away, and downtown is fifteen. Bogus Basin, our nonprofit local ski resort, is 45 minutes up the canyon. We can drive into the mountains without passing a single stoplight.
          </p>
        </Reveal>
        <Reveal delay={2}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-sm)" }}>
            <Photo label="our street" aspect="3/4" />
            <Photo label="the future nursery" aspect="3/4" style={{ marginTop: "2rem" }} />
            <Photo label="the foothills, five minutes away" aspect="3/4" style={{ marginTop: "-1rem" }} src="home/PXL_20221029_174607794.jpg" />
            <Photo label="the back garden" aspect="3/4" style={{ marginTop: "1rem" }} />
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .home-layout { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 4: FAMILY & SUPPORT =====
function ChapterFamily() {
  const people = [
    { name: "Cheryl & Rob", role: "Beth's parents", note: "Currently in Dallas and in the process of moving to Boise to be closer to us. Cheryl works in learning and development at a major bank; Rob is retired Air Force. Rob was adopted at two days old and has been our most candid teacher about what it can be like to grow up an adoptee." },
    { name: "Brenda & Richard", role: "Zach's parents", note: "In Boise. Brenda was a teacher and still loves teaching kids to read. Richard taught Zach to fly when Zach was a teenager; the two of them still take their plane out together. They have a dog, Canella, who Bergen treats as a cousin." },
    { name: "Laura & family", role: "Beth's sister", note: "Beth's sister Laura, her husband, and our two nieces (5 and 2) live in Seattle. They moved closer to be more in our lives, and so we can be more in the girls'." },
    { name: "The wider family", role: "Aunts, uncles, grandparents", note: "Beth's grandpa is in South Carolina; her aunts, uncle, and cousins are spread between SC, TX, WA, CO, OH, and NC. Zach's larger extended family is in MN, AK, PA, and AZ. They are part of the picture, and they fly in for the big moments." },
  ];
  return (
    <section className="chapter" data-screen-label="04 Family" id="chapter-family" style={{ background: "var(--bg-soft)" }}>
      <div style={{ width: "100%", maxWidth: "1200px", margin: "0 auto" }}>
        <Reveal style={{ maxWidth: "38rem", marginBottom: "clamp(2rem, 5vh, 4rem)" }}>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>The family around us.</h2>
          <p className="prose">
            Our parents are local or moving local. Beth has a sister and two nieces in Seattle; Zach is an only child. Two of our parents are educators by training. One of them was adopted himself.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--gap-md)" }} className="family-grid">
          {people.map((p, i) => (
            <Reveal key={p.name} delay={Math.min(i + 1, 4)}>
              <Photo label={p.name.toLowerCase()} aspect="4/5" style={{ marginBottom: "1rem" }} />
              <div className="eyebrow" style={{ fontSize: "0.65rem", marginBottom: "0.35rem" }}>{p.role}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "1.25rem", marginBottom: "0.5rem" }}>{p.name}</div>
              <p className="prose" style={{ fontSize: "0.9rem" }}>{p.note}</p>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .family-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .family-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 5: FRIENDS =====
function ChapterFriends() {
  return (
    <section className="chapter" data-screen-label="04 Friends" id="chapter-friends">
      <div style={{ width: "100%", maxWidth: "1300px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)", maxWidth: "42rem" }}>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>Our chosen family.</h2>
          <p className="prose">
            We have a tight group of friends in Boise. Eight or so people we hang out with most weeks, travel with, and lean on. They are the village beyond our parents and sister, and they will be in our future child's life from the start. Some of them you'll meet a few sections in: at the yurt every December, at the Turkey Trot every November, at the kitchen table on a regular Tuesday.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1.5fr", gap: "var(--gap-md)" }} className="friends-grid">
          <Reveal delay={1}><Photo label="sunday dinner · the whole crew" aspect="4/3" /></Reveal>
          <Reveal delay={2}><Photo label="annual cabin trip" aspect="3/4" /></Reveal>
          <Reveal delay={3}><Photo label="zach's oldest friends" aspect="4/5" /></Reveal>
          <Reveal delay={4}><Photo label="beth's book club" aspect="4/5" /></Reveal>
          <Reveal delay={1}><Photo label="godparents to be" aspect="4/5" style={{ marginTop: "1rem" }} /></Reveal>
          <Reveal delay={2}><Photo label="neighborhood friends" aspect="4/3" /></Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .friends-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 6: TRADITIONS =====
function ChapterTraditions() {
  // Year-calendar traditions. `month` is 1..12. `span` allows multi-month bars.
  const traditions = [
    { id: "datenight",   month: 1,  span: 12, label: "Date night",              when: "weekly",                icon: "🍴", text: "Once a week we head out to a neighborhood restaurant. For anniversaries and bigger nights we'll dress up and go downtown." },
    { id: "hibachi",     month: 2,  span: 1,  label: "Hibachi night",           when: "valentine's eve",       icon: "🥢", text: "The night before Valentine's Day we go to the same hibachi restaurant. It mirrors one of our first dates and has become its own ritual." },
    { id: "backpack",    month: 7,  span: 1,  label: "Annual backpacking week", when: "july",                  icon: "🎒", text: "Every July we plan a multi day trip into the Idaho wilderness, usually somewhere with a mountain lake, and often a hot spring on the way home." },
    { id: "trot",        month: 11, span: 1,  label: "Bergen is a Turkey Trot", when: "thanksgiving morning",  icon: "🦃", text: "Every Thanksgiving morning we run a 5k along the Boise River with Bergen wearing a matching 'Bergen is a Turkey' T-shirt. We change the print every year. The dog gets the beach off leash. The dog is, briefly, the turkey." },
    { id: "yurt",        month: 12, span: 1,  label: "Yurt friendsgiving",      when: "december",              icon: "🏔️", text: "Every December we rent one of Idaho's state yurts and snowshoe or ski in with our closest friends. We bring everything for a Friendsgiving feast and stay a couple of nights, around a wood stove and under a lot of stars. It is reliably the best weekend of the year." },
    { id: "anniversary", month: 12, span: 1,  label: "Wedding anniversary",     when: "december 28",           icon: "🎄", text: "December 28, the date we got married, in the snow on top of an overlook in Grand Teton National Park. We always do something to mark it." },
  ];

  const [activeId, setActiveId] = useState(traditions[0].id);
  const active = traditions.find(t => t.id === activeId) || traditions[0];
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

  return (
    <section className="chapter" data-screen-label="05 Traditions" id="chapter-traditions" style={{ background: "var(--bg-soft)" }}>
      <div style={{ width: "100%", maxWidth: "1100px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(1.5rem, 4vh, 3rem)" }}>
          <h2 className="display display-lg" style={{ maxWidth: "18ch" }}>Traditions we keep.</h2>
        </Reveal>

        {/* Detail panel — photo + blurb */}
        <Reveal delay={1}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(1.5rem, 4vw, 3rem)", alignItems: "center", marginBottom: "clamp(2rem, 5vh, 3.5rem)" }} className="trad-detail">
            <div key={active.id + "-photo"} style={{ animation: "tradFade 420ms ease" }}>
              <Photo label={active.label.toLowerCase()} aspect="5/4" />
            </div>
            <div key={active.id + "-text"} style={{ animation: "tradFade 420ms ease 60ms both" }}>
              <div className="eyebrow" style={{ fontSize: "0.7rem", color: "var(--accent)", marginBottom: "0.75rem", letterSpacing: "0.12em" }}>{active.when}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.75rem, 3.2vw, 2.4rem)", lineHeight: 1.1, marginBottom: "1rem" }}>
                <span style={{ marginRight: "0.5em" }}>{active.icon}</span>{active.label}
              </div>
              <p className="prose" style={{ fontSize: "1.02rem", maxWidth: "32rem" }}>{active.text}</p>
            </div>
          </div>
        </Reveal>

        {/* Month ruler */}
        <Reveal delay={2}>
          <div style={{ position: "relative", marginTop: "1rem" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
              {months.map((m, i) => (
                <div key={m} style={{
                  textAlign: "center",
                  fontFamily: "var(--font-ui)",
                  fontSize: "0.68rem",
                  letterSpacing: "0.1em",
                  color: "var(--ink-soft)",
                  padding: "0.55rem 0",
                  borderRight: i < 11 ? "1px solid var(--rule)" : "none",
                  textTransform: "uppercase",
                }}>{m}</div>
              ))}
            </div>

            {/* Tradition rows */}
            <div style={{ position: "relative", padding: "0.75rem 0" }}>
              {traditions.map((t, i) => {
                const isActive = t.id === activeId;
                const left = ((t.month - 1) / 12) * 100;
                const width = (t.span / 12) * 100;
                const isBar = t.span > 1;
                return (
                  <button
                    key={t.id}
                    onClick={() => setActiveId(t.id)}
                    style={{
                      position: "relative",
                      display: "block",
                      width: "100%",
                      background: "transparent",
                      border: "none",
                      padding: "0.3rem 0",
                      textAlign: "left",
                      cursor: "pointer",
                      fontFamily: "var(--font-ui)",
                    }}
                  >
                    <div style={{ position: "relative", height: "28px" }}>
                      {/* Background track */}
                      <div style={{ position: "absolute", left: 0, right: 0, top: "50%", height: 1, background: "var(--rule)", opacity: 0.5 }} />
                      {/* Multi-month bar OR single-month icon */}
                      {isBar ? (
                        <div
                          style={{
                            position: "absolute",
                            left: `${left}%`,
                            width: `${width}%`,
                            top: "50%",
                            transform: "translateY(-50%)",
                            display: "inline-flex",
                            alignItems: "center",
                            gap: "0.5rem",
                            padding: "0.3rem 0.7rem",
                            background: isActive ? "var(--accent)" : "var(--bg)",
                            color: isActive ? "#fff" : "var(--ink)",
                            border: `1px solid ${isActive ? "var(--accent)" : "var(--rule)"}`,
                            borderRadius: "999px",
                            fontSize: "0.78rem",
                            fontWeight: 500,
                            whiteSpace: "nowrap",
                            boxShadow: isActive ? "0 4px 16px -6px rgba(0,0,0,0.3)" : "none",
                            transition: "all 220ms",
                            letterSpacing: "0.02em",
                          }}
                        >
                          <span style={{ fontSize: "0.95rem", lineHeight: 1 }}>{t.icon}</span>
                          <span>{t.label}</span>
                        </div>
                      ) : (
                        <div
                          title={t.label}
                          style={{
                            position: "absolute",
                            left: `calc(${left}% + ${100 / 12 / 2}%)`,
                            top: "50%",
                            transform: `translate(-50%, -50%) scale(${isActive ? 1.15 : 1})`,
                            width: "30px",
                            height: "30px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            fontSize: "1.15rem",
                            lineHeight: 1,
                            background: isActive ? "var(--accent)" : "var(--bg)",
                            border: `1px solid ${isActive ? "var(--accent)" : "var(--rule)"}`,
                            borderRadius: "50%",
                            boxShadow: isActive ? "0 4px 14px -4px rgba(0,0,0,0.35)" : "none",
                            transition: "all 220ms",
                          }}
                        >
                          <span style={{ filter: isActive ? "none" : "none" }}>{t.icon}</span>
                        </div>
                      )}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        </Reveal>

        <div style={{ marginTop: "1.25rem", fontFamily: "var(--font-ui)", fontSize: "0.72rem", color: "var(--ink-soft)", fontStyle: "italic", letterSpacing: "0.04em" }}>
          tap a tradition to see the story
        </div>
      </div>
      <style>{`
        @keyframes tradFade {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 800px) {
          .trad-detail { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 7: LEISURE =====
function ChapterLeisure() {
  const activities = [
    {
      id: "river",
      label: "The river",
      icon: "🛶",
      blurb: "Zach grew up canoeing and learned whitewater in college. He took Beth down the New River Gorge on an early date, and the river has been part of our life ever since. Idaho is a place you mostly see by boat. We saved up during a deployment and designed our raft, the 'Peaceful Easy Feeling,' for the family.",
      photos: [
        { src: "leisure/on the river/PXL_20250808_164255193.jpg", label: "the snake" },
        { src: "leisure/on the river/PXL_20260412_181950788.MP.jpg", label: "early season float" },
        { src: "leisure/on the river/PXL_20250830_183558073.MP.jpg", label: "on the water" },
      ],
    },
    {
      id: "biking",
      label: "Biking",
      icon: "🚴",
      blurb: "We bought a used tandem road bike when we moved in together, got engaged on it under a solar eclipse in a Nebraska cornfield, and rode 100 miles on it the weekend after. Today it is gravel rides along the river, foothills singletrack, and slow loops to ice cream.",
      photos: [
        { src: "leisure/biking/PXL_20221001_002508280.jpg", label: "a ride near boise" },
        { src: "leisure/biking/PXL_20231227_193056537.jpg", label: "winter ride" },
        { src: "leisure/biking/PXL_20220711_024311531.PORTRAIT.jpg", label: "summer loop" },
      ],
    },
    {
      id: "camping",
      label: "Camping",
      icon: "🏕️",
      blurb: "Idaho is mostly public land, and we get out for one or two short trips a year on top of an annual backpacking week in July, usually somewhere with a mountain lake, and often a hot spring on the way home. Camping is how we disconnect.",
      photos: [
        { src: "leisure/camping/PXL_20240704_234507779.MP.jpg", label: "july backpacking week" },
        { src: "leisure/camping/PXL_20231007_215120213.PORTRAIT.jpg", label: "fall trip" },
        { src: "leisure/camping/PXL_20220703_164401836.jpg", label: "camp" },
      ],
    },
    {
      id: "skiing",
      label: "Skiing",
      icon: "⛷️",
      blurb: "Bogus Basin is the nonprofit ski resort 45 minutes up the road, and we get out a few times a year, often on weeknights. Cross country skiing is how we get into the yurt every December, and we travel for a real ski trip with friends every couple of years.",
      photos: [
        { src: "leisure/skiing/PXL_20221125_222204537.jpg", label: "bogus" },
        { src: "leisure/skiing/PXL_20231216_185534860.MP.jpg", label: "ski day" },
        { src: null, label: "into the yurt" },
      ],
    },
    {
      id: "running",
      label: "Running",
      icon: "🏃",
      blurb: "We run a few times a week, often with Bergen in tow. Beth runs a half marathon every year and ran the New York City Marathon in 2021 for charity. Training together is one of the things that keeps us steady.",
      photos: [
        { src: "leisure/running/PXL_20211107_224715589.MP.jpg", label: "nyc marathon · 2021" },
        { src: "leisure/running/PXL_20240518_134027758.MP.jpg", label: "race weekend" },
        { src: "leisure/running/PXL_20240505_200731710.jpg", label: "out together" },
      ],
    },
    {
      id: "flying",
      label: "Flying",
      icon: "✈️",
      blurb: "Zach learned to fly from his dad as a teenager and is a flight instructor today. On Beth and Zach's second date, Zach put Beth in the left seat of a Cessna and had her take off. Once in a while we take a small plane up for a sightseeing flight with friends or family.",
      photos: [
        { src: "our_life_together/PXL_20240805_144617529.MP.jpg", label: "cockpit" },
        { src: "leisure/flying/PXL_20251005_163631927.jpg", label: "out for a flight" },
        { src: null, label: "with rich" },
      ],
    },
    {
      id: "traveling",
      label: "Traveling",
      icon: "🌍",
      blurb: "Every couple of years we plan a real trip somewhere new. So far that has included Norway, Switzerland, Peru, Australia, the South Pacific, and a long list of places in between.",
      photos: [
        { src: "leisure/traveling/PXL_20251231_111449002.jpg", label: "somewhere new" },
        { src: "leisure/traveling/PXL_20230821_233642542.PORTRAIT.jpg", label: "on the road" },
        { src: "leisure/traveling/PXL_20211106_194412621.jpg", label: "another trip" },
      ],
    },
    {
      id: "datenight",
      label: "Date night",
      icon: "🍴",
      blurb: "Most weeks we go out to a neighborhood spot. Burgers, the Thai place, the bar around the corner. Anniversaries get downtown reservations and dressed up versions of us.",
      photos: [
        { src: "leisure/date night/PXL_20231115_040308193.PORTRAIT.jpg", label: "out" },
        { src: null, label: "downtown" },
        { src: null, label: "the neighborhood spot" },
      ],
    },
    {
      id: "friends",
      label: "With friends",
      icon: "🍷",
      blurb: "A trivia night, a backyard grill, a campfire on the patio, a board game taken too seriously. One or two evenings most weeks belong to our crew.",
      photos: [
        { src: "friends/PXL_20250116_034659371.jpg", label: "the crew" },
        { src: null, label: "a long dinner" },
        { src: null, label: "porch night" },
      ],
    },
  ];

  const [activeId, setActiveId] = useState(activities[0].id);
  const active = activities.find(a => a.id === activeId) || activities[0];

  return (
    <section className="chapter" data-screen-label="05 Life" id="chapter-leisure">
      <div style={{ width: "100%", maxWidth: "1200px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(1.5rem, 4vh, 3rem)", maxWidth: "42rem" }}>
          <div className="eyebrow" style={{ marginBottom: "1rem" }}>Chapter 05 · Life together</div>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>How we spend our time.</h2>
          <p className="prose">
            How we spend our weekends, plus the weekday evenings that are good enough to remember. A child of ours would tag along to most of it before they were old enough to ask.
          </p>
        </Reveal>

        <Reveal delay={1}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: "0.5rem", marginBottom: "clamp(1.5rem, 4vh, 2.5rem)" }} className="leisure-tabs">
            {activities.map((a) => {
              const isActive = a.id === activeId;
              return (
                <button
                  key={a.id}
                  onClick={() => setActiveId(a.id)}
                  className={isActive ? "leisure-tab is-active" : "leisure-tab"}
                  style={{
                    background: isActive ? "var(--accent)" : "transparent",
                    color: isActive ? "#fff" : "var(--ink-soft)",
                    border: `1px solid ${isActive ? "var(--accent)" : "var(--rule)"}`,
                    borderRadius: "999px",
                    padding: "0.55rem 0.75rem",
                    fontFamily: "var(--font-ui)",
                    fontSize: "0.78rem",
                    fontWeight: 500,
                    letterSpacing: "0.02em",
                    cursor: "pointer",
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "0.45rem",
                    whiteSpace: "nowrap",
                    transition: "all 220ms",
                    boxShadow: isActive ? "0 4px 16px -6px rgba(0,0,0,0.3)" : "none",
                  }}
                >
                  <span style={{ fontSize: "0.95rem", lineHeight: 1 }}>{a.icon}</span>
                  <span>{a.label}</span>
                </button>
              );
            })}
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div key={active.id} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(1.5rem, 4vw, 3rem)", alignItems: "start", animation: "leisureFade 420ms ease" }} className="leisure-detail">
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gridTemplateRows: "auto auto", gap: "0.6rem" }} className="leisure-photos">
              <div style={{ gridColumn: "span 2" }}>
                <Photo label={active.photos[0].label} aspect="16/10" src={active.photos[0].src} />
              </div>
              <Photo label={active.photos[1].label} aspect="1/1" src={active.photos[1].src} />
              <Photo label={active.photos[2].label} aspect="1/1" src={active.photos[2].src} />
            </div>
            <div>
              <div className="eyebrow" style={{ fontSize: "0.7rem", color: "var(--accent)", marginBottom: "0.75rem", letterSpacing: "0.12em" }}>{active.icon} · {active.label}</div>
              <p className="prose" style={{ fontSize: "1.02rem", maxWidth: "32rem" }}>{active.blurb}</p>
            </div>
          </div>
        </Reveal>

        <div style={{ marginTop: "1.25rem", fontFamily: "var(--font-ui)", fontSize: "0.72rem", color: "var(--ink-soft)", fontStyle: "italic", letterSpacing: "0.04em" }}>
          tap a category to see what we mean
        </div>
      </div>
      <style>{`
        @keyframes leisureFade {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .leisure-tab:hover { border-color: var(--ink-soft); color: var(--ink); }
        .leisure-tab.is-active:hover { color: #fff; border-color: var(--accent); }
        @media (max-width: 900px) {
          .leisure-tabs { grid-template-columns: repeat(3, 1fr) !important; }
          .leisure-detail { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 520px) {
          .leisure-tabs { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 8: PARENTHOOD =====
function ChapterParenthood() {
  return (
    <section className="chapter" data-screen-label="06 Parenthood" id="chapter-parenthood">
      <div style={{ width: "100%", maxWidth: "1200px", margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "clamp(2rem, 5vw, 5rem)", alignItems: "center" }} className="par-layout">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: "1rem" }}>Chapter 06</div>
          <h2 className="display display-lg" style={{ marginBottom: "1.5rem" }}>
            What parenthood<br/>means to us.
          </h2>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            The breakfast you cook, the question you sit with, the tenth reading of the same book. We want to be the kind of parents who show up for the small things, because we believe the small things turn out to be the whole thing.
          </p>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            Beth grew up in a family that pays close attention. She will be the parent who builds the structure: the routines, the gentle boundaries, the thank you note habits, the steady checking in. She is also the one who notices a half second before anyone else when something is off. Zach grew up outside, with a dad who taught him to fly a small plane in high school. He will be the parent who teaches a kid to fix a flat, set up a tent, work a hard problem until it gives, and trust their own hands. Both of us want a child who knows their voice is heard and their curiosity belongs.
          </p>
          <p className="prose" style={{ marginBottom: "1.1em" }}>
            We will be honest about adoption from the start. Our child will know their story, every part of it, and will know that the people who placed them are part of who they are, not a chapter that closed. Adoption begins with loss; we won't pretend otherwise, and we won't dress it up. Whatever shape the relationship takes with you, we want our child to grow up knowing they have two families, both real.
          </p>
          <p className="prose">
            And we want to raise a person, not a project. We hope to learn who our child is rather than aim them at who we expected. The values we lead with (honesty, gratitude, hospitality, showing up) are the values we hope to pass on, by living them.
          </p>
        </Reveal>
        <Reveal delay={2}>
          <Photo label="beth with her nieces" aspect="4/5" />
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .par-layout { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 8: HOPES =====
function ChapterHopes() {
  const hopes = [
    "To know, from day one, how completely they are loved, by us and by the people they came from.",
    "To feel safe in their home, in their body, and in their story.",
    "To be curious. To ask hard questions and be answered honestly.",
    "To have the room to fail, and the hands to get back up.",
    "To grow up around big tables: Sunday dinners with grandparents, Friday nights with our crew, holiday weeks with cousins.",
    "To know every part of where they came from, and to know it as something to be proud of.",
    "To have adventures. The big kind, and the kind where you fall asleep in the back of the car.",
    "To grow into exactly the person they are, not the person we expected.",
  ];
  return (
    <section className="chapter" data-screen-label="06 Hopes" id="chapter-hopes" style={{ background: "var(--bg-soft)" }}>
      <div style={{ width: "100%", maxWidth: "900px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)" }}>
          <h2 className="display display-lg">Our hopes for them.</h2>
        </Reveal>
        <ol style={{ listStyle: "none", padding: 0, counterReset: "hope" }}>
          {hopes.map((h, i) => (
            <Reveal key={i} delay={Math.min((i % 4) + 1, 4)} as="li" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "2rem", padding: "1.5rem 0", borderTop: "1px solid var(--rule)", alignItems: "baseline" }}>
              <span className="eyebrow" style={{ fontSize: "0.7rem", color: "var(--accent)", minWidth: "2rem" }}>{String(i + 1).padStart(2, "0")}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.1rem, 2vw, 1.5rem)", lineHeight: 1.35, color: "var(--ink)" }}>{h}</span>
            </Reveal>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ===== CHAPTER 9: A DAY =====
function ChapterDay() {
  const moments = [
    { time: "6:45 AM", title: "Slow start",            text: "Coffee in the kitchen. Bergen waiting at the back door, sometimes with a sock he stole from the hamper." },
    { time: "8:30 AM", title: "Off to work",           text: "Beth drives to the office; once we have a baby she'll work from home most days. Zach heads to the studio." },
    { time: "4:00 PM", title: "Beth home, dog walked", text: "A run or a walk along the river with Bergen. The work emails stay closed for the hour." },
    { time: "6:30 PM", title: "Dinner together",       text: "One of us cooks. Music on, phones down. Some weeknights it's trivia at the bar around the corner; some weeknights our friend Kelsi comes over for dinner and Survivor." },
    { time: "8:30 PM", title: "After dinner",          text: "Zach on the guitar, Beth with a book or a long phone call with her sister. Some nights it's a workout. Most nights it's something quieter." },
    { time: "10:30 PM", title: "Goodnight",            text: "The last walk for Bergen, the back door checked, the kitchen light off. Tomorrow is coming." },
  ];
  return (
    <section className="chapter" data-screen-label="05 Day" id="chapter-day">
      <div style={{ width: "100%", maxWidth: "1200px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)", maxWidth: "38rem" }}>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>A weekday, top to bottom.</h2>
          <p className="prose">
            What our days look like now, and what we would be folding a child into.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--gap-md)" }} className="day-grid">
          {moments.map((m, i) => (
            <Reveal key={m.time} delay={Math.min((i % 4) + 1, 4)}>
              <Photo label={m.title.toLowerCase()} aspect="4/3" style={{ marginBottom: "1rem" }} />
              <div style={{ fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace", fontSize: "0.75rem", color: "var(--accent)", marginBottom: "0.5rem", letterSpacing: "0.05em" }}>{m.time}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "1.25rem", marginBottom: "0.5rem" }}>{m.title}</div>
              <p className="prose" style={{ fontSize: "0.9rem" }}>{m.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .day-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .day-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 10: VALUES =====
function ChapterValues() {
  const values = [
    { word: "Honesty",     text: "We tell each other the truth, gently and consistently. We will tell our child the truth about everything: about us, about adoption, about the hard things. Especially about the hard things." },
    { word: "Community",   text: "We believe in the village. Our parents, Beth's sister, our crew, the kids on the street. A child grows best surrounded by adults who know them, and we are lucky to have those adults already." },
    { word: "Curiosity",   text: "We would rather ask than assume, about a problem, a person, a place. We hope to raise a child who is more interested in figuring things out than in being right." },
    { word: "Hospitality", text: "Welcome people in. Bring soup. Write thank you notes. Beth's family taught us this and we lean on it constantly." },
    { word: "Faith",       text: "A quiet faith. More a sense of gratitude and wonder than a set of rules. We try to live it through how we treat people, and we would want a child to find their own path through it without our thumb on the scale." },
    { word: "Adventure",   text: "Outside is where we go to be honest with each other. We hope to share the rivers, the mountains, the long drives, and the campfires, and we hope a child decides for themselves which parts of it speak to them." },
  ];
  return (
    <section className="chapter" data-screen-label="05 Values" id="chapter-values" style={{ background: "var(--bg-soft)" }}>
      <div style={{ width: "100%", maxWidth: "1100px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)" }}>
          <h2 className="display display-lg">What we value.</h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 clamp(2rem, 5vw, 5rem)" }} className="val-grid">
          {values.map((v, i) => (
            <Reveal key={v.word} delay={Math.min((i % 4) + 1, 4)} style={{ padding: "var(--gap-md) 0", borderTop: "1px solid var(--rule)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.75rem, 3vw, 2.25rem)", marginBottom: "0.75rem", color: "var(--accent)" }}>{v.word}</div>
              <p className="prose" style={{ fontSize: "0.95rem" }}>{v.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .val-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 11: OUR LIFE =====
function ChapterLife() {
  return (
    <section className="chapter" data-screen-label="05 Life" id="chapter-life">
      <div style={{ width: "100%", maxWidth: "1300px", margin: "0 auto" }}>
        <Reveal style={{ marginBottom: "clamp(2rem, 5vh, 4rem)", maxWidth: "40rem" }}>
          <h2 className="display display-lg" style={{ marginBottom: "1.25rem" }}>Our life, together.</h2>
          <p className="prose">
            A few glimpses of the ten years we've built so far. The version of our life a child of ours would land in the middle of.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gridAutoRows: "min(22vh, 200px)", gap: "var(--gap-sm)" }} className="life-grid">
          <Reveal delay={1} style={{ gridColumn: "span 2", gridRow: "span 2" }}><Photo label="us, traveling" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={2} style={{ gridColumn: "span 2", gridRow: "span 1" }}><Photo label="beth, on a run" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={3} style={{ gridColumn: "span 2", gridRow: "span 1" }}><Photo label="zach, in the cockpit" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={4} style={{ gridColumn: "span 2", gridRow: "span 1" }}><Photo label="bergen at the river" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={1} style={{ gridColumn: "span 2", gridRow: "span 1" }}><Photo label="with our crew" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={2} style={{ gridColumn: "span 3", gridRow: "span 1" }}><Photo label="wedding day · the tetons, december 2017" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
          <Reveal delay={3} style={{ gridColumn: "span 3", gridRow: "span 1" }}><Photo label="a summer evening at home" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} /></Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .life-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .life-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
        }
      `}</style>
    </section>
  );
}

// ===== CHAPTER 12: CLOSING =====
function ChapterClose() {
  return (
    <section className="chapter" data-screen-label="07 Close" id="chapter-close" style={{ background: "var(--bg-soft)", alignItems: "center", justifyContent: "center" }}>
      <div style={{ width: "100%", maxWidth: "40rem", textAlign: "center" }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: "1.5rem" }}>With love</div>
          <h2 className="display display-xl" style={{ marginBottom: "2rem", lineHeight: 1.05 }}>
            Thank you<br/>for reading our story.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="prose" style={{ margin: "0 auto 1.25em" }}>
            Whatever you decide, we are wishing you peace, clarity, and every good thing on the road ahead.
          </p>
          <p className="prose" style={{ margin: "0 auto" }}>
            If you'd like to know more, or to meet us, your agency contact can arrange whatever you're comfortable with: a letter, a call, a visit. There's no rush and no expectation.
          </p>
        </Reveal>
        <Reveal delay={3}>
          <div style={{ marginTop: "clamp(2.5rem, 6vh, 4rem)", paddingTop: "var(--gap-md)", borderTop: "1px solid var(--rule)", display: "inline-block" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.5rem, 3vw, 2rem)", fontStyle: "italic" }}>
              Beth & Zach
            </div>
            <div className="eyebrow" style={{ marginTop: "0.5rem", fontSize: "0.65rem" }}>April 2026</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  ChapterLetter, ChapterAbout, ChapterStronger,
  ChapterHome, ChapterFamily, ChapterFriends, ChapterTraditions,
  ChapterLeisure, ChapterParenthood, ChapterHopes, ChapterDay,
  ChapterValues, ChapterLife, ChapterClose,
  Reveal, Photo, useReveal,
});
