// sections2.jsx — Detalles del evento, Mesa de regalos, Hospedaje, Pie.
// Exporta: Detalles, Regalos, Hospedaje, Footer.

const { T: T2 } = window;

// botón con estilo (enlace)
function GhostBtn({ href, children, solid = false }) {
  const [h, setH] = React.useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 9, padding: '13px 22px',
    fontFamily: T2.micro, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600,
    textDecoration: 'none', borderRadius: 2, transition: 'all .3s ease', cursor: 'pointer', border: `1px solid ${T2.ink}`,
  };
  const style = solid
    ? { ...base, background: h ? T2.deep : T2.ink, color: T2.bg, borderColor: T2.ink }
    : { ...base, background: h ? T2.ink : 'transparent', color: h ? T2.bg : T2.ink };
  return (
    <a href={href} target="_blank" rel="noopener" style={style}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</a>
  );
}

function Card({ children, style }) {
  return (
    <div style={{ background: T2.card, border: `1px solid ${T2.line}`, position: 'relative', ...style }}>
      <div style={{ position: 'absolute', inset: 6, border: `1px solid ${T2.line}`, opacity: 0.5, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>{children}</div>
    </div>
  );
}

// ————————————————————————————————————————— DETALLES —————
function Detalles() {
  const E = window.EVENT;
  return (
    <section style={{ padding: 'clamp(64px,10vh,120px) 22px', background: T2.paper, borderTop: `1px solid ${T2.line}`, borderBottom: `1px solid ${T2.line}` }}>
      <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <Reveal><div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 'clamp(36px,6vh,56px)' }}>
          <SectionLabel>Detalles del evento</SectionLabel>
          <h2 className="serif" style={{ fontSize: 'clamp(34px,6vw,56px)', fontWeight: 600, marginTop: 6 }}>El gran día</h2>
        </div></Reveal>

        {/* tarjeta del lugar */}
        <Reveal>
          <Card style={{ padding: 'clamp(30px,5vw,54px)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
              <StepDiamond size={28} color={T2.accent} />
              <Micro size={11} ls=".3em" color={T2.accent} style={{ marginTop: 16 }}>Ceremonia y recepción</Micro>
              <h3 className="serif" style={{ fontSize: 'clamp(30px,5.5vw,48px)', fontWeight: 600, marginTop: 8, lineHeight: 1.05 }}>{E.venue}</h3>
              <Micro size={11} ls=".22em" color={T2.soft} style={{ marginTop: 12 }}>{E.venueZona}</Micro>

              <Rule width={240} style={{ margin: '26px 0' }} />

              <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 'clamp(24px,6vw,70px)', width: '100%' }}>
                {[['Fecha', E.fechaLarga.replace('Sábado 7', 'Sáb · 7')], ['Ceremonia', E.ceremoniaHora], ['Recepción', E.recepcionHora]].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                    <Micro size={10} ls=".24em" color={T2.soft}>{k}</Micro>
                    <div className="serif" style={{ fontSize: 'clamp(20px,3.4vw,26px)', color: T2.ink, fontWeight: 600, textAlign: 'center' }}>{v}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 32, justifyContent: 'center' }}>
                <GhostBtn href={E.mapsUrl} solid>◰&nbsp; Google Maps</GhostBtn>
                <GhostBtn href={E.wazeUrl}>◇&nbsp; Abrir en Waze</GhostBtn>
              </div>
            </div>
          </Card>
        </Reveal>

        {/* dress code + niños */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'clamp(16px,2.5vw,24px)', marginTop: 'clamp(16px,2.5vw,24px)' }}>
          <Reveal>
            <Card style={{ padding: 'clamp(26px,4vw,40px)', height: '100%' }}>
              <Micro size={11} ls=".3em" color={T2.accent}>Código de vestimenta</Micro>
              <h3 className="serif" style={{ fontSize: 'clamp(26px,4vw,36px)', fontWeight: 600, marginTop: 6 }}>{E.dress.nivel}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24, marginTop: 22 }}>
                {[['Ellos', E.dress.hombres], ['Ellas', E.dress.mujeres]].map(([t, items]) => (
                  <div key={t}>
                    <Micro size={10} ls=".24em" color={T2.soft} style={{ marginBottom: 12 }}>{t}</Micro>
                    <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
                      {items.map((it, i) => (
                        <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontFamily: T2.micro, fontSize: 14.5, color: T2.ink, lineHeight: 1.4 }}>
                          <span style={{ marginTop: 7, flexShrink: 0 }}><StepDiamond size={10} color={T2.accent} /></span>
                          <span>{it}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </Card>
          </Reveal>

          <Reveal delay={90}>
            <Card style={{ padding: 'clamp(26px,4vw,40px)', height: '100%', display: 'flex' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', width: '100%', gap: 18 }}>
                <Micro size={11} ls=".3em" color={T2.accent}>Solo adultos</Micro>
                <StepDiamond size={24} color={T2.soft} />
                <p className="ital" style={{ fontSize: 'clamp(19px,3vw,24px)', color: T2.ink, lineHeight: 1.5, maxWidth: 380, textWrap: 'pretty' }}>
                    “{E.ninos}”
                </p>
              </div>
            </Card>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ————————————————————————————————————————— MESA DE REGALOS —————
function Regalos() {
  const G = window.GIFT;
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(G.clabe.replace(/\s/g, '')).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 1800);
    }).catch(() => {});
  };
  return (
    <section style={{ padding: 'clamp(64px,10vh,120px) 22px' }}>
      <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
        <Reveal><SectionLabel>Mesa de regalos</SectionLabel></Reveal>
        <Reveal delay={60}><h2 className="serif" style={{ fontSize: 'clamp(34px,6vw,52px)', fontWeight: 600, marginTop: 6 }}>Un detalle con cariño</h2></Reveal>
        <Reveal delay={120}><p className="ital" style={{ fontSize: 'clamp(17px,2.6vw,21px)', color: T2.soft, marginTop: 16, lineHeight: 1.6, textWrap: 'pretty' }}>{G.intro}</p></Reveal>

        <Reveal delay={180}>
          <Card style={{ padding: 'clamp(28px,5vw,44px)', marginTop: 36, textAlign: 'left' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[['Banco', G.banco], ['Titular', G.titular]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '11px 0', borderBottom: `1px solid ${T2.line}` }}>
                  <Micro size={10.5} ls=".18em" color={T2.soft}>{k}</Micro>
                  <span style={{ fontFamily: T2.micro, fontSize: 14.5, fontWeight: 600, color: T2.ink }}>{v}</span>
                </div>
              ))}
              <div style={{ padding: '18px 0 4px' }}>
                <Micro size={10.5} ls=".18em" color={T2.soft}>CLABE interbancaria</Micro>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 10, flexWrap: 'wrap' }}>
                  <span className="serif" style={{ fontSize: 'clamp(22px,5vw,30px)', fontWeight: 600, letterSpacing: '.04em', color: T2.ink, fontVariantNumeric: 'tabular-nums' }}>{G.clabe}</span>
                  <button onClick={copy} style={{ cursor: 'pointer', border: `1px solid ${T2.ink}`, background: copied ? T2.ink : 'transparent', color: copied ? T2.bg : T2.ink,
                    padding: '9px 16px', fontFamily: T2.micro, fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600, borderRadius: 2, transition: 'all .3s' }}>
                    {copied ? '¡Copiada!' : 'Copiar'}
                  </button>
                </div>
              </div>
            </div>
            <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 9, justifyContent: 'center' }}>
              <StepDiamond size={12} color={T2.accent} />
              <Micro size={10} ls=".18em" color={T2.soft}>{G.nota}</Micro>
            </div>
          </Card>
        </Reveal>
      </div>
    </section>
  );
}

// ————————————————————————————————————————— HOSPEDAJE —————
function Hospedaje() {
  const L = window.LODGING;
  // Conservar el orden de aparición de cada categoría
  const orden = [];
  const grupos = {};
  L.forEach((o) => {
    if (!grupos[o.cat]) { grupos[o.cat] = []; orden.push(o.cat); }
    grupos[o.cat].push(o);
  });
  let idx = 0;
  return (
    <section style={{ padding: 'clamp(64px,10vh,120px) 22px', background: T2.paper, borderTop: `1px solid ${T2.line}` }}>
      <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <Reveal><div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 'clamp(34px,5vh,52px)' }}>
          <SectionLabel>Hospedaje</SectionLabel>
          <h2 className="serif" style={{ fontSize: 'clamp(34px,6vw,52px)', fontWeight: 600, marginTop: 6 }}>Dónde quedarte</h2>
          <p className="ital" style={{ fontSize: 'clamp(16px,2.5vw,20px)', color: T2.soft, maxWidth: 540, marginTop: 14, lineHeight: 1.6 }}>
            Opciones que recomendamos en el centro de Oaxaca — todas a menos de 10 minutos caminando de Kaku Secret Gallery.
          </p>
        </div></Reveal>

        {orden.map((cat) => (
          <div key={cat} style={{ marginBottom: 'clamp(30px,4.5vh,46px)' }}>
            <Reveal><div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 'clamp(16px,2.4vh,24px)' }}>
              <StepDiamond size={13} color={T2.accent} />
              <Micro size={11} ls=".28em" color={T2.ink}>{cat}</Micro>
              <span style={{ flex: 1, height: 1, background: T2.line }} />
            </div></Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'clamp(14px,2vw,20px)' }}>
              {grupos[cat].map((o) => {
                const delay = (idx++ % 3) * 80;
                return (
                  <Reveal key={o.nombre} delay={delay}>
                    <a href={o.url} target="_blank" rel="noopener" className="lodge"
                      style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', background: T2.card, border: `1px solid ${T2.line}`, padding: '24px 24px 22px', height: '100%', transition: 'transform .35s, border-color .35s, background .35s' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                        <h3 className="serif" style={{ fontSize: 'clamp(21px,2.7vw,26px)', fontWeight: 600, color: T2.ink, lineHeight: 1.12 }}>{o.nombre}</h3>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0, marginTop: 4 }}>
                          <span style={{ color: T2.accent, fontSize: 13, lineHeight: 1 }}>★</span>
                          <Micro size={11} ls=".06em" color={T2.soft}>{o.rating.toFixed(1)}</Micro>
                        </span>
                      </div>
                      <Micro size={10} ls=".18em" color={T2.soft} style={{ marginTop: 10 }}>{o.dir}</Micro>
                      {o.nota && (
                        <p className="ital" style={{ fontSize: 14, color: T2.soft, marginTop: 10, lineHeight: 1.5 }}>{o.nota}</p>
                      )}
                      <div style={{ marginTop: 'auto', paddingTop: 20, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Micro size={10} ls=".18em" color={T2.accent}>Ver sitio</Micro>
                        <span style={{ color: T2.accent, fontSize: 14 }}>→</span>
                      </div>
                    </a>
                  </Reveal>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <style>{`.lodge:hover{transform:translateY(-4px);border-color:${T2.ink}!important;background:${T2.bg}!important;}`}</style>
    </section>
  );
}

// ————————————————————————————————————————— PIE —————
function Footer() {
  return (
    <footer style={{ background: T2.deep, color: T2.bg, padding: 'clamp(56px,9vh,96px) 22px clamp(36px,5vh,56px)', textAlign: 'center', position: 'relative' }}>
      <div style={{ width: 150, maxWidth: '55vw', margin: '0 auto', opacity: 0.7 }}>
        <Greca color={T2.bg} step={6} ups={3} strokeWidth={1.4} />
      </div>
      <div style={{ marginTop: 26 }}><StepDiamond size={30} color={T2.bg} /></div>
      <div className="serif" style={{ fontSize: 'clamp(40px,9vw,72px)', fontWeight: 600, lineHeight: 0.95, marginTop: 14 }}>
        Diana <span className="ital" style={{ color: T2.accent, fontWeight: 500 }}>&amp;</span> Daniel
      </div>
      <Micro size={12} ls=".34em" color="rgba(236,227,207,.8)" style={{ marginTop: 18 }}>07 · 11 · 2026 · Oaxaca</Micro>
      <div style={{ marginTop: 22 }}><Micro size={12} ls=".28em" color={T2.accent}>{window.CONFIG.coupleHash}</Micro></div>
      <Micro size={9} ls=".18em" color="rgba(236,227,207,.45)" style={{ marginTop: 40 }}>Hecho con cariño · Oaxaca, México</Micro>
    </footer>
  );
}

Object.assign(window, { Detalles, Regalos, Hospedaje, Footer });