/* DockEasy — Home "Per i Diportisti" sections (honest: map is live, booking in arrivo) */

const BOATER_STEPS = [
  { n: '01', kind: 'live', icon: 'globe', title: 'Cerca', body: 'Trova i porti per zona e regione sulla mappa libera del Mediterraneo.' },
  { n: '02', kind: 'soon', icon: 'inbox', title: 'Prenota', body: 'Riserva il posto in pochi secondi, senza telefonate. In arrivo.' },
  { n: '03', kind: 'soon', icon: 'check', title: 'Arrivi', body: 'Check-in con QR code all’arrivo in banchina. In arrivo.' },
];

function BoaterStepsHome() {
  return (
    <section id="come-diportisti" className="relative px-5 md:px-12 lg:px-20 py-24 md:py-28"
      style={{ background: 'linear-gradient(180deg, rgba(233,220,195,0) 0%, rgba(233,220,195,0.4) 100%)' }}>
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <SectionKicker>Come funzionerà</SectionKicker>
          <h2 className="font-heading text-ink text-4xl md:text-5xl tracking-tight leading-[0.95]">
            Cerca, prenota, arrivi.
          </h2>
          <p className="mt-5 text-ink/65 font-body font-light text-base md:text-lg max-w-2xl leading-snug">
            Oggi consulti la mappa libera. La prenotazione dell’ormeggio e il check-in arrivano con i porti che adottano DockEasy.
          </p>
        </Reveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-14">
          {BOATER_STEPS.map((s, i) => (
            <Reveal key={s.n} delay={0.1 * i}>
              <div className="glass rounded-[1.25rem] p-7 h-full flex flex-col min-h-[240px]">
                <div className="flex items-center justify-between">
                  <span className={'glass w-11 h-11 rounded-[0.7rem] flex items-center justify-center ' + (s.kind === 'live' ? 'text-teal' : 'text-mist')}>
                    <Icon name={s.icon} className="w-6 h-6" />
                  </span>
                  <Badge kind={s.kind} />
                </div>
                <div className="mt-auto pt-10">
                  <h3 className="font-heading text-ink text-3xl tracking-tight leading-none">{s.title}</h3>
                  <p className="text-sm text-ink/65 font-body font-light leading-snug mt-3 max-w-[34ch]">{s.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const BOATER_WHY = [
  { kind: 'live', icon: 'globe', title: 'Mappa libera', body: 'Esplora porti e marine del Mediterraneo, gratis e senza registrazione, quando vuoi.' },
  { kind: 'soon', icon: 'refresh', title: 'Disponibilità in tempo reale', body: 'Vedi quali posti sono liberi adesso, prima di partire.' },
  { kind: 'soon', icon: 'anchor', title: 'Prenotazione immediata', body: 'Riservi l’ormeggio in pochi secondi, direttamente dal telefono.' },
];

function BoaterWhyHome() {
  return (
    <section className="relative px-5 md:px-12 lg:px-20 py-24 md:py-28">
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <SectionKicker>Per i diportisti</SectionKicker>
          <h2 className="font-heading text-ink text-4xl md:text-5xl tracking-tight leading-[0.95] max-w-2xl">
            Il Mediterraneo, in tasca.
          </h2>
        </Reveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-12">
          {BOATER_WHY.map((w, i) => (
            <Reveal key={w.title} delay={0.08 * i}>
              <div className="glass rounded-[1.5rem] p-7 h-full">
                <div className="flex items-center justify-between">
                  <span className={'glass w-12 h-12 rounded-[0.8rem] flex items-center justify-center ' + (w.kind === 'live' ? 'text-teal' : 'text-mist')}>
                    <Icon name={w.icon} className="w-6 h-6" />
                  </span>
                  <Badge kind={w.kind} />
                </div>
                <h3 className="font-heading text-ink text-2xl md:text-[1.7rem] tracking-tight mt-6 leading-none">{w.title}</h3>
                <p className="mt-3 text-sm text-ink/65 font-body font-light leading-snug">{w.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BoaterMapButton() {
  return (
    <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
      <a href="diportisti.html#mappa"
        className="flex items-center justify-center gap-2 bg-coral text-white px-6 py-3.5 rounded-full text-sm font-semibold font-body hover:brightness-105 transition w-full sm:w-auto">
        Apri la mappa libera <Icon name="arrowUpRight" className="w-4 h-4" />
      </a>
    </div>
  );
}

Object.assign(window, { BoaterStepsHome, BoaterWhyHome, BoaterMapButton });