// =========================================================
// THE WOODLANDS PADEL CLUB, bundle (ES), multi-page
// =========================================================

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

/* =========================================================
   IMAGE LIBRARY, fotos definitivas del club
   Carpeta: Imagenes/imagenes definitivas/hero/
   ========================================================= */
const FOTO = (file) => `Imagenes/imagenes%20definitivas/hero/${file}`;
const L = (folder, file) => `Imagenes/${encodeURIComponent(folder)}/${file}`;

const IMG = {
  // Heroes
  home_hero: FOTO('hero-home.jpg'),
  page_pistas: FOTO('hero-pistas.jpg'),
  page_academia: FOTO('hero-academia.jpg'),
  page_social: FOTO('hero-eventos.jpg'),
  page_socios: FOTO('hero-socios.jpg'),
  page_club: FOTO('hero-club.jpg'),
  page_contacto: FOTO('hero-contacto.jpg'),

  // Espacios del club
  rooftop: FOTO('espacio-pistas-outdoor.jpg'),
  wellness: FOTO('espacio-gimnasio.jpg'),
  protein: FOTO('espacio-cafeteria.jpg'),
  lockers: FOTO('espacio-vestuarios.jpg'),
  indoor: FOTO('espacio-pistas-outdoor.jpg'),
  lounge: FOTO('espacio-cafeteria.jpg'),
  shop: FOTO('espacio-proshop.jpg'),
  reception: FOTO('espacio-cafeteria.jpg'),
  architecture: FOTO('espacio-pinos.jpg'),
  city_view: FOTO('espacio-pinos.jpg'),

  // Pistas (5 reales; slots 6-12 reusan)
  court01: FOTO('pista-01.jpg'),
  court02: FOTO('pista-02.jpg'),
  court03: FOTO('pista-03.jpg'),
  court04: FOTO('pista-04.jpg'),
  court05: FOTO('pista-05.jpg'),
  court06: FOTO('pista-01.jpg'),
  court07: FOTO('pista-02.jpg'),
  court08: FOTO('pista-03.jpg'),
  court09: FOTO('pista-04.jpg'),
  court10: FOTO('pista-05.jpg'),
  court11: FOTO('pista-01.jpg'),
  court12: FOTO('pista-02.jpg'),

  // Entrenadores (4 reales; slots 5-8 reusan)
  coach1: FOTO('coach-diego.jpg'),
  coach2: FOTO('coach-sofia.jpg'),
  coach3: FOTO('coach-carlos.jpg'),
  coach4: FOTO('coach-emma.jpg'),
  coach5: FOTO('coach-diego.jpg'),
  coach6: FOTO('coach-sofia.jpg'),
  coach7: FOTO('coach-carlos.jpg'),
  coach8: FOTO('coach-emma.jpg'),

  // Eventos
  event_afterwork: FOTO('evento-friday-mixer.jpg'),
  event_sunset: FOTO('evento-woodlands-open.jpg'),
  event_brunch: FOTO('evento-sunday-brunch.jpg'),
  event_corporate: FOTO('evento-summer-league.jpg'),
  event_open: FOTO('evento-friday-mixer.jpg'),
  event_charity: FOTO('evento-woodlands-open.jpg'),
  event_ladies: FOTO('evento-sunday-brunch.jpg'),
  event_pro: FOTO('evento-summer-league.jpg'),

  // DJ / Chef (decorativo, reusa galería)
  dj_cala: FOTO('galeria-06.jpg'),
  dj_kapra: FOTO('galeria-06.jpg'),
  dj_loft: FOTO('galeria-06.jpg'),
  chef_pol: FOTO('galeria-05.jpg'),

  // Galería
  gal_a: FOTO('galeria-01.jpg'),
  gal_b: FOTO('galeria-02.jpg'),
  gal_c: FOTO('galeria-03.jpg'),
  gal_d: FOTO('galeria-04.jpg'),
  gal_e: FOTO('galeria-05.jpg'),
  gal_f: FOTO('galeria-06.jpg'),
  gal_g: FOTO('galeria-07.jpg'),
  gal_h: FOTO('galeria-08.jpg'),
  gal_i: FOTO('galeria-01.jpg'),
  gal_j: FOTO('galeria-02.jpg'),
  gal_k: FOTO('galeria-03.jpg'),
  gal_l: FOTO('galeria-04.jpg'),

  // Instagram (reusa galería)
  ig_1: FOTO('galeria-01.jpg'),
  ig_2: FOTO('galeria-02.jpg'),
  ig_3: FOTO('galeria-03.jpg'),
  ig_4: FOTO('galeria-04.jpg'),
  ig_5: FOTO('galeria-05.jpg'),
  ig_6: FOTO('galeria-06.jpg'),

  // Socios / testimonios (3 reales; slots 4-6 reusan)
  member1: FOTO('socio-ana.jpg'),
  member2: FOTO('socio-michael.jpg'),
  member3: FOTO('socio-lucia.jpg'),
  member4: FOTO('socio-ana.jpg'),
  member5: FOTO('socio-michael.jpg'),
  member6: FOTO('socio-lucia.jpg'),

  // Misc (no usadas en home)
  app_screen_book: FOTO('hero-home.jpg'),
  app_screen_ranking: FOTO('hero-home.jpg'),
  app_screen_match: FOTO('hero-home.jpg'),
  press_logo: FOTO('hero-club.jpg'),
};

/* =========================================================
   IMAGE PLACEHOLDER / RENDERER
   ========================================================= */
function ImagePh({ label, marker, className = '', style = {}, tone, src }) {
  const toneStyle = useMemo(() => {
    if (tone === 'lime') return { background: 'linear-gradient(135deg, #1a1f0a 0%, #0e0e0e 100%)' };
    if (tone === 'cyan') return { background: 'linear-gradient(135deg, #06181c 0%, #0e0e0e 100%)' };
    if (tone === 'warm') return { background: 'linear-gradient(135deg, #1a0e08 0%, #0e0e0e 100%)' };
    if (tone === 'cool') return { background: 'linear-gradient(135deg, #0a1622 0%, #0e0e0e 100%)' };
    return {};
  }, [tone]);
  if (src) {
    return (
      <div className={`img-placeholder has-img ${className}`} style={{ ...style }}>
        <img src={src} alt={label || ''} className="ph-img" />
        <div className="ph-overlay"></div>
        <div className="ph-frame"></div>
        {label && <div className="ph-label">{label}</div>}
        {marker && <div className="ph-marker">{marker}</div>}
      </div>
    );
  }
  return (
    <div className={`img-placeholder ${className}`} style={{ ...toneStyle, ...style }}>
      <div className="ph-frame"></div>
      {label && <div className="ph-label">{label}</div>}
      {marker && <div className="ph-marker">{marker}</div>}
    </div>
  );
}

/* =========================================================
   LOGO
   ========================================================= */
function LogoMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <defs>
        <linearGradient id="lgrad" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#46983a" />
          <stop offset="100%" stopColor="#001378" />
        </linearGradient>
      </defs>
      <circle cx="18" cy="18" r="17" stroke="url(#lgrad)" strokeWidth="1" />
      <rect x="9" y="6" width="18" height="24" stroke="#F5F5F5" strokeWidth="1.2" />
      <line x1="9" y1="18" x2="27" y2="18" stroke="#F5F5F5" strokeWidth="1.2" />
      <line x1="14" y1="6" x2="14" y2="11" stroke="url(#lgrad)" strokeWidth="1.4" />
      <line x1="22" y1="25" x2="22" y2="30" stroke="url(#lgrad)" strokeWidth="1.4" />
      <circle cx="18" cy="18" r="1.4" fill="#46983a" />
    </svg>
  );
}

const LOGO_WHITE = 'Imagenes/Group%20124-1.png';
const LOGO_DARK = 'Imagenes/Group%20124.png';

function Logo({ variant = 'white' }) {
  const src = variant === 'dark' ? LOGO_DARK : LOGO_WHITE;
  return (
    <a className="logo" href="index.html" aria-label="The Woodlands Padel Club">
      <img src={src} alt="The Woodlands Padel Club" className="logo-img" />
    </a>
  );
}

/* =========================================================
   UTILITIES
   ========================================================= */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  // Mobile CTA: detectar si la sección bajo el botón es verde y cambiar a azul
  useEffect(() => {
    const cta = document.querySelector('.mobile-cta');
    if (!cta) return;
    const isGreenSection = (el) => {
      if (!el) return false;
      // Subimos al ancestro <section> más cercano
      const sec = el.closest('section, footer');
      if (!sec) return false;
      const bg = window.getComputedStyle(sec).backgroundColor;
      // Parseamos rgb
      const m = bg.match(/\d+/g);
      if (!m) return false;
      const [r, g, b] = m.map(Number);
      // Verde corporativo #46983a → r=70 g=152 b=58 (más verde que rojo o azul)
      return g > r && g > b && g > 100 && r < 130;
    };
    const update = () => {
      const rect = cta.getBoundingClientRect();
      // Punto en el centro del botón
      const x = rect.left + rect.width / 2;
      const y = rect.top + rect.height / 2;
      // Ocultamos el botón temporalmente para detectar el elemento detrás
      cta.style.pointerEvents = 'none';
      const original = cta.style.visibility;
      cta.style.visibility = 'hidden';
      const el = document.elementFromPoint(x, y);
      cta.style.visibility = original;
      cta.style.pointerEvents = '';
      if (isGreenSection(el)) cta.classList.add('on-green');
      else cta.classList.remove('on-green');
    };
    update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);
}

function Arrow({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Eyebrow({ children, dot = true }) {
  return (
    <div className="eyebrow">
      {dot && <span className="dot"></span>}
      {children}
    </div>
  );
}

function SectionHead({ eyebrow, title, copy, action }) {
  return (
    <div className="section-head">
      <div className="left reveal">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
      </div>
      {(copy || action) && (
        <div className="reveal delay-1" style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
          {copy && <p>{copy}</p>}
          {action}
        </div>
      )}
    </div>
  );
}

function Counter({ to, suffix = '', duration = 1800 }) {
  const [v, setV] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const step = (now) => {
            const p = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(Math.floor(eased * to));
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{v.toLocaleString('es-ES')}<span className="sym">{suffix}</span></span>;
}

function Countdown({ days, hours, mins }) {
  const [t, setT] = useState({ d: days, h: hours, m: mins, s: 38 });
  useEffect(() => {
    const id = setInterval(() => {
      setT(prev => {
        let { d, h, m, s } = prev;
        s -= 1;
        if (s < 0) { s = 59; m -= 1; }
        if (m < 0) { m = 59; h -= 1; }
        if (h < 0) { h = 23; d -= 1; }
        if (d < 0) { d = 0; h = 0; m = 0; s = 0; }
        return { d, h, m, s };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="countdown">
      <div className="cell"><div className="n">{String(t.d).padStart(2,'0')}</div><div className="l">Días</div></div>
      <div className="cell"><div className="n">{String(t.h).padStart(2,'0')}</div><div className="l">Hrs</div></div>
      <div className="cell"><div className="n">{String(t.m).padStart(2,'0')}</div><div className="l">Min</div></div>
      <div className="cell"><div className="n">{String(t.s).padStart(2,'0')}</div><div className="l">Seg</div></div>
    </div>
  );
}

/* =========================================================
   NAVBAR, page-aware
   ========================================================= */
const NAV_LINKS = [
  { href: 'pistas.html', label: 'Pistas', key: 'pistas' },
  { href: 'academia.html', label: 'Academia', key: 'academia' },
  { href: 'social.html', label: 'Eventos', key: 'social' },
  { href: 'suscripciones.html', label: 'Socios', key: 'suscripciones' },
  { href: 'club.html', label: 'Club', key: 'club' },
  { href: 'contacto.html', label: 'Contacto', key: 'contacto' },
];

function Navbar({ current = 'home', cta = { label: 'Reservar Pista', href: 'pistas.html#booking' } }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [lang, setLang] = useState('ES');
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Detectar idioma actual al cargar
  useEffect(() => {
    const cookie = document.cookie.split('; ').find(c => c.startsWith('googtrans='));
    if (cookie && cookie.includes('/en')) setLang('EN');
  }, []);
  const toggleLang = () => {
    const next = lang === 'ES' ? 'EN' : 'ES';
    const target = next === 'EN' ? '/es/en' : '/es/es';
    // Establecer cookie de Google Translate en todos los scopes posibles
    const host = window.location.hostname;
    document.cookie = `googtrans=${target}; path=/`;
    document.cookie = `googtrans=${target}; domain=${host}; path=/`;
    document.cookie = `googtrans=${target}; domain=.${host}; path=/`;
    setLang(next);
    window.location.reload();
  };
  return (
    <>
      <div id="google_translate_element" style={{ display: 'none' }}></div>
      <nav className={`navbar ${scrolled ? 'scrolled' : ''}`}>
        <div className="container">
          <div className="row">
            <Logo />
            <div className="links">
              {NAV_LINKS.map(l => (
                <a key={l.key} className={current === l.key ? 'active' : ''} href={l.href}>{l.label}</a>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <button
                className="lang-toggle"
                onClick={toggleLang}
                aria-label={`Cambiar a ${lang === 'ES' ? 'inglés' : 'español'}`}
                title={`Switch to ${lang === 'ES' ? 'English' : 'Spanish'}`}
              >
                {lang === 'ES' ? 'EN' : 'ES'}
              </button>
              <a href={cta.href} className="btn btn-primary nav-cta" style={{ padding: '12px 22px', fontSize: 12 }}>
                {cta.label}
                <span className="arrow"><Arrow size={14} /></span>
              </a>
              <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Menú">
                <span></span><span></span><span></span>
              </button>
            </div>
          </div>
        </div>
      </nav>
      {open && (
        <div className="mobile-menu">
          <div className="mobile-menu-inner">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
              <Logo />
              <button className="mobile-close" onClick={() => setOpen(false)} aria-label="Cerrar">×</button>
            </div>
            <ul className="mobile-menu-list">
              {NAV_LINKS.map((l, i) => (
                <li key={l.key} style={{ animationDelay: `${i * 60}ms` }}>
                  <a href={l.href} className={current === l.key ? 'on' : ''}>
                    <span className="num">/{String(i + 1).padStart(2, '0')}</span>
                    <span>{l.label}</span>
                    <Arrow size={20} />
                  </a>
                </li>
              ))}
            </ul>
            <a href={cta.href} className="btn btn-primary" style={{ marginTop: 40 }}>
              {cta.label} <span className="arrow"><Arrow /></span>
            </a>
          </div>
        </div>
      )}
    </>
  );
}

/* =========================================================
   PAGE HERO (for inner pages)
   ========================================================= */
function PageHero({ kicker, title, sub, image, stats, cta, breadcrumb }) {
  return (
    <section className="page-hero" data-screen-label={`01 ${kicker}`}>
      <div className="page-hero-bg">
        <ImagePh src={image} label={`${kicker.toLowerCase()} · cinemático`} marker="HERO · 16:9" />
      </div>
      <div className="container">
        <div className="page-hero-inner">
          <div className="hero-eyebrow reveal">
            <span className="pulse"></span>
            <span className="eyebrow" style={{ color: 'var(--smoke)' }}>{kicker}</span>
          </div>
          <h1 className="page-hero-title reveal delay-1" dangerouslySetInnerHTML={{ __html: title }}></h1>
          {sub && <p className="page-hero-sub reveal delay-2">{sub}</p>}
          {cta && (
            <div className="hero-cta reveal delay-3">{cta}</div>
          )}
          {stats && (
            <div className="page-hero-stats reveal delay-4">
              {stats.map((s, i) => (
                <div className="hero-stat" key={i}>
                  <div className="n">{s.n}</div>
                  <div className="l">{s.l}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   HOMEPAGE HERO
   ========================================================= */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg">
        <ImagePh src={IMG.home_hero} />
      </div>

      <div className="hero-floating float-card-event">
        <div className="row1">
          <span className="label">Próximo Torneo</span>
        </div>
        <div className="big">WOODLANDS OPEN</div>
        <div className="desc">Sáb · 22 Jun · 8am – 6pm</div>
        <Countdown days={4} hours={18} mins={42} />
      </div>

      <div className="hero-floating float-card-weather">
        <div className="row1">
          <span className="label">Spring, TX · Hoy</span>
        </div>
        <div className="big" style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          78°<span style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)' }}>· DESPEJADO</span>
        </div>
        <div className="sm">4 pistas outdoor · 7am – 10pm</div>
      </div>

      <div className="container">
        <h1 className="hero-title reveal delay-1">
          Pádel y<br />
          <span className="accent">naturaleza.</span>
        </h1>
        <p className="hero-sub reveal delay-2">
          Cuatro pistas de cristal entre los pinos de The Woodlands. Clases para todos los niveles, torneos cada mes y la mejor comunidad de pádel del norte de Houston.
        </p>
        <div className="hero-cta reveal delay-3">
          <a href="pistas.html#booking" className="btn btn-primary">
            Reservar Pista <span className="arrow"><Arrow /></span>
          </a>
          <a href="academia.html" className="btn btn-ghost">
            Apuntarse a la Academia <span className="arrow"><Arrow /></span>
          </a>
        </div>
        <div className="hero-stats-inline reveal delay-4">
          <div className="hero-stat">
            <div className="n">4</div>
            <div className="l">Pistas Outdoor</div>
          </div>
          <div className="hero-stat">
            <div className="n">7am</div>
            <div className="l">Diario · 10pm</div>
          </div>
          <div className="hero-stat">
            <div className="n">2020</div>
            <div className="l">Desde</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = [
    'PÁDEL · BAJO LOS PINOS', 'CINCO · PISTAS OUTDOOR', 'ACADEMIA · TODOS LOS NIVELES',
    'TORNEOS · SEMANALES', 'PRO SHOP · BULLPADEL · NOX', 'CAFÉ · POST PARTIDO',
    'SPRING · TEXAS · DESDE 2020', 'WHERE TEXAS · PLAYS PADEL'
  ];
  const seq = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {seq.map((s, i) => (
          <div key={i} className="ticker-item">
            <span>{s}</span>
            <span className="sep"></span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   HOME, Club experience preview block
   ========================================================= */
function ClubExperience() {
  return (
    <section className="section" id="club" data-screen-label="02 Experiencia Club">
      <div className="container">
        <SectionHead
          eyebrow="EL CLUB · 01"
          title='Cuatro pistas.<br/><span class="accent nowrap">Una comunidad.</span>'
          copy="Un club outdoor entre los pinos de The Woodlands, abierto desde 2020. Cuatro pistas de cristal, cafetería, pro shop, vestuarios y gimnasio, un punto de encuentro para los jugadores del norte de Houston, del principiante al competidor."
          action={
            <a href="club.html" className="btn btn-outline">
              Conoce el club <span className="arrow"><Arrow /></span>
            </a>
          }
        />

        <div className="exp-grid">
          <div className="exp-card tall reveal">
            <ImagePh src={IMG.rooftop} label="pistas outdoor · atardecer en los pinos" marker="OUTDOOR" />
            <span className="tag">Pistas · Outdoor</span>
            <div className="content">
              <h3>4 PISTAS OUTDOOR</h3>
              <p>Cuatro pistas de cristal al aire libre rodeadas de los pinos característicos de The Woodlands. Iluminación LED para jugar hasta las 10 de la noche.</p>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div className="exp-card reveal delay-1" style={{ minHeight: 318 }}>
              <ImagePh src={IMG.wellness} label="gimnasio · entrenamiento" marker="GYM" />
              <span className="tag">Gimnasio</span>
              <div className="content">
                <h3>GIMNASIO & WELLNESS</h3>
                <p>Zona de pesas, cardio y trabajo funcional para complementar el entrenamiento en pista.</p>
              </div>
            </div>
            <div className="exp-card reveal delay-2" style={{ minHeight: 318 }}>
              <ImagePh src={IMG.protein} label="cafetería · post partido" marker="CAFÉ" />
              <span className="tag">Cafetería</span>
              <div className="content">
                <h3>CAFÉ & BAR</h3>
                <p>Café, smoothies, cervezas frías y comida ligera. El sitio donde sigue el partido después del partido.</p>
              </div>
            </div>
          </div>

          <div className="exp-mini reveal delay-3" style={{ gridColumn: '1 / -1', marginTop: 0 }}>
            <div className="exp-card" style={{ minHeight: 360 }}>
              <ImagePh src={IMG.lockers} label="vestuarios" marker="LOCKER ROOM" />
              <span className="tag">Vestuarios</span>
              <div className="content">
                <h3>VESTUARIOS</h3>
                <p>Vestuarios completos con duchas, taquillas y todo lo necesario para venir directo desde el trabajo.</p>
              </div>
            </div>
            <div className="exp-card" style={{ minHeight: 360 }}>
              <ImagePh src={IMG.shop} label="pro shop · palas y material" marker="PRO SHOP" />
              <span className="tag">Pro Shop</span>
              <div className="content">
                <h3>PRO SHOP</h3>
                <p>Palas de las mejores marcas (Bullpadel, NOX, Adidas, Babolat), ropa técnica, calzado y accesorios.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="stat-row">
          <div className="stat reveal">
            <div className="num"><Counter to={4} /></div>
            <div className="lbl">Pistas Outdoor</div>
          </div>
          <div className="stat reveal delay-1">
            <div className="num"><Counter to={2020} /></div>
            <div className="lbl">Desde el Año</div>
          </div>
          <div className="stat reveal delay-2">
            <div className="num"><Counter to={20} suffix="+" /></div>
            <div className="lbl">Torneos Anuales</div>
          </div>
          <div className="stat reveal delay-3">
            <div className="num"><Counter to={15} suffix="h" /></div>
            <div className="lbl">Diarias Abiertas</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   COURTS DATA + COURTS PREVIEW
   ========================================================= */
const COURTS_DATA = {
  'Outdoor': [
    { n: '01', img: IMG.court01, name: 'COURT 1', light: 'LED Match Day', surface: 'Césped tour', level: 'Central · Competición · Torneos', occ: 60 },
    { n: '02', img: IMG.court02, name: 'COURT 2', light: 'LED · 8 pm a 10 pm', surface: 'Césped con arena', level: 'Todos los niveles', occ: 78 },
    { n: '03', img: IMG.court04, name: 'COURT 3', light: 'LED · 8 pm a 10 pm', surface: 'Césped premium', level: 'Intermedio · Avanzado', occ: 92 },
    { n: '04', img: IMG.court05, name: 'COURT 4', light: 'LED · 8 pm a 10 pm', surface: 'Césped premium', level: 'Todos los niveles', occ: 30 },
  ],
};

function Courts({ preview = false }) {
  const allCourts = COURTS_DATA['Outdoor'];
  const courts = allCourts;
  return (
    <section className="section" id="courts" data-screen-label="03 Pistas" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="LAS PISTAS · 02"
          title='Cuatro pistas outdoor. <br/><span class="accent nowrap">Cristal y pinos.</span>'
          copy="Cuatro pistas de cristal al aire libre, todas con iluminación LED. Tarifas desde $32/hora en horario valle hasta $58/hora en prime time. Reservas por teléfono o pasando por el club."
          action={preview ? <a href="pistas.html" className="btn btn-outline">Ver las 4 pistas <span className="arrow"><Arrow /></span></a> : null}
        />

        <div className={preview ? 'courts-carousel' : 'courts-grid'}>
          {courts.map((c, i) => (
            <article key={c.n} className={`court-card reveal delay-${(i % 3) + 1}`}>
              <div className="img-wrap">
                <ImagePh src={c.img} label={`pista ${c.n} · outdoor`} marker={`#${c.n}`} />
                <div className="overlay"></div>
                <div className="court-num">{c.n}</div>
                <div className="meta">
                  <div className="pill">{c.occ < 40 ? 'DISPONIBLE' : c.occ < 80 ? 'CON GENTE' : 'PRIME'}</div>
                  <div className="pill">OUTDOOR</div>
                </div>
              </div>
              <div className="info">
                <h3>{c.name}</h3>
                <div className="specs">
                  <span className="spec">ILUMINACIÓN / <strong>{c.light}</strong></span>
                  <span className="spec">SUPERFICIE / <strong>{c.surface}</strong></span>
                </div>
                <div className="occupancy">
                  <span className="spec">HOY</span>
                  <div className="occ-bar"><div className="occ-fill" style={{ width: `${c.occ}%` }}></div></div>
                  <span className="occ-pct">{c.occ}%</span>
                </div>
                <a href="tel:+18323044418" className="book">Llamar para reservar →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   ACADEMY + EVENTS data (used in home + dedicated pages)
   ========================================================= */
const COACHES = [
  { name: 'DIEGO HERNÁNDEZ', role: 'DIRECTOR TÉCNICO', badge: 'EX WPT · 15 AÑOS', img: IMG.coach1 },
  { name: 'SOFÍA MARTÍNEZ', role: 'ACADEMIA JUNIOR', badge: 'ESPECIALISTA SUB-18', img: IMG.coach2 },
  { name: 'CARLOS MENDOZA', role: 'INICIACIÓN', badge: 'PROFESOR CERTIFICADO', img: IMG.coach3 },
  { name: 'EMMA WALKER', role: 'COMPETICIÓN FEMENINA', badge: 'CAMPEONA REGIONAL TX', img: IMG.coach4 },
];

const PLANS = [
  { num: '01', title: 'CLASES PRIVADAS', copy: 'Una hora uno a uno con tu coach. $80/clase o bono de 10 por $700.' },
  { num: '02', title: 'CLASES GRUPALES', copy: 'Grupos de 4 por nivel. Dos sesiones semanales. $35/clase por persona.' },
  { num: '03', title: 'ACADEMIA JUNIOR', copy: 'Para 7–17 años. Entrenamientos por nivel y participación en torneos regionales.' },
  { num: '04', title: 'CLÍNICAS WEEKEND', copy: 'Sesiones temáticas el sábado (volea, bandeja, salida de pared). $45/sesión.' },
];

function Academy({ preview = false }) {
  return (
    <section className="section" id="academy" data-screen-label="04 Academia" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="LA ACADEMIA · 03"
          title='Coaching que <br/><span class="accent nowrap">marca la diferencia.</span>'
          copy="Un equipo de entrenadores certificados con experiencia internacional. Desde la primera clase de iniciación hasta la preparación para competición regional, programas para todos los niveles y edades."
          action={preview ? <a href="academia.html" className="btn btn-outline">Conocer la academia <span className="arrow"><Arrow /></span></a> : null}
        />

        <div className="academy-grid">
          {COACHES.map((c, i) => (
            <article key={c.name} className={`coach-card reveal delay-${i % 4}`}>
              <div className="img-wrap">
                <ImagePh src={c.img} label={c.name.toLowerCase()} marker={`#${String(i + 1).padStart(2, '0')}`} />
              </div>
              <div className="body">
                <div className="name">{c.name}</div>
                <div className="role">{c.role}</div>
              </div>
            </article>
          ))}
        </div>

        <div className="training-plans">
          {PLANS.map((p, i) => (
            <a key={p.num} href="academia.html" className={`plan-tile plan-tile-link reveal delay-${i % 4}`}>
              <div className="num">/{p.num}</div>
              <h4>{p.title}</h4>
              <p>{p.copy}</p>
              <div className="arr"><Arrow size={18} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const EVENTS = [
  { day: '14', mo: 'JUN', cat: '· VIERNES SOCIAL', title: 'FRIDAY NIGHT MIXER', img: IMG.event_afterwork, meta: { 'HORARIO': '6 pm, 10 pm', 'NIVEL': 'Todos', 'FORMATO': 'Dobles mixto rotativo' }, ticket: '$25 · ENTRADA' },
  { day: '22', mo: 'JUN', cat: '· TORNEO MENSUAL', title: 'WOODLANDS OPEN', img: IMG.event_sunset, meta: { 'HORARIO': '8 am, 6 pm', 'PREMIO': '$1,000 + Pala', 'FORMATO': '32 parejas · cuadro doble' }, ticket: '$60 · INSCRIPCIÓN' },
  { day: '06', mo: 'JUL', cat: '· SUNDAY BRUNCH', title: 'BRUNCH & PADEL', img: IMG.event_brunch, meta: { 'HORARIO': '10 am, 2 pm', 'INCLUYE': 'Brunch en la cafetería', 'FORMATO': 'Round-robin amistoso' }, ticket: '$40 · ENTRADA' },
  { day: '19', mo: 'JUL', cat: '· LIGA INTERNA', title: 'SUMMER LEAGUE', img: IMG.event_corporate, meta: { 'HORARIO': 'Jue 7 pm, 10 pm', 'EQUIPOS': '12 parejas fijas', 'FORMATO': '8 jornadas · final' }, ticket: '$120 · TEMPORADA' },
];

function Social({ preview = false }) {
  return (
    <section className="section" id="social" data-screen-label="05 Social" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="PRÓXIMOS EVENTOS · 04"
          title='El partido es solo <br/><span class="accent nowrap">el calentamiento.</span>'
          copy="Torneos mensuales, ligas internas, noches sociales de los viernes y brunch los domingos. Hay sitio para competir y para jugar relajado, el calendario del club siempre tiene algo abierto."
          action={preview ? <a href="social.html" className="btn btn-outline">Calendario completo <span className="arrow"><Arrow /></span></a> : null}
        />

        <div className="events-wrap">
          {EVENTS.map((e, i) => (
            <a key={e.title} href={`social.html#${e.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`} className={`event-card event-card-link reveal delay-${i % 3}`}>
              <ImagePh src={e.img} label={e.title.toLowerCase()} marker={`EVT · ${String(i + 1).padStart(2, '0')}`} />
              <div className="overlay"></div>
              <div className="top">
                <div className="date-block">
                  <div className="d">{e.day}</div>
                  <div className="m">{e.mo}</div>
                </div>
                <div className="ticket-pill">{e.ticket}</div>
              </div>
              <div className="bottom">
                <div className="cat">{e.cat}</div>
                <h3>{e.title}</h3>
                <div className="meta-row">
                  {Object.entries(e.meta).map(([k, v]) => (
                    <span key={k}>{k} / <strong>{v}</strong></span>
                  ))}
                </div>
                <div className="avatars">
                  <div className="av"></div><div className="av"></div><div className="av"></div>
                  <div className="av"></div><div className="more">+{42 + i * 7}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   MEMBERSHIP
   ========================================================= */
const PLANS_PRICING = [
  { name: 'CASUAL', priceM: 79, priceY: 67, tag: null, featured: false, muted: true,
    lead: 'Empieza a jugar con un par de visitas al mes.',
    cta: 'Empezar Casual',
    list: [
      '4 horas de pista al mes (horario valle)',
      'Acceso al gimnasio',
      'Descuento 10% en pro shop',
      'Inscripción gratis al Friday Mixer',
      'Reserva con 7 días de antelación',
    ],
  },
  { name: 'PLAYER', priceM: 149, priceY: 127, tag: 'MÁS POPULAR', featured: true, muted: false,
    lead: 'El plan para los que vienen 2–3 veces por semana.',
    cta: 'Hacerse Player',
    list: [
      '12 horas de pista al mes (cualquier franja)',
      'Reserva prioritaria con 14 días',
      'Acceso al gimnasio y vestuarios',
      'Descuento 15% en pro shop y clases',
      'Inscripción gratis a la liga interna',
      'Taquilla anual incluida',
    ],
  },
  { name: 'UNLIMITED', priceM: 249, priceY: 212, tag: 'PARA ADICTOS', featured: false, muted: false,
    lead: 'Pista todos los días. Sin contar las horas.',
    cta: 'Solicitar Unlimited',
    list: [
      'Pista ilimitada todos los días',
      'Reserva prioritaria con 21 días',
      '2 clases privadas al mes incluidas',
      'Descuento 20% en pro shop',
      'Inscripción gratis a todos los torneos',
      'Invitado gratis 4 veces al mes',
    ],
  },
];

function Membership({ preview = false }) {
  const [yearly, setYearly] = useState(true);
  const scrollRef = useRef(null);
  // En móvil, centramos por defecto la card destacada (PLAYER, índice 1)
  useEffect(() => {
    const grid = scrollRef.current;
    if (!grid) return;
    if (window.innerWidth > 768) return;
    const featured = grid.querySelector('.price-card.featured');
    if (featured) {
      const scrollPos = featured.offsetLeft - (grid.clientWidth - featured.clientWidth) / 2;
      grid.scrollTo({ left: scrollPos, behavior: 'auto' });
    }
  }, []);
  const slide = (dir) => {
    const grid = scrollRef.current;
    if (!grid) return;
    const card = grid.querySelector('.price-card');
    if (!card) return;
    const step = card.clientWidth + 16; // ancho + gap
    grid.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  return (
    <section className="section" id="membership" data-screen-label="06 Suscripción" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="SUSCRIPCIONES · 05"
          title='Tres formas <br/><span class="accent nowrap">de pertenecer.</span>'
          copy="Tres planes según cuánto juegues. Todos incluyen acceso al gimnasio, vestuarios y descuentos en el pro shop. La diferencia es cuántas horas de pista al mes y qué prioridad de reserva tienes."
          action={preview ? <a href="suscripciones.html" className="btn btn-outline">Comparar planes <span className="arrow"><Arrow /></span></a> : null}
        />

        <div className="reveal" style={{ display: 'flex', justifyContent: 'center' }}>
          <div className="pricing-toggle">
            <button className={!yearly ? 'on' : ''} onClick={() => setYearly(false)}>Mensual</button>
            <button className={yearly ? 'on' : ''} onClick={() => setYearly(true)}>
              Anual <span className="save">−15%</span>
            </button>
          </div>
        </div>

        <div className="pricing-carousel-wrap">
          <button className="pricing-nav prev" onClick={() => slide(-1)} aria-label="Plan anterior">←</button>
          <div className="pricing-grid" ref={scrollRef} style={{ marginTop: 16 }}>
            {PLANS_PRICING.map((p, i) => (
              <article key={p.name} className={`price-card reveal delay-${i} ${p.featured ? 'featured' : ''} ${p.muted ? 'muted' : ''}`}>
                {p.tag && <span className="tag">{p.tag}</span>}
                <div className="name">{p.name}</div>
                <div className="price">
                  <span className="cur">$</span>
                  <span>{yearly ? p.priceY : p.priceM}</span>
                  <span className="per">/ mes</span>
                </div>
                <p className="lead">{p.lead}</p>
                <ul>
                  {p.list.map(item => <li key={item}>{item}</li>)}
                </ul>
                <a href="suscripciones.html" className={`cta ${p.featured ? 'solid' : 'ghost'}`}>{p.cta} →</a>
              </article>
            ))}
          </div>
          <button className="pricing-nav next" onClick={() => slide(1)} aria-label="Plan siguiente">→</button>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   MOBILE APP showcase (home section)
   ========================================================= */
const APP_FEATURES = [
  { i: '01', t: 'RESERVA INSTANTÁNEA', d: 'Elige pista, fija pareja y paga en dos toques. Cancelación hasta 4h antes de jugar.' },
  { i: '02', t: 'HIGHLIGHTS CON IA', d: 'Cada pista tiene cámaras de tracking. Recibes un reel de 60 segundos después de cada partido.' },
  { i: '03', t: 'RANKING DE JUGADORES', d: 'ELO en directo de toda la base de socios. Sube el leaderboard y entra en el radar de los coaches.' },
  { i: '04', t: 'MATCHMAKING', d: 'Tinder meets pádel. Te encontramos rivales de tu nivel, en tu horario.' },
  { i: '05', t: 'FEED SOCIAL', d: 'Mira qué está jugando tu círculo, quién está en el rooftop esta noche y qué se mueve en el club.' },
];

function MobileApp() {
  return (
    <section className="section app-section" id="app" data-screen-label="07 App Móvil">
      <div className="container">
        <div className="app-row">
          <div className="reveal">
            <Eyebrow>LA APP · 06</Eyebrow>
            <h2 className="font-display" style={{ fontSize: 'clamp(40px, 6vw, 88px)', lineHeight: 0.92, marginTop: 24, letterSpacing: '-0.005em' }}>
              Tu club,<br />
              <span style={{ background: 'var(--grad)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontStyle: 'italic' }}>en tu bolsillo.</span>
            </h2>
            <p style={{ color: 'var(--smoke-dim)', fontSize: 15, marginTop: 24, maxWidth: 480 }}>
              Reservas, matchmaking, highlights y feed social, todo desarrollado in-house. Disponible en iOS & Android.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <a href="#" className="btn btn-primary" style={{ padding: '12px 22px' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04a4.91 4.91 0 0 1 2.4-4.13 5.02 5.02 0 0 0-3.96-2.14c-1.66-.17-3.27 1-4.12 1-.86 0-2.17-.98-3.57-.95a5.27 5.27 0 0 0-4.43 2.7c-1.9 3.3-.49 8.16 1.36 10.84.91 1.31 1.99 2.78 3.4 2.73 1.37-.06 1.88-.88 3.54-.88 1.65 0 2.13.88 3.57.85 1.48-.02 2.41-1.33 3.31-2.65a11 11 0 0 0 1.51-3.07 4.75 4.75 0 0 1-3.01-4.3zM14.4 4.05a4.84 4.84 0 0 0 1.1-3.46 4.92 4.92 0 0 0-3.18 1.64 4.59 4.59 0 0 0-1.13 3.32 4.07 4.07 0 0 0 3.2-1.5z" /></svg>
                iOS
              </a>
              <a href="#" className="btn btn-ghost" style={{ padding: '12px 22px' }}>
                <span style={{ fontFamily: 'Google Sans Flex', fontSize: 12 }}>▷</span>
                Android
              </a>
            </div>

            <div className="app-features">
              {APP_FEATURES.map(f => (
                <div className="app-feature" key={f.i}>
                  <div className="icn">/{f.i}</div>
                  <div>
                    <h4>{f.t}</h4>
                    <p>{f.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="phones reveal delay-2">
            <PhoneMock variant="left" />
            <PhoneMock variant="right" />
          </div>
        </div>
      </div>
    </section>
  );
}

function PhoneMock({ variant }) {
  return (
    <div className={`phone ${variant}`}>
      <div className="notch"></div>
      <div className="screen">
        {variant === 'right' ? <AppHome /> : <AppRanking />}
      </div>
    </div>
  );
}

function AppHome() {
  return (
    <div className="app-mock">
      <div className="app-mock-head">
        <div className="h1">HOLA, MATEO<small>¿LISTO PARA JUGAR?</small></div>
        <div className="av"></div>
      </div>
      <div className="hero-card">
        <div className="tg">PRÓXIMA RESERVA · ESTA NOCHE</div>
        <div className="ti">PISTA 03 · 21:30</div>
        <div className="sb">CRISTALLO PRO · 4 JUGADORES · MIXTO</div>
      </div>
      <div style={{ fontFamily: 'Google Sans Flex', fontSize: 8, letterSpacing: '0.16em', color: 'var(--smoke-dim)', margin: '6px 4px 8px', textTransform: 'uppercase' }}>
        HUECOS LIBRES · HOY
      </div>
      <div className="slot">
        <div><div className="time">19:00</div><div className="court">Pista 05 · Indoor</div></div>
        <div className="dot"></div>
      </div>
      <div className="slot">
        <div><div className="time">20:30</div><div className="court">Pista 02 · Panorámica</div></div>
        <div className="dot" style={{ background: 'var(--cyan)', boxShadow: '0 0 8px var(--cyan)' }}></div>
      </div>
      <div className="slot">
        <div><div className="time">22:00</div><div className="court">Pista 11 · Rooftop ↗</div></div>
        <div className="dot"></div>
      </div>
      <div className="tabbar">
        <div className="tb act"></div><div className="tb"></div>
        <div className="tb"></div><div className="tb"></div>
      </div>
    </div>
  );
}

function AppRanking() {
  const players = [
    { r: 1, n: 'I. CASTAÑO', pts: 2840, you: false },
    { r: 2, n: 'M. REYES', pts: 2715, you: false },
    { r: 3, n: 'B. LECOQ', pts: 2680, you: false },
    { r: 18, n: 'TÚ · MATEO', pts: 1840, you: true },
    { r: 19, n: 'L. ORTEGA', pts: 1828, you: false },
  ];
  return (
    <div className="app-mock">
      <div className="app-mock-head">
        <div className="h1">RANKING<small>TEMP. 03 · SEM. 22</small></div>
        <div className="av" style={{ background: 'var(--lime)' }}></div>
      </div>
      <div style={{ fontFamily: 'Google Sans Flex', fontSize: 8, letterSpacing: '0.16em', color: 'var(--smoke-dim)', margin: '4px 4px 10px', textTransform: 'uppercase' }}>
        LEADERBOARD ELO · MIXTO
      </div>
      {players.map(p => (
        <div key={p.r} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '10px 12px',
          background: p.you ? 'rgba(70,152,58,0.1)' : 'rgba(245,245,245,0.04)',
          border: p.you ? '1px solid rgba(70,152,58,0.3)' : '1px solid transparent',
          borderRadius: 10,
          marginBottom: 6,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: 'Google Sans Flex', fontSize: 10, color: p.you ? 'var(--lime)' : 'var(--smoke-dim)' }}>
              #{String(p.r).padStart(2, '0')}
            </span>
            <span style={{ fontFamily: 'Google Sans Flex', fontSize: 11, color: 'var(--smoke)', fontWeight: 500 }}>{p.n}</span>
          </div>
          <span style={{ fontFamily: 'Google Sans Flex', fontSize: 16, color: p.you ? 'var(--lime)' : 'var(--smoke)' }}>{p.pts}</span>
        </div>
      ))}
      <div style={{ marginTop: 'auto', padding: 10, background: 'var(--grad)', borderRadius: 10, color: 'var(--black)', textAlign: 'center' }}>
        <div style={{ fontFamily: 'Google Sans Flex', fontSize: 8, letterSpacing: '0.16em' }}>GANA HOY PARA LLEGAR</div>
        <div style={{ fontFamily: 'Google Sans Flex', fontSize: 18, lineHeight: 1, marginTop: 2 }}>TOP 15 · DIVISIÓN B</div>
      </div>
      <div className="tabbar">
        <div className="tb"></div><div className="tb"></div>
        <div className="tb act"></div><div className="tb"></div>
      </div>
    </div>
  );
}

/* =========================================================
   TESTIMONIALS, GALLERY, INSTAGRAM, FAQ, FOOTER
   ========================================================= */
const TESTIMONIALS = [
  { stars: '★★★★★', q: 'Llevo dos años viniendo y es de lejos el mejor sitio para jugar pádel en el norte de Houston. Las pistas están siempre impecables y el ambiente es muy familiar.', name: 'Ana García', role: 'Socia desde 2022', img: IMG.member1 },
  { stars: '★★★★★', q: 'Empecé desde cero con Carlos en clases grupales. Seis meses después estoy compitiendo en la liga interna. Los entrenadores saben enseñar.', name: 'Michael Brennan', role: 'Socio Player', img: IMG.member2 },
  { stars: '★★★★★', q: 'Mis hijos van a la academia junior los sábados por la mañana y yo me quedo en la cafetería. Pasamos toda la mañana en el club, es perfecto.', name: 'Lucía Ramírez', role: 'Socia · Familia', img: IMG.member3 },
];

function Testimonials() {
  return (
    <section className="section testimonials" id="testimonials" data-screen-label="08 Testimonios" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="LA COMUNIDAD · 07"
          title='Lo que dicen <br/><span class="accent nowrap">los habituales.</span>'
        />
        <div className="test-grid">
          {TESTIMONIALS.map((t, i) => (
            <article key={t.name} className={`test-card reveal delay-${i}`}>
              <div className="stars">{t.stars}</div>
              <p className="quote">"{t.q}"</p>
              <div className="person">
                <div className="av" style={{ background: `url(${t.img}) center/cover`, backgroundSize: 'cover' }}></div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const GAL_ITEMS = [
  { cls: 'gi-a', img: IMG.gal_a, label: 'final de torneo · open', tag: 'TORNEO' },
  { cls: 'gi-b', img: IMG.gal_b, label: 'pista central · partido', tag: 'PARTIDO' },
  { cls: 'gi-c', img: IMG.gal_c, label: 'cafetería · post partido', tag: 'CAFÉ' },
  { cls: 'gi-d', img: IMG.gal_d, label: 'court 01 · cristal', tag: 'PISTA' },
  { cls: 'gi-e', img: IMG.gal_e, label: 'cafetería · barra', tag: 'BAR' },
  { cls: 'gi-f', img: IMG.gal_f, label: 'friday mixer · social', tag: 'NOCHE' },
  { cls: 'gi-g', img: IMG.gal_g, label: 'gimnasio · entrenamiento', tag: 'GYM' },
  { cls: 'gi-h', img: IMG.gal_h, label: 'liga interna · jornada', tag: 'LIGA' },
];

function Gallery() {
  return (
    <section className="section" id="gallery" data-screen-label="09 Galería" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="LAS IMÁGENES · 08"
          title='Momentos <br/><span class="accent nowrap">del club.</span>'
          copy="Imágenes del día a día del club, partidos, torneos, clases y la cafetería. Etiquétanos en Instagram para salir publicado."
        />
        <div className="gallery">
          {GAL_ITEMS.map((g, i) => (
            <div key={i} className={`gal-item ${g.cls} reveal delay-${i % 4}`}>
              <ImagePh src={g.img} label={g.label} marker={`/0${i+1}`} />
              <span className="gal-tag">{g.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Instagram() {
  const items = [
    { l: 'PARTIDO /04', img: IMG.ig_1 },
    { l: 'CRISTALLO', img: IMG.ig_2 },
    { l: 'ROOFTOP', img: IMG.ig_3 },
    { l: 'SUNSET CUP', img: IMG.ig_4 },
    { l: 'NOCHE DJ', img: IMG.ig_5 },
    { l: 'PISTA 11', img: IMG.ig_6 },
  ];
  return (
    <section className="section" id="instagram" style={{ paddingTop: 0, paddingBottom: 80 }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>INSTAGRAM · @THEWOODLANDSPADEL</Eyebrow>
            <h3 className="font-display" style={{ fontSize: 32, marginTop: 14 }}>SIGUE LAS NOCHES</h3>
          </div>
          <a href="#" className="btn btn-ghost" style={{ padding: '10px 18px', fontSize: 12 }}>
            @thewoodlandspadel <span className="arrow"><Arrow size={14} /></span>
          </a>
        </div>
        <div className="ig-row">
          {items.map((it, i) => (
            <div key={i} className="ig-tile reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <ImagePh src={it.img} label={it.l.toLowerCase()} marker={`/${String(i+1).padStart(2,'0')}`} />
              <div className="ig-overlay">↗ ABRIR</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: '¿Cómo reservo una pista?', a: 'Por ahora las reservas se hacen por teléfono (+1 832-304-4418) o pasando por el club. Estamos trabajando en un sistema de reserva online para 2026. Recomendamos reservar con 2–3 días de antelación, especialmente para horarios de tarde y fines de semana.' },
  { q: '¿Cuánto cuesta jugar una hora?', a: 'Horario valle (mañanas entre semana): $32/hora por pista. Tarde entre semana: $45/hora. Prime time (noches y fines de semana): $58/hora. Los socios tienen horas incluidas según su plan.' },
  { q: '¿Necesito ser socio para jugar?', a: 'No. Cualquier persona puede reservar una pista llamando al club. Los socios tienen prioridad de reserva, horas incluidas en su cuota y descuentos en clases y pro shop.' },
  { q: '¿Alquilan palas y venden bolas?', a: 'Sí. Tenemos palas de alquiler ($8/clase) y vendemos bolas y todo el material en el pro shop del club. Trabajamos con Bullpadel, NOX, Adidas y Babolat.' },
  { q: '¿Tienen clases para principiantes?', a: 'Sí. Carlos Mendoza lleva el programa de iniciación. Ofrecemos clases de prueba para que veas si te gusta antes de comprometerte. Llama y te organizamos la primera sesión.' },
  { q: '¿Cuál es el horario del club?', a: 'Lunes a viernes de 7:00 a 22:00. Sábados y domingos de 8:00 a 21:00. Las pistas con luz se pueden usar hasta el cierre.' },
];

function Faq({ items }) {
  const list = items || FAQS;
  const [open, setOpen] = useState(0);
  const [showAll, setShowAll] = useState(false);
  const visibleCount = showAll ? list.length : 3;
  return (
    <section className="section" id="faq" data-screen-label="10 FAQ" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead
          eyebrow="LOS DETALLES · 09"
          title='Preguntas <br/><span class="accent nowrap">frecuentes.</span>'
        />
        <div className="faq-wrap">
          {list.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''} ${i >= visibleCount ? 'faq-hidden-mobile' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q">
                <h4>{f.q}</h4>
                <div className="plus">+</div>
              </div>
              <div className="a">{f.a}</div>
            </div>
          ))}
          {list.length > 3 && (
            <button className="show-more-btn" onClick={(e) => { e.stopPropagation(); setShowAll(!showAll); }}>
              {showAll ? 'Ver menos' : `Ver más preguntas (${list.length - 3})`}
            </button>
          )}
        </div>
      </div>
    </section>
  );
}

function IconIG({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5" ry="5"/>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
    </svg>
  );
}
function IconFB({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
    </svg>
  );
}

function Footer() {
  useEffect(() => {
    const sync = () => {
      const isDesktop = window.innerWidth >= 700;
      document.querySelectorAll('.footer-acc').forEach(d => {
        if (isDesktop) d.setAttribute('open', '');
        else d.removeAttribute('open');
      });
    };
    sync();
    window.addEventListener('resize', sync);
    return () => window.removeEventListener('resize', sync);
  }, []);
  return (
    <footer className="footer" id="contact" data-screen-label="11 Contacto">
      <div className="container">
        <div className="footer-cta reveal">
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 16 }}>
              <span className="dot" style={{ background: 'var(--paper)', boxShadow: 'none' }}></span>
              ¿LISTO PARA JUGAR?
            </div>
            <h2>Tu primer partido <br /><span style={{ fontStyle: 'italic' }}>invita la casa.</span></h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <a href="tel:+18323044418" className="wa">
              <span className="wa-dot"></span>
              Llamar al club · +1 832-304-4418
              <Arrow />
            </a>
            <span style={{ fontFamily: 'Google Sans Flex', fontSize: 11, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.14em' }}>
              RESPUESTA EN MENOS DE 1H · 7AM–10PM
            </span>
          </div>
        </div>

        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <Logo />
            <p style={{ marginTop: 18, maxWidth: 320 }}>
              Club de pádel outdoor en The Woodlands. Cuatro pistas de cristal, cafetería, gimnasio, pro shop y la mejor comunidad de pádel del norte de Houston, desde 2020.
            </p>
            <address style={{ marginTop: 20, fontStyle: 'normal', lineHeight: 1.6 }}>
              <a href="https://maps.google.com/?q=510+Hassler+Rd+Spring+TX+77389" target="_blank" rel="noopener noreferrer" className="footer-address-link">
                510 Hassler Rd<br />Spring, TX 77389
              </a>
            </address>
            <div className="footer-socials" style={{ marginTop: 24 }}>
              <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><IconIG /></a>
              <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><IconFB /></a>
            </div>
          </div>

          <details className="footer-col footer-acc">
            <summary><h5>Club</h5><span className="chev">+</span></summary>
            <ul>
              <li><a href="pistas.html">Pistas</a></li>
              <li><a href="academia.html">Academia</a></li>
              <li><a href="social.html">Eventos</a></li>
              <li><a href="suscripciones.html">Socios</a></li>
              <li><a href="club.html">El Club</a></li>
              <li><a href="contacto.html">Contacto</a></li>
            </ul>
          </details>

          <details className="footer-col footer-acc">
            <summary><h5>Horarios</h5><span className="chev">+</span></summary>
            <ul className="footer-hours">
              <li><span>Lun a Vie</span><span>7:00 a 22:00</span></li>
              <li><span>Sábado</span><span>8:00 a 21:00</span></li>
              <li><span>Domingo</span><span>8:00 a 21:00</span></li>
            </ul>
          </details>

          <details className="footer-col footer-acc">
            <summary><h5>Contacto</h5><span className="chev">+</span></summary>
            <ul>
              <li><a href="tel:+18323044418">+1 832-304-4418</a></li>
              <li><a href="mailto:reservas@thewoodlands.com">reservas@thewoodlands.com</a></li>
            </ul>
          </details>

          <details className="footer-col footer-acc footer-newsletter">
            <summary><h5>Newsletter</h5><span className="chev">+</span></summary>
            <p>Novedades del club, calendario de torneos y aperturas de inscripción. Una vez al mes, sin spam.</p>
            <form className="newsletter" onSubmit={(e) => { e.preventDefault(); }}>
              <input type="email" placeholder="tu@email.com" required />
              <button type="submit">Suscribirme</button>
            </form>
          </details>
        </div>

        <div className="footer-bottom">
          <div>© 2026 THE WOODLANDS PADEL CLUB · SPRING · TX</div>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   EXPOSE EVERYTHING ON WINDOW
   ========================================================= */
Object.assign(window, {
  IMG, COURTS_DATA, COACHES, PLANS, EVENTS, PLANS_PRICING, FAQS, TESTIMONIALS, APP_FEATURES, GAL_ITEMS,
  ImagePh, Logo, LogoMark, useReveal, Arrow, Eyebrow, SectionHead, Counter, Countdown,
  Navbar, PageHero, Hero, Ticker,
  ClubExperience, Courts, Academy, Social, Membership,
  MobileApp, PhoneMock, AppHome, AppRanking,
  Testimonials, Gallery, Instagram, Faq, Footer,
});