/* sections.jsx — Countdown, Invitation, Details + Map, Five Decades */
const { useState: useStateSec, useEffect: useEffectSec } = React;

const EVENT_DATE = new Date('2026-07-11T16:00:00');
const ADDRESS = '1934 Saint Andrews Ct, Jamison, PA 18929';

function Countdown() {
  const calc = () => {
    const ms = Math.max(0, EVENT_DATE - new Date());
    const s = Math.floor(ms / 1000);
    return { days: Math.floor(s / 86400), hours: Math.floor((s % 86400) / 3600), mins: Math.floor((s % 3600) / 60), secs: s % 60 };
  };
  const [t, setT] = useStateSec(calc);
  useEffectSec(() => { const id = setInterval(() => setT(calc()), 1000); return () => clearInterval(id); }, []);
  const pad = (n) => String(n).padStart(2, '0');
  const units = [['Days', t.days], ['Hours', pad(t.hours)], ['Minutes', pad(t.mins)], ['Seconds', pad(t.secs)]];
  return (
    <section className="dark section-pad center" id="countdown">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="kicker">Counting down to the celebration</span>
          <h2 className="script" style={{ color: 'var(--gold-bright)' }}>July 11<sup>th</sup>, 2026</h2>
        </Reveal>
        <Reveal className="countdown" delay={1}>
          {units.map(([lbl, val]) => (
            <div className="cd-unit" key={lbl}>
              <div className="cd-num gold-text">{lbl === 'Seconds' ? <span className="cd-flip" key={val}>{val}</span> : val}</div>
              <div className="cd-lbl">{lbl}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function Invitation() {
  return (
    <section className="cream section-pad center" id="invitation">
      <div className="wrap" style={{ maxWidth: 820 }}>
        <Reveal><span className="kicker">You're warmly invited</span></Reveal>
        <Reveal delay={1}>
          <p className="display" style={{ marginTop: 22 }}>
            Five wonderful decades<br />of <span className="script gold-text">Rajshree</span>
          </p>
        </Reveal>
        <Reveal delay={2}><div className="gold-rule" style={{ margin: '38px auto' }} /></Reveal>
        <Reveal delay={2}>
          <p className="lead">
            For fifty years she has filled rooms with warmth, fed us with love, and made every
            gathering feel like home. Now it's our turn to celebrate her. Join us for an afternoon
            of food, music, and memories — and help us make her milestone unforgettable.
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lead script" style={{ color: 'var(--gold-deep)', marginTop: 26 }}>
            With love, the Chokhany family
          </p>
        </Reveal>
        <Reveal delay={3}>
          <a className="btn" href="#rsvp" style={{ marginTop: 36 }}>Let us know you're coming</a>
        </Reveal>
      </div>
    </section>
  );
}

function Details() {
  const mapSrc = `https://www.google.com/maps?q=${encodeURIComponent(ADDRESS)}&output=embed`;
  const mapLink = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(ADDRESS)}`;
  return (
    <section className="paper section-pad" id="details">
      <div className="wrap">
        <Reveal className="section-head center">
          <span className="kicker">The Details</span>
          <h2>When &amp; <em>where</em></h2>
        </Reveal>
        <div className="detail-grid">
          <Reveal className="detail-list">
            <div className="detail-item">
              <div className="dlbl">The Date</div>
              <div className="dval">Saturday, July 11<sup>th</sup> 2026</div>
            </div>
            <div className="detail-item">
              <div className="dlbl">The Time</div>
              <div className="dval">4:00 in the afternoon, until late</div>
            </div>
            <div className="detail-item">
              <div className="dlbl">The Place</div>
              <div className="dval">The Chokhany Residence<br />1934 Saint Andrews Ct<br />Jamison, PA 18929</div>
            </div>
            <div className="detail-item">
              <div className="dlbl">Good to know</div>
              <div className="dval" style={{ fontSize: '20px', lineHeight: 1.5 }}>Dress to celebrate. Come hungry. Bring a memory to share.</div>
            </div>
            <a className="btn btn-ghost" href={mapLink} target="_blank" rel="noopener" style={{ alignSelf: 'flex-start' }}>Open in Maps →</a>
          </Reveal>
          <Reveal tag="a" className="map-frame" delay={1} href={mapLink} target="_blank" rel="noopener" aria-label="Open directions in Google Maps">
            <div className="map-fallback"><span className="pin">📍</span><span style={{ fontSize: 22 }}>1934 Saint Andrews Ct</span><span style={{ fontSize: 16, opacity: .8 }}>Jamison, PA 18929</span></div>
            <iframe title="Map to the celebration" src={mapSrc} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
            <span className="map-hint">Tap to open in Maps →</span>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Decades() {
  const years = [1976, 1986, 1996, 2006, 2016, 2026];
  return (
    <section className="dark section-pad center" id="decades">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="kicker">A life worth celebrating</span>
          <h2 style={{ color: 'var(--paper)' }}>Five decades, <em>countless memories</em></h2>
          <p className="lead" style={{ color: '#cdbfa6' }}>
            From 1976 to today — a daughter, a friend, a mother, a force of warmth.
            Every one of you is part of her story. Add your favorite memory below.
          </p>
        </Reveal>
        <Reveal className="countdown" delay={1} style={{ gap: 'clamp(14px,3vw,40px)' }}>
          {years.map((y, i) => (
            <div className="cd-unit" key={y}>
              <div className="cd-num gold-text" style={{ fontSize: 'clamp(34px,5vw,60px)' }}>{`'${String(y).slice(2)}`}</div>
              <div className="cd-lbl">{i === 0 ? 'The beginning' : i === years.length - 1 ? 'Fifty!' : `Decade ${i}`}</div>
            </div>
          ))}
        </Reveal>
        <Reveal delay={2}>
          <a className="btn btn-ghost" href="#guestbook" style={{ marginTop: 46 }}>Share a memory</a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Countdown, Invitation, Details, Decades });