// Hero + Story sections

const Nav = () => (
  <nav className="nav">
    <div className="nav-brand">A &amp; D</div>
    <a className="nav-cta" href="#rsvp">Confirmar</a>
  </nav>
);

function useCountdown(target) {
  const [t, setT] = React.useState(() => Math.max(0, target - Date.now()));
  React.useEffect(() => {
    const i = setInterval(() => setT(Math.max(0, target - Date.now())), 1000);
    return () => clearInterval(i);
  }, [target]);
  const d = Math.floor(t / 86400000);
  const h = Math.floor(t / 3600000 % 24);
  const m = Math.floor(t / 60000 % 60);
  const s = Math.floor(t / 1000 % 60);
  return { d, h, m, s };
}

const Countdown = () => {
  const target = new Date('2026-06-06T13:00:00+02:00').getTime();
  const { d, h, m, s } = useCountdown(target);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="countdown">
      {[['días', d], ['horas', pad(h)], ['min', pad(m)], ['seg', pad(s)]].map(([l, v]) =>
      <div className="count-box" key={l}>
          <div className="count-num">{v}</div>
          <div className="count-label">{l}</div>
        </div>
      )}
    </div>);

};

const Hero = () => {
  return (
    <header className="hero" id="inicio">
      <Petals count={12} />
      <div className="hero-sello">
        <img src="assets/sello.png" alt="Enlace · Aroa & Daniel · 06.06.2026" />
      </div>
      <div className="hero-place">León · Finca La Realeza</div>
      <Countdown />
      <div className="scroll-hint">scroll ↓</div>
    </header>);

};

const SelloFlowers = () => null;

const Lightbox = ({ src, alt, onClose }) => {
  React.useEffect(() => {
    if (!src) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [src, onClose]);
  if (!src) return null;
  return ReactDOM.createPortal(
    <div className="lightbox" onClick={onClose} role="dialog" aria-modal="true">
      <button className="lightbox-close" onClick={onClose} aria-label="Cerrar">×</button>
      <img src={src} alt={alt} onClick={(e) => e.stopPropagation()} />
    </div>,
    document.body
  );
};

const Story = () => {
  const [box, setBox] = React.useState(null);
  const open = (src, alt) => setBox({ src, alt });
  return (
  <section className="section" id="historia">
    <div className="section-label">01 · Nuestra historia</div>
    <h2 className="section-title">De un día <em>para otro</em></h2>
    <Divider />
    <div className="story">
      <div className="story-imgs">
        <div className="frame-mark"></div>
        <div className="deco-num" data-parallax="0.18">01</div>
        <MaskReveal className="img img-1" onClick={() => open('assets/novios-2.jpg', 'Pedida de mano')}>
          <img src="assets/novios-2.jpg" alt="Pedida de mano" loading="lazy" />
        </MaskReveal>
        <MaskReveal className="img img-2" style={{ '--mask-delay': '.45s' }} onClick={() => open('assets/novios-1.jpg', 'Aroa y Daniel')}>
          <img src="assets/novios-1.jpg" alt="Aroa y Daniel" loading="lazy" />
        </MaskReveal>
      </div>
      <div className="story-text">
        <p>
          Ya sabéis que nosotros somos todo de prepararlo <em>de un día para otro</em>,
          así que nos hemos atrevido a echarnos la manta a la cabeza y realizar una
          boda en <em>tres meses o morir en el intento</em>.
        </p>
        <p>
          Al final no ha podido ser en un crucero, por lo que <b style={{ fontWeight: "900" }}>Aroa y Daniel se casan en tierra</b>,
          aunque ya estamos escuchando las peticiones de una renovación de
          votos en un viaje en barco… <em>lo tendremos en cuenta</em>, no os preocupéis
          por ello.
        </p>
        <p style={{ fontSize: 17, opacity: 0.7, marginTop: 28 }}>
          Gracias por querer estar con nosotros en este día tan especial. No podríamos
          imaginarlo con nadie más.
        </p>
      </div>
    </div>
    <Lightbox src={box?.src} alt={box?.alt} onClose={() => setBox(null)} />
  </section>);
};


Object.assign(window, { Nav, Hero, Story });