// sections.jsx — Capas visuales de la invitación.
// Exporta: Hero, Historia, Detalles, Regalos, Hospedaje, Footer, SectionLabel.

const { T } = window;

// — etiqueta de sección reutilizable (micro + greca corta) —
function SectionLabel({ children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginBottom: 8 }}>
      <Micro size={11} ls=".34em" color={T.accent}>{children}</Micro>
      <div style={{ width: 64 }}><Greca color={T.ink} step={5} ups={3} strokeWidth={1.3} /></div>
    </div>
  );
}

// ————————————————————————————————————————————— HERO —————
function CountdownUnit({ value, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 64 }}>
      <div className="serif" style={{ fontSize: 'clamp(38px,9vw,64px)', fontWeight: 600, lineHeight: 1, color: T.ink,
        fontVariantNumeric: 'tabular-nums' }}>{String(value).padStart(2, '0')}</div>
      <Micro size={10} ls=".22em" color={T.soft} style={{ marginTop: 8 }}>{label}</Micro>
    </div>
  );
}

function Countdown() {
  const target = React.useMemo(() => new Date(window.CONFIG.DATE_ISO).getTime(), []);
  const calc = () => {
    const diff = Math.max(0, target - Date.now());
    const s = Math.floor(diff / 1000);
    return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60, done: diff === 0 };
  };
  const [t, setT] = React.useState(calc);
  React.useEffect(() => { const id = setInterval(() => setT(calc()), 1000); return () => clearInterval(id); }, []);
  if (t.done) {
    return <div className="ital" style={{ fontSize: 'clamp(22px,5vw,30px)', color: T.accent }}>¡Hoy es el gran día!</div>;
  }
  const sep = <div className="serif" style={{ fontSize: 'clamp(30px,7vw,48px)', color: T.line, lineHeight: 1, alignSelf: 'flex-start', marginTop: 4 }}>:</div>;
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 'clamp(8px,2.4vw,18px)', justifyContent: 'center' }}>
      <CountdownUnit value={t.d} label="Días" />{sep}
      <CountdownUnit value={t.h} label="Horas" />{sep}
      <CountdownUnit value={t.m} label="Min" />{sep}
      <CountdownUnit value={t.s} label="Seg" />
    </div>
  );
}

function Hero({ invite }) {
  const greet = invite && invite.status === 'ok' && !invite.demo ? invite.nombre : null;
  return (
    <header style={{ minHeight: '100svh', position: 'relative', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', padding: 'clamp(40px,8vh,90px) 22px',
      textAlign: 'center', overflow: 'hidden' }}>
      {/* marco interior tenue, como la etiqueta */}
      <div style={{ position: 'absolute', inset: 'clamp(12px,3vw,26px)', border: `1px solid ${T.ink}`, opacity: 0.30, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 'clamp(20px,4vw,36px)', border: `1px solid ${T.ink}`, opacity: 0.16, pointerEvents: 'none' }} />
      {/* viñeta */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(120% 80% at 50% 38%, transparent 52%, rgba(34,53,31,0.10))' }} />

      <div style={{ position: 'relative', maxWidth: 720, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Reveal><div style={{ width: 150, maxWidth: '60vw' }}><Greca color={T.ink} step={6} ups={3} strokeWidth={1.5} /></div></Reveal>
        <Reveal delay={80}><Micro size={11} ls=".42em" color={T.soft} style={{ marginTop: 20 }}>Oaxaca de Juárez · México</Micro></Reveal>
        <Reveal delay={140}><div style={{ marginTop: 18 }}><StepDiamond size={32} color={T.ink} /></div></Reveal>
        <Reveal delay={200}><Micro size={12} ls=".38em" color={T.accent} style={{ marginTop: 12 }}>Nos casamos</Micro></Reveal>

        <Reveal delay={260}>
          <div className="serif" style={{ color: T.ink, lineHeight: 0.92, marginTop: 18 }}>
            <div style={{ fontSize: 'clamp(56px,16vw,118px)', fontWeight: 600 }}>Diana</div>
            <div className="ital" style={{ fontSize: 'clamp(30px,8vw,58px)', color: T.accent, margin: '2px 0', fontWeight: 500 }}>&amp;</div>
            <div style={{ fontSize: 'clamp(56px,16vw,118px)', fontWeight: 600 }}>Daniel</div>
          </div>
        </Reveal>

        <Reveal delay={320}><Rule width={260} style={{ margin: '26px 0 22px' }} /></Reveal>
        <Reveal delay={360}><Micro size={14} ls=".30em" color={T.ink}>Sábado · 07 · Noviembre · 2026</Micro></Reveal>

        <Reveal delay={420}>
          <div style={{ marginTop: 'clamp(28px,5vh,46px)' }}><Countdown /></div>
        </Reveal>

        {greet && (
          <Reveal delay={480}>
            <div style={{ marginTop: 34 }}>
              <span className="ital" style={{ fontSize: 'clamp(17px,3.4vw,21px)', color: T.soft }}>
                Con todo nuestro cariño, {greet}, te esperamos.
              </span>
            </div>
          </Reveal>
        )}
      </div>

      {/* indicador de scroll */}
      <div style={{ position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', display: 'flex',
        flexDirection: 'column', alignItems: 'center', gap: 7, opacity: 0.7 }}>
        <Micro size={9} ls=".3em" color={T.soft}>Desliza</Micro>
        <div style={{ width: 1, height: 30, background: `linear-gradient(${T.soft},transparent)`, animation: 'scrollcue 2s ease-in-out infinite' }} />
      </div>
      <style>{`@keyframes scrollcue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}`}</style>
    </header>
  );
}

// ——— banda de foto a sangre (transición) ———
function PhotoBand({ id, h = 'clamp(280px,52vh,540px)', placeholder, src }) {
  return (
    <div style={{ width: '100%', height: h, position: 'relative', background: T.card, overflow: 'hidden' }}>
      <image-slot id={id} fit="cover" shape="rect" placeholder={placeholder} src={src}
        style={{ width: '100%', height: '100%' }}></image-slot>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        boxShadow: `inset 0 0 0 1px ${T.line}`, background: 'linear-gradient(rgba(34,53,31,0.10),transparent 30%,transparent 70%,rgba(34,53,31,0.10))' }} />
    </div>
  );
}

// ——————————————————————————————————————— NUESTRA HISTORIA —————
function Historia() {
  const cells = [
    { id: 'his1', cap: 'Tomados de la mano', tall: true, src: 'fotos/historia-1.jpg' },
    { id: 'his2', cap: 'Solo nosotros',                 src: 'fotos/historia-2.jpg' },
    { id: 'his3', cap: 'Nuestro abrazo',                src: 'fotos/historia-3.jpg' },
    { id: 'his4', cap: 'Por las calles de Oaxaca', wide: true,  src: 'fotos/historia-4.jpg' },
  ];
  return (
    <section style={{ padding: 'clamp(64px,10vh,120px) 22px' }}>
      <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <Reveal><div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <SectionLabel>Nuestra historia</SectionLabel>
          <h2 className="serif" style={{ fontSize: 'clamp(34px,6vw,56px)', fontWeight: 600, marginTop: 6 }}>De dos caminos, uno solo</h2>
          <p className="ital" style={{ fontSize: 'clamp(17px,2.6vw,21px)', color: T.soft, maxWidth: 560, marginTop: 16, lineHeight: 1.6, textWrap: 'pretty' }}>
            Nos encontramos lejos de casa y, sin darnos cuenta, el camino nos trajo
            a Oaxaca para celebrar nuestro amor entre fiestas, sobremesas y la gente que más queremos.
          </p>
        </div></Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(12px,2vw,20px)', marginTop: 'clamp(40px,6vh,64px)' }}>
          {cells.map((c, i) => (
            <Reveal key={c.id} delay={i * 90} className={c.wide ? 'cell-wide' : ''}
              style={{ gridColumn: c.wide ? '1 / -1' : 'auto' }}>
              <figure style={{ position: 'relative', margin: 0, height: c.wide ? 'clamp(220px,32vh,360px)' : (c.tall ? 'clamp(320px,46vh,460px)' : 'clamp(220px,32vh,320px)') }}>
                <image-slot id={c.id} fit="cover" shape="rounded" radius="3" placeholder={c.cap} src={c.src}
                  style={{ width: '100%', height: '100%' }}></image-slot>
                <figcaption style={{ position: 'absolute', left: 14, bottom: 12, color: '#f3ecdb',
                  textShadow: '0 1px 8px rgba(20,30,18,.6)' }}>
                  <Micro size={10} ls=".2em" color="#f3ecdb">{c.cap}</Micro>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionLabel, Hero, Countdown, PhotoBand, Historia });