// About — humanizing page. No job list (per user's instruction).

const AboutPage = () => {
  const T = window.TOKENS;

  const ships = [
    {
      k: '01',
      title: 'Replaced a manual graphic-design workflow at scale',
      body: 'Founding AI hire at a US stealth startup. Multi-modal GenAI platform powering ad creative across a multi-thousand-SKU catalog. POC in 2 weeks. Production MVP in 8. Same brand, fraction of the previous design headcount.',
    },
    {
      k: '02',
      title: 'Powered a consumer face-gen app at scale',
      body: 'Diffusion serving stack on Replicate behind an iOS/Android app: upload a photo, generate yourself in any scene. Tens of thousands of daily generations, 99.9% uptime, autoscaling.',
    },
    {
      k: '03',
      title: '>99% identity & style consistency at production scale',
      body: 'Fine-tuned Flux, HiDream, WAN, and SDXL with hundreds of custom LoRAs. Consistent character and style across thousands of generated assets, unlocking image-to-video deliverables.',
    },
    {
      k: '04',
      title: 'Eliminated a manual content bottleneck',
      body: 'LLM pipeline turning free-form briefs into structured, deterministic input. Per-brief turnaround dropped from hours to seconds inside a 1000+ assets/month creative program.',
    },
    {
      k: '05',
      title: 'Replaced manual QC on industrial production lines',
      body: 'Real-time YOLO/SAM inference on factory conveyors. Defect detection on cookie lines, sorting and counting for fruits and veggies.',
    },
    {
      k: '06',
      title: 'Identified AI automation that paid for itself',
      body: 'C-suite advisory across 5+ companies, translating emerging AI into measurable wins: automation opportunities, cost reductions, and accelerated adoption across technical and non-technical staff.',
    },
  ];

  const stack = [
    { label: 'CORE', items: 'Python · FastAPI · PyTorch · Docker · GCP · CI/CD' },
    { label: 'AGENTIC DEV', items: 'Claude Code · OpenCode · Codex · Claude Design' },
    { label: 'AI ORCHESTRATION', items: 'CrewAI · LangChain · LangGraph · Ollama · vLLM · RAG' },
    { label: 'IMG/VID GEN', items: 'Diffusers · ComfyUI · Automatic1111 · SDXL · Flux · Z-Image · WAN · LTX · LoRAs · ControlNets · IP-Adapters' },
    { label: 'LLMs', items: 'Transformers · GPT · Claude · Gemini · Llama · Mistral · Qwen · DeepSeek' },
    { label: 'DATA', items: 'PostgreSQL · ChromaDB · SQLite' },
    { label: 'SERVING', items: 'GCP · Runpod · Replicate' },
  ];

  const working = [
    { k: 'TIMEZONE', v: 'CET (UTC+1, Oct–Mar) / CEST (UTC+2, Mar–Oct)' },
    { k: 'LANGUAGES', v: 'English (Advanced) · Polish (Native) · Indonesian (Intermediate)' },
    { k: 'APPROACH', v: 'Agile-first · Rapid iteration on stakeholder feedback' },
    { k: 'SCOPE', v: 'Agentic Systems & Automation · Image/Video Generation pipelines · Cloud infrastructure' },
    { k: 'TRACK RECORD', v: '5+ years US, UK, EU clients · Startup environments · Founding-AI engagements' },
  ];

  const interests = [
    'Calisthenics', 'ComfyUI', 'FOSS', 'Generative AI "Art"',
    'Language Learning', 'Linux DIY', 'Linux Ricing', 'Local AI',
    'Mnemonics', 'Strength Training',
  ];

  return (
    <div style={{
      minHeight: '100vh', position: 'relative', zIndex: 1,
      padding: '140px 40px 160px', maxWidth: 1200, margin: '0 auto',
      fontFamily: T.mono, color: T.fg,
    }}>
      <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.accent, marginBottom: 24 }}>
        ━━ INDEX / ABOUT
      </div>

      <window.GlitchTitle lines={[{ text: 'WHO IS' }, { text: 'THIS.', accent: true }]} />

      {/* bio */}
      <div style={{
        marginTop: 64, display: 'grid',
        gridTemplateColumns: 'minmax(140px, 200px) 1fr', gap: 40,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.3em', color: T.fgGhost }}>
          ━━ /BIO
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 17, lineHeight: 1.7, color: T.fgMid, maxWidth: 720 }}>
          <p style={{ margin: 0, marginBottom: 20, color: T.fg, fontSize: 19 }}>
            Hi! I'm <span style={{ color: T.accent }}>Karol Roszak</span>, a Generative AI Engineer.
          </p>
          <p style={{ marginBottom: 20 }}>
            Five-plus years designing and shipping production AI systems, the last three-plus on Generative AI:
            AI automation, agentic workflows, multi-modal generation pipelines (text, image, video, voice),
            GCP/Runpod/Replicate-backed serving infra. End-to-end ownership of development for fast-paced
            startup environments across the US, UK, EU.
          </p>
          <p style={{ marginBottom: 0 }}>
            Currently independent. Bachelor's in AI from Poznań University of Technology (PUT), based in
            Poland (CET, UTC+1 Oct–Mar / CEST, UTC+2 Mar–Oct). Polish native, English fluent,
            Indonesian intermediate.
          </p>
        </div>
      </div>

      {/* what I ship */}
      <div style={{
        marginTop: 96, paddingTop: 40, borderTop: `1px solid ${T.fgFaint}`,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.fgGhost, marginBottom: 32 }}>
          ━━ /WHAT I SHIP
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24,
        }}>
          {ships.map(s => (
            <div key={s.k} style={{
              padding: 24, border: `1px solid ${T.fgFaint}`, background: `${T.bgRaised}80`,
              transition: 'border-color .2s, background .2s',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = T.accent; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = T.fgFaint; }}
            >
              <div style={{ fontSize: 11, letterSpacing: '0.2em', color: T.accent, marginBottom: 12 }}>
                [{s.k}]
              </div>
              <div style={{ fontSize: 18, fontWeight: 700, color: T.fg, marginBottom: 8 }}>
                {s.title}
              </div>
              <div style={{ fontSize: 13, color: T.fgMid, lineHeight: 1.6, fontFamily: T.sans }}>
                {s.body}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* stack */}
      <div style={{
        marginTop: 80, paddingTop: 40, borderTop: `1px solid ${T.fgFaint}`,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.fgGhost, marginBottom: 24 }}>
          ━━ /STACK
        </div>
        <div style={{ display: 'grid', gap: 16 }}>
          {stack.map(row => (
            <div key={row.label} style={{
              display: 'grid', gridTemplateColumns: 'minmax(140px, 160px) 1fr', gap: 24,
              alignItems: 'baseline',
            }}>
              <div style={{ fontSize: 11, letterSpacing: '0.3em', color: T.accent }}>
                {row.label}
              </div>
              <div style={{ fontSize: 13, color: T.fg, lineHeight: 1.7 }}>
                {row.items}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* working with me */}
      <div style={{
        marginTop: 80, paddingTop: 40, borderTop: `1px solid ${T.fgFaint}`,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.fgGhost, marginBottom: 24 }}>
          ━━ /WORKING WITH ME
        </div>
        <div style={{ display: 'grid', gap: 16 }}>
          {working.map(row => (
            <div key={row.k} style={{
              display: 'grid', gridTemplateColumns: 'minmax(140px, 160px) 1fr', gap: 24,
              alignItems: 'baseline',
            }}>
              <div style={{ fontSize: 11, letterSpacing: '0.3em', color: T.accent }}>
                {row.k}
              </div>
              <div style={{ fontSize: 13, color: T.fg, lineHeight: 1.7 }}>
                {row.v}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* interests */}
      <div style={{
        marginTop: 80, paddingTop: 40, borderTop: `1px solid ${T.fgFaint}`,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.fgGhost, marginBottom: 24 }}>
          ━━ /INTERESTS
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {interests.map(it => (
            <span key={it} style={{
              padding: '8px 16px', border: `1px solid ${T.fgGhost}`,
              fontSize: 12, letterSpacing: '0.1em', color: T.fg,
            }}>
              {it}
            </span>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{
        marginTop: 96, padding: 40, border: `1px solid ${T.fgFaint}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 24, background: `${T.bgRaised}80`,
      }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.3em', color: T.accent, marginBottom: 8 }}>
            ━━ STATUS: OPEN TO COLLABORATION
          </div>
          <div style={{ fontSize: 20, color: T.fg, fontWeight: 700 }}>
            Building something with AI? Let's talk.
          </div>
        </div>
        <button
          onClick={() => window.navigate('/connect')}
          style={{
            padding: '14px 28px', background: T.accent, color: T.bg,
            border: 'none', fontFamily: T.mono, fontSize: 12, letterSpacing: '0.3em',
            textTransform: 'uppercase', cursor: 'pointer', fontWeight: 700,
          }}
        >
          [→] connect
        </button>
      </div>
    </div>
  );
};

window.AboutPage = AboutPage;