const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ── Icons ────────────────────────────────────────────────────────────────────
const Ic = ({ d, size=20, fill="none", stroke="currentColor", sw=1.6, children, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...p}>
    {d ? <path d={d} /> : children}
  </svg>
);
const IcArrow   = (p) => <Ic {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></Ic>;
const IcCheck   = (p) => <Ic {...p}><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none" opacity="0.12"/><path d="M8 12.5l2.5 2.5L16 9.5"/></Ic>;
const IcClock   = (p) => <Ic {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Ic>;
const IcPin     = (p) => <Ic {...p}><path d="M12 22s-7-7-7-12a7 7 0 1 1 14 0c0 5-7 12-7 12z"/><circle cx="12" cy="10" r="2.5"/></Ic>;
const IcPhone   = (p) => <Ic {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></Ic>;
const IcMail    = (p) => <Ic {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></Ic>;
const IcWA      = (p) => <Ic {...p}><path d="M20 12a8 8 0 1 1-3.2-6.4L20 4l-1.4 3.2A8 8 0 0 1 20 12z"/><path d="M9 9.5c.4 2 2.5 4.1 4.5 4.5.4.1.9 0 1.2-.3l.8-.8a.6.6 0 0 1 .7-.1l1.6.8c.3.1.4.5.3.8a3 3 0 0 1-3 1.7c-3.6-.4-6.7-3.5-7.1-7.1A3 3 0 0 1 9.7 6c.3-.1.7 0 .8.3l.8 1.6a.6.6 0 0 1-.1.7l-.8.8c-.3.3-.4.7-.4 1.1z" fill="currentColor" stroke="none"/></Ic>;
const IcIG      = (p) => <Ic {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></Ic>;
const IcFB      = (p) => <Ic {...p}><path d="M14 22V13h3l1-4h-4V6.5c0-1.2.4-2 2.1-2H18V1.1A29 29 0 0 0 15.1 1C12.1 1 10 2.8 10 6v3H7v4h3v9z" fill="currentColor" stroke="none"/></Ic>;
const IcRoof    = (p) => <Ic {...p}><path d="M3 11l9-7 9 7"/><path d="M5 11v9h14v-9"/><path d="M9 20v-5h6v5"/></Ic>;
const IcCar     = (p) => <Ic {...p}><path d="M5 16V12l2-5h10l2 5v4"/><path d="M3 16h18v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><circle cx="7.5" cy="16" r="1.5" fill="currentColor"/><circle cx="16.5" cy="16" r="1.5" fill="currentColor"/></Ic>;
const IcShirt   = (p) => <Ic {...p}><path d="M4 7l4-3 2 2h4l2-2 4 3-2 4h-2v9H8v-9H6z"/></Ic>;
const IcShield  = (p) => <Ic {...p}><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></Ic>;
const IcCalendar= (p) => <Ic {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></Ic>;
const IcCookie  = (p) => <Ic {...p}><path d="M12 3a9 9 0 1 0 9 9 3.2 3.2 0 0 1-4.2-3 3.2 3.2 0 0 1-3.4-3.4A3.2 3.2 0 0 1 12 3z"/><circle cx="9" cy="10" r=".9" fill="currentColor" stroke="none"/><circle cx="8.5" cy="14.5" r=".9" fill="currentColor" stroke="none"/><circle cx="13" cy="15.5" r=".9" fill="currentColor" stroke="none"/></Ic>;

// ── Logo ──────────────────────────────────────────────────────────────────────
function LogoMark(){
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="9" cy="9" r="6.2" stroke="#fff" strokeWidth="1.7"/>
      <path d="M9 4.5v9M4.5 9h9M6 5.8l6 6.4M12 5.8l-6 6.4" stroke="#fff" strokeWidth="1.2" strokeLinecap="round" opacity=".85"/>
      <path d="M13.4 13.4l6.4 6.4a1.6 1.6 0 0 1 0 2.3 1.6 1.6 0 0 1-2.3 0l-6.4-6.4" fill="#fff"/>
      <circle cx="18" cy="6" r="2.2" fill="#F5C821"/>
    </svg>
  );
}

function Logo(){
  return (
    <a href="#top" className="logo">
      <img
        src="./assets/Risorsa 156553.png"
        alt="Morozzo Padel ASD"
        className="logo-img"
        width="160"
        height="36"
      />
    </a>
  );
}

// ── Header ────────────────────────────────────────────────────────────────────
function Header(){
  const [open, setOpen] = useState(false);
  const firstLinkRef = useRef(null);
  const close = () => setOpen(false);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  useEffect(() => {
    if (open && firstLinkRef.current) firstLinkRef.current.focus();
  }, [open]);

  return (
    <>
      <header className="hdr" id="top">
        <div className="hdr-row">
          <Logo/>
          <nav className="nav">
            <a href="#associazione">L'Associazione</a>
            <a href="#struttura">La Struttura</a>
            <a href="#prenota">Prenota</a>
            <a href="#soci">Soci</a>
            <a href="#padel">Padel</a>
            <a href="#galleria">Galleria</a>
            <a href="#contatti">Contatti</a>
          </nav>
          <div className="hdr-cta">
            <a className="btn btn-ghost-light" href="#soci">Diventa Socio</a>
            <a className="btn btn-primary" href="#prenota">
              Prenota
              <span className="btn-ico"><IcArrow size={13}/></span>
            </a>
            <button
              className={`mob-burger ${open ? 'open' : ''}`}
              aria-label="Menu"
              aria-expanded={open}
              aria-controls="mob-menu"
              onClick={() => setOpen(o => !o)}
            >
              <span className="burger-line"/>
              <span className="burger-line"/>
              <span className="burger-line"/>
            </button>
          </div>
        </div>
      </header>
      <nav id="mob-menu" className={`mob-overlay ${open ? 'open' : ''}`} role="dialog" aria-modal="true" aria-label="Menu di navigazione" aria-hidden={!open}>
        <a ref={firstLinkRef} href="#associazione" onClick={close}>L'Associazione</a>
        <a href="#struttura"    onClick={close}>La Struttura</a>
        <a href="#prenota"      onClick={close}>Prenota</a>
        <a href="#soci"         onClick={close}>Soci</a>
        <a href="#padel"        onClick={close}>Padel</a>
        <a href="#galleria"     onClick={close}>Galleria</a>
        <a href="#contatti"     onClick={close}>Contatti</a>
      </nav>
    </>
  );
}

// ── Hero ──────────────────────────────────────────────────────────────────────
function HeroArt(){
  return (
    <div className="hero-art" aria-hidden="true">
      <div className="stripe"/>
      <div className="badge">▌ Sport · Comunità · Benessere</div>
      <div className="court">
        <div className="svc"/>
        <div className="net"/>
        <div className="mid"/>
      </div>
      <div className="ball"/>
      <div className="label">
        <div>{"{ hero / court-shot.jpg }"}</div>
        <div className="right">16:20<br/>Centro 02</div>
      </div>
    </div>
  );
}

function Marquee(){
  const item = (
    <span>
      QUATTRO CAMPI COPERTI <span className="dot"/>
      APERTO 365 GIORNI <span className="dot"/>
      PRENOTI SU PLAYTOMIC <span className="dot"/>
      TESSERAMENTO GRATUITO <span className="dot"/>
      VIA MONDOVÌ 67 — MOROZZO <span className="dot"/>
    </span>
  );
  return (
    <div className="marquee">
      <div className="track">
        {item}{item}{item}
      </div>
    </div>
  );
}

const VIDEO_SRC = "./assets/MOROZZO PADEL - Mst1ddd video per sito web.mp4";

function Hero(){
  return (
    <section className="hero">
      <video className="hero-video" src={VIDEO_SRC} autoPlay muted loop playsInline preload="metadata"/>
      <div className="hero-overlay"/>
      <div className="wrap hero-inner">
        <div style={{textAlign:'center'}}>
          <div className="eyebrow" data-reveal>A.S.D. — Morozzo · Cuneo · Italia</div>
          <h1 data-reveal data-reveal-delay="1" style={{marginTop:20}}>
            <span>Il padel</span>
            <span className="line2" style={{display:'block'}}>a casa tua,</span>
            <span className="line3" style={{display:'block'}}><em>tutto</em> l'anno.</span>
          </h1>
          <p className="hero-sub" data-reveal data-reveal-delay="2" style={{margin:'28px auto 0'}}>
            Quattro campi coperti, una comunità che cresce ogni giorno e l'energia di un'associazione sportiva dilettantistica nata per far giocare tutti, dai principianti agli agonisti.
          </p>
          <div className="hero-ctas" data-reveal data-reveal-delay="3">
            <a className="btn btn-primary btn-lg" href="#prenota">
              Prenota un Campo
              <span className="btn-ico"><IcArrow size={14}/></span>
            </a>
            <a className="btn btn-yellow btn-lg" href="#soci">
              Diventa Socio
              <span className="btn-ico"><IcArrow size={14}/></span>
            </a>
            <a className="btn btn-ghost-light btn-lg" href="#contatti">Contattaci</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── InfoBar ────────────────────────────────────────────────────────────────────
function InfoBar(){
  return (
    <section className="infobar" aria-label="Info rapide">
      <div className="wrap">
        <div className="infobar-row">
          <div data-reveal><div className="ico"><IcRoof/></div><div><div className="k">Struttura</div><div className="v">4 campi · tutti coperti</div></div></div>
          <div data-reveal data-reveal-delay="1"><div className="ico"><IcClock/></div><div><div className="k">Aperti tutti i giorni</div><div className="v">08:30 — 23:30</div></div></div>
          <div data-reveal data-reveal-delay="2"><div className="ico"><IcPin/></div><div><div className="k">Dove siamo</div><div className="v">Via Mondovì 67 · Morozzo (CN)</div></div></div>
          <div data-reveal data-reveal-delay="3"><div className="ico"><IcCalendar/></div><div><div className="k">Prenoti su</div><div className="v">Playtomic · 24/7</div></div></div>
        </div>
      </div>
    </section>
  );
}

// ── Association ────────────────────────────────────────────────────────────────
function Association(){
  return (
    <section className="sec-pad" id="associazione">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <div>
            <div className="eyebrow">01 — L'Associazione</div>
            <h2 className="title">Uno sport.<br/>Una <em>comunità</em>.</h2>
          </div>
          <p className="desc">
            Morozzo Padel A.S.D. è un'associazione sportiva dilettantistica nata per portare il padel nel cuneese in modo accessibile, accogliente e di qualità. Non siamo un'azienda: siamo soci e atleti che credono nello sport come strumento di benessere e relazione.
          </p>
        </div>
        <div className="assoc-grid">
          <div className="assoc-pillars">
            <div className="pillar-shell" data-reveal data-reveal-delay="1">
              <div className="pillar">
                <div className="pillar-head"><div className="n">01</div><h3>Inclusività</h3></div>
                <p>Campi e tornei pensati per ogni livello, dai principianti che impugnano la prima racchetta a chi gioca da anni.</p>
              </div>
            </div>
            <div className="pillar-shell" data-reveal data-reveal-delay="2">
              <div className="pillar">
                <div className="pillar-head"><div className="n">02</div><h3>Comunità</h3></div>
                <p>Lezioni, eventi e tornei sociali. Un calendario fitto per ritrovarsi anche oltre i 60 minuti di partita.</p>
              </div>
            </div>
            <div className="pillar-shell" data-reveal data-reveal-delay="3">
              <div className="pillar">
                <div className="pillar-head"><div className="n">03</div><h3>Benessere</h3></div>
                <p>Movimento, ossigeno e divertimento. Il padel è lo sport più democratico che c'è, e fa bene.</p>
              </div>
            </div>
            <div className="pillar-shell" data-reveal data-reveal-delay="4">
              <div className="pillar">
                <div className="pillar-head"><div className="n">04</div><h3>Territorio</h3></div>
                <p>Radicati a Morozzo, aperti a tutto il Piemonte. Un punto d'incontro per giocatori da Cuneo, Mondovì, Fossano e oltre.</p>
              </div>
            </div>
          </div>
          <div data-reveal data-reveal-delay="2">
            <div className="assoc-quote">
              <div className="stripe"/>
              <div className="lead">"Volevamo un posto dove ogni persona, bambino, adulto, principiante o esperto, si sentisse <em>a casa</em>. Il resto è venuto da sé."</div>
              <div className="sign">
                <div className="av"/>
                <div className="who"><strong>Il Direttivo</strong><span>Morozzo Padel A.S.D.</span></div>
              </div>
            </div>
            <div className="assoc-stats">
              <StatCounter value="+400" label="Soci attivi" />
              <StatCounter value="12k" label="Partite / anno" />
              <StatCounter value="28" label="Eventi 2025" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Facility ────────────────────────────────────────────────────────────────────
function Facility(){
  const BASE = "./assets/";
  const courts = [
    { n:1, name:"Centrale", tag:"Vetri panoramici · Pubblico", c:"", img:"CON LOGO (91).jpg" },
    { n:2, name:"Nord",     tag:"Standard WPT · Riscaldato",  c:"alt2", img:"CON LOGO (61).jpg" },
    { n:3, name:"Sud",      tag:"Standard WPT · Riscaldato",  c:"alt", img:"CON LOGO (92).jpg" },
    { n:4, name:"Scuola",   tag:"Lezioni · Mini-tornei",      c:"alt3", img:"CON LOGO (60).jpg" },
  ];
  return (
    <section className="facility sec-pad" id="struttura">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <div>
            <div className="eyebrow">02 — La Struttura</div>
            <h2 className="title">Quattro campi.<br/>Mai un <em>rinvio</em>.</h2>
          </div>
          <p className="desc">
            Tutti i nostri campi sono coperti, riscaldati in inverno e ventilati in estate. Si gioca con pioggia, neve o sole, sempre. Una struttura pensata per gli atleti, con illuminazione professionale e superficie di gioco a norma WPT.
          </p>
        </div>
        <div className="courts">
          {courts.map((c,i) => (
            <div key={c.n} className="court-card-shell" data-reveal data-reveal-delay={String(i+1)}>
              <div className={`court-card ${c.c}`}>
                <img className="photo" src={`${BASE}${c.img}`} alt={`Campo ${c.name} — Morozzo Padel`} loading="lazy"/>
                <div className="stripe"/>
                <div className="num">0{c.n}</div>
                <div className="meta">
                  <div className="name">Campo {c.name}</div>
                  <div className="tag">{c.tag}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="facility-feats" data-reveal>
          <div className="feat">
            <div className="ico"><IcRoof size={18}/></div>
            <h4>Coperti tutto l'anno</h4>
            <p>Struttura indoor, si gioca 365 giorni l'anno, con qualsiasi meteo.</p>
          </div>
          <div className="feat">
            <div className="ico"><IcShield size={18}/></div>
            <h4>Standard WPT</h4>
            <p>Vetri temperati, manto sportivo e illuminazione a norma per la pratica agonistica.</p>
          </div>
          <div className="feat">
            <div className="ico"><IcCar size={18}/></div>
            <h4>Parcheggio gratuito</h4>
            <p>Ampio posteggio in struttura, accesso diretto agli spogliatoi e all'area relax.</p>
          </div>
          <div className="feat">
            <div className="ico"><IcShirt size={18}/></div>
            <h4>Spogliatoi & shop</h4>
            <p>Docce, armadietti, area lounge e shop interno per racchette, palline e abbigliamento.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Booking ────────────────────────────────────────────────────────────────────
function PlaytomicCard(){
  const days  = [{d:"Mar",n:"20"},{d:"Mer",n:"21"},{d:"Gio",n:"22",on:true},{d:"Ven",n:"23"},{d:"Sab",n:"24"}];
  const slots  = ["18:00","19:00","20:00","21:00","22:00","23:00"];
  const states = ["taken","","hi","","taken",""];
  return (
    <div className="pt-card">
      <div className="pt-head">
        <div className="brand"><div className="d"/> Playtomic · Morozzo Padel</div>
        <div className="live">Live</div>
      </div>
      <div className="pt-date">
        {days.map(d => <div key={d.n} className={`d ${d.on?'on':''}`}>{d.d}<b>{d.n}</b></div>)}
      </div>
      <div className="pt-slots">
        {slots.map((s,i) => <div key={s} className={`s ${states[i]}`}>{s}</div>)}
      </div>
      <div className="pt-foot">
        <div className="price">€24<small>/ 90 min · campo 02</small></div>
        <button className="pt-btn">Prenota <IcArrow size={14}/></button>
      </div>
    </div>
  );
}

function Booking(){
  const secRef = React.useRef(null);
  const rafRef = React.useRef(null);
  const pendingRef = React.useRef(null);

  React.useEffect(()=>{
    const host = secRef.current;
    if(!host) return;
    host.style.setProperty('--posX','0');
    host.style.setProperty('--posY','0');

    const move = (e)=>{
      pendingRef.current = e;
      if(rafRef.current) return;
      rafRef.current = requestAnimationFrame(()=>{
        rafRef.current = null;
        const ev = pendingRef.current;
        if(!ev) return;
        const rect = host.getBoundingClientRect();
        const px = ev.clientX - rect.left - rect.width/2;
        const py = ev.clientY - rect.top  - rect.height/2;
        const k = window.matchMedia('(prefers-reduced-motion:reduce)').matches ? 0.05 : 1.5;
        host.style.setProperty('--posX', String(px*k));
        host.style.setProperty('--posY', String(py*k));
      });
    };
    const reset = ()=>{
      host.style.setProperty('--posX','0');
      host.style.setProperty('--posY','0');
    };
    host.addEventListener('pointermove', move, {passive:true});
    host.addEventListener('pointerleave', reset);
    host.addEventListener('touchmove', (e)=>{ if(e.touches[0]){ pendingRef.current=e.touches[0]; move(e.touches[0]); } }, {passive:true});
    host.addEventListener('touchend', reset);
    return ()=>{
      host.removeEventListener('pointermove', move);
      host.removeEventListener('pointerleave', reset);
      if(rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  },[]);

  return (
    <section ref={secRef} className="sec-pad" id="prenota"
      style={{position:'relative',overflow:'hidden'}}>
      <div aria-hidden="true" className="booking-gradient"/>
      <div className="wrap" style={{position:'relative',zIndex:1}}>
        <div className="booking-shell" data-reveal>
          <div className="booking">
            <div className="booking-left">
              <div className="eyebrow" style={{color:'rgba(255,255,255,.65)',borderColor:'rgba(255,255,255,.18)',background:'rgba(255,255,255,.08)'}}>03 — Prenota</div>
              <h2>Prenota su <em>Playtomic</em>.<br/>Sempre, da ovunque.</h2>
              <p>Gestiamo le prenotazioni tramite Playtomic, l'app più usata dai padelisti italiani. In tre tap hai il tuo campo prenotato e i tuoi compagni avvisati.</p>
              <ol className="booking-steps">
                <li><div className="n">1</div><div><b>Scarica Playtomic</b><span>Disponibile gratis su iOS e Android.</span></div></li>
                <li><div className="n">2</div><div><b>Cerca "Morozzo Padel"</b><span>Trovi tutti i nostri campi e la disponibilità in tempo reale.</span></div></li>
                <li><div className="n">3</div><div><b>Scegli orario e prenota</b><span>Paghi in app, niente file, niente telefonate.</span></div></li>
              </ol>
              <div className="booking-cta">
                <a className="btn btn-primary btn-lg" href="https://app.playtomic.io/" target="_blank" rel="noopener noreferrer">
                  Apri Playtomic
                  <span className="btn-ico"><IcArrow size={14}/></span>
                </a>
                <a className="btn btn-ghost-light btn-lg" href="#contatti">Preferisci chiamare?</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Membership ────────────────────────────────────────────────────────────────────
function Membership(){
  return (
    <section className="members sec-pad" id="soci">
      <div className="wrap">
        <div className="mem-grid">
          <div className="mem-card-shell" data-reveal>
            <div className="mem-card">
              <div className="ribbon">Sempre gratuito</div>
              <div className="eyebrow">Tessera A.S.D.</div>
              <h3>Diventa Socio.</h3>
              <div className="price">
                <span className="v">€0</span>
                <span className="u">— tesseramento</span>
              </div>
              <ul>
                <li><IcCheck size={22}/> Accesso completo a tutti i 4 campi</li>
                <li><IcCheck size={22}/> Tornei sociali, eventi e serate aperte</li>
                <li><IcCheck size={22}/> Tariffe agevolate su lezioni e clinic</li>
                <li><IcCheck size={22}/> Copertura assicurativa sportiva</li>
                <li><IcCheck size={22}/> Newsletter, comunità WhatsApp, sconti shop</li>
              </ul>
            </div>
          </div>
          <div className="mem-copy" data-reveal data-reveal-delay="2">
            <div className="eyebrow">04 — Tesseramento</div>
            <h2>Entra nella <em>squadra.</em><br/>È gratis.</h2>
            <p>L'iscrizione alla A.S.D. è libera e senza costi. Bastano pochi minuti in struttura o un messaggio su WhatsApp: in cambio ricevi accesso a tutta la nostra programmazione, alle tariffe riservate ai soci e a una comunità di oltre 400 padelisti attivi.</p>
            <div className="mem-bullets">
              <div><span className="dot"/> Per giocatori di ogni livello, non serve esperienza.</div>
              <div><span className="dot"/> Età libera, dai più piccoli agli over 60.</div>
              <div><span className="dot"/> Famiglie e gruppi: chiedi le condizioni dedicate.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Padel Explainer ────────────────────────────────────────────────────────────────────
function PadelExplainer(){
  return (
    <section className="padel sec-pad" id="padel">
      <div className="wrap">
        <div className="padel-grid">
          <div data-reveal>
            <div className="eyebrow" style={{color:'rgba(255,255,255,.62)',borderColor:'rgba(255,255,255,.15)',background:'rgba(255,255,255,.07)'}}>05 — Cos'è il padel</div>
            <h2>Lo sport più <em>contagioso</em> degli ultimi 10 anni.</h2>
            <p className="padel-lead">
              Si gioca in due contro due, su un campo più piccolo del tennis, racchetta in mano e pareti di vetro intorno. Le regole sono semplici, lo scambio dura, ridere è praticamente obbligatorio. Bastano 20 minuti per imparare le basi, e poi non si smette più.
            </p>
            <div className="padel-facts">
              <div className="f-shell"><div className="f"><div className="k">Formato</div><div className="v">2 vs 2</div></div></div>
              <div className="f-shell"><div className="f"><div className="k">Durata</div><div className="v">60 — 90 min</div></div></div>
              <div className="f-shell"><div className="f"><div className="k">Livello</div><div className="v">Da principiante a pro</div></div></div>
              <div className="f-shell"><div className="f"><div className="k">Campo</div><div className="v">10×20 m · vetrato</div></div></div>
            </div>
            <div style={{marginTop:36}}>
              <a className="btn btn-yellow btn-lg" href="#prenota">
                Provalo, prenota ora
                <span className="btn-ico"><IcArrow size={14}/></span>
              </a>
            </div>
          </div>
          <div className="padel-art" data-reveal data-reveal-delay="2">
            <img
              src="./assets/un giocatore di padel che impugna la racchetta ed è pronto a colpire la pallina.jpg"
              alt="Giocatore di padel pronto a colpire"
              style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'center top'}}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Gallery ────────────────────────────────────────────────────────────────────
function Gallery(){
  const photos = [
    { id:"a", src:"./assets/CON LOGO (109).jpg", size:"tall" },
    { id:"b", src:"./assets/CON LOGO (2).jpg",   size:"wide" },
    { id:"c", src:"./assets/CON LOGO (23).jpg",  size:"sq"   },
    { id:"d", src:"./assets/CON LOGO (26).jpg",  size:"tall" },
    { id:"e", src:"./assets/CON LOGO (52).jpg",  size:"wide" },
    { id:"f", src:"./assets/CON LOGO (53).jpg",  size:"sq"   },
    { id:"g", src:"./assets/CON LOGO (58).jpg",  size:"wide" },
    { id:"h", src:"./assets/CON LOGO (9).jpg",   size:"tall" },
  ];
  const ref = useRef(null);
  const drag = useRef({down:false,startX:0,sl:0});
  const onDown = e => { e.preventDefault(); const r=ref.current; drag.current={down:true,startX:e.pageX-r.offsetLeft,sl:r.scrollLeft}; };
  const onUp   = () => { drag.current.down=false; };
  const onMove = e => {
    if(!drag.current.down) return;
    e.preventDefault();
    const x = e.pageX - ref.current.offsetLeft;
    ref.current.scrollLeft = drag.current.sl - (x - drag.current.startX)*1.4;
  };
  return (
    <section className="sec-pad" id="galleria">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <div>
            <div className="eyebrow">06 — Galleria</div>
            <h2 className="title">La vita,<br/><em>dentro</em> la struttura.</h2>
          </div>
          <p className="desc">
            Una selezione di immagini dai tornei, dalle clinic, dalle serate e dai momenti che fanno della nostra A.S.D. una comunità prima ancora che un circolo sportivo.
          </p>
        </div>
        <div className="gallery-scroll" data-reveal data-reveal-delay="1"
          ref={ref} onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}>
          {photos.map(it => (
            <div key={it.id} className={`gallery-card ${it.size}`}>
              <img src={it.src} alt="Morozzo Padel ASD" draggable="false" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',display:'block',pointerEvents:'none',userSelect:'none'}} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── WhatsApp ────────────────────────────────────────────────────────────────────
function WhatsAppBlock(){
  return (
    <section className="sec-pad" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="whats-shell" data-reveal>
          <div className="whats">
            <div className="whats-grid">
              <div className="whats-left">
                <div className="eyebrow" style={{color:'rgba(255,255,255,.6)',borderColor:'rgba(255,255,255,.14)',background:'rgba(255,255,255,.06)'}}>07 — Comunità</div>
                <h2>Entra nel gruppo <em>WhatsApp.</em></h2>
                <p>Cerchi un quarto? Ti manca un compagno? Vuoi sapere quando sono i prossimi tornei? Il gruppo WhatsApp dei soci è dove succede tutto, e non perdi un colpo.</p>
                <div className="whats-cta">
                  <a className="btn btn-wa btn-lg" href="https://wa.me/393803083485" target="_blank" rel="noopener noreferrer">
                    <IcWA size={18}/> Entra nel gruppo
                  </a>
                </div>
              </div>
              <div className="whats-right">
                <div className="qr-wrap">
                  <img
                    src="./assets/QR_Morozzo_GruppoWhatsapp.png"
                    alt="QR code gruppo WhatsApp Morozzo Padel"
                    className="qr-img"
                    loading="lazy"
                    width="220"
                    height="220"
                  />
                  <p className="qr-label">Scansiona per entrare nel gruppo</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Contacts ────────────────────────────────────────────────────────────────────
function MapBlock(){
  return (
    <div className="map">
      <iframe
        title="Morozzo Padel ASD — mappa"
        src="https://www.openstreetmap.org/export/embed.html?bbox=7.711%2C44.416%2C7.741%2C44.436&layer=mapnik&marker=44.4263%2C7.7261"
        loading="lazy"
        allowFullScreen
        referrerPolicy="no-referrer-when-downgrade"
      />
      <div className="addr">
        <div className="k">Indirizzo</div>
        <div className="v">Via Mondovì 67<br/>12040 Morozzo (CN) · Italia</div>
        <a className="b" href="https://maps.google.com/?q=Via+Mondovì+67,+12040+Morozzo+CN" target="_blank" rel="noopener noreferrer">Apri in Maps</a>
      </div>
    </div>
  );
}

function Contacts(){
  return (
    <section className="sec-pad" id="contatti">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <div>
            <div className="eyebrow">08 — Contatti</div>
            <h2 className="title">Ci trovi <em>qui.</em></h2>
          </div>
          <p className="desc">A 10 minuti dall'uscita autostradale di Cuneo Est, parcheggio gratuito in struttura.</p>
        </div>
        <div className="contacts-grid">
          <div className="ct-list">
            <div className="ct-shell" data-reveal>
              <a className="ct-card" href="tel:+393803083485">
                <div className="ico"><IcPhone/></div>
                <div><div className="k">Telefono</div><div className="v">+39 380 308 3485<small>tutti i giorni 8:30 — 23:30</small></div></div>
                <IcArrow size={18} className="arr"/>
              </a>
            </div>
            <div className="ct-shell" data-reveal data-reveal-delay="1">
              <a className="ct-card grn" href="https://wa.me/393803083485">
                <div className="ico"><IcWA/></div>
                <div><div className="k">WhatsApp</div><div className="v">+39 380 308 3485<small>scrivi anche al gruppo soci</small></div></div>
                <IcArrow size={18} className="arr"/>
              </a>
            </div>
            <div className="ct-shell" data-reveal data-reveal-delay="2">
              <a className="ct-card" href="mailto:morozzopadel@gmail.com">
                <div className="ico"><IcMail/></div>
                <div><div className="k">Email</div><div className="v">morozzopadel@gmail.com<small>per informazioni e tesseramenti</small></div></div>
                <IcArrow size={18} className="arr"/>
              </a>
            </div>
            <div className="ct-shell" data-reveal data-reveal-delay="3">
              <a className="ct-card org" href="https://www.instagram.com/morozzopadel" target="_blank" rel="noopener noreferrer">
                <div className="ico"><IcIG/></div>
                <div><div className="k">Instagram</div><div className="v">@morozzopadel<small>foto, tornei, dietro le quinte</small></div></div>
                <IcArrow size={18} className="arr"/>
              </a>
            </div>
            <div className="hours" data-reveal data-reveal-delay="4">
              <div className="ico"><IcClock/></div>
              <div><div className="k">Orari di apertura</div><div className="v">Tutti i giorni · 08:30 — 23:30<small>Aperti 365 giorni l'anno</small></div></div>
              <OpenStatus/>
            </div>
          </div>
          <div data-reveal data-reveal-delay="1"><MapBlock/></div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────────────────────
function Footer(){
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-grid">
          <div>
            <div className="ftr-brand">MOROZZO<span style={{color:'var(--orange)',fontStyle:'normal'}}>·</span>PADEL<small>Associazione Sportiva Dilettantistica</small></div>
            <p className="ftr-claim">Quattro campi coperti, una comunità che cresce ogni giorno. Lo sport che ci piace, dove ci piace giocarlo.</p>
            <div className="socs">
              <a href="https://www.instagram.com/morozzopadel" aria-label="Instagram" target="_blank" rel="noopener noreferrer"><IcIG/></a>
              <a href="https://www.facebook.com/morozzopadel" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><IcFB/></a>
              <a href="https://wa.me/393803083485" aria-label="WhatsApp" target="_blank" rel="noopener noreferrer"><IcWA/></a>
            </div>
          </div>
          <div>
            <h5>Naviga</h5>
            <ul>
              <li><a href="#associazione">L'Associazione</a></li>
              <li><a href="#struttura">La Struttura</a></li>
              <li><a href="#prenota">Prenota</a></li>
              <li><a href="#soci">Diventa Socio</a></li>
              <li><a href="#galleria">Galleria</a></li>
              <li><a href="#padel">Cos'è il Padel</a></li>
            </ul>
          </div>
          <div>
            <h5>Contatti</h5>
            <ul>
              <li><a href="tel:+393803083485">+39 380 308 3485</a></li>
              <li><a href="https://wa.me/393803083485">WhatsApp</a></li>
              <li><a href="mailto:morozzopadel@gmail.com">morozzopadel@gmail.com</a></li>
              <li><a href="https://www.instagram.com/morozzopadel" target="_blank" rel="noopener noreferrer">@morozzopadel</a></li>
            </ul>
          </div>
          <div>
            <h5>Dove siamo</h5>
            <ul style={{color:'rgba(255,255,255,.7)'}}>
              <li>Via Mondovì 67</li>
              <li>12040 Morozzo (CN)</li>
              <li>Italia</li>
              <li style={{marginTop:8}}><a href="https://maps.google.com/?q=Via+Mondovì+67,+12040+Morozzo+CN" target="_blank" rel="noopener noreferrer">Indicazioni Google Maps →</a></li>
            </ul>
          </div>
        </div>
        <div className="ftr-bottom">
          <div>© 2026 Morozzo Padel A.S.D. — Via Mondovì 67, 12040 Morozzo (CN) — C.F. 12888080012</div>
          <div style={{display:'flex',gap:20,flexWrap:'wrap',alignItems:'center'}}>
            <a href="./privacy-policy.html" style={{color:'inherit'}}>Privacy Policy</a>
            <a href="./cookie-policy.html" style={{color:'inherit'}}>Cookie Policy</a>
            <a href="mailto:morozzopadel@gmail.com" style={{color:'inherit'}}>morozzopadel@gmail.com</a>
          </div>
        </div>
        <div className="ftr-credit">
          Sito web realizzato da <a href="https://liberastudio.tech" target="_blank" rel="noopener noreferrer">LIBERA Studio</a>
        </div>
      </div>
    </footer>
  );
}


// ── StatCounter ───────────────────────────────────────────────────────────────
function StatCounter({ value, label }) {
  const ref = useRef(null);
  const [count, setCount] = useState(0);
  const [started, setStarted] = useState(false);
  const num = parseInt(value.replace(/\D/g,''), 10);
  const prefix = value.startsWith('+') ? '+' : '';
  const suffix = value.endsWith('k') ? 'k' : '';
  useEffect(() => {
    const el = ref.current; if(!el) return;
    const obs = new IntersectionObserver(([e]) => { if(e.isIntersecting){ setStarted(true); obs.disconnect(); } },{threshold:0.5});
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if(!started) return;
    const dur = 1400, t0 = performance.now();
    const tick = (now) => {
      const p = Math.min((now-t0)/dur, 1);
      const ease = 1 - Math.pow(1-p, 4);
      setCount(Math.floor(ease*num));
      if(p<1) requestAnimationFrame(tick); else setCount(num);
    };
    requestAnimationFrame(tick);
  }, [started]);
  return (
    <div ref={ref} className="s-shell">
      <div className="s">
        <div className="v">{prefix}{count}{suffix}</div>
        <div className="k">{label}</div>
      </div>
    </div>
  );
}

// ── OpenStatus ────────────────────────────────────────────────────────────────
function OpenStatus() {
  const getS = () => {
    const d = new Date(), m = d.getHours()*60 + d.getMinutes();
    const isOpen = m >= 8*60+30 && m < 23*60+30;
    return { open:isOpen, label: isOpen ? 'Aperto ora' : m < 8*60+30 ? 'Apre 08:30' : 'Chiuso' };
  };
  const [s, setS] = useState(() => getS());
  useEffect(() => { const t = setInterval(() => setS(getS()), 60000); return () => clearInterval(t); }, []);
  return <div className={`pill${s.open ? '' : ' pill-closed'}`}>{s.label}</div>;
}

// ── MobileCTA ────────────────────────────────────────────────────────────────
function MobileCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const hero = document.querySelector('.hero');
    if(!hero) return;
    const obs = new IntersectionObserver(([e]) => setShow(!e.isIntersecting), {threshold:0});
    obs.observe(hero);
    return () => obs.disconnect();
  }, []);
  return (
    <div className={`mob-cta-bar${show?' show':''}`} aria-hidden={!show}>
      <a className="btn btn-primary" href="https://app.playtomic.io/" target="_blank" rel="noopener noreferrer">
        Prenota ora <span className="btn-ico"><IcArrow size={13}/></span>
      </a>
      <a className="btn-wa-icon" href="https://wa.me/393803083485" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
        <IcWA size={20}/>
      </a>
    </div>
  );
}


// ── Cookie Consent ───────────────────────────────────────────────────────────────
const GA_MEASUREMENT_ID = "G-5LNHL654GR";
const CONSENT_KEY = "mp_cookie_consent";

function loadGoogleAnalytics(){
  if(window.__gaLoaded) return;
  window.__gaLoaded = true;
  window.dataLayer = window.dataLayer || [];
  function gtag(){ window.dataLayer.push(arguments); }
  window.gtag = gtag;
  gtag('js', new Date());
  gtag('config', GA_MEASUREMENT_ID, { anonymize_ip: true });
  const s = document.createElement('script');
  s.async = true;
  s.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
  document.head.appendChild(s);
}

function CookieConsent(){
  const [status, setStatus] = useState(null); // 'granted' | 'denied' | null(unset)
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem(CONSENT_KEY);
    if(saved === 'granted'){ setStatus('granted'); loadGoogleAnalytics(); }
    else if(saved === 'denied'){ setStatus('denied'); }
    else { setOpen(true); }
  }, []);

  const accept = () => {
    localStorage.setItem(CONSENT_KEY, 'granted');
    setStatus('granted');
    setOpen(false);
    loadGoogleAnalytics();
  };
  const reject = () => {
    localStorage.setItem(CONSENT_KEY, 'denied');
    setStatus('denied');
    setOpen(false);
  };

  return (
    <>
      {status !== null && (
        <button
          className="cookie-fab"
          aria-label="Preferenze cookie"
          onClick={() => setOpen(true)}
        >
          <IcCookie size={20}/>
        </button>
      )}
      {open && (
        <div className="cookie-banner" role="dialog" aria-label="Preferenze cookie" aria-modal="false">
          <div className="cookie-banner-icon"><IcCookie size={22}/></div>
          <div className="cookie-banner-body">
            <p>
              Usiamo cookie tecnici per il funzionamento del sito e, solo con il tuo consenso, cookie analitici (Google Analytics) per capire come viene usato il sito.
              Puoi cambiare idea in qualsiasi momento dall'icona in basso a sinistra. Consulta la <a href="./cookie-policy.html">Cookie Policy</a>.
            </p>
            <div className="cookie-banner-actions">
              <button className="btn btn-ghost" onClick={reject}>Rifiuta</button>
              <button className="btn btn-primary" onClick={accept}>Accetta</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// ── App ────────────────────────────────────────────────────────────────────────
function App(){
  useEffect(() => {
    const obs = new IntersectionObserver(
      entries => entries.forEach(e => {
        if(e.isIntersecting){
          e.target.classList.add('vis');
          obs.unobserve(e.target);
        }
      }),
      { threshold: 0.07, rootMargin: '0px 0px -36px 0px' }
    );
    document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <a className="skip-link" href="#main-content">Vai al contenuto principale</a>
      <Header/>
      <main id="main-content">
        <Hero/>
        <InfoBar/>
        <Association/>
        <Facility/>
        <Booking/>
        <Marquee/>
        <Membership/>
        <PadelExplainer/>
        <Gallery/>
        <WhatsAppBlock/>
        <Contacts/>
      </main>
      <Footer/>
      <MobileCTA/>
      <CookieConsent/>
    </>
  );
}