/* DockEasy — Home narrative sections (per-chi, overview, map teaser, perché, prezzi) */

function PerChi() {
  return (
    <section className="relative px-5 md:px-12 lg:px-20 py-7" style={{ background: 'rgba(233,220,195,0.5)' }}>
      <p className="max-w-4xl mx-auto text-center font-body text-ink/75 text-base md:text-lg leading-snug">
        Pensato per <span className="text-petrol font-medium">porti turistici, marina e approdi</span> che vogliono smettere di gestire le prenotazioni al telefono e su carta.
      </p>
    </section>
  );
}

const LIVE_CARDS = [
  { icon: 'globe', title: 'Booking page pubblica', body: 'Una pagina di prenotazione col tuo brand. I diportisti vedono i posti liberi e prenotano in pochi tap.' },
  { icon: 'refresh', title: 'Disponibilità in tempo reale', body: 'La mappa del porto si aggiorna a ogni prenotazione. Mai più lo stesso posto venduto due volte.' },
  { icon: 'dashboard', title: 'Gestione da un’unica dashboard', body: 'Prenotazioni, posti e calendario in un solo pannello. Niente quaderni, niente telefonate.' },
];

function Overview() {
  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>Cosa fa DockEasy</SectionKicker>
          <h2 className="font-heading text-ink text-4xl md:text-5xl tracking-tight leading-[0.95] max-w-2xl">
            Il core del prodotto, e cosa arriva dopo.
          </h2>
        </Reveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-12">
          {LIVE_CARDS.map((c, i) => (
            <Reveal key={c.title} delay={0.08 * i}>
              <div className="glass rounded-[1.5rem] p-7 h-full flex flex-col">
                <div className="flex items-center justify-between">
                  <span className="glass w-12 h-12 rounded-[0.8rem] flex items-center justify-center text-teal">
                    <Icon name={c.icon} className="w-6 h-6" />
                  </span>
                  <Badge kind="core" />
                </div>
                <h3 className="font-heading text-ink text-2xl md:text-[1.7rem] tracking-tight mt-6 leading-none">{c.title}</h3>
                <p className="mt-3 text-sm text-ink/65 font-body font-light leading-snug">{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={0.1}>
          <div className="glass rounded-[1.5rem] p-6 md:p-7 mt-5 flex flex-col sm:flex-row sm:items-center justify-between gap-5">
            <div className="flex items-center gap-3 flex-wrap">
              <Badge kind="soon" />
              <span className="text-ink/70 font-body text-sm md:text-base">
                <span className="text-ink font-medium">In arrivo:</span> incassi & conferme, self-service diportisti, analytics & report.
              </span>
            </div>
            <a href="funzioni.html"
              className="shrink-0 flex items-center gap-1.5 text-sm font-semibold font-body text-teal hover:text-petrol transition">
              Tutte le funzionalità <Icon name="arrowUpRight" className="w-4 h-4" />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function MapTeaser() {
  return (
    <section className="relative overflow-hidden" style={{ background: '#0B3C49' }}>
      <div className="absolute inset-0 pointer-events-none"
        style={{ background: 'radial-gradient(80% 80% at 85% 10%, rgba(63,193,201,0.20), rgba(11,60,73,0) 55%)' }} />
      <div className="relative z-10 px-5 md:px-12 lg:px-20 py-24 md:py-28 max-w-6xl mx-auto">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-8">
          <div>
            <div className="text-sm font-body text-seaglass mb-5">// Presenza sul territorio</div>
            <h2 className="font-heading text-white text-4xl md:text-5xl lg:text-[3.4rem] tracking-tight leading-[0.95] max-w-xl">
              Il Mediterraneo è il nostro mare.
            </h2>
            <p className="mt-5 text-white/65 font-body font-light text-base md:text-lg leading-snug max-w-xl">
              Una mappa libera e gratuita delle marine e dei porti turistici lungo le coste italiane. Da consultare quando vuoi — è una mappa, non un elenco di clienti.
            </p>
          </div>
          <a href="diportisti.html#mappa"
            className="shrink-0 flex items-center gap-2 glass-dark text-white px-6 py-3.5 rounded-full text-sm font-semibold font-body hover:bg-white/15 transition">
            Vedi la mappa <Icon name="arrowUpRight" className="w-4 h-4" />
          </a>
        </div>
        <div className="flex flex-wrap items-center gap-x-10 gap-y-4 mt-12">
          <div className="flex items-baseline gap-2">
            <span className="font-heading text-seaglass text-5xl tracking-tight leading-none">71</span>
            <span className="text-white/55 text-sm font-body">marine mappate</span>
          </div>
          <span className="w-px h-9 bg-white/15 hidden sm:block" />
          <div className="flex items-baseline gap-2">
            <span className="font-heading text-seaglass text-5xl tracking-tight leading-none">14</span>
            <span className="text-white/55 text-sm font-body">regioni costiere</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const WHY = [
  { icon: 'check', title: 'Trasparente', body: 'Prezzi chiari, nessuna sorpresa. Sai cosa paghi e cosa ottieni.' },
  { icon: 'sliders', title: 'Semplice', body: 'Attivo in poco, senza migrazioni complicate. Configuri e parti.' },
  { icon: 'anchor', title: 'Mediterraneo', body: 'Costruito per i porti europei, non adattato da altro.' },
];

function WhyDockEasy() {
  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>Perché DockEasy</SectionKicker>
          <h2 className="font-heading text-ink text-4xl md:text-5xl tracking-tight leading-[0.95] max-w-2xl">
            Focalizzato dove conta.
          </h2>
        </Reveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-12">
          {WHY.map((w, i) => (
            <Reveal key={w.title} delay={0.08 * i}>
              <div className="glass rounded-[1.5rem] p-7 h-full">
                <span className="glass w-12 h-12 rounded-[0.8rem] flex items-center justify-center text-teal">
                  <Icon name={w.icon} className="w-6 h-6" />
                </span>
                <h3 className="font-heading text-ink text-2xl md:text-3xl 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 Pricing() {
  return (
    <section id="prezzi" className="relative px-5 md:px-12 lg:px-20 pb-24 md:pb-28">
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <div className="glass rounded-[1.75rem] p-8 md:p-12 flex flex-col md:flex-row md:items-center justify-between gap-7">
            <div>
              <div className="flex items-center gap-3 mb-4"><SectionKickerInline>Prezzi</SectionKickerInline><Badge kind="soon" /></div>
              <h2 className="font-heading text-ink text-3xl md:text-[2.6rem] tracking-tight leading-none">Prezzi trasparenti, in arrivo.</h2>
              <p className="mt-4 text-ink/65 font-body font-light text-base md:text-lg leading-snug max-w-[48ch]">
                Prezzi chiari, nessuna sorpresa: pubblicheremo i piani in trasparenza. Chi entra in accesso early li blocca per primo.
              </p>
            </div>
            <a href="#accesso"
              className="shrink-0 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">
              Entra in accesso early <Icon name="arrowUpRight" className="w-4 h-4" />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function SectionKickerInline({ children }) {
  return <span className="text-sm font-body text-teal tracking-tight">// {children}</span>;
}

Object.assign(window, { PerChi, Overview, MapTeaser, WhyDockEasy, Pricing });