// screen-ai-features.jsx — "Prossimamente": video upload, AI analysis & player profile
// All sections here are POST-MVP. They render with a clear "Prossimamente" badge.

// ── Shared building blocks ──────────────────────────────────────────────────

function SoonBadge({ label = 'Prossimamente' }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 10, fontWeight: 700,
      padding: '4px 9px 4px 7px',
      borderRadius: 999,
      background: 'var(--ink)', color: 'var(--bg)',
      letterSpacing: '0.08em', textTransform: 'uppercase',
      fontFamily: 'inherit',
    }}>
      <span style={{
        width: 5, height: 5, borderRadius: '50%',
        background: 'var(--accent)',
        boxShadow: '0 0 0 3px rgba(255,255,255,0.12)',
        animation: 'soonPulse 2s ease-in-out infinite',
      }} />
      {label}
    </span>
  );
}

function MonoLabel({ children, dim }) {
  return (
    <span style={{
      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      fontSize: 10,
      letterSpacing: '0.04em',
      color: dim ? 'var(--muted)' : 'var(--ink)',
      textTransform: 'uppercase',
    }}>{children}</span>
  );
}

// ── Mock video frame with pose overlay + hit timeline ───────────────────────
// Used in both landing showcase and dashboard analysis card.

function AIVideoPreview({ caption = 'sessione · 12 nov', label = 'video da analizzare', hits = SAMPLE_HITS, height }) {
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '16 / 9',
      height,
      width: '100%',
      borderRadius: 16,
      overflow: 'hidden',
      background: 'var(--ink)',
      isolation: 'isolate',
    }}>
      {/* Striped placeholder */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px)',
      }} />
      {/* Court suggestion */}
      <svg viewBox="0 0 320 180" preserveAspectRatio="none"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }}>
        <g fill="none" stroke="var(--accent)" strokeWidth="0.6">
          <path d="M40 160 L280 160 L240 80 L80 80 Z" />
          <line x1="80" y1="80" x2="280" y2="160" />
          <line x1="240" y1="80" x2="40" y2="160" />
          <line x1="60" y1="120" x2="260" y2="120" strokeDasharray="3 3" />
        </g>
      </svg>

      {/* Pose skeleton overlay (stylized) */}
      <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid meet"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <g stroke="var(--accent)" strokeWidth="1.4" strokeLinecap="round" fill="none" opacity="0.95">
          {/* spine */}
          <path d="M165 70 L168 110" />
          {/* shoulders */}
          <path d="M148 78 L182 76" />
          {/* arms — racquet side raised */}
          <path d="M148 78 L132 92 L142 108" />
          <path d="M182 76 L208 60 L228 48" />
          {/* legs */}
          <path d="M168 110 L155 138 L150 162" />
          <path d="M168 110 L182 138 L188 162" />
          {/* head */}
          <circle cx="165" cy="62" r="6" fill="var(--accent)" stroke="none" />
          {/* joint dots */}
          {[[148,78],[182,76],[132,92],[208,60],[168,110],[155,138],[182,138],[150,162],[188,162]].map(([x,y],i)=>(
            <circle key={i} cx={x} cy={y} r="2" fill="var(--accent)" stroke="none" />
          ))}
          {/* racquet stick */}
          <line x1="228" y1="48" x2="246" y2="32" stroke="var(--bg)" strokeWidth="1.2" />
          <ellipse cx="250" cy="28" rx="6" ry="4" fill="none" stroke="var(--bg)" strokeWidth="1" />
          {/* ball trajectory */}
          <path d="M250 28 Q190 18 110 60" stroke="var(--accent)" strokeWidth="0.8"
                strokeDasharray="2 3" opacity="0.7" />
          <circle cx="110" cy="60" r="2.5" fill="var(--accent)" stroke="none" />
        </g>
      </svg>

      {/* Tracking box around the player */}
      <div style={{
        position: 'absolute',
        left: '40%', top: '28%', width: '22%', height: '62%',
        border: '1px solid var(--accent)',
        borderRadius: 4,
      }}>
        <div style={{
          position: 'absolute', top: -18, left: 0,
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 9, color: 'var(--accent)', letterSpacing: '0.05em',
          background: 'rgba(0,0,0,0.5)', padding: '1px 4px',
        }}>player · 0.97</div>
      </div>

      {/* Top-left meta */}
      <div style={{
        position: 'absolute', top: 12, left: 12,
        display: 'flex', gap: 8, alignItems: 'center',
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: '#e15555', animation: 'soonPulse 1.5s ease-in-out infinite',
        }} />
        <MonoLabel><span style={{ color: 'rgba(255,255,255,0.85)' }}>{label}</span></MonoLabel>
      </div>

      {/* Top-right counter */}
      <div style={{
        position: 'absolute', top: 12, right: 12,
        padding: '4px 8px',
        background: 'rgba(255,255,255,0.08)',
        backdropFilter: 'blur(8px)',
        borderRadius: 6,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 10, color: 'rgba(255,255,255,0.9)',
        letterSpacing: '0.04em',
      }}>{hits.length} colpi · {Math.round(hits.length * 1.6)}s</div>

      {/* Hits timeline along the bottom */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 12,
        height: 28,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <div style={{
          position: 'relative', flex: 1, height: 4,
          background: 'rgba(255,255,255,0.18)', borderRadius: 999,
        }}>
          {hits.map((h, i) => (
            <span key={i} style={{
              position: 'absolute',
              left: `${h.t * 100}%`,
              top: '50%',
              transform: 'translate(-50%, -50%)',
              width: 8, height: 8, borderRadius: '50%',
              background: HIT_COLOR[h.kind] || 'var(--accent)',
              boxShadow: '0 0 0 2px rgba(0,0,0,0.4)',
            }} />
          ))}
          {/* playhead */}
          <span style={{
            position: 'absolute', left: '62%', top: -6, bottom: -6,
            width: 2, background: 'var(--bg)', borderRadius: 2,
          }} />
        </div>
        <MonoLabel>
          <span style={{ color: 'rgba(255,255,255,0.9)' }}>00:38 / 01:02</span>
        </MonoLabel>
      </div>

      {/* Bottom-left caption */}
      <div style={{
        position: 'absolute', bottom: 48, left: 12,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 10, color: 'rgba(255,255,255,0.55)',
        letterSpacing: '0.04em',
      }}>{caption}</div>
    </div>
  );
}

const HIT_COLOR = {
  forehand: 'var(--accent)',
  backhand: '#e8c447',
  serve:    '#ffffff',
  error:    '#e15555',
};

const SAMPLE_HITS = [
  { t: 0.04, kind: 'serve' },
  { t: 0.12, kind: 'forehand' },
  { t: 0.18, kind: 'backhand' },
  { t: 0.24, kind: 'forehand' },
  { t: 0.31, kind: 'error' },
  { t: 0.40, kind: 'forehand' },
  { t: 0.48, kind: 'backhand' },
  { t: 0.55, kind: 'forehand' },
  { t: 0.62, kind: 'backhand' },
  { t: 0.69, kind: 'error' },
  { t: 0.76, kind: 'forehand' },
  { t: 0.84, kind: 'forehand' },
  { t: 0.92, kind: 'serve' },
];

// ── DASHBOARD: Upload CTA ───────────────────────────────────────────────────

function AIUploadCTA() {
  return (
    <section style={{
      borderRadius: 20,
      border: '1.5px dashed var(--border)',
      background: 'var(--surface)',
      padding: 24,
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1fr)',
      gap: 24,
      alignItems: 'center',
    }} className="ai-upload-grid">
      <style>{`
        @media (min-width: 760px) {
          .ai-upload-grid { grid-template-columns: 1.1fr 0.9fr !important; }
        }
      `}</style>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <SoonBadge />
          <MonoLabel dim>analisi-ai · v0</MonoLabel>
        </div>
        <h2 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 'clamp(26px, 3vw, 34px)',
          fontWeight: 400, margin: 0,
          letterSpacing: '-0.02em', lineHeight: 1.1,
          color: 'var(--ink)',
        }}>
          Carica un video.<br />
          <em style={{ color: 'var(--accent-strong)' }}>L'AI</em> capisce come giochi.
        </h2>
        <p style={{
          fontSize: 14, color: 'var(--muted)', lineHeight: 1.55,
          margin: '12px 0 0', maxWidth: 440, letterSpacing: '-0.005em',
        }}>
          Riconoscimento automatico di dritto, rovescio e servizio. Tracking
          articolare 3D, traiettoria della palla, mappa dei colpi.
          Da qui costruiamo il tuo profilo da tennista.
        </p>
        <div style={{ display: 'flex', gap: 16, marginTop: 18, flexWrap: 'wrap' }}>
          <MiniSpec label="Formato" value="MP4 · 1080p" />
          <MiniSpec label="Durata" value="30–120s" />
          <MiniSpec label="Frame rate" value="60 fps" />
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
          <button style={{
            height: 42, padding: '0 18px', borderRadius: 999,
            background: 'var(--ink)', color: 'var(--bg)', border: 'none',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
            cursor: 'not-allowed', opacity: 0.85,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }} disabled>
            <UploadIcon /> Carica video
          </button>
          <button style={{
            height: 42, padding: '0 16px', borderRadius: 999,
            background: 'transparent', color: 'var(--ink)',
            border: '1px solid var(--border)',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
            cursor: 'pointer',
          }}>Guida ripresa →</button>
        </div>
        <div style={{
          marginTop: 18, fontSize: 12, color: 'var(--muted)',
          letterSpacing: '-0.005em',
        }}>
          Disponibile dopo la fase pilota. Vuoi essere tra i primi?{' '}
          <a href="#" style={{ color: 'var(--accent-strong)', fontWeight: 600 }}>
            Iscriviti alla beta
          </a>
        </div>
      </div>
      <AIVideoPreview caption="anteprima · sample data" />
    </section>
  );
}

function MiniSpec({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
      <div style={{
        fontSize: 14, fontWeight: 600, color: 'var(--ink)',
        marginTop: 2, letterSpacing: '-0.01em',
      }}>{value}</div>
    </div>
  );
}

function UploadIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
      <path d="M8 11V3M8 3L5 6M8 3l3 3M3 12v1.5h10V12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ── DASHBOARD: AI Player Profile (post-analysis) ────────────────────────────

function AIPlayerProfile() {
  return (
    <section>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        gap: 12, flexWrap: 'wrap', marginBottom: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <h2 style={{
            margin: 0,
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 24, fontWeight: 400, letterSpacing: '-0.01em',
            color: 'var(--ink)',
          }}>Profilo AI</h2>
          <SoonBadge />
        </div>
        <MonoLabel dim>3 video · 217 colpi · agg. oggi</MonoLabel>
      </div>

      <p style={{
        margin: '0 0 16px', fontSize: 13, color: 'var(--muted)',
        maxWidth: 640, lineHeight: 1.5, letterSpacing: '-0.005em',
      }}>
        Dati derivati automaticamente dall'analisi dei tuoi video. Questa è
        un'anteprima — al lancio rifletterà i tuoi video reali.
      </p>

      {/* Top: video card + key insights side by side */}
      <div style={{
        display: 'grid', gap: 16,
        gridTemplateColumns: 'minmax(0, 1fr)',
      }} className="ai-profile-grid">
        <style>{`
          @media (min-width: 760px) {
            .ai-profile-grid { grid-template-columns: 1.15fr 0.85fr !important; }
          }
        `}</style>
        <AIVideoPreview caption="ultima sessione · 12 nov · 01:02" label="ultima sessione" />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <InsightCard
            tone="positive"
            tag="Colpo migliore"
            value="Dritto incrociato"
            stat="89% scambi vinti · 48 esecuzioni"
          />
          <InsightCard
            tone="warning"
            tag="Errore ricorrente"
            value="Apertura tardiva di spalle"
            stat="rovescio · 23/57 esecuzioni"
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <KpiTile label="Vel. palla media" value="87" unit="km/h" />
            <KpiTile label="Coverage campo" value="64" unit="%" />
          </div>
        </div>
      </div>

      {/* Shot distribution + intensity timeline */}
      <div style={{
        marginTop: 16, display: 'grid', gap: 16,
        gridTemplateColumns: 'minmax(0, 1fr)',
      }} className="ai-charts-grid">
        <style>{`
          @media (min-width: 760px) {
            .ai-charts-grid { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
        <ShotDistribution />
        <IntensityTimeline />
      </div>
    </section>
  );
}

function InsightCard({ tone, tag, value, stat }) {
  const toneStyle = tone === 'positive'
    ? { dot: 'var(--accent)', tagBg: 'var(--accent-soft)', tagColor: 'var(--accent-strong)' }
    : { dot: '#d77a3a', tagBg: 'rgba(215,122,58,0.12)', tagColor: '#a85718' };
  return (
    <div style={{
      padding: 16, borderRadius: 14,
      background: 'var(--surface)',
      border: '1px solid var(--border)',
      display: 'flex', alignItems: 'flex-start', gap: 12,
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%',
        background: toneStyle.dot, flexShrink: 0, marginTop: 8,
      }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <span style={{
          display: 'inline-block',
          fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase',
          padding: '3px 8px', borderRadius: 999,
          background: toneStyle.tagBg, color: toneStyle.tagColor,
          marginBottom: 8,
        }}>{tag}</span>
        <div style={{
          fontSize: 16, fontWeight: 600, color: 'var(--ink)',
          letterSpacing: '-0.01em', lineHeight: 1.2,
        }}>{value}</div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>{stat}</div>
      </div>
    </div>
  );
}

function KpiTile({ label, value, unit }) {
  return (
    <div style={{
      padding: 14, borderRadius: 14,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      <div style={{
        fontSize: 10, fontWeight: 700, color: 'var(--muted)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
        <span style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 30, fontStyle: 'italic', fontWeight: 400,
          color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.02em',
        }}>{value}</span>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>{unit}</span>
      </div>
    </div>
  );
}

// Bar chart — shot distribution
function ShotDistribution() {
  const data = [
    { label: 'Dritto', count: 89, color: 'var(--accent)' },
    { label: 'Rovescio', count: 57, color: '#e8c447' },
    { label: 'Servizio', count: 38, color: 'var(--ink)' },
    { label: 'Volée', count: 14, color: '#a89f8a' },
    { label: 'Slice', count: 19, color: '#6fa48a' },
  ];
  const max = Math.max(...data.map((d) => d.count));
  return (
    <div style={{
      padding: 18, borderRadius: 16,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 700, color: 'var(--muted)',
        letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14,
      }}>Distribuzione colpi</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {data.map((d) => (
          <div key={d.label}>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              fontSize: 12, marginBottom: 4,
            }}>
              <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{d.label}</span>
              <span style={{
                color: 'var(--muted)',
                fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
                fontSize: 11,
              }}>{d.count}</span>
            </div>
            <div style={{ height: 6, background: 'var(--surface-deep)', borderRadius: 999 }}>
              <div style={{
                width: `${(d.count / max) * 100}%`,
                height: '100%', background: d.color, borderRadius: 999,
              }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Sparkline — intensity over time
function IntensityTimeline() {
  const points = [10, 14, 22, 18, 28, 35, 31, 42, 38, 50, 47, 55, 52, 60, 48, 56, 44, 38];
  const max = Math.max(...points);
  const w = 280, h = 80, pad = 4;
  const stepX = (w - pad * 2) / (points.length - 1);
  const path = points.map((p, i) => {
    const x = pad + i * stepX;
    const y = h - pad - (p / max) * (h - pad * 2);
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
  const areaPath = `${path} L ${w - pad} ${h - pad} L ${pad} ${h - pad} Z`;
  return (
    <div style={{
      padding: 18, borderRadius: 16,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 8,
      }}>
        <div style={{
          fontSize: 11, fontWeight: 700, color: 'var(--muted)',
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Intensità di gioco</div>
        <MonoLabel dim>ultimi 60s</MonoLabel>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        <defs>
          <linearGradient id="intensityGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={areaPath} fill="url(#intensityGrad)" />
        <path d={path} stroke="var(--accent)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        {points.map((p, i) => {
          const x = pad + i * stepX;
          const y = h - pad - (p / max) * (h - pad * 2);
          return <circle key={i} cx={x} cy={y} r="1.4" fill="var(--accent-strong)" />;
        })}
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Picco</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>60 bpm</div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Media</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>38 bpm</div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Hit-rate</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>3.4/min</div>
        </div>
      </div>
    </div>
  );
}

// ── DASHBOARD: Improvement phases roadmap ───────────────────────────────────

const IMPROVEMENT_PHASES = [
  {
    n: 1,
    status: 'progress',
    title: 'Diagnosi iniziale',
    body: 'Caricamento dei primi video e mappatura automatica dei colpi e degli schemi.',
    eta: 'In corso',
    drills: 3,
    progress: 0.66,
  },
  {
    n: 2,
    status: 'next',
    title: 'Fondamentali del rovescio',
    body: 'Correzione dell\'apertura tardiva di spalle. Esercizi mirati con verifica AI.',
    eta: '~ 2 settimane',
    drills: 5,
    progress: 0,
  },
  {
    n: 3,
    status: 'locked',
    title: 'Costruzione del punto',
    body: 'Schemi tattici da fondo. Sequenze dritto-rovescio per costringere l\'avversario all\'errore.',
    eta: '~ 4 settimane',
    drills: 6,
    progress: 0,
  },
  {
    n: 4,
    status: 'locked',
    title: 'Variazioni e gioco a rete',
    body: 'Discesa a rete, slice difensivo e smash. Ampliamento del repertorio.',
    eta: '~ 6 settimane',
    drills: 7,
    progress: 0,
  },
];

function ImprovementPhases() {
  return (
    <section>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        gap: 12, flexWrap: 'wrap', marginBottom: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <h2 style={{
            margin: 0,
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 24, fontWeight: 400, letterSpacing: '-0.01em',
            color: 'var(--ink)',
          }}>Le tue fasi di miglioramento</h2>
          <SoonBadge />
        </div>
        <MonoLabel dim>generato dal profilo AI</MonoLabel>
      </div>

      <div style={{
        position: 'relative',
        display: 'grid',
        gap: 14,
        gridTemplateColumns: 'minmax(0, 1fr)',
      }} className="phase-grid">
        <style>{`
          @media (min-width: 880px) {
            .phase-grid { grid-template-columns: repeat(4, 1fr) !important; }
          }
        `}</style>
        {IMPROVEMENT_PHASES.map((p, i) => (
          <PhaseCard key={p.n} phase={p} last={i === IMPROVEMENT_PHASES.length - 1} />
        ))}
      </div>
    </section>
  );
}

function PhaseCard({ phase }) {
  const isProgress = phase.status === 'progress';
  const isNext = phase.status === 'next';
  const isLocked = phase.status === 'locked';

  const border = isProgress
    ? '1.5px solid var(--accent)'
    : isNext
    ? '1.5px solid var(--ink)'
    : '1px solid var(--border)';

  const bg = isProgress ? 'var(--accent-soft)' : 'var(--surface)';

  return (
    <div style={{
      padding: 18, borderRadius: 16,
      border, background: bg,
      opacity: isLocked ? 0.75 : 1,
      position: 'relative',
      display: 'flex', flexDirection: 'column',
      minHeight: 220,
    }}>
      {/* Step number */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 14,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12,
          background: isProgress ? 'var(--accent)' : isNext ? 'var(--ink)' : 'var(--surface-deep)',
          color: isProgress ? 'var(--accent-fg)' : isNext ? 'var(--bg)' : 'var(--muted)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontStyle: 'italic', fontSize: 20,
        }}>{phase.n}</div>
        <PhaseStatusPill status={phase.status} />
      </div>

      <h3 style={{
        margin: 0, fontSize: 16, fontWeight: 600,
        color: 'var(--ink)', letterSpacing: '-0.005em', lineHeight: 1.25,
      }}>{phase.title}</h3>
      <p style={{
        margin: '8px 0 0', fontSize: 13, color: 'var(--muted)', lineHeight: 1.5,
        letterSpacing: '-0.005em', flex: 1,
      }}>{phase.body}</p>

      {/* Progress bar */}
      {isProgress && (
        <div style={{
          marginTop: 14, height: 6, background: 'rgba(0,0,0,0.08)',
          borderRadius: 999, overflow: 'hidden',
        }}>
          <div style={{
            width: `${phase.progress * 100}%`, height: '100%',
            background: 'var(--accent)', borderRadius: 999,
          }} />
        </div>
      )}

      <div style={{
        marginTop: 14, paddingTop: 12,
        borderTop: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 11, color: 'var(--muted)',
      }}>
        <span style={{ fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          {phase.drills} esercizi
        </span>
        <span style={{ fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace' }}>
          {phase.eta}
        </span>
      </div>
    </div>
  );
}

function PhaseStatusPill({ status }) {
  const map = {
    progress: { label: 'In corso', bg: 'var(--accent)', fg: 'var(--accent-fg)' },
    next:     { label: 'Prossima', bg: 'var(--ink)', fg: 'var(--bg)' },
    locked:   { label: 'Bloccata', bg: 'transparent', fg: 'var(--muted)', border: '1px solid var(--border)' },
  };
  const s = map[status];
  return (
    <span style={{
      fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
      padding: '3px 8px', borderRadius: 999,
      background: s.bg, color: s.fg, border: s.border || 'none',
    }}>{s.label}</span>
  );
}

// ── LANDING: AI showcase section ────────────────────────────────────────────

function AILandingSection() {
  return (
    <section id="ai-analysis" style={{
      padding: 'clamp(48px, 7vw, 100px) clamp(20px, 5vw, 56px)',
      background: 'var(--ink)',
      color: 'var(--bg)',
      borderTop: '1px solid var(--border)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* faint court lines bg */}
      <svg viewBox="0 0 1000 600" preserveAspectRatio="none"
           style={{
             position: 'absolute', inset: 0, width: '100%', height: '100%',
             opacity: 0.06, pointerEvents: 'none',
           }}>
        <g stroke="var(--bg)" strokeWidth="1" fill="none">
          <rect x="100" y="80" width="800" height="440" />
          <line x1="100" y1="300" x2="900" y2="300" />
          <line x1="500" y1="80" x2="500" y2="520" />
        </g>
      </svg>

      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
        }}>
          <SoonBadge label="In arrivo" />
          <MonoLabel><span style={{ color: 'rgba(255,255,255,0.55)' }}>tecnologia · ai</span></MonoLabel>
        </div>

        <h2 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 'clamp(34px, 5vw, 60px)',
          fontWeight: 400, margin: 0,
          letterSpacing: '-0.025em', lineHeight: 1.05,
          maxWidth: 820,
        }}>
          E presto, <em style={{ color: 'var(--accent)' }}>l'AI guarderà</em> i tuoi video
          per costruirti un piano di miglioramento.
        </h2>
        <p style={{
          fontSize: 'clamp(15px, 1.6vw, 17px)', lineHeight: 1.55,
          color: 'rgba(255,255,255,0.7)', maxWidth: 600,
          marginTop: 18, letterSpacing: '-0.005em',
        }}>
          Carichi un video dal telefono. Il modello riconosce dritto, rovescio
          e servizio, analizza la postura e la traiettoria della palla.
          Ne esce un profilo da tennista — e una roadmap chiara su cosa allenare.
        </p>

        <div style={{
          marginTop: 40,
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr)',
          gap: 24, alignItems: 'center',
        }} className="ai-landing-grid">
          <style>{`
            @media (min-width: 880px) {
              .ai-landing-grid { grid-template-columns: 1.1fr 0.9fr !important; }
            }
          `}</style>
          <div style={{ position: 'relative' }}>
            <AIVideoPreview caption="anteprima · funzionalità in sviluppo" />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <AILandingFeature
              n="01"
              title="Riconoscimento colpi"
              body="Dritto, rovescio, servizio, slice — etichettati frame per frame."
            />
            <AILandingFeature
              n="02"
              title="Pose 3D e biomeccanica"
              body="Angoli articolari, qualità del movimento, segnali di sovraccarico."
            />
            <AILandingFeature
              n="03"
              title="Profilo + fasi di miglioramento"
              body="Una roadmap personale con esercizi mirati, validati ad ogni video."
            />
          </div>
        </div>

        {/* Pipeline strip */}
        <div style={{
          marginTop: 56,
          padding: '20px 24px',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 16,
          display: 'flex', alignItems: 'center', gap: 4,
          overflowX: 'auto',
        }}>
          {[
            { k: '01', label: 'Upload' },
            { k: '02', label: 'Tracking giocatore' },
            { k: '03', label: 'Pose 3D' },
            { k: '04', label: 'Classifica colpi' },
            { k: '05', label: 'Metriche' },
            { k: '06', label: 'Profilo + fasi' },
          ].map((s, i, arr) => (
            <React.Fragment key={s.k}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                <span style={{
                  fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
                  fontSize: 10, color: 'var(--accent)',
                  letterSpacing: '0.06em',
                }}>{s.k}</span>
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.9)', fontWeight: 500 }}>{s.label}</span>
              </div>
              {i < arr.length - 1 && (
                <span style={{
                  width: 24, height: 1,
                  background: 'rgba(255,255,255,0.18)',
                  flexShrink: 0,
                }} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function AILandingFeature({ n, title, body }) {
  return (
    <div style={{
      padding: '14px 16px',
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: 14,
      display: 'flex', gap: 14, alignItems: 'flex-start',
    }}>
      <div style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontStyle: 'italic', fontSize: 24,
        color: 'var(--accent)', lineHeight: 1, flexShrink: 0, paddingTop: 2,
      }}>{n}</div>
      <div>
        <div style={{
          fontSize: 15, fontWeight: 600, color: 'var(--bg)',
          letterSpacing: '-0.005em', marginBottom: 4,
        }}>{title}</div>
        <div style={{
          fontSize: 13, color: 'rgba(255,255,255,0.65)', lineHeight: 1.5,
          letterSpacing: '-0.005em',
        }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SoonBadge,
  AIVideoPreview,
  AIUploadCTA,
  AIPlayerProfile,
  ImprovementPhases,
  AILandingSection,
});