window.SectionDesignSystem = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const { Spark, Layers, Grid, Check, Bolt, Compass, Chat, Book } = window.BITSIcons;

  const process = [
    {
      phase: "01",
      title: "Discovery & stakeholder interviews",
      timeHuman: "3–5 days",
      timeWithAI: "1 day",
      body:
        "Senior product designer sits with alumni, students, faculty, parents, staff, and admin archetypes. Every interview transcript is parsed by AI into structured jobs-to-be-done, painful workflows, and unmet needs — surfaced back to the designer for validation.",
      artifacts: ["JTBD map", "Stakeholder persona sheets", "Painful-workflow inventory"],
    },
    {
      phase: "02",
      title: "Information architecture & flow mapping",
      timeHuman: "1 week",
      timeWithAI: "1 day",
      body:
        "Designer drafts the skeleton — surfaces, entry points, modality decisions (voice vs form vs chat). AI-agent assist generates flow variants, edge-case paths, and accessibility considerations for every screen. Designer picks, prunes, and locks the IA.",
      artifacts: ["Surface inventory", "Flow diagrams (happy + edge)", "Modality decisions"],
    },
    {
      phase: "03",
      title: "Wireframes (low-fi) authored by designer",
      timeHuman: "2 weeks",
      timeWithAI: "2 days",
      body:
        "Designer drafts every screen at low fidelity, focused on hierarchy and motion. AI-agent translates those wireframes into clickable HTML prototypes in minutes, so the designer iterates in-context rather than on static frames.",
      artifacts: ["Wireframe set", "Clickable low-fi walkthrough", "Hierarchy + motion notes"],
    },
    {
      phase: "04",
      title: "Visual system — tokens, type, iconography",
      timeHuman: "1 week",
      timeWithAI: "1 day",
      body:
        "Designer locks the visual language: deep blue + gold palette, Montserrat typography, liquid glass surfaces, 1.6-stroke custom SVG icons, zero emoji. AI-agent extends the icon set, generates variant swatches, and writes the token JSON.",
      artifacts: ["Color tokens", "Type scale", "Icon set (40+ SVGs)", "Surface library"],
    },
    {
      phase: "05",
      title: "High-fidelity prototype — clickable",
      timeHuman: "3–4 weeks",
      timeWithAI: "3 days",
      body:
        "Designer works screen-by-screen on hi-fi visuals while AI-agent drives the HTML/CSS implementation against the visual-system tokens. Each iteration is live and clickable within minutes, not hours. Three full visual passes (dark → refined → senior-designer bar) are cheap.",
      artifacts: ["65-screen clickable prototype", "Three visual passes", "Senior-designer review"],
    },
    {
      phase: "06",
      title: "Stakeholder review + iteration",
      timeHuman: "1 week",
      timeWithAI: "1 day",
      body:
        "BITSAA + BITS IT walk the live prototype, not a deck. Feedback captured inline. Each round of changes turns around same-day — this proposal itself has been iterated this way. No PDF deck, no static redline cycle.",
      artifacts: ["Live-review session recording", "Feedback ledger", "Same-day iteration"],
    },
    {
      phase: "07",
      title: "Design handoff → React Native",
      timeHuman: "1 week",
      timeWithAI: "0.5 day",
      body:
        "The prototype is not a spec — it is the spec. Visual tokens export 1:1 to React Native. Mobile engineers consume the clickable prototype directly, reading the DOM + token system. No Figma-to-code translation loss.",
      artifacts: ["Token export", "Component inventory", "Screen-by-screen handoff"],
    },
    {
      phase: "08",
      title: "Accessibility & polish pass",
      timeHuman: "1 week",
      timeWithAI: "1 day",
      body:
        "WCAG AA contrast, tap target sizes, voice entry points on every screen. AI-agent runs the full audit, designer reviews + corrects. Large-text mode, reduced-motion, and screen reader labels validated before any user sees the build.",
      artifacts: ["WCAG AA report", "Tap-target audit", "Voice entry-point coverage"],
    },
  ];

  const principles = [
    {
      icon: <Spark />,
      title: "Voice + form, never chat-based onboarding",
      body:
        "Conversational chat is the wrong modality for first-time users — it invites dead-end loops and unclear expectations. Voice (push-to-talk) and structured forms give users a legible path in.",
    },
    {
      icon: <Layers />,
      title: "Liquid glass, not flat panels",
      body:
        "Soft depth from blurred overlays and subtle gold highlights — institutional warmth without the heaviness of flat navy. Feels premium on alumni hands and legible on student hands.",
    },
    {
      icon: <Grid />,
      title: "8px grid, no exceptions",
      body:
        "Every spacing, radius, and stroke is an 8px multiple. Tokens are enforced in the prototype — AI-agent implementations inherit this constraint, so drift is impossible.",
    },
    {
      icon: <Compass />,
      title: "Zero emoji, zero icon fonts",
      body:
        "40+ hand-drawn SVG icons at 1.6 stroke weight. Consistent visual language across roles, surfaces, and platforms. Crisp at any density, tintable via CSS vars.",
    },
    {
      icon: <Book />,
      title: "Information-on-demand, not LinkedIn fatigue",
      body:
        "Dense content is collapsed; users expand what they want. No scrolling past a wall of cards they didn't ask for. The feed respects attention as scarce.",
    },
    {
      icon: <Chat />,
      title: "Multi-modal storytelling",
      body:
        "A story is an image, a video, or a block of text — with a CTA. Life events (new job, hired a BITSian, married, moved cities) are composable story types, not feed-post monoculture.",
    },
  ];

  return (
    <Section
      id="design"
      eyebrow="Design System & Process"
      title={<>AI Augmented Rapid Prototyping Process — senior design, 10× cycle time.</>}
      kicker="Our design process is not 'AI generated all the screens.' It is senior designers authoring the vision, with AI agents collapsing the execution tax — wireframe translation, icon generation, token wiring, prototype rendering — from weeks into hours. Three full visual passes become cheap; the result is shippable UI at a senior-designer bar."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        <Card className="lg:col-span-12">
          <div className="flex items-center justify-between mb-5">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1">
                The eight-stage process
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Senior judgment at every stage. AI collapses the execution tax.
              </h3>
            </div>
            <Tag tone="gold">~10× faster than a traditional design studio</Tag>
          </div>
          <div className="grid md:grid-cols-2 gap-3">
            {process.map((p, i) => (
              <div
                key={i}
                className="p-4 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="font-serif text-3xl text-bits-gold num leading-none">
                    {p.phase}
                  </div>
                  <div className="flex items-center gap-1.5 text-[11px]">
                    <span className="px-2 py-0.5 rounded-full border border-bits-line text-bits-steel line-through">
                      {p.timeHuman}
                    </span>
                    <span className="px-2 py-0.5 rounded-full bg-bits-gold/15 text-bits-goldDeep font-semibold border border-bits-gold/30">
                      {p.timeWithAI}
                    </span>
                  </div>
                </div>
                <div className="font-semibold text-bits-ink text-[14px] mt-3 leading-snug">
                  {p.title}
                </div>
                <p className="text-[12.5px] text-bits-steel leading-relaxed mt-2">
                  {p.body}
                </p>
                <div className="mt-3 pt-3 border-t border-bits-line/60 flex flex-wrap gap-1.5">
                  {p.artifacts.map((a, j) => (
                    <span
                      key={j}
                      className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-bits-mist/70 text-[11px] text-bits-ink"
                    >
                      <Check width="11" height="11" className="text-bits-goldDeep" />
                      {a}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card className="lg:col-span-12">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-4">
            Design principles that shaped the prototype
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {principles.map((p, i) => (
              <div key={i} className="flex items-start gap-3">
                <div className="w-9 h-9 rounded-lg bg-bits-deep/8 text-bits-deep flex items-center justify-center shrink-0">
                  {p.icon}
                </div>
                <div>
                  <div className="font-semibold text-bits-ink text-[14px] leading-snug">
                    {p.title}
                  </div>
                  <p className="text-[12.5px] text-bits-steel leading-relaxed mt-1.5">
                    {p.body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card className="lg:col-span-6 bg-bits-cream">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            Tokens locked in v3
          </div>
          <ul className="space-y-1.5">
            <Bullet>Palette: deep blue (#002855), gold (#C8A95B), navy, steel, mist, cream, gold-deep, line</Bullet>
            <Bullet>Typography: Montserrat — 300/400/500/600/700/800/900 + italic</Bullet>
            <Bullet>Radius scale: 4 / 8 / 12 / 16 / 24 px — no arbitrary values</Bullet>
            <Bullet>Spacing: 8px grid, enforced in the token system</Bullet>
            <Bullet>Shadows: glass + card, two elevations only</Bullet>
            <Bullet>Stroke weight: 1.6 for all icons, 1px for hairlines</Bullet>
          </ul>
        </Card>

        <Card className="lg:col-span-6">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            What this process gives BITSAA
          </div>
          <ul className="space-y-1.5">
            <Bullet>A clickable artifact the board can walk, not a static deck</Bullet>
            <Bullet>Same-day iteration — feedback lands in the prototype within hours</Bullet>
            <Bullet>Zero Figma-to-code translation loss; the prototype is the handoff</Bullet>
            <Bullet>Three full visual passes before a single React Native screen is written</Bullet>
            <Bullet>Accessibility baked in from stage 2, not retrofitted at the end</Bullet>
            <Bullet>Design system owned and editable by BITSAA post-handover</Bullet>
          </ul>
        </Card>
      </div>
    </Section>
  );
};