const { useState, useEffect, useRef } = React;

function Logo({ white }) {
  return <img src={white ? "assets/logo-white.svg" : "assets/logo.svg"} alt="Sportello Balneari" />;
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onS, { passive: true });
    onS();
    return () => window.removeEventListener('scroll', onS);
  }, []);
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")} data-screen-label="00 Nav">
      <div className="wrap nav-inner">
        <a href="#top" className="brand"><Logo /></a>
        <div className="nav-links">
          <a href="#come-funziona">Come funziona</a>
          <a href="#per-chi">Per chi è</a>
          <a href="#contatti">Contattaci</a>
        </div>
        <div className="nav-cta">
          <a href="https://www-staging.sportellobalneari.it/" target="_blank" rel="noopener" className="btn btn-ghost-nav">Accedi</a>
          <a href="#contatti" className="btn btn-primary">Richiedi informazioni <span className="btn-arrow">→</span></a>
        </div>
      </div>
    </nav>);

}

function Hero({ tweaks = {} }) {
  return (
    <section className="hero" id="top" style={{ padding: 0 }} data-screen-label="01 Hero">
      <div className="wrap" style={{ padding: '70px 32px 110px' }}>
        <div className="hero-grid">
          <div>
            <h1 className="headline">
              Affronta le <em style={{ fontWeight: "500" }}><span style={{ color: "rgb(245, 165, 2)" }}>gare</span></em> delle <span className="underline" style={{ fontWeight: "500", fontStyle: tweaks.concessioniItalic ? "italic" : "normal" }}><span style={{ color: "rgb(245, 165, 2)" }}>concessioni balneari</span></span> con metodo.
            </h1>
            <p className="lede">
              Sportello Balneari è la piattaforma SaaS che ti accompagna in ogni fase della gara: Offerta Amministrativa, Tecnica, Economica e PEF. Con un motore AI che stima il tuo punteggio in tempo reale e massimizza le probabilità di assegnazione.
            </p>
            <div className="hero-ctas">
              <a href="#contatti" className="btn btn-primary">Richiedi informazioni <span className="btn-arrow">→</span></a>
              <a href="#come-funziona" className="btn btn-ghost">Scopri come funziona</a>
            </div>
            <div className="hero-meta">
              <div><span className="check">✓</span> Bandi 2026 aggiornati</div>
              <div><span className="check">✓</span> Conforme normativa</div>
              <div><span className="check">✓</span> Esperti del settore</div>
            </div>
          </div>
          <div className="hero-card">
            <div className="hc-head">
              <span><span className="hc-dot">✓</span> Risultato istantaneo</span>
              <span className="mono">v.2026.04</span>
            </div>
            <div className="hc-title">Bando in analisi</div>
            <div className="hc-bando">Comune di Forte dei Marmi — Lotto 04, Bagno Versilia</div>
            <div className="hc-bar">
              <div><div className="lbl">Amm.va</div><div className="val">100<span className="pct">%</span></div></div>
              <div><div className="lbl">Tecnica</div><div className="val">82<span className="pct">%</span></div></div>
              <div><div className="lbl">Economica</div><div className="val">74<span className="pct">%</span></div></div>
            </div>
            <div className="hc-score">
              <div>
                <div className="label">Punteggio stimato</div>
                <div className="num">87<span>/100</span></div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 11, opacity: .7, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Probabilità</div>
                <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 32, color: '#fff', lineHeight: 1 }}>Alta</div>
              </div>
            </div>
            <div className="hc-tip">
              <span className="ico">!</span>
              <span>Aggiungendo certificazione ISO 14001 al tuo progetto guadagni stimati <b>+4 punti</b> sul criterio sostenibilità ambientale.</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function MobileSteps() {
  const STEPS = window.HOW_IT_WORKS_STEPS || [];
  const [active, setActive] = useState(0);
  const sectionRefs = useRef([]);

  useEffect(() => {
    function onScroll() {
      const probe = window.innerHeight * 0.4; // 40% from top
      let best = 0;
      let bestDist = Infinity;
      sectionRefs.current.forEach((el, i) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const center = (r.top + r.bottom) / 2;
        const d = Math.abs(center - probe);
        if (d < bestDist) {bestDist = d;best = i;}
      });
      setActive(best);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const goToStep = (i) => {
    const el = sectionRefs.current[i];
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 131; // offset for sticky nav + stepper
    window.scrollTo({ top, behavior: 'smooth' });
  };

  // Fill goes to the END of the active node
  const fillPct = (active + 0.5) / STEPS.length * 100;

  return (
    <div className="m-flow">
      <div className="m-stepper-sticky" style={{ padding: "14px 24px 0px" }}>
        <div className="m-stepper" aria-hidden={false}>
          <div className="m-stepper-rail">
            <div className="m-stepper-fill" style={{ width: `${fillPct}%` }}></div>
          </div>
          {/* loop arrow from node 4 back to node 3 — pure CSS */}
          <span className="m-loop" aria-hidden="true">
            <span className="m-loop-arc"></span>
            <span className="m-loop-tip"></span>
          </span>
          <ul className="m-stepper-list">
            {STEPS.map((s, i) => {
              const state = i === active ? "active" : i < active ? "done" : "";
              return (
                <li key={i} className={"m-node-row " + state}>
                  <button
                    type="button"
                    className={"m-node " + state}
                    onClick={() => goToStep(i)}
                    aria-label={`Vai alla fase ${i + 1}: ${s.title}`}>
                    {i < active ? "✓" : i + 1}
                  </button>
                </li>);

            })}
          </ul>
        </div>
      </div>

      <div className="m-flow-body">
        {STEPS.map((s, i) =>
        <div
          key={i}
          ref={(el) => sectionRefs.current[i] = el}
          className={"m-flow-step " + (i === active ? "is-active" : "")}>
            <div className="m-flow-step-head">
              <div className="m-flow-eyebrow">FASE {s.n}</div>
              <h3 className="m-flow-title">{s.title}</h3>
            </div>
            <p className="m-flow-body-text">{s.body}</p>
            <div className="m-flow-demo">
              <Demo step={i} />
            </div>
          </div>
        )}
      </div>
    </div>);

}

function HowItWorks() {
  const [step, setStep] = useState(0);
  const [pinState, setPinState] = useState('before'); // 'before' | 'pinned' | 'after'
  const [isMobile, setIsMobile] = useState(() =>
  typeof window !== 'undefined' && window.matchMedia('(max-width: 880px)').matches
  );
  const sectionRef = useRef(null);
  const stageRef = useRef(null);
  const runwayRef = useRef(null);
  const rafRef = useRef(null);
  const boundsRef = useRef({ pinStart: 0, pinEnd: 0 });
  const TOTAL = 5;
  const STEP_VH = 0.6; // scroll length per step, in viewport heights
  const NAV_OFFSET = 94;

  useEffect(() => {
    const mq = window.matchMedia('(max-width: 880px)');
    const onChange = () => setIsMobile(mq.matches);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, []);

  useEffect(() => {
    if (isMobile) return; // disable scroll-driven on mobile

    // Recompute pinStart/pinEnd (expensive — only on resize/mount, not every scroll)
    function updateBounds() {
      const stage = stageRef.current;
      const runway = runwayRef.current;
      if (!stage || !runway) return;
      const vh = window.innerHeight;
      const stageH = stage.offsetHeight;
      const scrollLen = vh * STEP_VH * TOTAL;
      const runwayAbsTop = runway.getBoundingClientRect().top + window.scrollY;
      boundsRef.current = { pinStart: runwayAbsTop, pinEnd: runwayAbsTop + scrollLen - stageH };
    }

    // Pure scroll computation — reads only scrollY (no layout queries)
    function compute() {
      const { pinStart, pinEnd } = boundsRef.current;
      const sy = window.scrollY + NAV_OFFSET;
      if (sy < pinStart) {
        setPinState('before');
        setStep(0);
      } else if (sy < pinEnd) {
        setPinState('pinned');
        const progress = (sy - pinStart) / (pinEnd - pinStart);
        const idx = Math.min(TOTAL - 1, Math.floor(progress * TOTAL));
        setStep(idx);
      } else {
        setPinState('after');
        setStep(TOTAL - 1);
      }
    }

    // Throttle scroll to one computation per animation frame
    function onScroll() {
      if (rafRef.current) return;
      rafRef.current = requestAnimationFrame(() => {
        rafRef.current = null;
        compute();
      });
    }

    function onResize() {
      updateBounds();
      compute();
    }

    updateBounds();
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, [isMobile]);

  // Runway = total pin scroll length. Stage docks at bottom of runway after pin.
  const runwayStyle = { '--runway': `calc(${TOTAL * STEP_VH * 100}vh)` };

  if (isMobile) {
    return (
      <section
        id="come-funziona"
        className="timeline-section is-mobile"
        data-screen-label="02 Come funziona">
        <div className="wrap">
          <div className="section-head">
            <span className="section-eyebrow">Come funziona</span>
            <h2 className="section-title">Dalla scelta del bando al protocollo, in <em>cinque fasi</em>.</h2>
            <p className="section-lede">Una procedura strutturata che digitalizza l'intera partecipazione alla gara, sostituendo settimane di lavoro tra documenti, bandi e modulistica.</p>
          </div>
          <MobileSteps />
        </div>
      </section>);

  }

  return (
    <section
      id="come-funziona"
      ref={sectionRef}
      className={"timeline-section pin-" + pinState}
      data-screen-label="02 Come funziona"
      style={runwayStyle}>
      
      <div className="wrap">
        <div className="section-head">
          <span className="section-eyebrow">Come funziona</span>
          <h2 className="section-title">Dalla scelta del bando al protocollo, in <em>cinque fasi</em>.</h2>
          <p className="section-lede">Una procedura strutturata che digitalizza l'intera partecipazione alla gara, sostituendo settimane di lavoro tra documenti, bandi e modulistica.</p>
        </div>
        <div className="timeline-runway" ref={runwayRef}>
          <div className="timeline-stage" ref={stageRef}>
            <div className="timeline-col">
              <Timeline activeStep={step} onStepChange={setStep} />
            </div>
            <div className="demo-col">
              <Demo step={step} />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function AIBlock() {
  return (
    <section id="ai" data-screen-label="03 AI">
      <div className="wrap">
        <div className="ai-grid">
          <div>
            <span className="section-eyebrow">Intelligenza Artificiale</span>
            <h2 className="section-title">Un motore AI che <em>capisce</em> i bandi e ti dice come vincerli.</h2>
            <p className="section-lede" style={{ marginBottom: 30 }}>
              Non un chatbot generico. Un sistema specializzato sui bandi delle concessioni balneari italiane, addestrato in collaborazione con esperti del settore.
            </p>
            <div className="ai-feature-list">
              <div className="ai-feature">
                <span className="ai-num">01</span>
                <div>
                  <h4>Rilevamento automatico delle incongruenze</h4>
                  <p>Confronta in modo incrociato visure, bilanci, progetto tecnico e PEF: segnala disallineamenti che spesso costano l'esclusione dalla gara.</p>
                </div>
              </div>
              <div className="ai-feature">
                <span className="ai-num">02</span>
                <div>
                  <h4>Suggerimenti per guadagnare punti</h4>
                  <p>Per ogni criterio del bando l'AI indica concretamente quali integrazioni o scelte progettuali aumentano il punteggio atteso.</p>
                </div>
              </div>
              <div className="ai-feature">
                <span className="ai-num">03</span>
                <div>
                  <h4>Compilazione assistita del PEF</h4>
                  <p>Il Piano Economico Finanziario viene precompilato a partire dall'Offerta Tecnica e dai tuoi dati di bilancio, con verifica di coerenza interna.</p>
                </div>
              </div>
              <div className="ai-feature">
                <span className="ai-num">04</span>
                <div>
                  <h4>Documentazione pronta per il Comune</h4>
                  <p>Pacchetto generato secondo il format richiesto dal bando, con firma digitale e marca temporale, pronto per il protocollo.</p>
                </div>
              </div>
            </div>
          </div>
          <div className="ai-illust">
            <div className="mono" style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.1em', marginBottom: 18 }}>AI · CHECK INCONGRUENZE</div>
            <h5>Il motore confronta i tuoi documenti.</h5>
            <p className="small">Se due dati non tornano, te lo diciamo prima del Comune.</p>
            <div className="ai-doc-stack">
              <div className="ai-doc">
                <div className="doc-title">Bilancio_2024.pdf · riga 14</div>
                <div className="doc-line"></div>
                <div className="doc-line short"></div>
                <span className="doc-flag">Fatturato € 1.240.000</span>
              </div>
              <div className="ai-doc alert">
                <div className="doc-title" style={{ color: 'rgba(255,255,255,0.7)' }}>Visura_camerale.pdf · descrittivo attività</div>
                <div className="doc-line"></div>
                <div className="doc-line short"></div>
                <span className="doc-flag alert">⚠ Fatturato indicato € 1.180.000</span>
              </div>
              <div className="ai-doc">
                <div className="doc-title">PEF_2026-2046.xlsx · cella E8</div>
                <div className="doc-line"></div>
                <div className="doc-line short"></div>
                <span className="doc-flag">Suggerito: allinea valore di partenza</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Audience() {
  return (
    <section id="per-chi" className="audience-section" data-screen-label="04 Per chi è">
      <div className="wrap">
        <div className="section-head center">
          <span className="section-eyebrow">Per chi è</span>
          <h2 className="section-title">Due percorsi, una stessa <em>piattaforma</em>.</h2>
          <p className="section-lede" style={{ margin: '0 auto' }}>Sia che tu sia direttamente interessato a una concessione, sia che tu segua le pratiche per i tuoi clienti, Sportello Balneari riduce i tempi e aumenta le probabilità.</p>
        </div>
        <div className="aud-grid">
          <div className="aud-card">
            <span className="aud-tag">Cliente finale</span>
            <h3>Titolari, hotel e investitori.</h3>
            <p>Per chi ha già una concessione e deve rinnovarla, per gli hotel fronte spiaggia che vogliono uno stabilimento, per gli investitori italiani ed esteri che aprono nuovi business.</p>
            <ul className="aud-list">
              <li>Rinnovo della tua attuale concessione</li>
              <li>Nuova partecipazione a bandi pubblici</li>
              <li>Acquisizione del bagno fronte hotel</li>
              <li>Investimento in nuovi stabilimenti</li>
              <li>Pareri legali e fiscali on demand</li>
            </ul>
            <a href="#contatti" className="btn btn-ghost">Inizia come titolare <span className="btn-arrow">→</span></a>
          </div>
          <div className="aud-card">
            <span className="aud-tag">Consulente</span>
            <h3>Commercialisti, legali, geometri.</h3>
            <p>Per chi segue le pratiche per conto dei clienti: la piattaforma diventa il tuo studio digitale per le concessioni balneari, con multi-cliente e workflow condiviso.</p>
            <ul className="aud-list">
              <li>Gestione multi-cliente con ruoli e permessi</li>
              <li>Riduzione drastica dei tempi di compilazione</li>
              <li>Audit trail e conformità documentale</li>
              <li>Aggiornamento automatico bandi attivi</li>
              <li>Supporto a colleghi specialisti</li>
            </ul>
            <a href="#contatti" className="btn btn-ghost">Inizia come consulente <span className="btn-arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>);

}

function Experts() {
  return (
    <section id="esperti" className="experts" data-screen-label="05 Esperti">
      <div className="wrap experts-inner">
        <div>
          <span className="section-eyebrow" style={{ color: 'var(--giallo)' }}>Realizzato con esperti del settore</span>
          <h2>Costruito insieme a chi <em style={{ fontWeight: "500" }}>vive</em> ogni giorno le concessioni balneari.</h2>
          <p>Sportello Balneari è il risultato di un lavoro continuo con avvocati amministrativisti, commercialisti specializzati nel settore turistico-balneare e geometri che assistono Comuni e operatori da decenni. Su richiesta, accedi a consulenza umana altamente personalizzata sulle tue esigenze.</p>
          <a href="#contatti" className="btn btn-yellow">Richiedi consulenza dedicata <span className="btn-arrow">→</span></a>
        </div>
        <div className="expert-grid">
          <div className="expert-card">
            <div className="role">Legale</div>
            <div className="title">Diritto amministrativo</div>
            <div className="desc">Bandi, ricorsi, conformità Bolkestein, contenzioso TAR.</div>
          </div>
          <div className="expert-card">
            <div className="role">Commercialista</div>
            <div className="title">Settore turistico</div>
            <div className="desc">PEF, bilanci di sostenibilità, fiscalità delle concessioni.</div>
          </div>
          <div className="expert-card">
            <div className="role">Geometra</div>
            <div className="title">Progettazione tecnica</div>
            <div className="desc">Planimetrie, vincoli costieri, demanio, accessibilità.</div>
          </div>
          <div className="expert-card">
            <div className="role">Settore</div>
            <div className="title">Esperienza operativa</div>
            <div className="desc">Operatori balneari con storiche concessioni in 9 regioni.</div>
          </div>
        </div>
      </div>
    </section>);

}

function Contact() {
  return (
    <section id="contatti" className="contact-section" data-screen-label="06 Contatti">
      <div className="wrap">
        <div className="contact-grid">
          <div className="contact-side">
            <span className="section-eyebrow">Parliamone</span>
            <h2>Richiedi <em>informazioni</em>.</h2>
            <p>Raccontaci la tua situazione: ti rispondiamo con una prima analisi del tuo posizionamento e ti spieghiamo come la piattaforma può supportarti. Senza impegno.</p>
          </div>
          <div className="contact-form-col">
            <ContactForm />
          </div>
          <div className="contact-info">
            <div className="contact-info-row">
              <div className="ico">@</div>
              <div>
                <div className="lbl">Email</div>
                <a className="val" href="mailto:info@sportellobalneari.it">info@sportellobalneari.it</a>
              </div>
            </div>
            <div className="contact-info-row">
              <div className="ico">⌖</div>
              <div>
                <div className="lbl">Sede</div>
                <div className="val">Via Alceste De Ambris 2/B, 43122 Parma (PR)</div>
              </div>
            </div>
            <div className="contact-info-row">
              <div className="ico">◷</div>
              <div>
                <div className="lbl">Tempi di risposta</div>
                <div className="val">Entro 24 ore lavorative</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer data-screen-label="07 Footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <Logo white />
            <p>La piattaforma SaaS per partecipare e vincere le gare delle concessioni balneari in Italia.</p>
          </div>
          <div className="foot-col">
            <h5>Piattaforma</h5>
            <a href="#come-funziona">Come funziona</a>
            <a href="#ai">Intelligenza Artificiale</a>
            <a href="#per-chi">Per chi è</a>
            <a href="#esperti">Esperti</a>
          </div>
          <div className="foot-col">
            <h5>Contatti</h5>
            <a href="mailto:info@sportellobalneari.it">info@sportellobalneari.it</a>
            <a href="#contatti">Richiedi informazioni</a>
            <a href="privacy.html">Privacy Policy</a>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 <a href="https://www.arsera.it" target="_blank" rel="noopener" className="arsera-link">ARSERA S.r.l. Unipersonale</a> · P.IVA 02973240340</div>
          <div>Sportello Balneari è un prodotto <a href="https://www.arsera.it" target="_blank" rel="noopener" className="arsera-link">ARSERA</a></div>
        </div>
      </div>
    </footer>);

}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "concessioniItalic": true
} /*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <React.Fragment>
      <Nav />
      <Hero tweaks={tweaks} />
      <HowItWorks />
      <AIBlock />
      <Audience />
      <Experts />
      <Contact />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakToggle
            label="‘concessioni balneari’ in corsivo"
            value={tweaks.concessioniItalic}
            onChange={(v) => setTweak('concessioniItalic', v)} />
          
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>);

}

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