// Home — Save the Date

function PageHome({ go, heroVariant, content }) {
  const home = content.home;
  const site = content.site;
  const names = home.names || ['Jenna', 'Dillon'];
  // heroVariant: 'asymmetric' (default) | 'centered'
  const [days, setDays] = React.useState(0);
  React.useEffect(() => {
    const target = new Date(site.eventDateIso).getTime();
    const update = () => {
      const ms = target - Date.now();
      setDays(Math.max(0, Math.floor(ms / (1000 * 60 * 60 * 24))));
    };
    update();
    const id = setInterval(update, 60_000);
    return () => clearInterval(id);
  }, [site.eventDateIso]);

  if (heroVariant === 'centered') {
    return (
      <main className="page-enter">
        <section className="hero has-photo" style={{ textAlign: 'center', paddingTop: 80, paddingBottom: 64 }}>
          <div className="hero-photo">
            <window.PhotoBackdrop src={window.imgUrl(home.centeredHeroPhotoKey, 2400)} scrim="dark" kenBurns />
          </div>
          <div className="hero-scene">
            <window.PalmLeaf size={420} color="#0e1812" animated style={{ position: 'absolute', top: -100, left: -140, transform: 'rotate(-20deg)', opacity: 0.65 }} />
            <window.PalmLeaf size={420} color="#0e1812" animated style={{ position: 'absolute', top: -100, right: -140, transform: 'scaleX(-1) rotate(-15deg)', opacity: 0.65 }} />
            <window.FernFrond size={240} color="#0e1812" animated style={{ position: 'absolute', bottom: -60, left: 40, opacity: 0.7 }} />
            <window.FernFrond size={240} color="#0e1812" animated flip style={{ position: 'absolute', bottom: -60, right: 40, opacity: 0.7 }} />
            <window.Butterfly size={42} color="#e8b8a0" animated style={{ position: 'absolute', top: '40%', left: '12%' }} />
          </div>
          <div className="container">
            <div className="eyebrow">{home.centeredEyebrow}</div>
            <h1 className="hero-name" style={{ marginTop: 36, fontSize: 'clamp(72px, 11vw, 168px)' }}>
              {names[0]}<br />
              <span className="amp">&amp;</span><br />
              {names[1]}
            </h1>
            <div className="body-lg" style={{ marginTop: 32, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
              {home.centeredIntro}
            </div>
            <div className="hero-cta-row" style={{ justifyContent: 'center', marginTop: 40 }}>
              <button className="btn fern" onClick={() => go('rsvp')}>{home.rsvpCta} <span className="arrow">→</span></button>
              <button className="btn" onClick={() => go('story')}>{home.storyCta}</button>
            </div>
            <HeroMeta days={days} content={content} />
          </div>
        </section>
        <BotanicalCallout go={go} items={home.callouts} />
      </main>);

  }

  return (
    <main className="page-enter">
      <section className="hero has-photo">
        <div className="hero-photo">
          <window.PhotoBackdrop src={window.imgUrl(home.heroPhotoKey, 2400)} scrim="dark" kenBurns />
        </div>
        <div className="hero-scene">
          <window.PalmLeaf size={460} color="#0e1812" animated style={{ position: 'absolute', top: -120, left: -160, transform: 'rotate(-20deg)', opacity: 0.7 }} />
          <window.PalmLeaf size={420} color="#0e1812" animated style={{ position: 'absolute', top: -100, right: -140, transform: 'scaleX(-1) rotate(-15deg)', opacity: 0.65 }} />
          <window.FernFrond size={300} color="#0e1812" animated style={{ position: 'absolute', bottom: -60, left: -40, transform: 'rotate(8deg)', opacity: 0.7 }} />
          <window.FernFrond size={260} color="#0e1812" animated flip style={{ position: 'absolute', bottom: -80, right: 60, opacity: 0.65 }} />
          <window.MonsteraLeaf size={180} color="#0e1812" animated style={{ position: 'absolute', bottom: 40, left: '8%', opacity: 0.55 }} />
          <window.Butterfly size={48} color="#e8b8a0" animated style={{ position: 'absolute', top: '30%', left: '20%' }} />
        </div>
        <div className="container">
          <div className="hero-eyebrow-row">
            <span className="eyebrow">{home.eyebrow}</span>
            <span className="rule"></span>
            <window.LeafSpray size={28} color="var(--fern)" />
          </div>
          <div className="hero-grid">
            <div>
              <h1 className="hero-name">
                {names[0]}<br />
                <span className="amp">&amp;</span><br />
                <span className="indent">{names[1]}</span>
              </h1>
              <div className="hero-cta-row">
                <button className="btn fern" onClick={() => go('rsvp')}>{home.rsvpCta} <span className="arrow">→</span></button>
                <button className="btn" onClick={() => go('story')}>{home.storyCta}</button>
              </div>
            </div>
            <div className="hero-side">
              <window.PhotoCard
                src={window.imgUrl(home.sidePhotoKey, 1200)}
                caption={home.sidePhotoCaption}
                ratio="3/4"
                strength={0.18}
                style={{ height: 420, marginBottom: 24 }} />
              
              <div className="hero-side-text">
                {window.textLines(home.sideText)}
              </div>
            </div>
          </div>
          <HeroMeta days={days} content={content} />
        </div>
      </section>

      <BotanicalCallout go={go} items={home.callouts} />
      <window.PhotoBand src={window.imgUrl(home.photoBandKey, 2400)} height={420} caption={home.photoBandCaption} scrim="bottom" />
    </main>);

}

function HeroMeta({ days, content }) {
  const site = content.site;
  return (
    <div className="hero-meta">
      <div className="hero-meta-cell">
        <span className="k">Date</span>
        <span className="v">{site.dateLabel}</span>
      </div>
      <div className="hero-meta-cell">
        <span className="k">Ceremony</span>
        <span className="v">{site.ceremonyLabel}</span>
      </div>
      <div className="hero-meta-cell">
        <span className="k">City</span>
        <span className="v">{site.cityLabel}</span>
      </div>
      <div className="hero-meta-cell">
        <span className="k">Countdown</span>
        <span className="v">{days} days</span>
      </div>
    </div>);

}

function BotanicalCallout({ go, items }) {
  return (
    <section style={{ padding: '48px 0 24px', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <window.VineBorder width={520} color="var(--fern)" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, background: 'var(--fern)', border: '1px solid var(--fern)' }}>
          {items.map((item) =>
          <div key={item.number}
          onClick={() => go(item.route)}
          style={{ background: 'var(--paper)', padding: '40px 32px', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 240, position: 'relative', overflow: 'hidden' }}>
              <window.Sprig size={80} color="var(--moss)" style={{ position: 'absolute', top: -10, right: -10, opacity: 0.45 }} />
              <span className="label" style={{ color: 'var(--terra)' }}>{item.number}</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 38, lineHeight: 1, margin: 0, fontWeight: 400 }}>{item.title}</h3>
              <p className="body" style={{ fontSize: 14, margin: 0 }}>{item.description}</p>
              <span className="text-link" style={{ marginTop: 'auto', fontSize: 11 }}>Open →</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.PageHome = PageHome;