/* DockEasy — Home page: Porti / Diportisti audience transform */
const { useState: useStateH } = window.React;
const { AnimatePresence: APH, motion: MH } = window.Motion;

function initialAudience() {
  const h = (typeof location !== 'undefined' && location.hash) || '';
  if (h === '#diportisti' || h === '#come-diportisti' || h === '#ormeggio') return 'diportisti';
  if (h === '#accesso' || h === '#prezzi') return 'porti';
  try { return localStorage.getItem('dockeasy-view') === 'diportisti' ? 'diportisti' : 'porti'; }
  catch (e) { return 'porti'; }
}

function PortiBody() {
  return (
    <React.Fragment>
      <PerChi />
      <Overview />
      <Connected />
      <MapTeaser />
      <WhyDockEasy />
      <Pricing />
      <CTABand
        id="accesso"
        kicker="Accesso early"
        title="Entra tra i primi porti su DockEasy."
        sub="Lasciaci i tuoi dati: ti contattiamo quando apriamo l’accesso early e configuriamo insieme il tuo porto, gratis."
        form={<DemoForm />}
      />
    </React.Fragment>
  );
}

function DiportistiBody() {
  return (
    <React.Fragment>
      <BoaterStepsHome />
      <BoaterWhyHome />
      <MapTeaser />
      <CTABand
        id="ormeggio"
        kicker="Per i diportisti"
        title="Pronto a trovare il tuo prossimo ormeggio?"
        sub="Consulta la mappa libera oggi. Lasciaci l’email e ti avvisiamo quando apriamo le prenotazioni dell’ormeggio."
        form={<BoaterForm />}
      />
    </React.Fragment>
  );
}

function HomePage() {
  const [audience, setAud] = useStateH(initialAudience);
  const setAudience = (a) => {
    setAud(a);
    try { localStorage.setItem('dockeasy-view', a); } catch (e) {}
  };
  return (
    <React.Fragment>
      <SiteNav audience={audience} onAudience={setAudience} />
      <Hero audience={audience} />
      <APH mode="wait" initial={false}>
        <MH.div key={audience}
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 10 }}
          transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}>
          {audience === 'porti' ? <PortiBody /> : <DiportistiBody />}
        </MH.div>
      </APH>
      <SiteFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);