// Timeline + Finca + Buses sections

const TIMELINE = [
  { time: '12:30', title: 'Autobús', sub: 'Salida desde El Corte Inglés', icon: 'bus' },
  { time: '13:00', title: 'Ceremonia', sub: 'El gran sí', icon: 'rings' },
  { time: '13:45', title: 'Cóctel', sub: '', icon: 'cocktail' },
  { time: '16:00', title: 'Comida', sub: '', icon: 'plate' },
  { time: '18:00', title: 'Corte de la tarta', sub: '', icon: 'cake' },
  { time: '19:00', title: 'Comienza la fiesta', sub: '', icon: 'mic' },
  { time: '22:00', title: 'Recena', sub: '', icon: 'food' },
  { time: '23:00', title: 'Sigue la fiesta', sub: '', icon: 'disco' },
  { time: 'Fin', title: 'Autobús', sub: 'Vuelta a León', icon: 'bus' },
];

const Timeline = () => (
  <section className="section" id="timeline">
    <div className="section-label">03 · El día</div>
    <h2 className="section-title">El programa, <em>hora a hora</em></h2>
    <Divider />
    <p className="section-sub">
      Os dejamos el resumen de los momentos más importantes del día. Ya sabéis que
      por norma, la novia tiene permiso para llegar con algunos minutos tarde —
      si no se cumplen los horarios al minuto, no lo tengáis en cuenta.
    </p>
    <div className="timeline-grid">
      {TIMELINE.map((t, i) => (
        <Reveal className="tl-item" key={i} style={{ transitionDelay: `${i * 0.07}s` }}>
          <div className="tl-icon"><TimelineIcon kind={t.icon} /></div>
          <div className="tl-heart"><Heart size={14} color="var(--c-accent)" /></div>
          <div>
            <div className="tl-time">{t.time}{t.time !== 'Fin' && <span style={{fontSize:'.7em',opacity:.6}}> PM</span>}</div>
            <div className="tl-name">{t.title}{t.sub && <><br/><small style={{opacity:.6,fontSize:11}}>{t.sub}</small></>}</div>
          </div>
        </Reveal>
      ))}
    </div>
    <div className="kids-callout">
      <div className="kids-callout-label">Para los más peques</div>
      <p>
        Si venís con niños, niñas o peques, <b>podréis disfrutar de todos los
        momentos especiales sin preocupaciones</b> — hemos contratado una empresa
        de animación que se encargará de ellos durante la gran mayoría del tiempo.
      </p>
    </div>
  </section>
);

const Venue = () => (
  <section className="section" id="finca">
    <div className="section-label">02 · El lugar</div>
    <h2 className="section-title">Finca <em>La Realeza</em></h2>
    <Divider />
    <div className="venue">
      <div className="venue-card">
        <img src="assets/finca-logo.png" alt="La Realeza" style={{ width: 120, marginBottom: 24, opacity: 0.9 }}/>
        <div className="venue-name">Donde empiezan las historias</div>
        <div className="venue-tag">y donde empieza la nuestra</div>
        <p className="venue-addr">
          Camino de Carbajal a Avenida de Caboalles<br/>
          24121 Azadinos, León
        </p>
        <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24, fontStyle: 'italic' }}>
          El enlace, ceremonia, banquete y fiesta posterior se celebrará íntegramente en la finca.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="venue-link" href="https://www.fincalarealeza.es/" target="_blank" rel="noopener">
            Visitar web →
          </a>
          <a className="venue-link" href="https://www.google.com/maps/search/?api=1&query=Finca%20La%20Realeza%20Azadinos%20Le%C3%B3n" target="_blank" rel="noopener">
            Cómo llegar →
          </a>
        </div>
      </div>
      <MaskReveal className="venue-map">
        <iframe
          title="Mapa Finca La Realeza"
          src="https://maps.google.com/maps?q=Finca+La+Realeza+Azadinos+Le%C3%B3n&t=&z=14&ie=UTF8&iwloc=&output=embed"
          style={{ width: '100%', height: '100%', border: 0 }}
          loading="lazy"
        />
      </MaskReveal>
    </div>
  </section>
);

const Buses = () => (
  <section className="section" id="autobus">
    <div className="section-label">04 · Transporte</div>
    <h2 className="section-title">Autobús <em>ida y vuelta</em></h2>
    <Divider />
    <p className="section-sub">
      Saldremos y volveremos desde la parada situada junto a <b>El Corte Inglés de León</b>.
      Si venís en autobús, recordad marcarlo en el formulario.
    </p>
    <div className="buses">
      <div className="bus-card">
        <div className="bus-icon"><IconBusLarge /></div>
        <div className="bus-title">Ida</div>
        <div className="bus-time">12:30</div>
        <div className="bus-sub">Salida desde El Corte Inglés<br/>Llegada a La Realeza ≈ 12:55</div>
        <div className="bus-photo" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-display)', color: 'var(--c-accent-deep)', opacity: 0.65 }}>
          <div style={{ textAlign: 'center', padding: 24 }}>
            <div style={{ fontSize: 38, fontFamily: 'var(--f-script)', color: 'var(--c-accent)', lineHeight: 1 }}>El Corte Inglés</div>
            <div style={{ fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase', marginTop: 10 }}>León · parada delante</div>
          </div>
        </div>
        <p style={{ fontSize: 13, marginTop: 14, opacity: 0.7, fontStyle: 'italic' }}>
          Punto de encuentro 10 minutos antes.
        </p>
      </div>
      <div className="bus-card">
        <div className="bus-icon"><IconBusLarge /></div>
        <div className="bus-title">Vuelta</div>
        <div className="bus-time">Fin de fiesta</div>
        <div className="bus-sub">Salida desde La Realeza<br/>Llegada a León (El Corte Inglés)</div>
        <div className="bus-photo" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-display)', fontStyle: 'italic', color: 'var(--c-accent-deep)', opacity: 0.6, fontSize: 18 }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 44, fontFamily: 'var(--f-script)', color: 'var(--c-accent)' }}>Hasta el final</div>
            <div style={{ fontSize: 13, letterSpacing: '.2em', textTransform: 'uppercase', marginTop: 8 }}>o hasta donde aguantes</div>
          </div>
        </div>
        <p style={{ fontSize: 13, marginTop: 14, opacity: 0.7, fontStyle: 'italic' }}>
          Misma parada, dirección León.
        </p>
      </div>
    </div>
    <div style={{ textAlign: 'center', marginTop: 32 }}>
      <a className="venue-link" href="https://www.google.com/maps/d/u/0/edit?mid=1L0Jk-FNEG3RDNj7Mo8gClQSvLmrG9hc&usp=sharing" target="_blank" rel="noopener">
        Ver ruta y paradas en Maps →
      </a>
    </div>
  </section>
);

const IconBusLarge = () => (
  <svg width="72" height="72" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
    <rect x="12" y="10" width="32" height="30" rx="3" />
    <line x1="12" y1="20" x2="44" y2="20" />
    <rect x="16" y="24" width="10" height="7" />
    <rect x="30" y="24" width="10" height="7" />
    <line x1="18" y1="40" x2="18" y2="46" />
    <line x1="38" y1="40" x2="38" y2="46" />
    <circle cx="18" cy="46" r="2" />
    <circle cx="38" cy="46" r="2" />
  </svg>
);

Object.assign(window, { Timeline, Venue, Buses });