// Sections for F1 StratLab landing page

// ==============================================================
// MODELS SHOWCASE — the 7 ML models with metrics
// ==============================================================
const MODELS = [
  { name: 'Lap Time Prediction',    algo: 'XGBoost',                                 metric: 'MAE',          value: '0.392', unit: 's', detail: '2025 holdout · delta lap time',         color: '#a29bfe' },
  { name: 'Tire Degradation',       algo: 'Causal TCN · MC Dropout',                 metric: 'Mean σ',       value: '±0.15', unit: 's', detail: 'per-compound fine-tune · 50-pass MC Dropout · Platt calibrated', color: '#ff2d3a' },
  { name: 'Overtake Probability',   algo: 'LightGBM · 28,494 pairs',                 metric: 'AUC-ROC',      value: '0.876', unit: '',  detail: 'AUC-PR 0.549 · 2023–25 labeled',        color: '#43ff64' },
  { name: 'Safety Car Probability', algo: 'LightGBM · 3-lap window',                 metric: 'Lift',         value: '1.67',  unit: '×', detail: 'soft contextual prior · AUC-PR 0.072', color: '#ffbd33' },
  { name: 'Pit Stop Duration',      algo: 'HistGBT quantile regression',             metric: 'MAE',          value: '0.487', unit: 's', detail: 'P05 / P50 / P95 quantiles',             color: '#3385ff' },
  { name: 'Undercut Success',       algo: 'LightGBM binary',                         metric: 'AUC-ROC',      value: '0.771', unit: '',  detail: '1.95× lift · net position gain',        color: '#2dd47a' },
  { name: 'Radio NLP Pipeline',     algo: 'Whisper + RoBERTa + SetFit + BERT-large', metric: 'Pipeline',     value: '4',     unit: 'stages', detail: 'Whisper-turbo · sub-100 ms P95 · sentiment · intent · NER', color: '#6c5ce7' },
];

function ModelsSection() {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);
  const m = MODELS[active];

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setActive(cur => (cur + 1) % MODELS.length);
    }, 5500);
    return () => clearInterval(id);
  }, [paused]);

  return (
    <section className="section" id="models">
      <div className="container-wide">
        <div className="section-head left section-head-row" style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', maxWidth: '100%', marginBottom: 48, gap: 32 }}>
          <div>
            <span className="eyebrow"><span className="eyebrow-bar"/>Model portfolio</span>
            <h2 style={{ marginTop: 20 }}>Seven models.<br/>One decision.</h2>
          </div>
          <p style={{ maxWidth: 420, margin: 0 }}>
            Each sub-agent wraps one or more models as <span className="mono" style={{color:'var(--purple-300)'}}>@tool</span>-decorated LangChain tools. Hover a row — read the spec.
          </p>
        </div>

        <div className="models-layout"
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}>
          {/* LEFT — ranked list */}
          <div className="models-list">
            {MODELS.map((mm, i) => (
              <button key={mm.name}
                      className={`model-row ${i === active ? 'active' : ''}`}
                      onMouseEnter={() => setActive(i)}
                      onFocus={() => setActive(i)}>
                <span className="model-row-idx mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="model-row-name">{mm.name}</span>
                <span className="model-row-algo">{mm.algo}</span>
                <span className="model-row-val mono" style={{ color: mm.color }}>
                  {mm.value}<span style={{ opacity: 0.5, fontSize: '0.75em' }}>{mm.unit}</span>
                </span>
                <span className="model-row-bar">
                  <span className="model-row-bar-fill" style={{ background: mm.color }}/>
                </span>
              </button>
            ))}
          </div>

          {/* RIGHT — detail */}
          <aside className="models-detail" key={active}>
            <div className="models-detail-corner" style={{ background: m.color }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span className="mono" style={{ fontSize: 11, color: m.color, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                {String(active + 1).padStart(2, '0')} · Model
              </span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)' }}>{active + 1}/{MODELS.length}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em', margin: '14px 0 6px', lineHeight: 1.1 }}>{m.name}</h3>
            <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>{m.algo}</div>

            <div style={{
              margin: '28px 0 22px',
              padding: '20px 0',
              borderTop: '1px solid var(--hairline)',
              borderBottom: '1px solid var(--hairline)'
            }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>{m.metric}</div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(40px, 9vw, 68px)',
                fontWeight: 600,
                letterSpacing: '-0.04em',
                lineHeight: 1,
                color: '#fff',
                display: 'flex',
                alignItems: 'baseline',
                gap: 4
              }}>
                {m.value}
                <span style={{ fontSize: 28, color: m.color, fontWeight: 500 }}>{m.unit}</span>
              </div>
            </div>

            <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>{m.detail}</p>
          </aside>
        </div>
      </div>
      <style>{`
        #models .models-layout {
          display: grid;
          grid-template-columns: 1fr 380px;
          gap: 48px;
          align-items: start;
        }
        #models .models-list {
          border-top: 1px solid var(--hairline);
        }
        #models .model-row {
          all: unset;
          display: grid;
          grid-template-columns: 32px minmax(180px, 1fr) minmax(220px, 1fr) 100px 80px;
          align-items: center;
          gap: 20px;
          padding: 18px 16px 18px 0;
          cursor: pointer;
          border-bottom: 1px solid var(--hairline);
          position: relative;
          transition: padding 0.3s cubic-bezier(0.2,0,0,1), background 0.3s;
        }
        #models .model-row::before {
          content: '';
          position: absolute;
          left: -24px; top: 0; bottom: 0;
          width: 3px;
          background: var(--purple-400);
          transform: scaleY(0);
          transition: transform 0.3s cubic-bezier(0.2,0,0,1);
          transform-origin: center;
        }
        #models .model-row.active::before { transform: scaleY(1); }
        #models .model-row.active {
          padding-left: 16px;
          background: linear-gradient(90deg, rgba(108,92,231,0.08) 0%, transparent 60%);
        }
        #models .model-row-idx {
          font-size: 11px;
          color: var(--fg-4);
          letterSpacing: 0.1em;
        }
        #models .model-row.active .model-row-idx { color: var(--purple-300); }
        #models .model-row-name {
          font-family: var(--font-display);
          font-size: 18px;
          font-weight: 500;
          letter-spacing: -0.01em;
          color: var(--fg-1);
          transition: transform 0.3s;
        }
        #models .model-row.active .model-row-name { transform: translateX(4px); }
        #models .model-row-algo {
          font-size: 12px;
          color: var(--fg-3);
          font-family: var(--font-mono);
        }
        #models .model-row-val {
          font-size: 18px;
          text-align: right;
          font-weight: 500;
          transition: all 0.3s;
        }
        #models .model-row.active .model-row-val { font-size: 22px; }
        #models .model-row-bar {
          width: 80px;
          height: 3px;
          background: var(--hairline);
          border-radius: 2px;
          overflow: hidden;
          position: relative;
        }
        #models .model-row-bar-fill {
          position: absolute; inset: 0;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.5s cubic-bezier(0.2,0,0,1);
        }
        #models .model-row.active .model-row-bar-fill { transform: scaleX(1); }

        #models .models-detail {
          background: var(--bg-2);
          border: 1px solid var(--divider);
          border-radius: 16px;
          padding: 32px;
          position: sticky;
          top: 100px;
          overflow: hidden;
          animation: detailIn 0.45s cubic-bezier(0.2,0,0,1);
        }
        #models .models-detail-corner {
          position: absolute;
          top: 0; left: 0;
          width: 80px; height: 4px;
        }
        @keyframes detailIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: none; }
        }
        @media (max-width: 1100px) {
          #models .models-layout { grid-template-columns: 1fr; }
          #models .models-detail { position: static; order: -1; }
          #models .model-row { grid-template-columns: 28px 1fr 80px; }
          #models .model-row-algo, #models .model-row-bar { display: none; }
        }
        @media (max-width: 780px) {
          #models .section-head-row { grid-template-columns: 1fr !important; gap: 16px; }
        }
        @media (max-width: 640px) {
          #models .model-row { grid-template-columns: 18px 1fr 60px; gap: 12px; }
        }
      `}</style>
    </section>
  );
}

// ==============================================================
// HOW IT WORKS — pipeline diagram
// ==============================================================
function HowItWorksSection() {
  const stages = [
    {
      code: 'INGEST',
      title: 'Live race state',
      items: ['FastF1 · OpenF1', 'Lap telemetry', 'Team radios', 'FIA race control']
    },
    {
      code: 'INFER',
      title: 'Six sub-agents',
      items: ['Pace', 'Tire', 'Race Situation', 'Pit Strategy', 'Radio', 'RAG']
    },
    {
      code: 'ORCHESTRATE',
      title: 'Strategy Orchestrator',
      items: ['MoE dynamic routing', 'Monte Carlo simulation', 'Pydantic v2 output', 'LLM synthesis']
    },
    {
      code: 'RECOMMEND',
      title: 'Race-ready actions',
      items: ['perform_undercut', 'extend_stint', 'prepare_pit', 'defensive_pit', 'push_strategy']
    }
  ];

  return (
    <section className="section" id="how" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="container-wide">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow-bar"/>Architecture<span className="eyebrow-bar"/></span>
          <h2>From raw lap to <span style={{
            background: 'linear-gradient(120deg, #a29bfe 0%, #6c5ce7 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent'
          }}>race-ready call</span>.</h2>
          <p>A LangGraph ReAct multi-agent system replaces the legacy Experta rule engine. Six specialised sub-agents coordinate under a Strategy Orchestrator.</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          position: 'relative'
        }} className="how-grid">
          {stages.map((s, i) => (
            <React.Fragment key={s.code}>
              <div className="stage" style={{
                padding: '28px 24px',
                background: 'var(--bg-2)',
                border: '1px solid var(--divider)',
                borderRight: i < stages.length - 1 ? 'none' : '1px solid var(--divider)',
                borderRadius: i === 0 ? '14px 0 0 14px' : i === stages.length - 1 ? '0 14px 14px 0' : '0',
                position: 'relative'
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--purple-300)', letterSpacing: '0.14em', marginBottom: 6 }}>{String(i+1).padStart(2,'0')} · {s.code}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 16 }}>{s.title}</div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {s.items.map((it, j) => (
                    <li key={j} style={{ fontSize: 13, color: 'var(--fg-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--purple-400)', flexShrink: 0 }}/>
                      <span className={s.code === 'RECOMMEND' || s.code === 'INFER' ? 'mono' : ''} style={{
                        fontSize: s.code === 'RECOMMEND' || s.code === 'INFER' ? 12 : 13
                      }}>{it}</span>
                    </li>
                  ))}
                </ul>
                {i < stages.length - 1 && (
                  <div style={{
                    position: 'absolute',
                    right: -10,
                    top: '50%',
                    transform: 'translateY(-50%)',
                    width: 20, height: 20,
                    background: 'var(--bg-1)',
                    border: '1px solid var(--divider)',
                    borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--purple-300)',
                    fontSize: 12,
                    zIndex: 2
                  }}>→</div>
                )}
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* bottom strip: orchestrator detail */}
        <div style={{
          marginTop: 24,
          padding: '20px 24px',
          background: 'linear-gradient(135deg, rgba(108,92,231,0.12) 0%, rgba(108,92,231,0.02) 100%)',
          border: '1px solid rgba(108,92,231,0.3)',
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap'
        }}>
          <span className="mono" style={{ fontSize: 10, color: '#a29bfe', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Core</span>
          <span style={{ fontSize: 14, color: 'var(--fg-1)', flex: 1, minWidth: 260 }}>
            The <strong>Strategy Orchestrator</strong> performs MoE-style dynamic routing, Monte Carlo simulation over probabilistic sub-agent outputs, and LLM synthesis with Pydantic v2 structured output.
          </span>
          <a className="btn btn-ghost btn-sm" href="https://github.com/VforVitorio/F1_Strat_Manager" target="_blank">Read the thesis paper →</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          #how .how-grid { grid-template-columns: 1fr !important; }
          #how .stage { border-radius: 0 !important; border-right: 1px solid var(--divider) !important; }
          #how .stage:first-child { border-radius: 14px 14px 0 0 !important; }
          #how .stage:last-child { border-radius: 0 0 14px 14px !important; }
        }
      `}</style>
    </section>
  );
}

// ==============================================================
// RAG DEMO — FIA regulations Q&A mock
// ==============================================================
function RagSection() {
  const queries = [
    {
      q: 'Can a driver overtake under Virtual Safety Car conditions?',
      articles: ['SR 55.2', 'SR 55.3'],
      a: 'No. Under VSC, drivers must respect a delta time and overtaking is prohibited except where specifically permitted (e.g. if a car is forced to slow in the pit lane). Lap times are forfeited if the delta is violated.'
    },
    {
      q: 'What is the minimum weight of a Formula 1 car in 2024?',
      articles: ['TR 4.1', 'TR 4.2'],
      a: '798 kg including the driver and all components, excluding fuel. The weight at any time during the Event must not be less than this, with provisions for weighing during parc fermé.'
    },
    {
      q: 'When can a team serve a 5-second time penalty at a pit stop?',
      articles: ['SR 54.3(c)', 'SR 54.4'],
      a: 'During the next pit stop. The team must not touch the car for 5 seconds after stop, then perform the pit stop. No work may be carried out during the penalty period.'
    }
  ];

  const [idx, setIdx] = useState(0);
  const [phase, setPhase] = useState('idle'); // idle | typing | thinking | streaming | done
  const [typed, setTyped] = useState(0);
  const [streamed, setStreamed] = useState(0);
  const [articlesShown, setArticlesShown] = useState(0);
  const timersRef = useRef([]);
  const sectionRef = useRef(null);
  const startedRef = useRef(false);

  useEffect(() => {
    const clearAll = () => { timersRef.current.forEach(t => clearTimeout(t)); timersRef.current = []; };
    const schedule = (fn, delay) => { const t = setTimeout(fn, delay); timersRef.current.push(t); };

    const runCycle = (qi) => {
      const q = queries[qi];
      setIdx(qi);
      setPhase('typing');
      setTyped(0); setStreamed(0); setArticlesShown(0);

      const TYPE_MS = 28;
      const STREAM_MS = 14;
      const THINK_MS = 900;
      const HOLD_MS = 2800;
      const CHIP_MS = 220;

      // Phase 1: type the query
      for (let i = 1; i <= q.q.length; i++) {
        schedule(() => setTyped(i), i * TYPE_MS);
      }
      const afterType = q.q.length * TYPE_MS;

      // Phase 2: thinking (retrieval)
      schedule(() => setPhase('thinking'), afterType + 120);

      // Phase 3: stream the answer
      const streamStart = afterType + 120 + THINK_MS;
      schedule(() => setPhase('streaming'), streamStart);
      for (let i = 1; i <= q.a.length; i++) {
        schedule(() => setStreamed(i), streamStart + i * STREAM_MS);
      }
      const afterStream = streamStart + q.a.length * STREAM_MS;

      // Phase 4: pop-in article chips
      q.articles.forEach((_, ai) => {
        schedule(() => setArticlesShown(ai + 1), afterStream + 200 + ai * CHIP_MS);
      });
      const afterChips = afterStream + 200 + q.articles.length * CHIP_MS;

      schedule(() => setPhase('done'), afterChips);

      // Advance to next query, or after finishing all 3 wait a long while before restarting
      if (qi < queries.length - 1) {
        schedule(() => runCycle(qi + 1), afterChips + HOLD_MS);
      } else {
        schedule(() => runCycle(0), afterChips + 30000);
      }
    };

    // Start on first intersection with the viewport, then never again
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          runCycle(0);
        }
      });
    }, { threshold: 0.25 });

    if (sectionRef.current) io.observe(sectionRef.current);
    return () => { io.disconnect(); clearAll(); };
  }, []);

  const current = queries[idx];
  const qShown = current.q.slice(0, typed);
  const aShown = current.a.slice(0, streamed);

  // Status pill content per phase
  const statusPill = phase === 'typing' || phase === 'thinking'
    ? { text: phase === 'typing' ? 'querying…' : 'retrieving…', color: '#ffbd33', bg: 'rgba(255,189,51,0.08)', border: 'rgba(255,189,51,0.3)' }
    : phase === 'streaming'
      ? { text: 'answering…', color: '#a29bfe', bg: 'rgba(162,155,254,0.1)', border: 'rgba(162,155,254,0.32)' }
      : { text: `answered · ${current.articles.length} sources`, color: '#43ff64', bg: 'rgba(67,255,100,0.08)', border: 'rgba(67,255,100,0.22)' };

  const showCursor = phase === 'typing' || phase === 'streaming';
  const showThinking = phase === 'thinking';
  const isTyping = phase === 'typing';

  return (
    <section className="section" id="rag" ref={sectionRef}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow-bar"/>RAG agent<span className="eyebrow-bar"/></span>
          <h2>Ask the regulations. Get cited answers.</h2>
          <p>The RAG Agent indexes FIA Sporting &amp; Technical Regulations 2023–2025 in a local Qdrant collection with BGE-M3 embeddings.</p>
        </div>

        <div className={`rag-card ${phase === 'streaming' ? 'rag-card-active' : ''}`} style={{
          maxWidth: 860, margin: '0 auto',
          background: 'var(--bg-2)',
          border: '1px solid var(--divider)',
          borderRadius: 16,
          overflow: 'hidden',
          boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
          transition: 'border-color 0.3s, box-shadow 0.3s'
        }}>
          {/* query bar */}
          <div style={{
            padding: '18px 22px',
            borderBottom: '1px solid var(--hairline)',
            display: 'flex', alignItems: 'center', gap: 14,
            background: 'var(--bg-3)'
          }}>
            <div className={isTyping || showThinking ? 'rag-icon pulsing' : 'rag-icon'} style={{ width: 26, height: 26, borderRadius: 7, background: 'linear-gradient(135deg, #6c5ce7, #a29bfe)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
              </svg>
            </div>
            <div style={{ flex: 1, fontSize: 15, color: 'var(--fg-1)', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em', minHeight: 21 }}>
              {qShown}
              {isTyping && <span className="rag-cursor"/>}
            </div>
            <div className="pill pill-mono pill-neutral">↵ query</div>
          </div>

          {/* answer */}
          <div style={{ padding: '22px 24px', minHeight: 180 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap' }}>
              <span className="pill pill-mono" style={{
                background: statusPill.bg,
                color: statusPill.color,
                borderColor: statusPill.border,
                transition: 'background 0.25s, color 0.25s, border-color 0.25s'
              }}>
                <span className="pill-dot" style={{ background: statusPill.color, boxShadow: `0 0 8px ${statusPill.color}` }}/>
                {statusPill.text}
              </span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>BGE-M3 · top-k=5 · Qdrant cosine 0.82</span>
            </div>

            {showThinking ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0', color: 'var(--fg-3)', fontSize: 14 }}>
                <span>Retrieving context</span>
                <span className="rag-dots"><span>•</span><span>•</span><span>•</span></span>
              </div>
            ) : (
              <p style={{ fontSize: 15, color: 'var(--fg-1)', lineHeight: 1.65, marginBottom: 18, fontFamily: 'var(--font-body)', minHeight: 24 }}>
                {aShown}
                {phase === 'streaming' && <span className="rag-cursor rag-cursor-stream"/>}
              </p>
            )}

            {!showThinking && articlesShown > 0 && (
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {current.articles.slice(0, articlesShown).map(art => (
                  <span key={art} className="rag-chip" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '6px 10px',
                    background: 'rgba(108,92,231,0.1)',
                    border: '1px solid rgba(108,92,231,0.28)',
                    borderRadius: 8,
                    fontFamily: 'var(--font-mono)',
                    fontSize: 12,
                    color: 'var(--purple-300)'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                      <polyline points="14 2 14 8 20 8"/>
                    </svg>
                    FIA {art}
                  </span>
                ))}
              </div>
            )}
          </div>

          {/* footer */}
          <div style={{
            padding: '14px 22px',
            borderTop: '1px solid var(--hairline)',
            background: 'var(--bg-1)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)'
          }}>
            <span>src/rag/retriever.py :: query_rag_tool()</span>
            <span>{idx + 1} / {queries.length}</span>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        #rag .rag-card-active { border-color: rgba(162,155,254,0.45); box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(162,155,254,0.25); }
        #rag .rag-cursor {
          display: inline-block;
          width: 2px;
          height: 15px;
          margin-left: 3px;
          vertical-align: -2px;
          background: var(--purple-300);
          animation: ragBlink 0.9s steps(2, end) infinite;
        }
        #rag .rag-cursor-stream { height: 14px; background: #a29bfe; }
        @keyframes ragBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        #rag .rag-dots span {
          display: inline-block;
          animation: ragDot 1.2s infinite;
          font-size: 18px;
          color: var(--purple-300);
          margin: 0 1px;
        }
        #rag .rag-dots span:nth-child(2) { animation-delay: 0.2s; }
        #rag .rag-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes ragDot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
        #rag .rag-chip {
          animation: chipIn 0.45s cubic-bezier(0.2, 0, 0, 1) both;
        }
        @keyframes chipIn {
          from { opacity: 0; transform: translateY(8px) scale(0.92); box-shadow: 0 0 0 4px rgba(162,155,254,0); }
          60% { box-shadow: 0 0 0 6px rgba(162,155,254,0.18); }
          to { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(162,155,254,0); }
        }
        #rag .rag-icon.pulsing { animation: ragIconPulse 1.4s ease-in-out infinite; }
        @keyframes ragIconPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.6); }
          50% { box-shadow: 0 0 0 6px rgba(108,92,231,0); }
        }
      `}</style>
    </section>
  );
}

// ==============================================================
// CLI / INSTALL SECTION
// ==============================================================
const INSTALL_COPY = {
  uv: `curl -LsSf https://astral.sh/uv/install.sh | sh
git clone --recursive https://github.com/VforVitorio/F1_Strat_Manager.git
cd F1_Strat_Manager
uv sync
uv run f1-strat`,
  pip: `python -m venv .venv && source .venv/bin/activate
pip install torch torchvision --index-url https://download.pytorch.org/whl/cu128
pip install -e .
f1-strat`,
  wheel: `uv tool install https://github.com/VforVitorio/F1_Strat_Manager/releases/download/v0.1.1/f1_strat_manager-0.1.1-py3-none-any.whl
f1-strat
f1-sim Bahrain NOR McLaren --laps 1-10`,
};

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef(null);
  const onClick = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setCopied(false), 1500);
    } catch (e) { /* ignore */ }
  };
  return (
    <button type="button" className="code-copy-btn" onClick={onClick}
            aria-label={copied ? 'Copied' : 'Copy to clipboard'}
            title={copied ? 'Copied' : 'Copy'}>
      {copied ? (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a29bfe" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      ) : (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
        </svg>
      )}
    </button>
  );
}

function CliSection() {
  const [tab, setTab] = useState('uv');
  return (
    <section className="section" id="install" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="cli-grid">
          <div>
            <span className="eyebrow"><span className="eyebrow-bar"/>Install &amp; run</span>
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 44px)', lineHeight: 1.1, letterSpacing: '-0.03em', margin: '20px 0 18px' }}>
              One command. One venv. No PyTorch dance.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, marginBottom: 24 }}>
              <span className="mono" style={{ color: 'var(--purple-300)' }}>pyproject.toml</span> routes torch / torchvision to the right CUDA wheel per platform via <span className="mono" style={{ color: 'var(--purple-300)' }}>[tool.uv.sources]</span> — so there's no manual PyTorch step on Windows or Linux.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <CliFeature text="Three console scripts — f1-strat (launcher), f1-sim (headless), f1-arcade (2D replay)"/>
              <CliFeature text="Lazy first-run download (~7–8 GB) from the f1-strategy-dataset HF repo"/>
              <CliFeature text="OPENAI_API_KEY or LM Studio on :1234 — both work"/>
              <CliFeature text="Offline mode via F1_STRAT_OFFLINE=1"/>
            </div>
          </div>

          <div>
            <div style={{ display: 'flex', gap: 4, marginBottom: 12, padding: 4, background: 'var(--bg-3)', borderRadius: 10, border: '1px solid var(--divider)', width: 'fit-content' }}>
              {[
                { id: 'uv',    label: 'uv (recommended)' },
                { id: 'pip',   label: 'pip' },
                { id: 'wheel', label: 'release wheel' },
              ].map(t => (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  padding: '8px 14px',
                  fontSize: 12,
                  fontFamily: 'var(--font-mono)',
                  background: tab === t.id ? 'var(--purple-600)' : 'transparent',
                  color: tab === t.id ? '#fff' : 'var(--fg-2)',
                  border: 'none',
                  borderRadius: 6,
                  cursor: 'pointer',
                  transition: 'all 0.15s'
                }}>{t.label}</button>
              ))}
            </div>
            <div className="code-wrap">
              <div className="code-chrome">
                <span className="dot"/><span className="dot"/><span className="dot"/>
                <span className="label">~/F1_Strat_Manager</span>
                <CopyButton text={INSTALL_COPY[tab]}/>
              </div>
              <pre className="codeblock">{tab === 'uv' && (<>
<span className="c-comment"># install uv once per machine</span>{'\n'}
<span className="c-cmd">$</span> curl -LsSf https://astral.sh/uv/install.sh | sh{'\n'}{'\n'}
<span className="c-comment"># clone + install in one shot</span>{'\n'}
<span className="c-cmd">$</span> git clone --recursive https://github.com/VforVitorio/F1_Strat_Manager.git{'\n'}
<span className="c-cmd">$</span> cd F1_Strat_Manager{'\n'}
<span className="c-cmd">$</span> uv sync{'\n'}{'\n'}
<span className="c-comment"># run the interactive launcher</span>{'\n'}
<span className="c-cmd">$</span> uv run f1-strat{'\n'}
</>)}{tab === 'pip' && (<>
<span className="c-comment"># legacy path — PyTorch must be installed manually</span>{'\n'}
<span className="c-cmd">$</span> python -m venv .venv && source .venv/bin/activate{'\n'}{'\n'}
<span className="c-cmd">$</span> pip install torch torchvision \{'\n'}
{'    '}--index-url https://download.pytorch.org/whl/<span className="c-flag">cu128</span>{'\n'}{'\n'}
<span className="c-cmd">$</span> pip install -e .{'\n'}
<span className="c-cmd">$</span> f1-strat{'\n'}
</>)}{tab === 'wheel' && (<>
<span className="c-comment"># install globally from a pre-built release wheel</span>{'\n'}
<span className="c-cmd">$</span> uv tool install \{'\n'}
{'    '}https://github.com/VforVitorio/F1_Strat_Manager/releases/\{'\n'}
{'    '}download/v0.1.1/f1_strat_manager-0.1.1-py3-none-any.whl{'\n'}{'\n'}
<span className="c-comment"># both commands are now on your PATH</span>{'\n'}
<span className="c-cmd">$</span> f1-strat          <span className="c-comment"># interactive menu</span>{'\n'}
<span className="c-cmd">$</span> f1-sim Bahrain NOR McLaren --laps 1-10{'\n'}
</>)}</pre>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { #install .cli-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        @media (max-width: 640px) {
          #install .code-wrap pre { font-size: 11.5px; line-height: 1.55; }
        }
        #install .code-chrome { position: relative; }
        #install .code-copy-btn {
          all: unset;
          margin-left: auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 28px; height: 28px;
          border-radius: 6px;
          color: var(--fg-3);
          cursor: pointer;
          transition: background 0.15s, color 0.15s, transform 0.15s;
        }
        #install .code-copy-btn:hover {
          background: rgba(255,255,255,0.06);
          color: var(--fg-1);
        }
        #install .code-copy-btn:active { transform: scale(0.94); }
        #install .code-copy-btn:focus-visible {
          outline: 1px solid var(--purple-400);
          outline-offset: 1px;
        }
      `}</style>
    </section>
  );
}

function CliFeature({ text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
      <span style={{
        width: 18, height: 18, borderRadius: '50%',
        background: 'rgba(108,92,231,0.15)',
        border: '1px solid rgba(108,92,231,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, marginTop: 3
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#a29bfe" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </span>
      <span style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>{text}</span>
    </div>
  );
}

// ==============================================================
// STACK BADGES
// ==============================================================
function LogoFor({ name, fallback }) {
  const S = { width: 12, height: 12, display: 'block', flexShrink: 0 };

  // Local brand SVGs (under /assets/logos/), sourced from simple-icons in
  // their canonical brand color. Self-hosted so there's zero CDN cache
  // ambiguity between libraries.
  const localImg = (file) => (
    <img src={`assets/logos/${file}.svg`} width="12" height="12" alt="" style={S}/>
  );

  const mono = (letters, color) => (
    <svg viewBox="0 0 14 14" style={S} aria-hidden="true">
      <rect x="0.5" y="0.5" width="13" height="13" rx="2.5" fill="none" stroke={color} strokeWidth="1"/>
      <text x="7" y="10" textAnchor="middle" fontSize={letters.length > 1 ? 6 : 8} fontFamily="var(--font-mono)" fontWeight="700" fill={color}>{letters}</text>
    </svg>
  );

  const logoMap = {
    'PyTorch':      'pytorch',
    'Transformers': 'huggingface',
    'SetFit':       'huggingface',
    'ModernBERT':   'huggingface',
    'BERT-large':   'huggingface',
    'LangGraph':    'langchain',    // same parent project, no distinct mark
    'FastAPI':      'fastapi',
    'Streamlit':    'streamlit',
    'Qdrant':       'qdrant',
    'Pydantic v2':  'pydantic',
    'Docker':       'docker',
  };
  if (logoMap[name]) return localImg(logoMap[name]);

  // Libraries without a canonical logo — clean monograms
  const monoMap = {
    'XGBoost':  ['XG', '#4a90e2'],
    'LightGBM': ['LG', '#75a928'],
    'HistGBT':  ['HG', '#f89939'],
    'Whisper':  ['W',  '#a29bfe'],   // OpenAI not on simple-icons — use W mono
    'RoBERTa':  ['RO', '#1778f2'],
    'BGE-M3':   ['BGE', '#00bcd4'],
    'FastF1':   ['F1', '#e10600'],
    'OpenF1':   ['OF', '#ff3a3a'],
    'Arcade':   ['AR', '#22c55e'],
    'Rich':     ['RI', '#7e57c2'],
    'uv':       ['uv', '#8b5cf6'],
  };
  const m = monoMap[name];
  if (m) return mono(m[0], m[1]);

  return mono((name || '?').slice(0, 2).toUpperCase(), fallback);
}

function StackSection() {
  const groups = [
    { label: 'ML & Models',    dot: 'var(--purple-300)', items: ['PyTorch', 'XGBoost', 'LightGBM', 'HistGBT', 'Transformers'] },
    { label: 'NLP',            dot: 'var(--tire-inter)', items: ['Whisper', 'RoBERTa', 'SetFit', 'ModernBERT', 'BERT-large'] },
    { label: 'Agents & RAG',   dot: 'var(--tire-wet)',   items: ['LangGraph', 'Pydantic v2', 'Qdrant', 'BGE-M3'] },
    { label: 'Data & Runtime', dot: 'var(--tire-medium)',items: ['FastF1', 'OpenF1', 'FastAPI', 'Streamlit', 'Docker', 'Arcade', 'Rich', 'uv'] },
  ];
  return (
    <section className="section section-sm" id="stack" style={{ background: 'var(--bg-1)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <span className="eyebrow"><span className="eyebrow-bar"/>Built with<span className="eyebrow-bar"/></span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="stack-grid">
          {groups.map(g => (
            <div key={g.label} className="stack-card" style={{
              padding: '20px 20px 18px',
              background: 'var(--bg-2)',
              border: '1px solid var(--divider)',
              borderRadius: 12
            }}>
              <div className="stack-group-label mono" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                <span className="stack-dot" style={{ background: g.dot, boxShadow: `0 0 8px ${g.dot}` }}/>
                <span style={{ fontSize: 10, color: 'var(--purple-300)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>{g.label}</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {g.items.map(i => (
                  <span key={i} className="stack-pill mono" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 7,
                    fontSize: 11,
                    padding: '4px 10px 4px 7px',
                    background: 'rgba(255,255,255,0.03)',
                    border: '1px solid var(--divider)',
                    borderRadius: 6,
                    color: 'var(--fg-2)',
                    transition: 'border-color 0.18s, color 0.18s, background 0.18s'
                  }}>
                    <LogoFor name={i} fallback={g.dot}/>
                    {i}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        #stack .stack-dot { width: 7px; height: 7px; border-radius: 50%; }
        #stack .stack-pill:hover {
          border-color: var(--purple-400);
          color: var(--fg-1);
          background: rgba(108, 92, 231, 0.08);
        }
        #stack .stack-card:hover { border-color: var(--divider-strong); }
        @media (max-width: 900px) { #stack .stack-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { #stack .stack-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ==============================================================
// PAPER / THESIS MENTION
// ==============================================================
function PaperSection() {
  return (
    <section className="section section-sm" id="paper">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          alignItems: 'center',
          gap: 40,
          padding: '36px 40px',
          background: 'linear-gradient(135deg, rgba(108,92,231,0.08) 0%, rgba(51,133,255,0.04) 100%)',
          border: '1px solid var(--divider)',
          borderRadius: 18,
          position: 'relative', overflow: 'hidden'
        }} className="paper-card">
          <div style={{ position: 'absolute', right: -60, top: -60, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(108,92,231,0.2) 0%, transparent 70%)', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-flex' }}>Final Degree Project · Thesis</span>
            <h3 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 10, fontFamily: 'var(--font-display)' }}>
              F1 Strategy Manager: AI Models for Strategy Recommendations in Formula 1 Races
            </h3>
            <p style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.55 }}>
              Final Thesis Project, UIE Intelligent Systems Engineering · VforVitorio · Work in progress
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
            <a className="btn btn-primary" href="https://github.com/VforVitorio/F1_Strat_Manager/blob/main/documents/docs_legacy_strat_manager/F1_Strategy_Manager_AI.pdf" target="_blank">
              Read the paper (PDF)
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
            </a>
            <a className="btn btn-ghost" href="https://deepwiki.com/VforVitorio/F1_Strat_Manager" target="_blank">
              DeepWiki docs →
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) { #paper .paper-card { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px !important; } }
      `}</style>
    </section>
  );
}

// ==============================================================
// FOOTER
// ==============================================================
// ==============================================================
// CONTRIBUTING — small CTA strip for the repo
// ==============================================================
function ContributingSection() {
  return (
    <section id="contribute" className="section-sm" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--hairline)', padding: '64px 0' }}>
      <div className="container">
        <div className="contrib-row">
          <div>
            <span className="eyebrow"><span className="eyebrow-bar"/>Contributing</span>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', margin: '14px 0 10px', lineHeight: 1.15 }}>
              Open source. Yours to fork.
            </h3>
            <p style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.55, margin: 0, maxWidth: 480 }}>
              Spot a bug, ship a new agent, tune a model — issues and pull requests are welcome.
            </p>
          </div>
          <div className="contrib-ctas">
            <a className="btn btn-primary" href="https://github.com/VforVitorio/F1_Strat_Manager" target="_blank" rel="noopener">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5l3.7 7.5 8.3 1.2-6 5.8 1.4 8.3L12 19.3 4.6 23.3 6 15l-6-5.8 8.3-1.2z"/></svg>
              Star the repo
            </a>
            <a className="btn btn-ghost" href="https://github.com/VforVitorio/F1_Strat_Manager/issues/new" target="_blank" rel="noopener">
              Open an issue
            </a>
            <a className="btn btn-ghost" href="https://github.com/VforVitorio/F1_Strat_Manager/pulls" target="_blank" rel="noopener">
              View pull requests
            </a>
          </div>
        </div>
      </div>
      <style>{`
        #contribute .contrib-row {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 40px;
          align-items: center;
          max-width: 960px;
          margin: 0 auto;
        }
        #contribute .contrib-ctas {
          display: flex; flex-wrap: wrap; gap: 10px;
        }
        @media (max-width: 760px) {
          #contribute .contrib-row { grid-template-columns: 1fr; text-align: left; }
        }
      `}</style>
    </section>
  );
}

// ==============================================================
// MEET THE AUTHOR — tiny bio strip before the footer
// ==============================================================
function AboutAuthor() {
  const cards = [
    {
      label: 'Portfolio',
      href: 'https://victorvegasobral.com',
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="9"/>
          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
        </svg>
      ),
    },
    {
      label: 'GitHub',
      href: 'https://github.com/VforVitorio',
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/>
        </svg>
      ),
    },
    {
      label: 'LinkedIn',
      href: 'https://www.linkedin.com/in/victorvegasobral/',
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.3A1.8 1.8 0 1 1 8.3 6.5 1.8 1.8 0 0 1 6.5 8.3zM19 19h-3v-4.8c0-1.15-.02-2.63-1.6-2.63s-1.85 1.25-1.85 2.55V19h-3v-9h2.88v1.23h.04A3.16 3.16 0 0 1 15.3 9.8c3.04 0 3.6 2 3.6 4.6z"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="about" className="section-sm" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', padding: '56px 0' }}>
      <div className="container">
        <div className="about-row">
          <img src="https://avatars.githubusercontent.com/u/117594428?v=4"
               alt="VforVitorio"
               width={72} height={72}
               style={{
                 borderRadius: '50%',
                 border: '1px solid var(--divider-strong)',
                 boxShadow: '0 0 0 4px rgba(108,92,231,0.08)',
                 flexShrink: 0
               }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span className="eyebrow" style={{ marginBottom: 8, display: 'inline-flex' }}>
              <span className="eyebrow-bar"/>Meet the author
            </span>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', margin: '6px 0 6px' }}>
              VforVitorio
            </h3>
            <p style={{ fontSize: 13.5, color: 'var(--fg-3)', lineHeight: 1.55, margin: '0 0 16px', maxWidth: 560 }}>
              AI &amp; Data Intern at NTT DATA Spain. 4th-year Intelligent Systems Engineering at UIE Campus Coruña. Building AI for Formula 1 — from telemetry modelling to multi-agent reasoning.
            </p>
            <div className="about-cards">
              {cards.map(c => (
                <a key={c.label} href={c.href} target="_blank" rel="noopener" className="about-card">
                  <span className="about-card-icon">{c.icon}</span>
                  <span className="about-card-label">{c.label}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        #about .about-row {
          display: flex;
          align-items: center;
          gap: 28px;
          max-width: 720px;
          margin: 0 auto;
        }
        #about .about-cards {
          display: flex; gap: 10px; flex-wrap: wrap;
        }
        #about .about-card {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 10px 16px;
          background: var(--bg-3);
          border: 1px solid var(--divider);
          border-radius: 10px;
          color: var(--fg-2);
          font-size: 13px;
          font-weight: 500;
          transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
        }
        #about .about-card:hover {
          border-color: var(--purple-400);
          color: #fff;
          background: rgba(108, 92, 231, 0.08);
          transform: translateY(-1px);
        }
        #about .about-card-icon { display: inline-flex; color: var(--purple-300); }
        @media (max-width: 560px) {
          #about .about-row { flex-direction: column; text-align: center; gap: 18px; }
          #about .about-cards { justify-content: center; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-cols">
          <div>
            <div className="logo" style={{ fontSize: 16 }}>
              <span>F1 StratLab</span>
            </div>
            <p className="footer-brand-copy">
              Open-source AI for real-time Formula 1 strategy. Six LangGraph sub-agents, seven ML models, one orchestrator. Apache 2.0 licensed.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <span className="pill pill-mono pill-neutral">Python 3.10+</span>
              <span className="pill pill-mono pill-neutral">Apache 2.0</span>
              <span className="pill pill-mono" style={{ background: 'rgba(67,255,100,0.08)', color: '#43ff64', borderColor: 'rgba(67,255,100,0.22)' }}>v0.1.1</span>
            </div>
          </div>
          <FooterCol title="Project" links={[
            ['Overview', '#top'],
            ['Architecture', '#how'],
            ['Models', '#models'],
            ['Install', '#install'],
          ]}/>
          <FooterCol title="Resources" links={[
            ['GitHub', 'https://github.com/VforVitorio/F1_Strat_Manager'],
            ['DeepWiki', 'https://deepwiki.com/VforVitorio/F1_Strat_Manager'],
            ['HF Dataset', 'https://huggingface.co/datasets/VforVitorio/f1-strategy-dataset'],
            ['Paper (PDF)', 'https://github.com/VforVitorio/F1_Strat_Manager/blob/main/documents/docs_legacy_strat_manager/F1_Strategy_Manager_AI.pdf'],
          ]}/>
          <FooterCol title="Docs" links={[
            ['README', 'https://github.com/VforVitorio/F1_Strat_Manager#readme'],
            ['INDEX', 'https://github.com/VforVitorio/F1_Strat_Manager/blob/main/INDEX.md'],
            ['Roadmap', 'https://github.com/VforVitorio/F1_Strat_Manager/blob/main/ROADMAP.md'],
            ['API', 'https://github.com/VforVitorio/F1_Strat_Manager/blob/main/API_DOCUMENTATION.md'],
          ]}/>
          <FooterCol title="Related" links={[
            ['F1_Telemetry_Manager', 'https://github.com/VforVitorio/F1_Telemetry_Manager'],
            ['F1_AI_team_detection', 'https://github.com/VforVitorio/F1_AI_team_detection'],
            ['F1_AC_Digital_Twin', 'https://github.com/VforVitorio/F1_AC_Digital_Twin'],
            ['Issue templates', 'https://github.com/VforVitorio/F1_Strat_Manager/blob/main/ISSUE_TEMPLATES.md'],
          ]}/>
        </div>
        <div className="footer-legal">
          <span>© {new Date().getFullYear()} VforVitorio · UIE Intelligent Systems Engineering</span>
          <span className="mono" style={{ color: 'var(--fg-3)' }}>Apache 2.0 · v0.1.1 · built with uv</span>
        </div>
        <p className="footer-disclaimer">
          No copyright infringement intended. <strong>Formula 1</strong>, F1, and related marks are trademarks of Formula One Licensing B.V. and are used here for reference only. All race data is sourced from public APIs (<a href="https://docs.fastf1.dev" target="_blank" rel="noopener">FastF1</a>, <a href="https://openf1.org" target="_blank" rel="noopener">OpenF1</a>) and is used strictly for educational and non-commercial purposes. This project is not affiliated with, endorsed by, or in any way officially connected to Formula 1, the FIA, or any F1 team.
        </p>
      </div>
      <style>{`
        @media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr !important; gap: 32px; } }
        .footer-disclaimer {
          margin: 24px 0 0;
          padding-top: 20px;
          border-top: 1px solid var(--hairline);
          font-size: 11px;
          line-height: 1.6;
          color: var(--fg-4);
          max-width: 820px;
        }
        .footer-disclaimer strong { color: var(--fg-3); font-weight: 500; }
        .footer-disclaimer a { color: var(--purple-300); transition: color 0.15s; }
        .footer-disclaimer a:hover { color: #fff; }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div className="footer-col">
      <div className="footer-col-title">{title}</div>
      {links.map(([label, href]) => (
        <a key={label} href={href} target={href.startsWith('http') ? '_blank' : undefined}>{label}</a>
      ))}
    </div>
  );
}

Object.assign(window, { ModelsSection, HowItWorksSection, RagSection, CliSection, StackSection, PaperSection, ContributingSection, AboutAuthor, Footer });