window.SectionPrototype = () => {
  const { Section, Card, Tag } = window.BITSUI;
  const { Link, Arrow, Chevron } = window.BITSIcons;

  const flows = [
    {
      name: "Alumni onboarding · form + voice only",
      screens: 7,
      steps: [
        "Splash",
        "Verify batch (form)",
        "ID proof upload (camera)",
        "Interests + skills (chips)",
        "Location (map pin)",
        "Import from LinkedIn (optional)",
        "Home",
      ],
    },
    {
      name: "Student home + academics",
      screens: 9,
      steps: [
        "Home feed",
        "Today's timetable",
        "Attendance",
        "Assignments",
        "Submit assignment",
        "Grades",
        "Study Groups",
        "Course detail",
        "AI tutor chat",
      ],
    },
    {
      name: "Parent fee + visit",
      screens: 6,
      steps: [
        "Parent dashboard",
        "Fee schedule",
        "Pay installment",
        "Book campus visit",
        "Guest house picker",
        "Gate pass request",
      ],
    },
    {
      name: "Discover BITSians (map)",
      screens: 5,
      steps: [
        "Directory",
        "Toggle map",
        "Proximity filter",
        "'Open to hang out' bottom sheet",
        "Send ice breaker",
      ],
    },
    {
      name: "AI-first interactions",
      screens: 8,
      steps: [
        "Home with AI chip",
        "Voice / text input",
        "Intent preview card",
        "Clarify if ambiguous",
        "Action result",
        "Post-action follow-up",
        "Conversation history",
        "Tool log (admin)",
      ],
    },
    {
      name: "BITSian Marketplace",
      screens: 6,
      steps: [
        "Marketplace home",
        "Freelancer profile",
        "Agency portfolio",
        "Hire request",
        "Quote exchange",
        "Recommendation chain",
      ],
    },
    {
      name: "Events + who-to-meet",
      screens: 7,
      steps: [
        "Events home",
        "Event detail",
        "RSVP + waitlist",
        "AI who-to-meet (top 5)",
        "Message attendee",
        "Event day check-in",
        "Post-event recap",
      ],
    },
    {
      name: "Admin console",
      screens: 5,
      steps: [
        "Admin login",
        "Moderation queue",
        "User management",
        "Analytics dashboard",
        "Announcement composer",
      ],
    },
  ];

  const links = [
    {
      label: "Open prototype",
      href: "/prototype/",
      primary: true,
      hint: "Opens in a new tab · hosted alongside this proposal",
    },
  ];

  return (
    <Section
      id="prototype"
      eyebrow="Prototype"
      title={<>65 screens. Light mode. Clickable. Already built.</>}
      kicker="A v3 interactive prototype is live at prototype/index.html — one self-contained 228KB file, custom SVG iconography, deep blue + gold palette, Inter + Fraunces typography. It's not wireframe-fidelity; it's close to shippable UI."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        <Card className="lg:col-span-5 relative overflow-hidden p-0 bg-gradient-to-br from-bits-deep to-bits-navy border-transparent">
          <div className="relative h-full flex flex-col">
            <div className="relative bg-bits-mist/30 p-6 flex-1 flex items-center justify-center overflow-hidden">
              <div
                className="relative rounded-[32px] bg-bits-ink shadow-2xl overflow-hidden"
                style={{ width: 232, height: 502 }}
              >
                <iframe
                  src="/prototype/index.html?screen=home"
                  title="BITS prototype — Home"
                  style={{
                    width: 375,
                    height: 812,
                    border: 0,
                    transform: "scale(0.618)",
                    transformOrigin: "top left",
                    pointerEvents: "none",
                  }}
                  scrolling="no"
                />
              </div>
              <div className="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-bits-gold/20 blur-3xl pointer-events-none" />
            </div>
            <div className="p-6 bg-bits-deep text-white">
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-1">
                A glimpse · clickable in your browser
              </div>
              <div className="font-serif text-xl leading-tight mb-4">
                65 screens. Light mode. Every flow wired.
              </div>
              {links.map((l, i) => (
                <a
                  key={i}
                  href={l.href}
                  target="_blank"
                  rel="noreferrer"
                  className="group flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-bits-gold text-bits-ink hover:bg-bits-goldDeep hover:text-white transition-colors"
                >
                  <div className="flex items-center gap-2 font-semibold text-[14px]">
                    <Link width="15" height="15" />
                    {l.label}
                  </div>
                  <Arrow
                    width="16"
                    height="16"
                    className="group-hover:translate-x-0.5 transition-transform"
                  />
                </a>
              ))}
            </div>
          </div>
        </Card>

        <Card className="lg:col-span-7">
          <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">
                Flow coverage
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Golden paths already prototyped
              </h3>
            </div>
            <Tag tone="navy">8 flows · 65 screens</Tag>
          </div>

          <div className="space-y-1.5">
            {flows.map((f, i) => (
              <details
                key={i}
                className="group rounded-lg hover:bg-bits-mist/60 transition-colors"
              >
                <summary className="p-3 flex items-center gap-3">
                  <span className="chev text-bits-goldDeep">
                    <Chevron width="16" height="16" />
                  </span>
                  <div className="flex-1 flex items-center justify-between">
                    <span className="font-medium text-bits-ink text-[14px]">
                      {f.name}
                    </span>
                    <span className="text-[12px] text-bits-steel num">
                      {f.screens} screens
                    </span>
                  </div>
                </summary>
                <div className="px-10 pb-3 -mt-1">
                  <div className="flex flex-wrap gap-1.5">
                    {f.steps.map((s, j) => (
                      <span
                        key={j}
                        className="inline-flex items-center gap-1 px-2 py-1 rounded border border-bits-line bg-white text-[11.5px] text-bits-steel"
                      >
                        <span className="text-bits-goldDeep num">
                          {String(j + 1).padStart(2, "0")}
                        </span>
                        {s}
                      </span>
                    ))}
                  </div>
                </div>
              </details>
            ))}
          </div>
        </Card>

        <Card className="lg:col-span-12 bg-gradient-to-br from-bits-mist/60 to-white border-bits-line">
          <div className="grid md:grid-cols-4 gap-6">
            {[
              {
                k: "Design system",
                v: "Custom — Inter + Fraunces, 8px grid, liquid glass, deep blue + gold.",
              },
              {
                k: "Icon library",
                v: "40+ hand-drawn SVGs at 1.6 stroke weight. Zero emoji, zero icon fonts.",
              },
              {
                k: "Accessibility",
                v: "WCAG AA contrast throughout. Large tap targets. Voice entry points per screen.",
              },
              {
                k: "Fidelity level",
                v: "Close-to-shippable UI. React Native implementation translates 1:1 from prototype.",
              },
            ].map((x, i) => (
              <div key={i}>
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep mb-1">
                  {x.k}
                </div>
                <div className="text-[13.5px] text-bits-ink leading-relaxed">
                  {x.v}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </Section>
  );
};