// Bio, capabilities, stack, contact, topbar

function Topbar() {
  return (
    <header className="topbar">
      <div className="brand">
        <span className="dot"></span>
        <span>Mustapha Cherqi</span>
      </div>
      <nav>
        <a href="#work">Work</a>
        <a href="#build">Build</a>
        <a href="#stack">Stack</a>
        <a href="#contact">Contact</a>
      </nav>
      <div className="status">
        <span className="led"></span>
        <span>Available</span>
      </div>
    </header>
  );
}

function Bio() {
  return (
    <section className="bleed" id="about">
      <div className="container">
        <div className="sec-label reveal">
          <span className="num">// 01</span><span>profile</span>
        </div>
        <h2 className="sec-h reveal delay-1">
          Audit before you build. <em>No solutions looking for problems.</em>
        </h2>
        <div className="bio-grid">
          <div className="bio reveal delay-2">
            <p>
              I'm an <strong>AI Engineer</strong> and full-stack developer based in Morocco. I build production-ready voice and language systems — voicebots, chatbots, LLM agents, RAG pipelines, STT/TTS integrations, and the workflow automation that wires them into a real business.
            </p>
          </div>
          <aside className="bio-meta reveal delay-3">
            <div className="row">
              <span className="k">Based</span>
              <span className="v">Morocco · Remote</span>
            </div>
            <div className="row">
              <span className="k">Languages</span>
              <span className="v">Arabic · French · English</span>
            </div>
            <div className="row">
              <span className="k">Practice</span>
              <span className="v">10 yrs · solo build</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

const CAPS = [
  { n: "01", title: "Voicebots & chatbots", stack: "ar · fr · en" },
  { n: "02", title: "LLM agents — tool use, intent, fallback", stack: "openai · anthropic · gemini" },
  { n: "03", title: "RAG pipelines & knowledge bases", stack: "pgvector · embeddings" },
  { n: "04", title: "STT / TTS pipelines with telephony", stack: "whisper · elevenlabs" },
  { n: "05", title: "Workflow automation", stack: "n8n · whatsapp · webhooks" },
  { n: "06", title: "Full-stack platforms", stack: "next · supabase · postgres" },
  { n: "07", title: "OCR + AI data extraction", stack: "vision · gemini · pipelines" },
];

function Build() {
  return (
    <section className="bleed" id="build">
      <div className="container">
        <div className="sec-label reveal">
          <span className="num">// 02</span><span>capabilities</span>
        </div>
        <h2 className="sec-h reveal delay-1">
          What I build — <em>end to end.</em>
        </h2>

        <ul className="cap-list reveal delay-2">
          {CAPS.map(c => (
            <li key={c.n}>
              <span className="cap-num">{c.n}</span>
              <span className="cap-title">{c.title}</span>
              <span className="cap-stack">{c.stack}</span>
            </li>
          ))}
        </ul>

        <PipelineDiagram />
      </div>
    </section>
  );
}

function Stack() {
  const cells = [
    { label: "Languages", items: "TypeScript · Python · SQL" },
    { label: "Frontend", items: "Next.js · React · Tailwind" },
    { label: "Backend", items: "Node · Python · Postgres · Supabase" },
    { label: "AI / LLM", items: "OpenAI · Anthropic · Gemini" },
    { label: "Voice", items: "Whisper · ElevenLabs · Twilio" },
    { label: "Data", items: "Postgres · pgvector · Prisma" },
    { label: "Automation", items: "n8n · WhatsApp API · Webhooks" },
    { label: "Infra", items: "Vercel · Docker · Cloudflare" },
  ];
  return (
    <section className="bleed" id="stack">
      <div className="container">
        <div className="sec-label reveal">
          <span className="num">// 03</span><span>tools</span>
        </div>
        <h2 className="sec-h reveal delay-1">
          The stack I reach for.
        </h2>
        <div className="stack-grid reveal delay-2">
          {cells.map(c => (
            <div className="stack-cell" key={c.label}>
              <span className="sc-label">{c.label}</span>
              <span className="sc-items">{c.items}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="contact container" id="contact">
      <div className="sec-label reveal">
        <span className="num">// 04</span><span>contact</span>
      </div>
      <h2 className="big reveal delay-1">
        Let's talk about <em>your conversational AI mission.</em>
      </h2>
      <div className="links reveal delay-2">
        <div className="link">
          <span className="k">Email</span>
          <a className="v" href="mailto:mustapha@cherqi.me">mustapha@cherqi.me</a>
        </div>
        <div className="link">
          <span className="k">GitHub</span>
          <a className="v" href="https://github.com/cherqim" target="_blank" rel="noopener noreferrer">github.com/cherqim</a>
        </div>
        <div className="link">
          <span className="k">Location</span>
          <span className="v">Morocco — Remote</span>
        </div>
        <div className="link">
          <span className="k">Availability</span>
          <span className="v">Freelance · Available</span>
        </div>
      </div>

      <footer>
        <span>© 2026 Mustapha Cherqi</span>
        <span>Last updated · Apr 2026</span>
      </footer>
    </section>
  );
}

window.Topbar = Topbar;
window.Bio = Bio;
window.Build = Build;
window.Stack = Stack;
window.Contact = Contact;