/* All sections beneath the hero.
   Each section is a self-contained component appended to window. */

/* ─────────────────────────────────────────────────────────────────────
   Banner — full-bleed italic divider band
   ───────────────────────────────────────────────────────────────────── */
function Banner({ tone = 'olive', children }) {
  const cls = `banner banner--${tone}`;
  return <div className={cls} style={{ fontSize: "40px", fontFamily: "RandomHandwritten", background: "rgb(161, 147, 14)", color: "rgb(193, 193, 25)" }}>{children}</div>;
}
window.Banner = Banner;


/* ─────────────────────────────────────────────────────────────────────
   Our Story — alternating photo/copy + Chavela pull quote
   ───────────────────────────────────────────────────────────────────── */
function OurStory() {
  return (
    <section id="story" data-screen-label="02 our story" style={{
      padding: 'var(--section-y) var(--gutter)',
      background: 'var(--parchment)', backgroundColor: "rgb(79, 26, 42)"
    }}>
      {/* Row 1 — image left, copy right (40 / 60) */}
      <div className="r-2col" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)',
        gap: 'clamp(40px, 6vw, 100px)',
        alignItems: 'center',
        marginBottom: 'clamp(80px, 10vw, 140px)'
      }}>
        <div className="letter-photos" style={{ display: 'grid', gap: 'clamp(20px, 2.5vw, 36px)', alignContent: 'center' }}>
          <div className="photo lp-a" style={{ aspectRatio: '4 / 5' }}>
            <img src="assets/photos/syd-andres.png" alt="Sydney and Andrés" />
          </div>
          <div className="photo lp-b" style={{ aspectRatio: '4 / 5' }}>
            <img src="assets/photos/proposal-laugh.png" alt="Sydney and Andrés laughing" />
          </div>
        </div>
        <div style={{ maxWidth: 'var(--measure)' }}>
          <div className="eyebrow" style={{ marginBottom: 18, color: "rgb(251, 131, 101)" }}>To our dearest friends and family</div>
          <p style={{ lineHeight: 2.1, marginTop: 0, fontSize: "16px", color: "rgb(205, 109, 94)" }}>For the past three and a half years, we've been building our life together and now we're getting married! You have each played a meaningful part in our lives, and we feel incredibly lucky to celebrate this moment with you on May 1, 2027 in <span style={{ letterSpacing: "0.18px" }}>Tepoztlán</span>.



          </p>
          <p style={{ lineHeight: 2.1, fontSize: "16px", color: "rgb(205, 109, 94)" }}>Choosing to celebrate in Mexico was an easy decision for us. Andrés was born and raised in Monterrey, and Sydney grew up surrounded by Mexican art and culture through her grandfather, so honoring that connection felt natural to us. While Tepoztlán is its own world, its dramatic landscape felt like a subtle nod to the mountains in Andrés' hometown.</p>
          <p style={{ lineHeight: 2.1, fontSize: "16px", color: "rgb(205, 109, 94)" }}>We discovered Tepoztlán together and instantly fell in love with it. The enchanting town has a beautiful relationship with the land, from its mountains and agriculture to its food and sense of community. There’s a feeling there that everything is connected, and that meals, landscapes, and gatherings are all something to be grateful for. That spirit felt like the perfect place to begin this next chapter. Surrounded by the people we love, in a place that reminds us to be present, grateful, and rooted in something bigger than ourselves. 

          </p>
          <p style={{ lineHeight: 2.1, fontSize: "16px", color: "rgb(205, 109, 94)" }}>Here on our wedding website, you’ll find details about the weekend, travel, accommodations, and things to explore while you’re in town. We are so grateful for the effort many of you will make to be there, and we cannot wait to share this place and this moment with you.</p>
          <p style={{ lineHeight: 2.1, fontSize: "16px", color: "rgb(205, 109, 94)" }}>Con todo nuestro amor,<br />Sydney &amp; Andrés</p>
        </div>
      </div>

      {/* Full-width photo — walking beneath the oaks */}
      <div className="photo" style={{ aspectRatio: '21 / 9', marginBottom: 'clamp(80px, 10vw, 140px)' }}>
        <img src="assets/photos/oak-walk.jpg" alt="Sydney and Andrés walking hand in hand beneath an oak tree" loading="lazy" style={{ objectPosition: '50% 60%' }} />
      </div>

      {/* Photo gallery — us, over the years */}
      <div style={{ marginBottom: 'clamp(56px, 7vw, 100px)' }}>
        <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 'clamp(28px, 4vw, 52px)', color: "rgb(251, 131, 101)" }}>Us, over the years</div>
        <div className="home-gallery">
          <figure><img src="assets/gallery/g01.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g02.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g03.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g04.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g28.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g06.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g07.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g08.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g09.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g10.jpg" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g15.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g12.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g13.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g14.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g11.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g16.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g17.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g20.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g19.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g21.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g25.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g23.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g24.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g22.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g26.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g27.webp" alt="Sydney and Andrés" loading="lazy" /></figure>
          <figure><img src="assets/gallery/g29.jpg" alt="Family and friends gathered at dusk" loading="lazy" /></figure>
        </div>
      </div>

      {/* Pull quote — Chavela (closes the page) */}
      <div style={{
        display: 'flex', justifyContent: 'center',
        margin: 'clamp(40px, 6vw, 80px) auto 0'
      }}>
        <blockquote className="pullquote" style={{ textAlign: 'left', fontFamily: 'var(--font-display)', fontSize: "50px", color: "rgb(240, 232, 208)" }}>
          &ldquo;Quise vivir, y aquí estoy, viviendo.&rdquo;
          <cite style={{ color: "rgb(145, 76, 86)" }}>Chavela Vargas · Casa Chavela, Tepoztlán</cite>
        </blockquote>
      </div>
    </section>);

}
window.OurStory = OurStory;


/* ─────────────────────────────────────────────────────────────────────
   WeekendDays — three day panels (Parchment / Pine Teal / Olive 2)
   ───────────────────────────────────────────────────────────────────── */
function WeekendDays() {
  const { poolOK } = React.useContext(window.AccessContext);
  return (
    <section id="weekend" data-screen-label="03 the weekend" style={{ background: 'var(--parchment)' }}>
      <FridayPanel />
      

      <SaturdayPanel />
      

      {poolOK ? <SundayPanel /> : null}
      
    </section>);

}
window.WeekendDays = WeekendDays;

/* ─── Each weekend day is its OWN component so its colors & fonts are edited
   independently. Per-day visuals live as inline styles on that day's elements;
   shared defaults (fonts, etc.) come from .day-panel rules in styles.css. ─── */

function FridayPanel() {
  const ruleColor = 'color-mix(in srgb, var(--olive) 35%, transparent)';
  const items = [
  ['TIME', '5pm - 9pm | Join anytime'],
  ['LOCATION', 'Carretera Cuernavaca-Tepoztlán Cazahuatla, 62500 Tepoztlán, Mor., Mexico'],
  ['ATTIRE', 'More details to come...stay tuned'],
  ['TRANSPORT', 'More details to come...stay tuned']];
  return (
    <div id="weekend-day-friday" className="day-panel" style={{ padding: 'var(--section-y) var(--gutter)', backgroundColor: "rgb(240, 232, 208)" }}>
      <div className="r-2col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(40px, 6vw, 100px)', alignItems: 'center', maxWidth: 1480, margin: '0 auto', direction: 'ltr', width: "1007px" }}>
        <div className="photo" style={{ aspectRatio: '4 / 5', direction: 'ltr' }}>
          <img src="assets/photos/dilao-corazon.png" alt="Rompehielos - Las Nubes Dilao" />
        </div>
        <div style={{ direction: 'ltr' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginTop: 16, marginBottom: 0 }}>
            <span className="day-label" style={{ color: "rgb(211, 88, 60)" }}>Friday</span>
          </div>
          <div className="caps day-date" style={{ marginBottom: 12, color: "#43192A" }}>April 30, 2027</div>
          <h3 className="subhead day-title" style={{ margin: '0 0 12px', color: "rgb(67, 25, 42)" }}>Rompehielos - Las Nubes de Dilao</h3>
          <div className="day-kicker" style={{ marginBottom: 24, color: "rgb(251, 131, 101)" }}>the ice breaker</div>
          <p className="day-body" style={{ lineHeight: 2.05, maxWidth: '52ch', margin: '0 0 32px', color: "rgb(125, 36, 31)" }}>Start the weekend celebrations with an evening of art, nature, and connection at Dilao. Surrounded by the landscape that makes Tepoztlán so special, we’ll gather for drinks, canapés, and a fun welcome before the wedding day. We’ll be providing two drinks per guest and light bites to start; the bar and kitchen will remain open for anyone who would like to order additional food or drinks throughout the evening.</p>
          <div style={{ borderTop: `1px solid ${ruleColor}` }}>
      {items.map(([time, what], i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr', gap: 24,
              padding: '18px 0', borderBottom: `1px solid ${ruleColor}`, alignItems: 'baseline'
            }}>
        <div className="day-time" style={{ color: "rgb(67, 25, 42)" }}>{time}</div>
        <div className="day-what" style={{ lineHeight: 1.7, color: "rgb(101, 41, 49)" }}>{typeof what === 'string' && what.indexOf('More details to come') !== -1 ? <i className="tbd" style={{ color: "rgb(125, 36, 31)" }}>{what}</i> : what}</div>
      </div>
            )}
    </div>
        </div>
      </div>
    </div>);
}
window.FridayPanel = FridayPanel;

function SaturdayPanel() {
  const ruleColor = 'color-mix(in srgb, var(--parchment) 30%, transparent)';
  const items = [
  ['TIME', 'More details to come...stay tuned'],
  ['LOCATION', 'Carretera Federal Tepoztlán – Cuernavaca, km 15.3, 62520 Tepoztlán, Mor., Mexico'],
  ['ATTIRE', 'More details to come...stay tuned'],
  ['TRANSPORT', 'More details to come...stay tuned']];
  return (
    <div id="weekend-day-saturday" className="day-panel" style={{ padding: 'var(--section-y) var(--gutter)', backgroundColor: "rgb(67, 25, 42)" }}>
      <div className="r-2col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(40px, 6vw, 100px)', alignItems: 'center', maxWidth: 1480, margin: '0 auto', direction: 'rtl', width: "1007px" }}>
        <div className="photo" style={{ aspectRatio: '4 / 5', direction: 'ltr' }}>
          <img src="assets/photos/casa-chavela-page.png" alt="La Boda - Casa Chavela" />
        </div>
        <div style={{ direction: 'ltr' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginTop: 16, marginBottom: 0 }}>
            <span className="day-label" style={{ color: "rgb(251, 131, 101)" }}>Saturday</span>
          </div>
          <div className="caps day-date" style={{ marginBottom: 12, color: "rgba(240, 232, 208, 0.96)" }}>May 1, 2027</div>
          <h3 className="subhead day-title" style={{ margin: '0 0 12px', color: "rgba(240, 232, 208, 0.96)" }}>La Boda - Casa Chavela</h3>
          <div className="day-kicker" style={{ marginBottom: 24, color: "rgb(232, 72, 23)" }}>we do</div>
          <p className="day-body" style={{ lineHeight: 2.05, maxWidth: '52ch', margin: '0 0 32px', color: "rgba(240, 232, 208, 0.96)" }}>Our wedding will take place at Casa Chavela, a beautiful garden venue tucked into the landscape of Tepoztlán and once home to the iconic Mexican singer Chavela Vargas. The evening will begin with our ceremony, followed by cocktail hour, dinner, and a celebration into the night.</p>
          <div style={{ borderTop: `1px solid ${ruleColor}` }}>
      {items.map(([time, what], i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr', gap: 24,
              padding: '18px 0', borderBottom: `1px solid ${ruleColor}`, alignItems: 'baseline'
            }}>
        <div className="day-time" style={{ color: "rgb(232, 72, 23)" }}>{time}</div>
        <div className="day-what" style={{ lineHeight: 1.7, color: "rgba(240, 232, 208, 0.96)" }}>{typeof what === 'string' && what.indexOf('More details to come') !== -1 ? <i className="tbd">{what}</i> : what}</div>
      </div>
            )}
    </div>
        </div>
      </div>
    </div>);
}
window.SaturdayPanel = SaturdayPanel;

function SundayPanel() {
  const ruleColor = 'color-mix(in srgb, var(--parchment) 30%, transparent)';
  const items = [
  ['TIME', 'More details to come...stay tuned'],
  ['LOCATION', 'Carretera Federal Tepoztlán – Cuernavaca, km 15.3, 62520 Tepoztlán, Mor., Mexico'],
  ['ATTIRE', 'Pool attire & swimwear'],
  ['TRANSPORT', 'More details to come...stay tuned']];
  return (
    <div id="weekend-day-sunday" className="day-panel" style={{ padding: 'var(--section-y) var(--gutter)', backgroundColor: "rgb(194, 172, 0)" }}>
      <div className="r-2col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(40px, 6vw, 100px)', alignItems: 'center', maxWidth: 1480, margin: '0 auto', direction: 'ltr', width: "1007px" }}>
        <div className="photo" style={{ aspectRatio: '4 / 5', direction: 'ltr' }}>
          <img src="assets/photos/pool-drinks.png" alt="La Tornaboda - Casa Chavela Pool" />
        </div>
        <div style={{ direction: 'ltr' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginTop: 16, marginBottom: 0 }}>
            <span className="day-label" style={{ color: "rgb(224, 239, 36)" }}>Sunday</span>
          </div>
          <div className="caps day-date" style={{ marginBottom: 12, color: "rgba(240, 232, 208, 0.96)" }}>May 2, 2027</div>
          <h3 className="subhead day-title" style={{ margin: '0 0 12px', color: "rgb(252, 241, 218)" }}>La Tornaboda - Casa Chavela Pool</h3>
          <div className="day-kicker" style={{ marginBottom: 24, color: "rgb(205, 109, 94)" }}>the relax</div>
          <p className="day-body" style={{ lineHeight: 2.05, maxWidth: '52ch', margin: '0 0 32px', color: "rgba(240, 232, 208, 0.96)" }}>Join us Sunday after the wedding for a relaxed afternoon by the pool. We’ll be recovering, recapping, and soaking up a little more time together with drinks, music, and fresh pizzas from the onsite pizza oven.</p>
          <div style={{ borderTop: `1px solid ${ruleColor}` }}>
      {items.map(([time, what], i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr', gap: 24,
              padding: '18px 0', borderBottom: `1px solid ${ruleColor}`, alignItems: 'baseline'
            }}>
        <div className="day-time" style={{ color: "rgb(67, 25, 42)" }}>{time}</div>
        <div className="day-what" style={{ lineHeight: 1.7, color: "rgba(240, 232, 208, 0.96)" }}>{typeof what === 'string' && what.indexOf('More details to come') !== -1 ? <i className="tbd">{what}</i> : what}</div>
      </div>
            )}
    </div>
        </div>
      </div>
    </div>);
}
window.SundayPanel = SundayPanel;


/* ─────────────────────────────────────────────────────────────────────
   ExploreTepoztlán — MCG-style collage grid, varied widths
   ───────────────────────────────────────────────────────────────────── */
function TepoztlanHistory() {
  return (
    <section id="about-tepoztlan" data-screen-label="03 about tepoztlán" style={{
      padding: 'var(--section-y) var(--gutter)',
      background: 'var(--parchment-warm)', backgroundColor: "rgb(65, 0, 22)"
    }}>
      <div className="r-2col" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
        gap: 'clamp(40px, 6vw, 100px)',
        alignItems: 'center',
        maxWidth: 1480, margin: '0 auto'
      }}>
        {/* Left — prose */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 14, color: "rgb(229, 43, 20)" }}>a little history</div>
          <h2 className="subhead" style={{
            fontSize: 'clamp(40px, 5vw, 76px)',

            margin: '0 0 28px',
            maxWidth: '15ch', color: "rgb(211, 88, 60)"
          }}>
            <span style={{ fontFamily: 'RandomHandwritten' }}>A town</span>
            {' '}
            <span style={{ fontStyle: 'italic', fontSize: "48px", color: "rgb(211, 88, 60)", fontFamily: "RandomHandwritten" }}>between</span>
            {' '}
            <span style={{ fontFamily: 'RandomHandwritten' }}>the mountains</span>
          </h2>
          <p style={{

            fontSize: 17, lineHeight: 2.05,
            maxWidth: 'var(--measure)',
            margin: '0 0 22px', color: "rgb(240, 232, 208)"
          }}>Tepoztlán is a mountain town rich with history, myth, and natural beauty. Set beneath the dramatic cliffs of El Tepozteco National Park, it has long been considered a sacred place and is believed to be the birthplace of Quetzalcóatl, the feathered serpent. Its colorful streets, lively market, and deep-rooted traditions are woven together with landmarks like the Ex-Convent of the Nativity, a 16th-century monastery that forms part of a UNESCO World Heritage listing.





          </p>
          <p style={{

            fontSize: 17, lineHeight: 2.05,
            maxWidth: 'var(--measure)',
            margin: 0, color: "rgb(240, 232, 208)"
          }}>Today, Tepoztlán remains one of Mexico’s beloved Pueblos Mágicos. A place where ancient history, art, food, and landscape all come together in a way that feels truly special.





          </p>
        </div>

        {/* Right — inset photo */}
        <div className="photo photo--inset" style={{ aspectRatio: '4 / 5' }}>
          <div className="photo" style={{ height: '100%' }}>
            <img src="assets/photos/street.png" alt="A cobbled street in Tepoztlán with bougainvillea and the mountains beyond" />
          </div>
        </div>
      </div>
    </section>);

}
window.TepoztlanHistory = TepoztlanHistory;

function ExploreTepoztlan({ subpage = false }) {
  const items = [
  { tag: 'eat', name: 'Parcela', note: 'Garden, fire, long lunches.', img: 'assets/photos/parcela.png', ratio: '4 / 5', span: 4, offset: 0, map: 'https://maps.app.goo.gl/pwSeeNHajv5PoAd19' },
  { tag: 'wander', name: 'El Tepozteco', note: 'A two-hour climb to the pyramid above town.', img: 'assets/photos/mountains-2.png', ratio: '3 / 4', span: 4, offset: 48, map: 'https://maps.app.goo.gl/Tr5qu7wFCrgvjtXv7' },
  { tag: 'eat', name: 'Margarita Concept  Garden', note: 'Garden cocktails, in the actual garden.', img: 'assets/photos/mcg-greenhouse.png', ratio: '4 / 3', span: 4, offset: 0, map: 'https://maps.app.goo.gl/B8MzfgfVPZgh1M8e6' },
  { tag: 'stay or eat', name: 'Amomoxtli', note: 'Breakfast on the lawn, mountain behind.', img: 'assets/photos/amomoxtli-3.png', ratio: '3 / 2', span: 6, offset: 0, map: 'https://maps.app.goo.gl/qRED8F1hFiwwduvT9' },
  { tag: 'stay or eat', name: 'Casa Fernanda', note: 'Rooftop, cliff view, golden hour drinks.', img: 'assets/photos/casa-fernanda.png', ratio: '3 / 2', span: 6, offset: 56, map: 'https://maps.app.goo.gl/RXDydiySeYfkGy5z7' },
  { tag: 'wander', name: 'El Mercado', note: 'Sunday is the day. Bring cash, leave time.', img: 'assets/photos/market.png', ratio: '4 / 5', span: 4, offset: 0, map: 'https://maps.app.goo.gl/TvCs6S3M4E99LCZb7' },
  { tag: 'sip', name: 'El Bicho Bar', note: 'Mezcal flights and very dim light.', img: 'assets/photos/el-bicho-bar.png', ratio: '3 / 4', span: 4, offset: 48, map: 'https://maps.app.goo.gl/xYeofSuRLgVxF2nr7' },
  { tag: 'wander', name: 'Dilao', note: 'Open during the day to walk the sculptures.', img: 'assets/photos/dilao-cloud.png', ratio: '4 / 5', span: 4, offset: 0, map: 'https://maps.app.goo.gl/q7AiswrahW7BKGqX6' }];


  return (
    <section id="explore" data-screen-label="04 explore list" style={{
      padding: 'var(--section-y) var(--gutter)',
      background: 'var(--parchment)', backgroundColor: "rgb(160, 148, 36)"
    }}>
      <div style={{ textAlign: 'center', marginBottom: 'clamp(60px, 7vw, 110px)' }}>
        {subpage ? null : <div className="eyebrow" style={{ marginBottom: 14 }}>explore tepoztlán</div>}
        <h2 className="subhead" style={{
          fontSize: 'clamp(40px, 5.4vw, 84px)',
          color: 'var(--night-bordeaux)',
          maxWidth: '20ch', margin: '0 auto'
        }}>
          <span style={{ fontFamily: 'RandomHandwritten' }}>A short list,</span>
          {' '}
          <span style={{ fontStyle: 'italic', fontFamily: "LaBelleAurore", color: "rgb(252, 241, 218)", fontSize: "42px" }}>slowly</span>
          {' '}
          <span style={{ fontFamily: 'RandomHandwritten' }}>gathered.</span>
        </h2>
        <p style={{
          maxWidth: 'var(--measure-narrow)', margin: '24px auto 0',

          fontSize: 16, lineHeight: 1.95, color: "rgb(252, 241, 218)"
        }}>Places we love. Tepoztlán is full of little discoveries. You’ll find your own.

        </p>
      </div>

      <div className="r-collage" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: 'clamp(16px, 1.8vw, 28px)',
        alignItems: 'start',
        maxWidth: 1480, margin: '0 auto'
      }}>
        {items.map((it, i) =>
        <CollageCard key={i} {...it} />
        )}
      </div>
    </section>);

}
window.ExploreTepoztlan = ExploreTepoztlan;

function CollageCard({ tag, name, note, img, ratio, span, offset = 0, map }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      style={{ gridColumn: `span ${span}`, marginTop: offset }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      
      <div className="photo" style={{ aspectRatio: ratio, position: 'relative' }}>
        <img src={img} alt={name} />
        {/* Hover reveal */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to bottom, transparent 40%, rgba(65,0,22,0.75) 100%)',
          opacity: hover ? 1 : 0,
          transition: 'opacity 400ms var(--ease-walk)',
          pointerEvents: 'none'
        }} />
        <div style={{
          position: 'absolute', left: 18, right: 18, bottom: 18,
          color: 'var(--parchment)',
          opacity: hover ? 1 : 0,
          transform: hover ? 'translateY(0)' : 'translateY(8px)',
          transition: 'all 400ms var(--ease-walk)',
          pointerEvents: 'none'
        }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55 }}>{note}</div>
        </div>
      </div>
      <div style={{
        marginTop: 6,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16
      }}>
        <a
          href={map}
          target="_blank"
          rel="noopener noreferrer"
          className="subhead"
          style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(20px, 1.7vw, 28px)',
            color: 'var(--night-bordeaux)',
            textDecoration: 'none',
            display: 'inline-flex', alignItems: 'baseline', gap: 7
          }}>
          <span
            aria-hidden="true"
            style={{
              width: '0.6em', height: '0.9em', flex: '0 0 auto',
              alignSelf: 'center', position: 'relative', top: '-0.06em',
              display: 'inline-block',
              backgroundColor: hover ? '#e42b13' : '#410016',
              transition: 'background-color 300ms var(--ease-walk)',
              WebkitMaskImage: 'url(assets/location-pin.png)',
              maskImage: 'url(assets/location-pin.png)',
              WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
              WebkitMaskSize: 'contain', maskSize: 'contain',
              WebkitMaskPosition: 'center', maskPosition: 'center'
            }} />
          {name}
        </a>
        <div style={{
          fontFamily: 'var(--font-labels)',
          fontSize: 18, color: "rgb(224, 239, 36)"

        }}>{tag}</div>
      </div>
    </div>);

}


/* ─────────────────────────────────────────────────────────────────────
   TravelStay — practical logistics
   ───────────────────────────────────────────────────────────────────── */
function TravelStay({ subpage = false }) {
  const cells = [
  { kicker: 'getting here', title: 'Fly into CDMX',
    body: 'Fly into Benito Juárez International Airport (MEX) in Mexico City. Tepoztlán is about 90 minutes south by car. You’re welcome to rent a car but it is not necessary for the wedding weekend. We’ll be arranging shuttles — we’ll share the details closer to the date.' },
  { kicker: 'getting around', title: 'Taxis & drivers',
    body: 'The heart of Tepoztlán is lovely to explore on foot, but getting between hotels, restaurants, and venues often requires a quick ride. Local taxis or pre-arranged drivers will be the easiest way to get around.' },
  { kicker: 'climate', title: 'Warm days, cool nights',
    body: 'Tepoztlán sits in the valley of Morelos at about 1,700 m / 5,580 ft elevation, bringing warm days, cooler evenings, and beautiful views throughout town. Late April / early May averages highs around 28°C / 83°F and lows near 15°C / 59°F.' },
  { kicker: 'dress', title: 'For wandering',
    body: 'For exploring town, we recommend breathable clothing, comfortable shoes, and sun protection. Tepoztlán is full of cobblestone streets, hills, and places you’ll want to wander into.' }];


  return (
    <section id="travel" data-screen-label="05 travel" style={{
      padding: 'var(--section-y) var(--gutter)',
      background: 'var(--parchment-warm)', backgroundColor: "rgb(160, 148, 36)"
    }}>
      <div className="r-2col" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
        gap: 'clamp(40px, 6vw, 100px)',
        alignItems: 'start',
        maxWidth: 1480, margin: '0 auto'
      }}>
        {/* Left — barely-overlapping, offset inset photos */}
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column' }}>
          <div className="photo photo--inset" style={{ aspectRatio: '2 / 3', width: '94%', alignSelf: 'flex-start', transform: 'rotate(-1.5deg)', position: 'relative', zIndex: 1 }}>
            <div className="photo" style={{ height: '100%' }}>
              <img src="assets/photos/lemons.png" alt="Lemons" />
            </div>
          </div>
          <div className="photo photo--inset" style={{ aspectRatio: '2 / 3', width: '94%', alignSelf: 'flex-end', marginTop: '-4%', transform: 'rotate(1.75deg)', position: 'relative', zIndex: 2, boxShadow: '0 14px 40px rgba(40, 30, 8, 0.32)' }}>
            <div className="photo" style={{ height: '100%' }}>
              <img src="assets/photos/margarita-concept.png" alt="A garden table set for dinner with the mountain behind" />
            </div>
          </div>
        </div>

        {/* Right — header + cells */}
        <div>
          {subpage ? null : <div className="eyebrow" style={{ marginBottom: 14 }}>travel &amp; stay</div>}
          <h2 className="subhead" style={{
            fontSize: 'clamp(40px, 5.4vw, 76px)',

            margin: '0 0 28px',
            maxWidth: '14ch', color: "rgb(224, 239, 36)"
          }}>
            <span style={{ fontFamily: 'RandomHandwritten' }}>One weekend in a town meant to be savored.</span>{' '}<span style={{ fontFamily: 'LaBelleAurore', color: '#FCF1DA', fontSize: '48px' }}>slow down &amp; enjoy.</span>
          </h2>
          <p style={{

            fontSize: 17, lineHeight: 2.05,
            maxWidth: 'var(--measure)',
            margin: '0 0 40px', color: "rgb(87, 36, 60)"
          }}>We’ve put together a short list of what we know. Send us a note if anything is unclear.


          </p>

          <div className="r-facts" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            borderTop: '1px solid color-mix(in srgb, var(--olive) 40%, transparent)',
            borderLeft: '1px solid color-mix(in srgb, var(--olive) 40%, transparent)'
          }}>
            {cells.map((c, i) =>
            <div key={i} style={{
              padding: '28px 24px',
              borderRight: '1px solid color-mix(in srgb, var(--olive) 40%, transparent)',
              borderBottom: '1px solid color-mix(in srgb, var(--olive) 40%, transparent)'
            }}>
                <div className="eyebrow" style={{ fontSize: 17, marginBottom: 10, color: "rgb(224, 239, 36)" }}>{c.kicker}</div>
                <div style={{

                fontSize: 22, lineHeight: 1.2,

                marginBottom: 12, fontFamily: "LesEnfantsDuParadis", color: "rgb(87, 36, 60)"
              }}>{c.title}</div>
                <div style={{
                fontSize: 14, lineHeight: 1.85, color: "rgb(252, 241, 218)"

              }}>{c.body}</div>
              </div>)}
          </div>
        </div>
      </div>
    </section>);

}
window.TravelStay = TravelStay;


/* ─────────────────────────────────────────────────────────────────────
   WhereToStay — hotel recommendations grid (user fills photos + links)
   ───────────────────────────────────────────────────────────────────── */
function WhereToStay() {
  const hotels = [
  { slot: 'hotel-casa-fernanda', name: 'Casa Fernanda', href: 'https://www.casafernanda.com/habitaciones/',
    note: 'Boutique rooms, spa, and gardens in the heart of town.' },
  { slot: 'hotel-amomoxtli', name: 'Amomoxtli', href: 'https://amomoxtli.com/',
    note: 'Riverside luxury with mountain views and a celebrated restaurant.' },
  { slot: 'hotel-posada-tepozteco', name: 'Posada del Tepozteco', href: 'https://posadadeltepozteco.com.mx/',
    note: 'A classic hillside hotel with terraced gardens and a pool.' },
  { slot: 'hotel-buena-vibra', name: 'La Buena Vibra', href: 'https://hotelbuenavibra.com/en/home-english/',
    note: 'A tranquil retreat with pools, spa, and leafy grounds.' },
  { slot: 'hotel-organico', name: 'Orgánico Hotel Boutique Tepoztlán', href: 'https://www.organicohotelboutiquetepoz.com/',
    note: 'An eco-minded boutique stay close to the center.' },
  { slot: 'hotel-casa-del-angel', name: 'Hotel Casa del Ángel', href: 'https://hotelcasadelangel.com/',
    note: 'Cozy, well-located rooms a short walk from the plaza.' }];


  return (
    <section id="where-to-stay" data-screen-label="06 where to stay" style={{
      padding: 'var(--section-y) var(--gutter)',
      background: 'var(--parchment)', backgroundColor: "rgb(55, 8, 33)"
    }}>
      <div style={{ maxWidth: 1480, margin: '0 auto' }}>
        <div style={{ marginBottom: 'clamp(40px, 5vw, 72px)', maxWidth: 'var(--measure)' }}>
          <div className="eyebrow" style={{ marginBottom: 14, color: "rgb(169, 161, 53)" }}>where to stay</div>
          <h2 className="subhead" style={{
            fontSize: 'clamp(40px, 5.4vw, 76px)',

            margin: '0 0 24px',
            maxWidth: '16ch', color: "rgb(252, 241, 218)"
          }}>
            <span style={{ fontFamily: 'RandomHandwritten' }}>A few places</span>
            {' '}
            <span style={{ fontStyle: 'italic', fontFamily: "LaBelleAurore", color: "rgb(169, 161, 53)", fontSize: "42px" }}>we love</span>.
          </h2>
          <p style={{

            fontSize: 17, lineHeight: 2.05, margin: 0, color: "rgb(252, 241, 218)"
          }}>There is no shortage of great places to stay in Tepoztlán, but here are some of our favorites to get you started.</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'clamp(28px, 3.2vw, 52px)'
        }}>
          {hotels.map((h, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column' }}>
            <div className="photo photo--inset" style={{ aspectRatio: '4 / 3', marginBottom: 18 }}>
              <image-slot
                id={h.slot}
                shape="rounded"
                radius="2"
                placeholder={'Add a photo of ' + h.name}
                style={{ display: 'block', width: '100%', height: '100%' }}>
              </image-slot>
            </div>
            <a href={h.href} target="_blank" rel="noopener noreferrer" style={{
              fontFamily: 'LesEnfantsDuParadis',
              fontSize: 30, lineHeight: 1.1,

              textDecoration: 'none',
              marginBottom: 10, color: "rgb(252, 241, 218)"
            }}>{h.name}</a>
            <p style={{
              fontSize: 14, lineHeight: 1.85,

              margin: '0 0 12px', color: "rgb(208, 187, 156)"
            }}>{h.note}</p>
            <a href={h.href} target="_blank" rel="noopener noreferrer" style={{
              fontFamily: 'var(--font-labels)',
              fontSize: 15,

              textDecoration: 'none',
              letterSpacing: '0.02em',
              marginTop: 'auto', color: "rgb(251, 131, 101)"
            }}>Visit website →</a>
          </div>)}
        </div>
      </div>
    </section>);

}
window.WhereToStay = WhereToStay;


/* ─────────────────────────────────────────────────────────────────────
   RSVP — form on parchment with full-bleed photo above
   ───────────────────────────────────────────────────────────────────── */

/* RSVP now lives in src/Rsvp.jsx (find-your-invitation flow). */


/* ─────────────────────────────────────────────────────────────────────
   Footer — Night Bordeaux, SA monogram, Chavela, eco note
   ───────────────────────────────────────────────────────────────────── */
function SiteFooter() {
  return (
    <footer data-screen-label="07 footer" style={{
      background: 'var(--night-bordeaux)',
      color: 'var(--parchment)',
      padding: 'clamp(80px, 11vw, 140px) var(--gutter) 56px'
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        {/* SA wreath logo */}
        <img
          src="assets/sa-footer-red.png"
          alt="Sydney & Andrés"
          style={{
            height: 'clamp(110px, 12vw, 156px)',
            margin: '0 auto 18px',
            opacity: 0.95
          }} />
        

        {/* Date · place */}
        <div className="caps" style={{
          color: 'color-mix(in srgb, var(--parchment) 65%, transparent)',
          marginTop: 14
        }}>
          May 1, 2027 <span style={{ color: 'var(--flag-red)' }}>·</span> Casa Chavela <span style={{ color: 'var(--flag-red)' }}>·</span> Tepoztlán
        </div>

        {/* Chavela quote */}
        <p style={{

          fontStyle: 'italic',
          fontSize: 'clamp(22px, 2.4vw, 32px)',
          color: 'color-mix(in srgb, var(--parchment) 78%, transparent)',
          lineHeight: 1.4,
          margin: 'clamp(40px, 5vw, 64px) auto 0',
          maxWidth: '760px', fontFamily: "RandomHandwritten", width: "92%"
        }}>“AL CAER LA NOCHE,
LA TIERRA COMPARTE SU ABUNDANCIA,
EL FUEGO TRANSFORMA EL SILENCIO,
Y CADA BOCADO ES UN ACTO DE GRATITUD QUENOS RECUERDA QUE
TODO ES UNO.”</p>
        <div style={{ fontFamily: 'var(--font-labels)', color: 'color-mix(in srgb, var(--parchment) 55%, transparent)',
          fontSize: 17,
          marginTop: 12
        }}>
          &mdash; Mesa de Origen
        </div>

        {/* Diamond rule */}
        <div className="diamond-rule" style={{ margin: 'clamp(56px, 7vw, 90px) auto 32px' }}>
          <span className="line" style={{ background: 'color-mix(in srgb, var(--parchment) 25%, transparent)' }} />
          <img src="assets/sun.png" alt="" aria-hidden="true" style={{ width: 20, height: 20, display: 'block', objectFit: 'contain' }} />
          <span className="line" style={{ background: 'color-mix(in srgb, var(--parchment) 25%, transparent)' }} />
        </div>

        {/* Eco note */}
        <p style={{
          fontFamily: 'var(--font-labels)',
          fontSize: 17,
          color: 'color-mix(in srgb, var(--parchment) 50%, transparent)',
          maxWidth: '54ch',
          margin: '0 auto',
          lineHeight: 1.5
        }}>
          This celebration is committed to zero single-use plastic, florals grown in Morelos,
          and leaving the land as we found it.
        </p>

        {/* Bottom bar */}
        <div className="footer-bottom" style={{
          marginTop: 'clamp(40px, 5vw, 64px)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 24, flexWrap: 'wrap',
          paddingTop: 22,
          borderTop: '1px solid color-mix(in srgb, var(--parchment) 14%, transparent)',
          color: 'color-mix(in srgb, var(--parchment) 45%, transparent)',
          fontFamily: 'var(--font-body)',
          fontSize: 11,
          letterSpacing: '0.24em',
          textTransform: 'uppercase'
        }}>
          <div>Sydney <span style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', textTransform: 'none', color: "rgb(229, 43, 20)" }}>&amp;</span> Andrés</div>
          <div>Tepoztlán · Morelos · México</div>
        </div>
      </div>
    </footer>);

}
window.SiteFooter = SiteFooter;