/* DockEasy — Home hero with Porti/Diportisti audience toggle */
const { motion: M1, AnimatePresence: AP1 } = window.Motion;

const heroRise = (delay) => ({
  initial: { filter: 'blur(8px)', opacity: 0, y: 18 },
  animate: { filter: 'blur(0px)', opacity: 1, y: 0 },
  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1], delay },
});
const swap = {
  initial: { opacity: 0, y: 14, filter: 'blur(6px)' },
  animate: { opacity: 1, y: 0, filter: 'blur(0px)' },
  exit: { opacity: 0, y: -10, filter: 'blur(6px)' },
  transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
};

function StatCard({ icon, value, label }) {
  return (
    <div className="glass rounded-[1.25rem] p-5 w-full sm:w-[230px] flex flex-col justify-between">
      <span className="glass w-11 h-11 rounded-[0.7rem] flex items-center justify-center text-teal">
        <Icon name={icon} className="w-6 h-6" />
      </span>
      <div className="mt-6">
        <div className="font-heading text-petrol text-4xl tracking-tight leading-none">{value}</div>
        <div className="text-xs text-ink/60 font-body mt-2">{label}</div>
      </div>
    </div>
  );
}

function PortiHero() {
  return (
    <div className="flex flex-col items-center text-center">
      <M1.div {...heroRise(0.05)}>
        <div className="glass rounded-full inline-flex items-center gap-2 pl-1.5 pr-4 py-1.5">
          <span className="bg-teal text-white px-3 py-1 rounded-full text-xs font-semibold font-body">Novità</span>
          <span className="text-sm text-ink/80 font-body whitespace-nowrap">Accesso early ora aperto</span>
        </div>
      </M1.div>
      <div className="mt-7">
        <BlurText text="Il sistema per gestire il tuo porto."
          className="font-heading text-ink leading-[0.92] tracking-tight justify-center text-[2.6rem] sm:text-6xl lg:text-[4.6rem]" />
      </div>
      <M1.p {...heroRise(0.5)} className="mt-5 text-base md:text-lg text-ink/70 font-body font-light leading-snug max-w-xl">
        Prenotazioni, disponibilità in tempo reale e gestione in un’unica piattaforma — senza telefonate e senza carta.
      </M1.p>
      <M1.div {...heroRise(0.65)} className="flex items-center gap-6 mt-8">
        <a href="#accesso" className="flex items-center gap-2 bg-coral text-white px-6 py-3 rounded-full text-sm font-semibold font-body hover:brightness-105 transition shadow-[0_8px_24px_-8px_rgba(240,101,74,0.6)]">
          Richiedi l’accesso early <Icon name="arrowUpRight" className="w-5 h-5" />
        </a>
        <a href="come-funziona.html" className="flex items-center gap-2 text-teal text-sm font-medium font-body hover:text-petrol transition">
          Scopri come funziona <Icon name="arrowUpRight" className="w-4 h-4" />
        </a>
      </M1.div>
      <M1.div {...heroRise(0.8)} className="flex flex-col sm:flex-row items-stretch gap-4 mt-12 w-full sm:w-auto">
        <StatCard icon="clock" value="24/7" label="Prenotazioni accettate in autonomia, anche di notte" />
        <StatCard icon="refresh" value="Tempo reale" label="Disponibilità dei posti sempre aggiornata" />
      </M1.div>
    </div>
  );
}

function DiportistiHero() {
  return (
    <div className="flex flex-col items-center text-center">
      <M1.div {...heroRise(0.05)}>
        <div className="glass rounded-full inline-flex items-center gap-2 pl-1.5 pr-4 py-1.5">
          <span className="bg-teal text-white px-3 py-1 rounded-full text-xs font-semibold font-body">Gratis</span>
          <span className="text-sm text-ink/80 font-body whitespace-nowrap">Mappa libera del Mediterraneo</span>
        </div>
      </M1.div>
      <div className="mt-7">
        <BlurText text="Trova il tuo posto barca."
          className="font-heading text-ink leading-[0.92] tracking-tight justify-center text-[2.6rem] sm:text-6xl lg:text-[4.6rem]" />
      </div>
      <M1.p {...heroRise(0.4)} className="mt-5 text-base md:text-lg text-ink/70 font-body font-light leading-snug max-w-xl">
        Scopri i porti del Mediterraneo e consulta la mappa libera. La prenotazione dell’ormeggio dal telefono è in arrivo.
      </M1.p>
      <M1.div {...heroRise(0.55)} className="flex items-center gap-6 mt-8">
        <a href="diportisti.html#mappa" className="flex items-center gap-2 bg-coral text-white px-6 py-3 rounded-full text-sm font-semibold font-body hover:brightness-105 transition shadow-[0_8px_24px_-8px_rgba(240,101,74,0.6)]">
          Apri la mappa <Icon name="arrowUpRight" className="w-5 h-5" />
        </a>
        <a href="#come-diportisti" className="flex items-center gap-2 text-teal text-sm font-medium font-body hover:text-petrol transition">
          Come funzionerà <Icon name="arrowUpRight" className="w-4 h-4" />
        </a>
      </M1.div>
    </div>
  );
}

function Hero({ audience }) {
  return (
    <section className="relative min-h-screen flex flex-col overflow-hidden">
      <div className="absolute inset-0 z-0 pointer-events-none"
        style={{ background: 'radial-gradient(120% 80% at 50% -10%, rgba(63,193,201,0.18), rgba(247,245,240,0) 55%), radial-gradient(90% 60% at 85% 30%, rgba(19,122,134,0.10), rgba(247,245,240,0) 50%)' }} />

      <div className="relative z-10 flex-1 flex flex-col items-center px-4 pt-36 pb-10 max-w-3xl mx-auto w-full">
        <div className="w-full">
          <AP1 mode="wait" initial={false}>
            <M1.div key={audience} {...swap}>
              {audience === 'porti' ? <PortiHero /> : <DiportistiHero />}
            </M1.div>
          </AP1>
        </div>
      </div>

      <div className="relative z-10 px-4 pb-14 w-full max-w-4xl mx-auto">
        <AP1 mode="wait" initial={false}>
          <M1.div key={audience} {...swap}>
            {audience === 'porti' ? <BerthMock /> : <PortSearch />}
          </M1.div>
        </AP1>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, StatCard });