/* Registry page — on-brand scaffold. Real registry links / details
   will be dropped in later by the couple. */

function RegistryCard({ eyebrow, title, body, accent = 'var(--flag-red)' }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--parchment)',
        border: '1px solid color-mix(in srgb, var(--olive) 38%, transparent)',
        padding: 'clamp(32px, 3vw, 44px)',
        display: 'flex', flexDirection: 'column',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'transform 400ms var(--ease-walk)', backgroundColor: "rgb(65, 0, 22)"
      }}>
      <div className="eyebrow" style={{ ...{ color: accent, marginBottom: 16 }, color: "rgb(211, 88, 60)" }}>{eyebrow}</div>
      <h3 className="subhead" style={{



        margin: '0 0 16px', color: "rgb(210, 102, 58)", fontFamily: "RandomHandwritten", fontSize: "42px"
      }}>{title}</h3>
      <p style={{

        fontSize: 16, lineHeight: 1.95, margin: '0 0 28px', flexGrow: 1, color: "rgb(240, 232, 208)"
      }}>{body}</p>
      <div style={{
        fontFamily: 'var(--font-labels)', fontSize: 19,

        borderTop: '1px solid color-mix(in srgb, var(--olive) 28%, transparent)',
        paddingTop: 18, color: "rgb(213, 14, 18)"
      }}>
        details coming soon
      </div>
    </div>);

}

function Registry() {
  const cards = [
  { eyebrow: 'adventures await', title: 'Honeymoon Fund',
    body: 'Help us celebrate with a trip together after the wedding. A little time to slow down, explore, and soak in this new chapter.',
    accent: 'var(--flag-red)' },
  { eyebrow: 'years to come', title: 'Future Fund',
    body: 'For the life we’re building beyond the wedding day — future plans, big dreams, little milestones, and everything in between.',
    accent: 'var(--olive-2)' },
  { eyebrow: 'things we love', title: 'Online Registry',
    body: 'A collection of traditional gifts and home items we would love, use, and treasure.',
    accent: 'var(--rosy-copper)' }];


  return (
    <main>
      <PageHeader
        label="registry header"
        eyebrow="with gratitude"
        title="Registry"
        bg="var(--olive-2)"
        fg="var(--parchment)"
        accent="var(--golden-glow)"
        bgImage="assets/headers/registry.png"
        titleImage="assets/headers/titles/registry.png"
        fadeColor="var(--parchment-warm)"
        subtitle="Your presence in Tepoztlán is truly the best gift. But if you'd like to contribute further, below are a few ways to do so." />

      <section data-screen-label="registry options" style={{
        padding: 'clamp(80px, 11vw, 150px) var(--gutter)',
        background: 'var(--parchment-warm)', backgroundColor: "rgb(77, 19, 26)"
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'clamp(20px, 2.4vw, 36px)',
          maxWidth: 1240, margin: '0 auto'
        }}>
          {cards.map((c, i) => <RegistryCard key={i} {...c} />)}
        </div>

        <p style={{
          textAlign: 'center',
          maxWidth: '52ch', margin: 'clamp(56px, 7vw, 90px) auto 0',
          fontStyle: 'italic',
          fontSize: 'clamp(22px, 2.4vw, 30px)',
          lineHeight: 1.5,
          fontFamily: "LaBelleAurore", color: "rgb(211, 88, 60)"
        }}>We will add the registry links here soon. Thank you for thinking of us.


        </p>
      </section>
    </main>);

}

window.Registry = Registry;