/* global React, Icon */

// =====================================================
// Problem section — fragmented friction
// =====================================================
function ProblemSection({ lang }) {
  const t = lang === 'es' ? {
    label: 'El problema',
    h: 'Jugar pickleball no debería ser tan difícil.',
    p: 'Chats que duran días para coordinar 90 minutos en cancha. Mensajes sin respuesta. Llegas y la cancha está llena. Te invitan tarde. No debería ser tan frustrante.',
    stats: [
    { n: '2.3', l: 'Días promedio para coordinar un partido' },
    { n: '82%', l: 'De los jugadores reporta problema coordinando sus partidos' },
    { n: '5+', l: 'apps y chats necesarios para coordinar un solo partido.' }],

    chat: [
    { side: 'them', av: 'C', name: 'Carla', t: 'Hey loco, ¿jugamos esta semana?', stamp: 'lun 9:14am' },
    { side: 'me', av: 'G', t: '¿El martes 6pm? Tengo cancha en Central.', stamp: 'lun 11:02am' },
    { side: 'them', av: 'M', name: 'Marco', t: 'Yo me apunto, pero falta un cuarto', stamp: 'mar 8:30am' },
    { side: 'them', av: 'J', name: 'José', t: 'Quizás… te confirmo en 1h', stamp: 'mar 4:50pm' },
    { side: 'me', t: '?', stamp: 'mié 9:00am' }]

  } : {
    label: 'The problem',
    h: 'Organizing pickleball is broken.',
    p: 'Group chats that drag for days to coordinate 90 minutes on court. Unanswered DMs. You show up — the court is full. Last-minute invites. Local pickleball culture deserves better.',
    stats: [
    { n: '3.4', l: 'Avg days to coordinate a match' },
    { n: '62%', l: 'Of matches get downsized or cancelled' },
    { n: '5+', l: 'apps and chats needed to coordinate a single match.' }],

    chat: [
    { side: 'them', av: 'C', name: 'Carla', t: 'Hey, want to play this week?', stamp: 'Mon 9:14am' },
    { side: 'me', av: 'G', t: 'Tues 6pm? I have Central court.', stamp: 'Mon 11:02am' },
    { side: 'them', av: 'M', name: 'Marco', t: "I'm in but we need a 4th", stamp: 'Tue 8:30am' },
    { side: 'them', av: 'J', name: 'José', t: 'Maybe… confirming in 1h', stamp: 'Tue 4:50pm' },
    { side: 'me', t: '?', stamp: 'Wed 9:00am' }]

  };

  return (
    <section className="pq-section" id="problem">
      <div className="pq-container">
        <div className="pq-problem-grid">
          <div>
            <div className="pq-eyebrow-row pq-reveal">
              <span className="num">01</span>
              <span className="label">{t.label}</span>
            </div>
            <h2 className="pq-display pq-reveal" data-stagger="1">{t.h}</h2>
            <p className="pq-lead pq-reveal" data-stagger="2" style={{ marginTop: 28 }}>{t.p}</p>

            <div className="pq-stat-row pq-reveal" data-stagger="3">
              {t.stats.map((s, i) =>
              <div className="cell" key={i}>
                  <div className="num">{s.n}</div>
                  <div className="label">{s.l}</div>
                </div>
              )}
            </div>
          </div>

          <div className="pq-chat-mock pq-reveal" data-stagger="2">
            <div className="head">
              <div className="group" aria-hidden="true" />
              <div>
                <div className="name">Pickle Crew · {lang === 'es' ? '6 personas' : '6 people'}</div>
                <div className="meta">{lang === 'es' ? 'Última actividad · mié' : 'Last active · Wed'}</div>
              </div>
            </div>

            {t.chat.map((m, i) =>
            <div key={i} className={`pq-chat-msg ${m.side === 'me' ? 'me' : ''}`}>
                {m.side !== 'me' && <div className="av" aria-hidden="true">{m.av}</div>}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: m.side === 'me' ? 'flex-end' : 'flex-start' }}>
                  <div className="stamp">{m.name ? `${m.name} · ` : ''}{m.stamp}</div>
                  <div className="bubble">{m.t}</div>
                </div>
              </div>
            )}

            <div className="typing">
              <span className="dot" /><span className="dot" /><span className="dot" />
              <span>{lang === 'es' ? 'Carla escribiendo…' : 'Carla typing…'}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// =====================================================
// Solution — 4 steps
// =====================================================
function SolutionSection({ lang }) {
  const t = lang === 'es' ? {
    label: 'La solución',
    h: <>De abrir la app a estar jugando. <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>en cuatro pasos.</span></>,
    p: 'PIQUEL convierte tu disponibilidad en juego real. Un tap activa a tu red y te deja saber todos los que tienen el mismo plan que tú. Sin rodeos, ni polls en WhatsApp.',
    steps: [
    { n: '01', t: 'ABRE LA APP', d: 'Inicio limpio. Sin feed, sin scroll infinito. Una sola pregunta: ¿qué es el plan?' },
    { n: '02', t: 'ACTIVA', d: 'Pulsa GO ACTIVE y la red local te ve en vivo. Tu nivel, tu pueblo, tu hora.' },
    { n: '03', t: 'MATCH', d: 'En segundos te llegan partidos compatibles cerca. Únete con un tap.' },
    { n: '04', t: 'JUEGA', d: 'Cancha confirmada, jugadores verificados. Sales a darle. Sin chats.' }]

  } : {
    label: 'The solution',
    h: <>From open to playing — <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>in four steps.</span></>,
    p: "PIQUEL turns your availability into actual play. One tap rallies your network. No ping-pong, no broken group chats.",
    steps: [
    { n: '01', t: 'OPEN', d: 'Clean home. No feed, no infinite scroll. One question: what is the plan?' },
    { n: '02', t: 'ACTIVATE', d: 'Tap GO ACTIVE and the local network sees you live. Your level, your town, your time.' },
    { n: '03', t: 'MATCH', d: 'Seconds later you get nearby matches that fit. Join with one tap.' },
    { n: '04', t: 'PLAY', d: 'Court confirmed, players verified. Walk in, drop in. No chats.' }]

  };

  return (
    <section className="pq-section light" id="how">
      <div className="pq-container">
        <div className="pq-eyebrow-row pq-reveal">
          <span className="num" style={{ color: '#888' }}>02</span>
          <span className="label">{t.label}</span>
        </div>
        <h2 className="pq-display pq-reveal" data-stagger="1" style={{ color: '#000', maxWidth: '20ch' }}>{t.h}</h2>
        <p className="pq-lead pq-reveal" data-stagger="2" style={{ marginTop: 28, color: '#555' }}>{t.p}</p>

        <div className="pq-steps">
          {t.steps.map((s, i) =>
          <article className="pq-step pq-reveal" data-stagger={String(i % 4 + 1)} key={i}>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <div className="viz" aria-hidden="true">
                {i === 0 && <StepVizOpen />}
                {i === 1 && <StepVizActivate />}
                {i === 2 && <StepVizMatch lang={lang} />}
                {i === 3 && <StepVizPlay />}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

const StepVizOpen = () =>
<div className="viz-app-press" aria-hidden="true">
    <img src="assets/favicon.png" alt="" style={{ width: "55px", height: "55px" }} />
  </div>;

const StepVizActivate = () =>
<span className="viz-active-pill">
    <span className="d" /> ACTIVE · 5:46pm
  </span>;

const StepVizMatch = ({ lang }) =>
<div style={{
  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
  background: '#0e0e0e', border: '1px solid #1c1c1c', borderRadius: 12
}}>
    <div style={{ display: 'flex' }}>
      {['#5a8a6a', '#8a5a5a', '#5a6a8a'].map((c, i) =>
    <div key={i} style={{ ...{
        width: 24, height: 24, borderRadius: 999, background: c,
        border: '2px solid #000', marginLeft: i === 0 ? 0 : -7
      }, background: "rgb(255, 229, 60)" }} />
    )}
    </div>
    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '.08em', color: '#fff' }}>
      3/4 · {lang === 'es' ? 'CERCA' : 'NEARBY'}
    </div>
  </div>;

const StepVizPlay = () =>
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    <svg width="120" height="70" viewBox="0 0 120 70" aria-hidden="true">
      <rect x="6" y="6" width="108" height="58" rx="4" stroke="#C8FF00" strokeWidth="1.5" fill="none" />
      <line x1="60" y1="6" x2="60" y2="64" stroke="#C8FF00" strokeWidth="1.5" strokeDasharray="2 3" />
      <line x1="6" y1="35" x2="114" y2="35" stroke="#C8FF00" strokeWidth="1" opacity=".4" />
      <line x1="22" y1="6" x2="22" y2="64" stroke="#C8FF00" strokeWidth="1" opacity=".4" />
      <line x1="98" y1="6" x2="98" y2="64" stroke="#C8FF00" strokeWidth="1" opacity=".4" />
      <circle cx="35" cy="20" r="3" fill="#C8FF00" />
      <circle cx="35" cy="50" r="3" fill="#C8FF00" />
      <circle cx="85" cy="20" r="3" fill="#fff" />
      <circle cx="85" cy="50" r="3" fill="#fff" />
    </svg>
  </div>;


// =====================================================
// Features showcase
// =====================================================
function FeaturesSection({ lang }) {
  const t = lang === 'es' ? {
    label: 'Features',
    h: <>Todo lo que necesitas. <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>Un Solo App.</span></>,
    p: 'Una sola app — diseñada con jugadores reales en Puerto Rico — para reemplazar los 9 chats que tienes ahora mismo.',
    items: [
    { i: 'bolt', t: 'GO LIVE / EN VIVO', d: 'Activa PIQUEL cuando quieras jugar y entra al instante a la red de jugadores disponibles cerca de ti.', span: 6, art: <FeatActive /> },
    { i: 'pin', t: 'Canchas verificadas', d: 'Más de 60 canchas en PR, con horarios, fotos, contacto y disponibilidad en tiempo real.', span: 6, art: <FeatCourts lang={lang} /> },
    { i: 'users', t: 'Open Play', d: 'Mira en tiempo real quién está jugando antes de salir de casa.', span: 4, art: null },
    { i: 'chart', t: 'Rating personal · DUPR', d: 'Tu nivel se sincroniza con DUPR. Cada partido cuenta. (OPCIONAL) (BETA)', span: 4, art: null },
    { i: 'trophy', t: 'Crea torneos, juegos o equipos', d: 'Brackets, inscripción y resultados sin Excel ni WhatsApp. Con la suscripción que mejor encaje con tus necesidades podrás manejar, monetizar, mercadear y promover tu propio evento.', span: 4, art: null },
    { i: 'chat', t: 'Chat sin chat', d: 'Para quienes desean una interacción más humana: tenemos chat disponible para todos los jugadores en vivo. Coordina, comparte, crea relaciones con personas de tu nivel. Conoce personas que puedan desarrollarte. Crece junto con la comunidad.', span: 6, art: null },
    { i: 'shield', t: 'Verificación', d: 'Jugadores con foto y rating. Sin ranking falsos, sin sorpresas en cancha.', span: 6, art: null }]

  } : {
    label: 'Features',
    h: <>Everything you need. <span className="pq-lime-text" style={{ fontStyle: 'italic', fontFamily: 'Source Serif 4, Georgia, serif', textTransform: 'none', fontWeight: 400 }}>Nothing you don't.</span></>,
    p: 'One app — built with real players in Puerto Rico — to replace the five chats you have right now.',
    items: [
    { i: 'bolt', t: 'Live GO ACTIVE', d: 'Activate PIQUEL whenever you want to play and instantly join the network of available players near you.', span: 6, art: <FeatActive /> },
    { i: 'pin', t: 'Verified courts', d: '60+ courts across PR with hours, photos, contact, and real-time availability.', span: 6, art: <FeatCourts lang={lang} /> },
    { i: 'users', t: 'Open Play', d: 'See in real time who is playing before you leave home.', span: 4, art: null },
    { i: 'chart', t: 'Personal rating · DUPR', d: 'Your level syncs with DUPR. Every match counts.', span: 4, art: null },
    { i: 'trophy', t: 'Local tournaments', d: 'Brackets, sign-up, results — no Excel, no WhatsApp.', span: 4, art: null },
    { i: 'chat', t: 'Chat-less chat', d: 'Messages only inside a confirmed match. Zero noise.', span: 6, art: null },
    { i: 'shield', t: 'Verification', d: 'Players with photo and rating. No fake profiles, no court surprises.', span: 6, art: null }]

  };

  return (
    <section className="pq-section" id="features">
      <div className="pq-container">
        <div className="pq-eyebrow-row pq-reveal">
          <span className="num">03</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: 28 }}>{t.p}</p>

        <div className="pq-features-grid">
          {t.items.map((it, i) =>
          <article key={i} className={`pq-feature span-${it.span} pq-reveal`} data-stagger={String(i % 4 + 1)}>
              <div className="icon-box" aria-hidden="true">
                <Icon name={it.i} size={20} color="var(--pq-lime)" />
              </div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
              {it.art && <div className="feature-art">{it.art}</div>}
            </article>
          )}
        </div>
      </div>
    </section>);

}

// === Feature visuals (small, no slop) ===
const FeatActive = () =>
<div style={{ position: 'relative', height: 120, marginTop: 8 }}>
    <svg width="100%" height="120" viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <linearGradient id="pulseGrad" x1="0" x2="1">
          <stop offset="0%" stopColor="#C8FF00" stopOpacity="0" />
          <stop offset="50%" stopColor="#C8FF00" stopOpacity=".7" />
          <stop offset="100%" stopColor="#C8FF00" stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1="0" y1="60" x2="320" y2="60" stroke="#1c1c1c" strokeWidth="1" />
      {[20, 50, 80, 110, 140, 170, 200, 230, 260, 290].map((x, i) =>
    <line key={i} x1={x} y1="55" x2={x} y2="65" stroke="#333" strokeWidth="1" />
    )}
      <path d="M 0 60 L 30 60 L 45 35 L 60 80 L 80 50 L 100 60 L 150 60 L 165 30 L 180 90 L 200 50 L 230 60 L 320 60"
    stroke="url(#pulseGrad)" strokeWidth="2" fill="none" />
      <circle cx="180" cy="60" r="6" fill="#C8FF00">
        <animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="1;.4;1" dur="2s" repeatCount="indefinite" />
      </circle>
    </svg>
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)', fontSize: 10, color: '#666' }}>
      <span>5:00pm</span><span>5:46pm · YOU</span><span>7:30pm</span>
    </div>
  </div>;


const FeatCourts = ({ lang }) =>
<div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
    {[
  { name: 'Cancha Central', loc: 'San Juan · 1.2km', open: true, free: '2 libres' },
  { name: 'Parque Luis Muñoz', loc: 'San Juan · 3.8km', open: false, free: 'llena' },
  { name: 'Bayamón Court', loc: 'Bayamón · 12km', open: true, free: '4 libres' }].
  map((c, i) =>
  <div key={i} style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '10px 12px', background: '#0e0e0e', border: '1px solid #1c1c1c', borderRadius: 10
  }}>
        <div style={{ width: 6, height: 32, borderRadius: 999, background: c.open ? '#C8FF00' : '#404040' }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '.04em', textTransform: 'uppercase', color: '#fff' }}>{c.name}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#666', marginTop: 2 }}>{c.loc}</div>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: c.open ? '#C8FF00' : '#666' }}>
          {c.free}
        </span>
      </div>
  )}
  </div>;


Object.assign(window, { ProblemSection, SolutionSection, FeaturesSection });