/* global React, Icon */
const { useState, useEffect, useRef, useMemo } = React;

// All 78 municipalities of Puerto Rico (alphabetical)
const PR_MUNICIPALITIES = [
  'Adjuntas', 'Aguada', 'Aguadilla', 'Aguas Buenas', 'Aibonito', 'Añasco',
  'Arecibo', 'Arroyo', 'Barceloneta', 'Barranquitas', 'Bayamón', 'Cabo Rojo',
  'Caguas', 'Camuy', 'Canóvanas', 'Carolina', 'Cataño', 'Cayey', 'Ceiba',
  'Ciales', 'Cidra', 'Coamo', 'Comerío', 'Corozal', 'Culebra', 'Dorado',
  'Fajardo', 'Florida', 'Guánica', 'Guayama', 'Guayanilla', 'Guaynabo',
  'Gurabo', 'Hatillo', 'Hormigueros', 'Humacao', 'Isabela', 'Jayuya',
  'Juana Díaz', 'Juncos', 'Lajas', 'Lares', 'Las Marías', 'Las Piedras',
  'Loíza', 'Luquillo', 'Manatí', 'Maricao', 'Maunabo', 'Mayagüez', 'Moca',
  'Morovis', 'Naguabo', 'Naranjito', 'Orocovis', 'Patillas', 'Peñuelas',
  'Ponce', 'Quebradillas', 'Rincón', 'Río Grande', 'Sabana Grande', 'Salinas',
  'San Germán', 'San Juan', 'San Lorenzo', 'San Sebastián', 'Santa Isabel',
  'Toa Alta', 'Toa Baja', 'Trujillo Alto', 'Utuado', 'Vega Alta', 'Vega Baja',
  'Vieques', 'Villalba', 'Yabucoa', 'Yauco'
];

// Strip accents so "anasco" matches "Añasco", "bayamon" matches "Bayamón"
const _norm = (s) => s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();

function CityCombobox({ value, onChange, cities, placeholder, emptyLabel, clearLabel, invalid, describedBy, id }) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [highlight, setHighlight] = useState(0);
  const wrapRef = useRef(null);
  const inputRef = useRef(null);
  const listRef = useRef(null);

  // What gets shown in the input: the chosen value if closed, otherwise the live query
  const inputValue = open ? query : value;

  const filtered = useMemo(() => {
    const q = _norm(query.trim());
    if (!q) return cities;
    // Prefix matches first, then substring
    const prefix = [];
    const sub = [];
    for (const c of cities) {
      const n = _norm(c);
      if (n.startsWith(q)) prefix.push(c);
      else if (n.includes(q)) sub.push(c);
    }
    return [...prefix, ...sub];
  }, [query, cities]);

  // Close on outside click
  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  // Reset highlight when filtered changes
  useEffect(() => { setHighlight(0); }, [query, open]);

  // Scroll highlighted item into view
  useEffect(() => {
    if (!open || !listRef.current) return;
    const el = listRef.current.querySelector(`[data-idx="${highlight}"]`);
    if (el) el.scrollIntoView({ block: 'nearest' });
  }, [highlight, open]);

  const pick = (city) => {
    onChange(city);
    setQuery('');
    setOpen(false);
    inputRef.current && inputRef.current.blur();
  };

  const onKey = (e) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (!open) setOpen(true);
      setHighlight((h) => Math.min(h + 1, Math.max(filtered.length - 1, 0)));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setHighlight((h) => Math.max(h - 1, 0));
    } else if (e.key === 'Enter') {
      if (open && filtered[highlight]) {
        e.preventDefault();
        pick(filtered[highlight]);
      }
    } else if (e.key === 'Escape') {
      setOpen(false);
      setQuery('');
    }
  };

  const clear = () => {
    onChange('');
    setQuery('');
    setOpen(true);
    inputRef.current && inputRef.current.focus();
  };

  const listId = `${id}-listbox`;

  return (
    <div className={`pq-combo ${open ? 'is-open' : ''} ${invalid ? 'is-invalid' : ''}`} ref={wrapRef}>
      <div className="pq-combo-control">
        <input
          ref={inputRef}
          id={id}
          type="text"
          className="pq-combo-input"
          role="combobox"
          aria-autocomplete="list"
          aria-expanded={open}
          aria-controls={listId}
          aria-activedescendant={open && filtered[highlight] ? `${id}-opt-${highlight}` : undefined}
          aria-invalid={invalid}
          aria-describedby={describedBy}
          autoComplete="off"
          placeholder={value ? '' : placeholder}
          value={inputValue}
          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKey}
        />
        {value && !open && (
          <button type="button" className="pq-combo-clear" aria-label={clearLabel} onClick={clear}>
            ×
          </button>
        )}
        <span className="pq-combo-caret" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </span>
      </div>

      {open && (
        <ul className="pq-combo-list" id={listId} role="listbox" ref={listRef}>
          {filtered.length === 0 ? (
            <li className="pq-combo-empty">{emptyLabel}</li>
          ) : (
            filtered.map((c, i) => {
              const n = _norm(c);
              const q = _norm(query.trim());
              const idx = q ? n.indexOf(q) : -1;
              const before = idx >= 0 ? c.slice(0, idx) : c;
              const match = idx >= 0 ? c.slice(idx, idx + q.length) : '';
              const after = idx >= 0 ? c.slice(idx + q.length) : '';
              return (
                <li
                  key={c}
                  id={`${id}-opt-${i}`}
                  data-idx={i}
                  role="option"
                  aria-selected={value === c}
                  className={`pq-combo-opt ${i === highlight ? 'is-active' : ''} ${value === c ? 'is-selected' : ''}`}
                  onMouseDown={(e) => { e.preventDefault(); pick(c); }}
                  onMouseEnter={() => setHighlight(i)}
                >
                  {idx >= 0 ? (<>{before}<mark>{match}</mark>{after}</>) : c}
                </li>
              );
            })
          )}
        </ul>
      )}
    </div>
  );
}

// =====================================================
// Top Navigation
// =====================================================
function Nav({ lang, setLang, onJoin }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 24);
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  const links = lang === 'es' ?
  [{ href: '#how', label: 'Cómo funciona' }, { href: '#features', label: 'Features' }, { href: '#referral', label: 'Referidos' }, { href: '#faq', label: 'FAQ' }] :
  [{ href: '#how', label: 'How it works' }, { href: '#features', label: 'Features' }, { href: '#referral', label: 'Referrals' }, { href: '#faq', label: 'FAQ' }];

  return (
    <nav className={`pq-nav ${scrolled ? 'scrolled' : ''}`} role="navigation" aria-label="Primary" style={{ opacity: "1" }}>
      <div className="pq-nav-inner">
        <a href="#top" className="pq-nav-logo" aria-label="PIQUEL home">
          <img src="assets/wordmark.svg" alt="PIQUEL" style={{ height: 18, display: 'block', filter: 'invert(1)' }} />
        </a>
        <div className="pq-nav-links">
          {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="pq-nav-cta">
          <div className="pq-lang-toggle" role="group" aria-label="Language">
            <button onClick={() => setLang('es')} aria-pressed={lang === 'es'}>ES</button>
            <button onClick={() => setLang('en')} aria-pressed={lang === 'en'}>EN</button>
          </div>
          <button className="pq-btn pq-btn--primary pq-btn--sm" onClick={onJoin}>
            {lang === 'es' ? 'Únete' : 'Join Waitlist'}
          </button>
        </div>
      </div>
    </nav>);

}

// =====================================================
// Hero with video background + glass signup form
// =====================================================
function Hero({ lang, onSubmitted, totalSignups }) {
  const videoRef = useRef(null);
  const [submitted, setSubmitted] = useState(false);
  const [position, setPosition] = useState(null);
  const [referralCode, setReferralCode] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [demoOpen, setDemoOpen] = useState(false);
  const [errors, setErrors] = useState({});
  const [form, setForm] = useState({
    firstName: '', email: '', city: '', role: 'player', referral: '', company: ''
  });

  // Close demo on Escape
  useEffect(() => {
    if (!demoOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setDemoOpen(false); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [demoOpen]);

  // Honor stored waitlist data + capture ?ref= from URL
  useEffect(() => {
    try {
      const s = localStorage.getItem('pq_signup');
      if (s) {
        const data = JSON.parse(s);
        setSubmitted(true);
        setPosition(data.position);
        setReferralCode(data.referralCode || null);
        if (data.firstName) setForm((f) => ({ ...f, firstName: data.firstName }));
      }
    } catch (e) {}
    // Pre-fill referral from ?ref= in URL
    try {
      const params = new URLSearchParams(window.location.search);
      const ref = params.get('ref');
      if (ref && /^PQ-[A-Z0-9-]+$/i.test(ref)) {
        setForm((f) => f.referral ? f : { ...f, referral: ref.toUpperCase() });
      }
    } catch (e) {}
  }, []);

  const t = {
    eyebrow: lang === 'es' ? 'Lanzamiento · Verano 2026 · Puerto Rico' : 'Launching Summer 2026 · Puerto Rico',
    h1Pre: lang === 'es' ? 'Menos chat.' : 'Less chat.',
    h1Mid: '',
    h1Tail: lang === 'es' ? 'Más pickle.' : 'More pickle.',
    sub: lang === 'es' ?
    'Activa PIQUEL y conéctate al instante con partidos, canchas, torneos y jugadores cerca de ti.' :
    'Activate PIQUEL and get instantly connected to matches, courts, tournaments, and players near you.',
    primary: lang === 'es' ? 'Reserva tu acceso VIP' : 'Reserve your VIP access',
    secondary: lang === 'es' ? 'Ver demo' : 'Watch demo',
    trust: lang === 'es' ? 'Lanzando pronto en' : 'Launching soon in',
    trustPlace: 'Puerto Rico',
    cardTitle: lang === 'es' ? 'Sé de los primeros.' : 'Be one of the first.',
    cardSub: lang === 'es' ? 'Sin spam. Solo el aviso de lanzamiento y un código de acceso temprano.' : 'No spam. Just launch notice + an early-access code.',
    first: lang === 'es' ? 'Nombre' : 'First name',
    firstPh: lang === 'es' ? 'Tu nombre' : 'Your name',
    emailPh: lang === 'es' ? 'tu@email.com' : 'you@email.com',
    cityLabel: lang === 'es' ? 'Ciudad' : 'City',
    rolePicker: lang === 'es' ? 'Quiero unirme como…' : 'I want to join as…',
    rolePlayer: lang === 'es' ? 'Jugador' : 'Player',
    roleClub: lang === 'es' ? 'Club' : 'Club Owner',
    roleOrg: lang === 'es' ? 'Organizador' : 'Organizer',
    refLabel: lang === 'es' ? 'Código de referido (opcional)' : 'Referral code (optional)',
    refPh: lang === 'es' ? 'p.ej. PIQUEL2026' : 'e.g. PIQUEL2026',
    submitBtn: lang === 'es' ? 'Reservar mi cupo →' : 'Reserve my spot →',
    foot: lang === 'es' ? 'Al unirte aceptas nuestros Términos y Política de Privacidad. Te avisamos cuando abramos en tu ciudad.' : 'By joining you agree to our Terms and Privacy Policy. We notify you when we launch in your city.',
    successH: lang === 'es' ? '¡Estás dentro!' : "You're on the list.",
    successP: lang === 'es' ? 'Te avisaremos antes que a nadie. Mientras tanto, sube en la fila invitando amigos.' : "We'll ping you before anyone else. Move up the line by inviting friends.",
    posLabel: lang === 'es' ? 'Tu posición' : 'Your position',
    shareBtn: lang === 'es' ? 'Compartir mi código' : 'Share my code',
    cities: PR_MUNICIPALITIES,
    cityPh: lang === 'es' ? 'Busca o elige tu municipio…' : 'Search or pick your municipality…',
    cityEmpty: lang === 'es' ? 'No encontramos ese municipio' : 'No municipality matches',
    cityClear: lang === 'es' ? 'Borrar' : 'Clear'
  };

  const validate = () => {
    const e = {};
    if (!form.firstName.trim()) e.firstName = lang === 'es' ? 'Requerido.' : 'Required.';
    if (!form.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) e.email = lang === 'es' ? 'Email inválido.' : 'Enter a valid email.';
    if (!form.city) e.city = lang === 'es' ? 'Elige una ciudad.' : 'Pick a city.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    if (submitting) return;
    setSubmitting(true);
    setSubmitError(null);
    if (window.pqTrack) window.pqTrack('signup_attempt', { role: form.role, language: lang });

    try {
      // Fallback if the client script failed to load — should be rare
      if (!window.PQ_SUPABASE) throw new Error('client_unavailable');

      const result = await window.PQ_SUPABASE.submitSignup({
        firstName: form.firstName,
        email:     form.email,
        city:      form.city,
        role:      form.role,
        referral:  form.referral,
        language:  lang,
        company:   form.company,
        source:    'website',
      });

      const pos = Number(result.signup_position);
      const code = result.signup_referral_code;
      setPosition(pos);
      setReferralCode(code);
      setSubmitted(true);
      if (window.pqTrack) window.pqTrack('signup_success', {
        role: form.role, language: lang, position: pos, is_new: !!result.is_new,
      });
      try {
        localStorage.setItem('pq_signup', JSON.stringify({
          firstName: form.firstName,
          email: form.email,
          city: form.city,
          role: form.role,
          position: pos,
          referralCode: code,
          isNew: !!result.is_new,
          ts: Date.now(),
        }));
      } catch (e) {}
      onSubmitted && onSubmitted();
    } catch (err) {
      const msg = String(err && err.message || err);
      // Map Postgres exceptions back to friendly copy
      const map = {
        invalid_email: lang === 'es' ? 'Email inválido.' : 'Enter a valid email.',
        invalid_name:  lang === 'es' ? 'Nombre requerido.' : 'Name required.',
        invalid_city:  lang === 'es' ? 'Elige una ciudad.' : 'Pick a city.',
        invalid_role:  lang === 'es' ? 'Selecciona un rol.' : 'Select a role.',
        client_unavailable: lang === 'es'
          ? 'No pudimos conectar. Revisa tu internet e intenta de nuevo.'
          : "Couldn't connect. Check your internet and try again.",
      };
      const friendly = Object.keys(map).find((k) => msg.includes(k));
      setSubmitError(friendly
        ? map[friendly]
        : (lang === 'es'
          ? 'Algo salió mal. Intenta de nuevo en un momento.'
          : 'Something went wrong. Try again in a moment.'));
      if (window.pqTrack) window.pqTrack('signup_error', { code: friendly || 'unknown' });
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => {
    try {localStorage.removeItem('pq_signup');} catch (e) {}
    setSubmitted(false);
    setPosition(null);
    setReferralCode(null);
    setSubmitError(null);
    setForm({ firstName: '', email: '', city: '', role: 'player', referral: '', company: '' });
  };

  return (
    <header className="pq-hero" id="top">
      <video
        ref={videoRef}
        className="pq-hero-video"
        autoPlay muted loop playsInline preload="auto"
        poster="assets/og-image.png"
        aria-hidden="true">
        
        <source src="assets/hero.mp4" type="video/mp4" />
      </video>
      <div className="pq-hero-fallback" aria-hidden="true" style={{ zIndex: -1 }} />
      <div className="pq-hero-shade" aria-hidden="true" />
      <div className="pq-hero-grain pq-grain" aria-hidden="true" />

      <div className="pq-hero-inner">
        <div className="pq-hero-copy">
          <div className="pq-hero-eyebrow pq-reveal">
            <span className="pulse" aria-hidden="true" />
            {t.eyebrow}
          </div>

          <h1 className="pq-reveal" data-stagger="1">
            <span className="stack-line">{t.h1Pre}</span>
            {t.h1Mid && <span className="stack-line">{t.h1Mid}</span>}
            <span className="stack-line"><span className="accent">{t.h1Tail}</span></span>
          </h1>

          <p className="pq-hero-sub pq-reveal" data-stagger="2">{t.sub}</p>

          <div className="pq-hero-ctas pq-reveal" data-stagger="3">
            <a className="pq-btn pq-btn--primary pq-btn--lg" href="#join"
               onClick={() => window.pqTrack && window.pqTrack('cta_click_hero', { label: 'primary', lang })}>
              <Icon name="bolt" size={16} />
              {t.primary}
            </a>
            <a className="pq-btn pq-btn--ghost pq-btn--lg" href="#demo"
               onClick={(e) => {
                 e.preventDefault();
                 if (window.pqTrack) window.pqTrack('cta_click_hero', { label: 'demo', lang });
                 setDemoOpen(true);
               }}>
              <Icon name="play" size={14} />
              {t.secondary}
            </a>
          </div>

          <div className="pq-urgency pq-urgency--center pq-reveal" data-stagger="3" role="note">
            {lang === 'es'
              ? 'Cupos limitados para los primeros jugadores en Puerto Rico.'
              : 'Limited spots for the first players in Puerto Rico.'}
          </div>

          <div className="pq-hero-trust pq-reveal" data-stagger="4">
            <span className="pq-active-dot" aria-hidden="true" style={{ width: 8, height: 8, background: 'var(--pq-lime)', borderRadius: 999, display: 'inline-block' }} />
            <span>{t.trust} <strong>{t.trustPlace}</strong></span>
            <span className="line" />
            <span style={{ fontFamily: 'var(--font-mono)', color: '#fff' }}>{totalSignups.toLocaleString()}</span>
            <span>{lang === 'es' ? 'jugadores en la fila' : 'players in line'}</span>
            <span className="line" />
            <span className="pq-urgency pq-urgency--inline">
              {lang === 'es' ? 'Cupos limitados' : 'Limited spots'}
            </span>
          </div>

          <div className="pq-joined-ticker pq-reveal" data-stagger="5">
            <span className="avs" aria-hidden="true">
              <span style={{ '--c1': '#5a8a6a', '--c2': '#1a3a1a' }} />
              <span style={{ '--c1': '#8a5a5a', '--c2': '#3a1a1a' }} />
              <span style={{ '--c1': '#5a6a8a', '--c2': '#1a2a3a' }} />
            </span>
            <span>
              <strong>+{(24 + (totalSignups % 9)).toString()}</strong>{' '}
              {lang === 'es' ? 'se unieron hoy' : 'joined today'}
            </span>
          </div>
        </div>

        <aside className="pq-form-card pq-reveal" data-stagger="2" id="join" aria-labelledby="join-title">
          {!submitted ?
          <>
              <div className="pq-form-head">
                <h3 id="join-title">{t.cardTitle}</h3>
                <p>{t.cardSub}</p>
              </div>
              <form className="pq-form-grid" onSubmit={submit} noValidate>
                {/* Honeypot — real users never see or fill this; bots will. Server rejects on truthy value. */}
                <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
                  <label htmlFor="f-company">Company</label>
                  <input id="f-company" name="company" type="text" tabIndex={-1} autoComplete="off"
                    value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
                </div>
                <div>
                  <label htmlFor="f-first" className="pq-input-label">{t.first}</label>
                  <input
                  id="f-first" className="pq-input" type="text" autoComplete="given-name"
                  value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })}
                  placeholder={t.firstPh}
                  aria-invalid={!!errors.firstName} aria-describedby={errors.firstName ? 'e-first' : undefined} />
                
                  {errors.firstName && <span id="e-first" className="pq-input-error">{errors.firstName}</span>}
                </div>
                <div>
                  <label htmlFor="f-email" className="pq-input-label">Email</label>
                  <input
                  id="f-email" className="pq-input" type="email" autoComplete="email"
                  value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder={t.emailPh}
                  aria-invalid={!!errors.email} aria-describedby={errors.email ? 'e-email' : undefined} />
                
                  {errors.email && <span id="e-email" className="pq-input-error">{errors.email}</span>}
                </div>
                <div className="full">
                  <label htmlFor="f-city" className="pq-input-label">{t.cityLabel}</label>
                  <CityCombobox
                    id="f-city"
                    value={form.city}
                    onChange={(v) => setForm({ ...form, city: v })}
                    cities={t.cities}
                    placeholder={t.cityPh}
                    emptyLabel={t.cityEmpty}
                    clearLabel={t.cityClear}
                    invalid={!!errors.city}
                    describedBy={errors.city ? 'e-city' : undefined}
                  />
                  {errors.city && <span id="e-city" className="pq-input-error">{errors.city}</span>}
                </div>
                <div className="full">
                  <label className="pq-input-label">{t.rolePicker}</label>
                  <div className="pq-role-grid">
                    {[
                  { id: 'player', label: t.rolePlayer },
                  { id: 'club', label: t.roleClub },
                  { id: 'organizer', label: t.roleOrg }].
                  map((r) =>
                  <button key={r.id} type="button"
                  aria-pressed={form.role === r.id}
                  onClick={() => setForm({ ...form, role: r.id })}>
                        {r.label}
                      </button>
                  )}
                  </div>
                </div>
                <div className="full">
                  <label htmlFor="f-ref" className="pq-input-label">{t.refLabel}</label>
                  <input
                  id="f-ref" className="pq-input" type="text"
                  value={form.referral} onChange={(e) => setForm({ ...form, referral: e.target.value })}
                  placeholder={t.refPh} />
                
                </div>
                <button type="submit" disabled={submitting} className="pq-btn pq-btn--primary pq-btn--lg full" style={{ width: '100%', opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
                  {submitting
                    ? (lang === 'es' ? 'Reservando…' : 'Reserving…')
                    : t.submitBtn}
                </button>
                {submitError && (
                  <div className="full" role="alert" style={{
                    fontFamily: 'var(--font-body)', fontSize: 13, color: '#FF8B85',
                    background: 'rgba(255,139,133,0.08)', border: '1px solid rgba(255,139,133,0.25)',
                    padding: '10px 12px', borderRadius: 8, marginTop: -4
                  }}>
                    {submitError}
                  </div>
                )}
              </form>
              <p className="pq-form-foot">{t.foot}</p>
            </> :

          <div className="pq-form-success">
              <div className="check" aria-hidden="true">
                <Icon name="check" size={28} color="#000" stroke={2.5} />
              </div>
              <h4>{t.successH}</h4>
              <p>{t.successP}</p>
              <div className="position">
                <div className="label">{t.posLabel}</div>
                <div className="num">#{position && position.toLocaleString()}</div>
              </div>
              <button className="pq-btn pq-btn--primary" style={{ width: '100%' }}
            onClick={() => {
              const code = referralCode || 'PQ-' + (form.firstName || 'YOU').toUpperCase().slice(0, 5);
              const shareUrl = window.location.origin + window.location.pathname + '?ref=' + code;
              const shareText = lang === 'es'
                ? `Me uní a PIQUEL — únete con mi código ${code}`
                : `I joined the PIQUEL waitlist — join with my code ${code}`;
              if (navigator.share) {
                navigator.share({ title: 'PIQUEL Waitlist', text: shareText, url: shareUrl }).catch(() => {});
              } else if (navigator.clipboard) {
                navigator.clipboard.writeText(shareUrl);
                alert((lang === 'es' ? 'Enlace copiado · ' : 'Link copied · ') + code);
              } else {
                window.prompt(lang === 'es' ? 'Copia este enlace:' : 'Copy this link:', shareUrl);
              }
            }}>
                {t.shareBtn}
                {referralCode && <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 8,
                  opacity: 0.7, letterSpacing: '.05em'
                }}>{referralCode}</span>}
              </button>
              <button className="pq-btn pq-btn--ghost pq-btn--sm" style={{ width: '100%', marginTop: 10, color: '#fff', borderColor: 'rgba(255,255,255,0.15)' }}
            onClick={reset}>
                {lang === 'es' ? 'Editar mis datos' : 'Edit my info'}
              </button>
            </div>
          }
        </aside>
      </div>

      {/* Demo lightbox */}
      <div className={`pq-lightbox ${demoOpen ? 'open' : ''}`} role="dialog" aria-modal="true" aria-label="Demo video"
        onClick={(e) => { if (e.target === e.currentTarget) setDemoOpen(false); }}>
        <div className="frame">
          <button className="close" onClick={() => setDemoOpen(false)} aria-label="Close demo">
            <Icon name="x" size={18}/>
          </button>
          {demoOpen && (
            <video src="assets/hero.mp4" autoPlay loop playsInline controls={false}/>
          )}
          <div className="caption">{lang === 'es' ? 'Abre · Activa · Match · Juega' : 'Open · Activate · Match · Play'}</div>
        </div>
      </div>
    </header>);

}

// =====================================================
// Brand marquee strip under hero
// =====================================================
function Marquee({ lang }) {
  const items = lang === 'es' ?
  ['Open Play en vivo', 'Canchas verificadas', 'DUPR sincronizado', 'Torneos locales', 'Match en 5:46', 'Rankings PR', 'Clubs partner', 'Comunidad real'] :
  ['Live Open Play', 'Verified courts', 'DUPR synced', 'Local tournaments', 'Match in 5:46', 'PR rankings', 'Partner clubs', 'Real community'];
  const repeated = [...items, ...items, ...items];
  return (
    <div className="pq-marquee" aria-hidden="true">
      <div className="pq-marquee-track">
        {repeated.map((t, i) =>
        <span key={i} className="pq-marquee-item">
            <span className="star" />
            {t}
          </span>
        )}
      </div>
    </div>);

}

Object.assign(window, { Nav, Hero, Marquee });