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

// =====================================================
// Benefits — Players / Clubs / Organizers
// =====================================================
function BenefitsSection({ lang }) {
  const tabs = lang === 'es' ?
  [{ id: 'players', label: 'Jugadores' }, { id: 'clubs', label: 'Clubes' }, { id: 'orgs', label: 'Organizadores' }] :
  [{ id: 'players', label: 'Players' }, { id: 'clubs', label: 'Clubs' }, { id: 'orgs', label: 'Organizers' }];

  const data = lang === 'es' ? {
    players: [
    { n: '01', t: 'Match en minutos', d: 'Tu próxima partida no necesita 14 mensajes. Activa, elige, juega.' },
    { n: '02', t: 'Tu rating se mueve', d: 'DUPR sincronizado y rating personal en cada partido. Sin hojas de cálculo.' },
    { n: '03', t: 'Compañeros reales', d: 'Perfiles verificados con foto, nivel y record. Encuentra rivales de tu calibre.' },
    { n: '04', t: 'Cero ruido', d: 'No hay feed ni distracciones. Solo lo necesario para tu próximo partido.' },
    { n: '05', t: 'Comunidad local', d: 'Built for Puerto Rico primero. Conoce gente cerca, no en otro continente.' },
    { n: '06', t: 'Acceso temprano', d: 'Lista de espera → primeros en jugar. Códigos limitados antes del lanzamiento.' }],

    clubs: [
    { n: '01', t: 'Llena tus canchas', d: 'Tus horarios libres aparecen en vivo a jugadores listos. Ocupación real, no promesas.' },
    { n: '02', t: 'Reservas sin fricción', d: 'Los Open Plays reservan canchas tuyas y te avisan. Pagos integrados pronto.' },
    { n: '03', t: 'Panel del club', d: 'Ve quién juega, cuándo y cuánto. Insights que reemplazan tu Excel.' },
    { n: '04', t: 'Branding nativo', d: 'Tu club con foto, logo, contacto. Posicionate como destino oficial PIQUEL.' },
    { n: '05', t: 'Comunidad propia', d: 'Eventos privados, listas internas, ranking del club. Tu app dentro de PIQUEL.' },
    { n: '06', t: 'Free hasta lanzamiento', d: 'Club Partners en waitlist arrancan gratis. Sin tarifas el primer año.' }],

    orgs: [
    { n: '01', t: 'Torneos sin Excel', d: 'Brackets, inscripciones, resultados y comunicación — todo en una app.' },
    { n: '02', t: 'Inscripción en 30s', d: 'Los jugadores se inscriben con su perfil. Cobros en línea desde el día uno.' },
    { n: '03', t: 'Comunicación directa', d: 'Push notifications a tus inscritos. Sin reenviar al WhatsApp.' },
    { n: '04', t: 'Resultados en vivo', d: 'Marcadores y brackets actualizándose en tiempo real para los espectadores.' },
    { n: '05', t: 'Ranking PR oficial', d: 'Tus eventos cuentan para el ranking PIQUEL · Puerto Rico.' },
    { n: '06', t: 'Co-marketing', d: 'Promovemos tu torneo a 5,000+ jugadores activos en la región.' }]

  } : {
    players: [
    { n: '01', t: 'Match in minutes', d: 'Your next game does not need 14 messages. Activate, pick, play.' },
    { n: '02', t: 'Your rating moves', d: 'DUPR sync + personal rating, every match. Drop the spreadsheets.' },
    { n: '03', t: 'Real opponents', d: 'Verified profiles with photo, level, and record. Find your calibre.' },
    { n: '04', t: 'Zero noise', d: 'No feed, no distractions. Just what you need for your next match.' },
    { n: '05', t: 'Local community', d: 'Built for Puerto Rico first. Meet people nearby, not in another timezone.' },
    { n: '06', t: 'Early access', d: 'Waitlist → first to play. Limited codes before public launch.' }],

    clubs: [
    { n: '01', t: 'Fill your courts', d: 'Open slots surface live to ready players. Real occupancy, not promises.' },
    { n: '02', t: 'Frictionless bookings', d: 'Open Plays reserve your courts and notify you. Payments next.' },
    { n: '03', t: 'Club dashboard', d: 'See who plays, when, and how much. Insights that replace your Excel.' },
    { n: '04', t: 'Native branding', d: 'Your club with photo, logo, contact. Position as a PIQUEL destination.' },
    { n: '05', t: 'Private community', d: 'Private events, internal lists, club ranking. Your app inside PIQUEL.' },
    { n: '06', t: 'Free until launch', d: 'Club Partners on the waitlist start free. No fees year one.' }],

    orgs: [
    { n: '01', t: 'Tournaments without Excel', d: 'Brackets, signups, results, and comms — all in one app.' },
    { n: '02', t: '30-second signup', d: 'Players register with their profile. Online payments from day one.' },
    { n: '03', t: 'Direct communication', d: 'Push notifications to your registrants. No forwarding to WhatsApp.' },
    { n: '04', t: 'Live results', d: 'Scoreboards and brackets update in real time for spectators.' },
    { n: '05', t: 'Official PR ranking', d: 'Your events count toward the PIQUEL · Puerto Rico ranking.' },
    { n: '06', t: 'Co-marketing', d: 'We promote your tournament to 5,000+ active players in the region.' }]

  };

  const [tab, setTab] = useState('players');
  const items = data[tab];

  return (
    <section className="pq-section light" id="benefits">
      <div className="pq-container">
        <div className="pq-eyebrow-row pq-reveal">
          <span className="num" style={{ color: '#888' }}>04</span>
          <span className="label">{lang === 'es' ? 'Beneficios' : 'Benefits'}</span>
        </div>
        <h2 className="pq-display pq-reveal" data-stagger="1" style={{ color: '#000', maxWidth: '22ch' }}>
          {lang === 'es' ?
          <>Una plataforma. <span style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400, color: '#000' }}>Tres mundos.</span></> :
          <>One platform. <span style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400, color: '#000' }}>Three worlds.</span></>
          }
        </h2>
        <p className="pq-lead pq-reveal" data-stagger="2" style={{ marginTop: 24, color: '#555' }}>
          {lang === 'es' ?
          'Jugadores, clubes y organizadores — cada uno con un panel pensado para su realidad.' :
          'Players, clubs, and organizers — each with a dashboard built for their reality.'}
        </p>

        <div className="pq-tabs pq-reveal" data-stagger="3" style={{ marginTop: 40 }} role="tablist" aria-label="Benefits audience">
          {tabs.map((x) =>
          <button key={x.id} role="tab" onClick={() => setTab(x.id)} aria-pressed={tab === x.id} aria-selected={tab === x.id}>
              {x.label}
            </button>
          )}
        </div>

        <div className="pq-benefits" role="tabpanel" key={tab}>
          {items.map((b, i) =>
          <article className="pq-benefit pq-benefit--enter" style={{ animationDelay: `${i * 60}ms` }} key={tab + i}>
              <div className="num">{b.n}</div>
              <h5>{b.t}</h5>
              <p>{b.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// =====================================================
// Referral Program
// =====================================================
function ReferralSection({ lang }) {
  const t = lang === 'es' ? {
    label: 'Referidos',
    h: <>Sube en la fila. <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>Trae a tu crew.</span></>,
    p: 'Cada amigo que se une con tu código te sube de tier. Los que llegan primero, juegan primero.',
    cta: 'Reservar mi cupo →',
    rows: [
    { c: '1', d: 'Acceso temprano garantizado.', badge: 'Tier 1' },
    { c: '5', d: 'Mes 1 de Premium PIQUEL gratis.', badge: 'Tier 2' },
    { c: '10', d: 'Saltas 100 puestos en la fila.', badge: 'Tier 3' },
    { c: '30', d: 'Founders Club + camiseta edición limitada.', badge: 'FOUNDERS', gold: true }]

  } : {
    label: 'Referrals',
    h: <>Move up the line. <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>Bring your crew.</span></>,
    p: 'Each friend who joins with your code bumps you a tier. First in line, first to play.',
    cta: 'Reserve my spot →',
    rows: [
    { c: '1', d: 'Guaranteed early access.', badge: 'Tier 1' },
    { c: '3', d: 'Month 1 of PIQUEL Premium, free.', badge: 'Tier 2' },
    { c: '5', d: 'Skip 1,000 spots in the queue.', badge: 'Tier 3' },
    { c: '10', d: 'Founders Club + limited-edition tee.', badge: 'FOUNDERS', gold: true }]

  };

  return (
    <section className="pq-section" id="referral">
      <div className="pq-container">
        <div className="pq-referral pq-reveal">
          <div className="pq-referral-inner">
            <div>
              <div className="pq-eyebrow-row" style={{ marginBottom: 16 }}>
                <span className="num">05</span>
                <span className="label">{t.label}</span>
              </div>
              <h2 className="pq-display-sm" style={{ maxWidth: '14ch', color: '#fff' }}>{t.h}</h2>
              <p className="pq-lead" style={{ marginTop: 22, color: 'rgba(255,255,255,.72)' }}>{t.p}</p>
              <div className="pq-urgency" style={{ marginTop: 12 }}>
                {lang === 'es' ? 'Cupos limitados' : 'Limited spots'}
              </div>
              <a href="#join" className="pq-btn pq-btn--primary pq-btn--lg" style={{ marginTop: 28 }}>
                <Icon name="bolt" size={15} />
                {t.cta}
              </a>
            </div>

            <div className="pq-referral-ladder">
              {t.rows.map((r, i) =>
              <div className={`pq-rl-row ${r.gold ? 'gold' : ''}`} key={i}>
                  <div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#888', letterSpacing: '.12em' }}>{lang === 'es' ? 'INVITA' : 'INVITE'}</span>
                    <div className="count">{r.c}</div>
                  </div>
                  <div className="desc">{r.d}</div>
                  <span className="badge-out">{r.badge}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// =====================================================
// Product screenshots — mini phone mocks
// =====================================================
function ScreenshotsSection({ lang }) {
  const t = lang === 'es' ? {
    label: 'Producto',
    h: <>Diseñada para <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>la cancha,</span> no el feed.</>,
    p: 'Cada pantalla resuelve una pregunta: ¿quién, dónde, a qué hora? Lo que sigue, lo decides en cancha.'
  } : {
    label: 'Product',
    h: <>Built for <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>the court,</span> not the feed.</>,
    p: 'Every screen answers one question: who, where, what time? Everything else, you sort out on court.'
  };

  return (
    <section className="pq-section" id="product" data-comment-anchor="c4dfdb33da-section-188-5">
      <div className="pq-container">
        <div className="pq-eyebrow-row pq-reveal">
          <span className="num">06</span>
          <span className="label">{t.label}</span>
        </div>
        <h2 className="pq-display pq-reveal" data-stagger="1" style={{ maxWidth: '22ch' }}>{t.h}</h2>
        <p className="pq-lead pq-reveal" data-stagger="2" style={{ marginTop: 24 }}>{t.p}</p>

        <div className="pq-screenshots pq-reveal" data-stagger="3" role="list" aria-label="Product screenshots">
          <PhoneMock kind="splash" lang={lang} />
          <PhoneMock kind="home" lang={lang} />
          <PhoneMock kind="match" lang={lang} />
          <PhoneMock kind="profile" lang={lang} />
          <PhoneMock kind="active" lang={lang} />
        </div>
      </div>
    </section>);

}

// Static phone mocks (compact)
function PhoneMock({ kind, lang }) {
  return (
    <div className="frame" role="listitem">
      <div style={{
        position: 'absolute', inset: 0, paddingTop: 40,
        display: 'flex', flexDirection: 'column',
        background: kind === 'splash' || kind === 'match' || kind === 'active' ? '#000' : '#F7F7F5',
        color: kind === 'splash' || kind === 'match' || kind === 'active' ? '#fff' : '#000'
      }}>
        {kind === 'splash' && <PMSplash />}
        {kind === 'home' && <PMHome lang={lang} />}
        {kind === 'match' && <PMMatch lang={lang} />}
        {kind === 'profile' && <PMProfile lang={lang} />}
        {kind === 'active' && <PMActive lang={lang} />}
      </div>
    </div>);

}

const PMSplash = () =>
<div style={{
  flex: 1, padding: '24px 18px', display: 'flex', flexDirection: 'column',
  background: `linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.9)), linear-gradient(135deg, #1a3a1a, #000)`
}}>
    <img src="assets/logo-white.svg" alt="" style={{ height: 26, alignSelf: 'center' }} />
    <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9, letterSpacing: '.18em', color: '#C8FF00', textTransform: 'uppercase' }}>Puerto Rico · Pickleball</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32, lineHeight: .9, marginTop: 8, color: '#fff', textTransform: 'uppercase', letterSpacing: '-.01em' }}>
          MENOS CHAT.<br /><span style={{ color: '#C8FF00' }}>MÁS PICKLE.</span>
        </h3>
      </div>
      <div style={{
      background: '#C8FF00', color: '#000', padding: '14px', borderRadius: 10, textAlign: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase'
    }}>Únete</div>
      <div style={{
      background: 'transparent', color: '#fff', padding: '14px', borderRadius: 10, textAlign: 'center',
      border: '1px solid rgba(255,255,255,.18)',
      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase'
    }}>Ya tengo cuenta</div>
    </div>
  </div>;


const PMHome = ({ lang }) =>
<>
    <div style={{ padding: '12px 14px 18px', background: '#000', color: '#fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <img src="assets/logo-white.svg" alt="" style={{ height: 18 }} />
        <span style={{ marginLeft: 'auto', width: 28, height: 28, borderRadius: 999, background: '#C8FF00', color: '#000',
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11 }}>G</span>
      </div>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#888' }}>{lang === 'es' ? 'Hola, Gabriel.' : 'Hi, Gabriel.'}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', marginTop: 2 }}>
        {lang === 'es' ? '¿Cuál es el plan?' : "What's the plan?"}
      </div>
      <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, background: 'rgba(200,255,0,0.12)',
      border: '1px solid rgba(200,255,0,0.35)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: '#C8FF00' }} />
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '.06em', textTransform: 'uppercase' }}>ACTIVE</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: '#C8FF00' }}>5:46pm</span>
      </div>
    </div>
    <div style={{ flex: 1, padding: '14px 14px 0', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9, letterSpacing: '.16em', color: '#000', textTransform: 'uppercase', marginBottom: 10 }}>
        OPEN PLAY · HOY
      </div>
      {[
    { t: 'Open Play Central', s: '3/4 · 5:46pm', lvl: 'PRINCIPIANTE', col: '#C8FF00' },
    { t: 'Doubles · Bayamón', s: '2/4 · 7:30pm', lvl: 'INTERMEDIO', col: '#FBB724' }].
    map((m, i) =>
    <div key={i} style={{
      background: '#fff', border: '1px solid #E5E5E5', borderRadius: 12, padding: 10, marginBottom: 8,
      display: 'flex', gap: 10, alignItems: 'center'
    }}>
          <div style={{ width: 38, height: 38, borderRadius: 8, background: 'linear-gradient(135deg,#1d3a1d,#0a0a0a)' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10, letterSpacing: '.04em', textTransform: 'uppercase' }}>{m.t}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#666', marginTop: 2 }}>{m.s}</div>
          </div>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.08em',
        padding: '3px 7px', borderRadius: 999, background: `${m.col}22`, color: m.col, border: `1px solid ${m.col}44` }}>{m.lvl}</span>
        </div>
    )}
    </div>
  </>;


const PMMatch = ({ lang }) =>
<>
    <div style={{
    height: 130, background: `linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.85)), linear-gradient(135deg,#1d3a1d,#0a0a0a)`,
    padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', color: '#fff'
  }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.1em',
      padding: '4px 8px', borderRadius: 999, background: 'rgba(200,255,0,0.12)', color: '#C8FF00',
      border: '1px solid rgba(200,255,0,0.3)', alignSelf: 'flex-start' }}>PRINCIPIANTE</span>
      <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, lineHeight: 1, marginTop: 8, letterSpacing: '-.01em', textTransform: 'uppercase' }}>OPEN PLAY CENTRAL</h4>
    </div>
    <div style={{ padding: '16px 14px', flex: 1, background: '#fff', color: '#000' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Cancha' : 'Court'}</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, marginTop: 3 }}>Cancha Central</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Hora' : 'Time'}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 16, marginTop: 3 }}>5:46pm</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Cupos' : 'Slots'}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 16, marginTop: 3 }}>3 / 4</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Tipo' : 'Type'}</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, marginTop: 3 }}>Doubles · Mixto</div>
        </div>
      </div>
      <div style={{ marginTop: 18 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Confirmados' : 'Confirmed'}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
          {['#5a8a6a', '#8a5a5a', '#5a6a8a'].map((c, i) =>
        <div key={i} style={{ width: 30, height: 30, borderRadius: 999, background: c, border: '2px solid #fff' }} />
        )}
          <div style={{ width: 30, height: 30, borderRadius: 999, border: '2px dashed #ddd' }} />
        </div>
      </div>
      <div style={{
      marginTop: 22, background: '#000', color: '#C8FF00', padding: 13, borderRadius: 10, textAlign: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '.14em'
    }}>UNIRME AL GRUPO →</div>
    </div>
  </>;


const PMProfile = ({ lang }) =>
<>
    <div style={{ background: '#000', color: '#fff', padding: '18px 14px 22px' }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ width: 54, height: 54, borderRadius: 999, background: 'linear-gradient(135deg,#5a8a6a,#1a3a1a)', border: '2px solid #C8FF00' }} />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', letterSpacing: '-.005em' }}>GABRIEL</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#888', marginTop: 3 }}>San Juan · Apr 2026</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 18, marginTop: 18 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>DUPR</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 28, color: '#C8FF00', marginTop: 4 }}>3.42</div>
        </div>
        <div style={{ width: 1, background: '#1c1c1c' }} />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase' }}>{lang === 'es' ? 'Personal' : 'Personal'}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 28, marginTop: 4 }}>4.7</div>
        </div>
      </div>
    </div>
    <div style={{ padding: 14, background: '#fff', color: '#000', flex: 1 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.16em', color: '#888', textTransform: 'uppercase', marginBottom: 10 }}>{lang === 'es' ? 'ESTADÍSTICAS' : 'STATS'}</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {[{ n: '23', l: lang === 'es' ? 'Mes' : 'Month' }, { n: '4W·2L', l: lang === 'es' ? 'Recientes' : 'Recent' }, { n: '47', l: lang === 'es' ? 'Totales' : 'Total' }, { n: '★4.7', l: 'Rating' }].map((s, i) =>
      <div key={i} style={{ background: '#F5F5F5', border: '1px solid #E5E5E5', borderRadius: 10, padding: 10 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 18 }}>{s.n}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 8, letterSpacing: '.14em', color: '#888', textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
          </div>
      )}
      </div>
    </div>
  </>;


const PMActive = ({ lang }) =>
<div style={{
  flex: 1, padding: 16, display: 'flex', flexDirection: 'column',
  background: `radial-gradient(ellipse at 50% 30%, rgba(200,255,0,0.15), transparent 60%), #000`
}}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <img src="assets/logo-white.svg" alt="" style={{ height: 18 }} />
      <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: '#C8FF00' }}>{lang === 'es' ? '6 activos' : '6 active'}</span>
    </div>
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ textAlign: 'center' }}>
        <div style={{
        width: 130, height: 130, borderRadius: 999, background: 'rgba(200,255,0,0.10)',
        border: '2px solid rgba(200,255,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 0 60px rgba(200,255,0,0.25)', margin: '0 auto 18px'
      }}>
          <div style={{
          width: 80, height: 80, borderRadius: 999, background: '#C8FF00',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '.14em', color: '#000' }}>ON</span>
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: '#fff', letterSpacing: '-.01em', textTransform: 'uppercase' }}>ACTIVE</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#C8FF00', marginTop: 6 }}>5:46pm · -1.2km</div>
      </div>
    </div>
    <div style={{ padding: '12px 14px', background: '#0e0e0e', border: '1px solid #1c1c1c', borderRadius: 12,
    display: 'flex', alignItems: 'center', gap: 10, color: '#fff' }}>
      <div style={{ display: 'flex' }}>
        {['#8a5a5a', '#5a6a8a', '#5a8a6a'].map((c, i) =>
      <div key={i} style={{ width: 24, height: 24, borderRadius: 999, background: c, border: '2px solid #000', marginLeft: i === 0 ? 0 : -7 }} />
      )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10, letterSpacing: '.06em', textTransform: 'uppercase' }}>3 {lang === 'es' ? 'cerca · listos' : 'nearby · ready'}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#888', marginTop: 2 }}>Carla, José, Mia</div>
      </div>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9, letterSpacing: '.14em', color: '#C8FF00' }}>VER →</span>
    </div>
  </div>;


Object.assign(window, { BenefitsSection, ReferralSection, ScreenshotsSection });