/* DockEasy — Pilastri (alternating blocks, Live/In arrivo) + Tutto collegato */

const PILLARS = [
  { kind: 'core', icon: 'globe', title: 'Booking page pubblica',
    body: 'Una pagina di prenotazione con il tuo nome e i tuoi colori. I diportisti vedono i posti liberi e inviano la richiesta in pochi tap.' },
  { kind: 'core', 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: sempre sincronizzata.' },
  { kind: 'core', icon: 'dashboard', title: 'Gestione da un’unica dashboard',
    body: 'Prenotazioni, posti e calendario in un solo pannello. Niente quaderni, niente telefonate: confermi in un clic.' },
  { kind: 'soon', icon: 'card', title: 'Incassi & conferme automatiche',
    body: 'Pagamenti online e conferme automatiche al diportista. Meno no-show, incassi tracciati.' },
  { kind: 'soon', icon: 'anchor', title: 'Self-service per i diportisti',
    body: 'Il diportista prenota e gestisce la sua sosta in autonomia, direttamente dal telefono.' },
  { kind: 'soon', icon: 'chart', title: 'Analytics & report',
    body: 'Occupazione, ricavi e andamento stagionale a colpo d’occhio, per decidere con i dati.' },
];

function PillarVisual({ p }) {
  const soon = p.kind === 'soon';
  return (
    <div className="glass rounded-[1.5rem] flex flex-col items-center justify-center text-center p-8"
      style={{ height: '316px', background: soon
        ? 'repeating-linear-gradient(135deg, rgba(107,123,128,0.06) 0 14px, rgba(107,123,128,0) 14px 28px), rgba(255,255,255,0.5)'
        : 'radial-gradient(120% 100% at 50% 0%, rgba(63,193,201,0.16), rgba(255,255,255,0.5) 70%)' }}>
      <span className={'glass w-16 h-16 rounded-2xl flex items-center justify-center ' + (soon ? 'text-mist' : 'text-teal')}>
        <Icon name={p.icon} className="w-8 h-8" />
      </span>
      <div className="mt-5 font-heading text-ink/75 text-xl tracking-tight">{p.title}</div>
      <span className="mt-2 font-mono text-[11px] text-ink/40 uppercase tracking-wide">{soon ? 'in arrivo' : 'accesso early'}</span>
    </div>
  );
}

function PillarRow({ p, i }) {
  return (
    <div className={'flex flex-col gap-7 md:gap-14 md:items-center ' + (i % 2 ? 'md:flex-row-reverse' : 'md:flex-row')}>
      <div className="md:w-1/2">
        <PillarVisual p={p} />
      </div>
      <div className="md:w-1/2">
        <div className="flex items-center gap-3">
          <span className={'glass w-11 h-11 rounded-[0.7rem] flex items-center justify-center ' + (p.kind === 'soon' ? 'text-mist' : 'text-teal')}>
            <Icon name={p.icon} className="w-6 h-6" />
          </span>
          <Badge kind={p.kind} />
        </div>
        <h3 className="font-heading text-ink text-3xl md:text-[2.6rem] tracking-tight leading-none mt-5">{p.title}</h3>
        <p className="mt-4 text-ink/65 font-body font-light text-base md:text-lg leading-snug max-w-[46ch]">{p.body}</p>
      </div>
    </div>
  );
}

function Pillars({ header = true }) {
  return (
    <section id="funzioni" className="relative px-5 md:px-12 lg:px-20 pt-36 pb-20 md:pb-24">
      <div className="max-w-6xl mx-auto">
        {header ? (
          <Reveal>
            <SectionKicker>I pilastri</SectionKicker>
            <h2 className="font-heading text-ink text-4xl md:text-5xl lg:text-[3.8rem] leading-[0.95] tracking-tight max-w-3xl">
              Tutto il porto, in un’unica piattaforma.
            </h2>
            <p className="mt-5 text-ink/65 font-body font-light text-base md:text-lg max-w-2xl leading-snug">
              Il core del prodotto e cosa arriva dopo. Non c’è ancora una demo pubblica: in accesso early configuriamo il tuo porto insieme, passo passo.
            </p>
          </Reveal>
        ) : null}

        <div className="flex flex-col gap-16 md:gap-24 mt-16">
          {PILLARS.map((p, i) => (
            <Reveal key={p.title} delay={0.05}>
              <PillarRow p={p} i={i} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Connected() {
  const chips = ['Prenotazioni', 'Disponibilità', 'Gestione'];
  return (
    <section 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.45) 100%)' }}>
      <div className="max-w-4xl mx-auto text-center">
        <Reveal>
          <SectionKicker>Un’unica piattaforma sincronizzata</SectionKicker>
          <h2 className="font-heading text-ink text-4xl md:text-5xl lg:text-[3.4rem] tracking-tight leading-[0.95]">
            Tutto collegato, niente sparso.
          </h2>
          <p className="mt-5 text-ink/65 font-body font-light text-base md:text-lg leading-snug max-w-xl mx-auto">
            Prenotazioni, disponibilità e gestione parlano tra loro. Un solo sistema, sempre aggiornato — e gli incassi si aggiungeranno presto.
          </p>
          <div className="flex items-center justify-center flex-wrap gap-3 mt-10">
            {chips.map((c, i) => (
              <React.Fragment key={c}>
                <span className="glass rounded-full px-5 py-2.5 text-sm font-medium font-body text-ink/80">{c}</span>
                {i < chips.length - 1 ? <Icon name="link" className="w-5 h-5 text-teal" /> : null}
              </React.Fragment>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Pillars, Connected, PILLARS });