// Preboda + Hospedaje + Regalo + Footer sections

const Preboda = () => (
  <section className="preboda" id="preboda">
    <FloralSpray className="floral-corner tl" style={{ width: 260 }} data-parallax="0.12" />
    <FloralSpray className="floral-corner br" style={{ width: 260 }} data-parallax="-0.1" />
    <div className="preboda-inner">
      <div className="section-label">Viernes · 5 de junio</div>
      <h2 className="section-title">Preboda</h2>
      <Divider />
      <div className="preboda-grid">
        <MaskReveal className="preboda-photo">
          <img src="assets/casaconcejo.jpg" alt="Bar Casa de Cultura · Villamoros" loading="lazy" />
        </MaskReveal>
        <div className="preboda-card">
          <div className="preboda-date">20:30 — 22:30</div>
          <div className="preboda-time">Bar Casa de Cultura · Villamoros de las Regueras</div>
          <p className="preboda-text">
            Haremos un pequeño convite para que podáis conoceros los invitados,
            charlar, comer y beber en un momento agradable preparatorio a la boda.
          </p>
          <p style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 16, opacity: 0.8, marginBottom: 24 }}>
            Toda la gente que venga el día anterior está más que invitada.
          </p>
          <a className="venue-link" href="https://www.google.com/maps/search/?api=1&query=Bar%20Casa%20Cultura%20Villamoros%20de%20las%20Regueras&query_place_id=ChIJp_pXrBcPN9MRFv0NoBYIVIQ" target="_blank" rel="noopener">
            Ver ubicación →
          </a>
        </div>
      </div>
    </div>
  </section>
);

const Hospedaje = () => (
  <section className="section" id="alojamiento">
    <div className="section-label">05 · Alojamiento</div>
    <h2 className="section-title">Dónde <em>dormir</em></h2>
    <Divider />
    <p className="section-sub">
      Hemos conseguido descuentos en dos alojamientos cercanos a El Corte Inglés,
      desde donde sale el autobús. Comparad siempre con el precio de internet.
    </p>

    <div className="hospedaje">
      <div className="hotel-card">
        <div className="hotel-name">2H Living León</div>
        <div className="hotel-tag">Apartamentos</div>
        <p style={{ fontSize: 14, opacity: 0.75, marginBottom: 8 }}>Código de descuento:</p>
        <div className="hotel-code">ENLACEAROAYDANIEL</div>
        <p className="hotel-note">Comparar con el precio de internet antes de reservar.</p>
        <a className="hotel-link" href="https://2hlivingleon.com/" target="_blank" rel="noopener">Reservar →</a>
      </div>
      <div className="hotel-card">
        <div className="hotel-name">Hotel Dorma León</div>
        <div className="hotel-tag">Eurostars Hotels</div>
        <p style={{ fontSize: 14, opacity: 0.75, marginBottom: 8 }}>Código de descuento:</p>
        <div className="hotel-code">ENLACEAYD</div>
        <p className="hotel-note">Reservar a través de su web oficial.</p>
        <a className="hotel-link" href="https://www.eurostarshotels.com/" target="_blank" rel="noopener">Reservar →</a>
      </div>
    </div>

    <div className="parking-box">
      <h4>Si venís en coche</h4>
      <p>
        <b style={{color:'var(--c-accent-deep)'}}>Cerca de El Corte Inglés:</b> recomendamos el
        Aparcamiento Dos Hermanas (ORA Naranja).
      </p>
      <p>
        <b style={{color:'var(--c-accent-deep)'}}>En el centro de León:</b> Parking San Pedro (ORA Naranja)
        o Parking Público San Marcelo (de pago) —{' '}
        <a href="https://iparksa.com/ipark-leon-parking-san-marcelo/" target="_blank" rel="noopener" style={{ borderBottom: '1px solid var(--c-accent)' }}>
          iparksa.com
        </a>.
      </p>
      <div className="warn">
        <b>Aviso ORA:</b> La zona azul y naranja funciona viernes 10–14 h y 16–20 h,
        y sábados 10–14 h. <b>Azul</b>: máximo 2 h renovables. <b>Naranja</b>: sin límite.
        <b> Verde</b>: residentes, prohibido aparcar. Parquímetro o app TELPARK.
      </div>
    </div>
  </section>
);

const Regalo = () => {
  const [copied, setCopied] = React.useState(false);
  const iban = 'ES86 3081 0471 4850 0081 2780';
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(iban.replace(/\s/g, ''));
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {}
  };
  return (
    <section className="gift" id="regalo">
      <FloralSpray className="floral-corner tr" style={{ width: 240 }} data-parallax="0.1" />
      <div className="gift-inner">
        <div className="section-label">06 · Detalle</div>
        <h2 className="section-title">Vuestra presencia <em>es nuestro regalo</em></h2>
        <Divider />
        <p className="section-sub">
          Vuestra presencia es el mejor de los regalos. Pero si queréis echar una
          mano con la luna de miel (o con ese crucero de renovación de votos…),
          os dejamos estas dos opciones.
        </p>
        <div className="gift-options">
          <div className="gift-card">
            <h4>Lista de Bodamás</h4>
            <p>
              Como Aroa trabaja en El Corte Inglés, hemos creado una lista virtual con
              algunos regalos que nos hacen ilusión. Con vuestras aportaciones nos dan
              un cheque para gastar allí.
            </p>
            <a className="hotel-link" href="https://www.elcorteingles.es/listas/bodamas/eventos/dxdciu-boda-de-aroa-y-daniel-grijalvo-yugueros/" target="_blank" rel="noopener">
              Ver lista →
            </a>
          </div>
          <div className="gift-card">
            <h4>Cuenta bancaria</h4>
            <p>Si preferís una transferencia, esta es nuestra cuenta:</p>
            <div className="iban">
              <span>{iban}</span>
              <button className={`copy-btn ${copied ? 'copied' : ''}`} onClick={copy}>
                {copied ? '✓ Copiado' : 'Copiar'}
              </button>
            </div>
            <p style={{ fontSize: 12, opacity: 0.7, marginTop: 12, fontStyle: 'italic', lineHeight: 1.5 }}>
              A nombre de <b>Aroa Barrio Gutiérrez</b> o de <b>Daniel Grijalvo Yugueros</b>.<br/>
              Concepto: vuestro nombre.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <FloralSpray className="floral-corner tl" style={{ width: 200, opacity: 0.5 }} data-parallax="0.08" />
    <FloralSpray className="floral-corner br" style={{ width: 200, opacity: 0.5 }} data-parallax="-0.08" />
    <div style={{ position: 'relative', zIndex: 1 }}>
      <div className="footer-funkos">
        <img src="assets/funkos.png" alt="Aroa & Daniel" loading="lazy" />
      </div>
      <div className="footer-names">Aroa &amp; Daniel</div>
      <div className="footer-date">06 · 06 · 2026 · LEÓN</div>
      <Divider />
      <div className="contact-list">
        <div><b>AROA</b>659 998 277</div>
        <div><b>DANIEL</b>616 396 668</div>
      </div>
      <p style={{ marginTop: 40, fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 14, opacity: 0.5 }}>
        Nos vemos en La Realeza · con mucho amor
      </p>
    </div>
  </footer>
);

Object.assign(window, { Preboda, Hospedaje, Regalo, Footer });