window.SectionNewFeatures = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const {
    Spark,
    Map,
    Briefcase,
    Heart,
    Flame,
    Users,
    Flag,
    Calendar,
    Pin,
    Book,
    Globe,
    Grid,
    Diamond,
  } = window.BITSIcons;
  const [tab, setTab] = React.useState("ai");

  // 11 AI moments. (AI Feed Explainer removed — not shipping.)
  const aiFeatures = [
    {
      name: "AI Ice Breakers",
      hook: "Cold DMs that don't feel cold.",
      body:
        "When sending a connection request or first message, the AI drafts three openers grounded in shared context (batch, company, interest overlap).",
    },
    {
      name: "AI Post Composer",
      hook: "Think rough, post polished.",
      body:
        "Dump a half-formed thought; AI returns three drafts across tones (casual, professional, announcement). User picks, tweaks, posts.",
    },
    {
      name: "Networking Nudges",
      hook: "People You Should Meet.",
      body:
        "Weekly surface: a single BITSian you probably should know, with a reason. Based on work overlap, location proximity, shared mentors.",
    },
    {
      name: "Career Pathfinder",
      hook: "Visual career paths by degree.",
      body:
        "Student opens their degree → AI renders a tree of where BITSians from that stream ended up, with transition stories and referral entry points.",
    },
    {
      name: "AI Event Planner",
      hook: "Natural language → full event.",
      body:
        "'Plan a Bangalore chapter meetup next Sat, 30 people, Koramangala, casual.' AI drafts the event page, pick list, RSVP copy, reminder schedule.",
    },
    {
      name: "Meeting Prep",
      hook: "Pre-mentorship call briefing.",
      body:
        "Before a scheduled 1:1, both sides get an auto-generated brief — shared background, likely questions, conversation starters.",
    },
    {
      name: "AI Study Groups",
      hook: "Matched by what you're struggling with.",
      body:
        "Student flags a concept they're stuck on. AI matches 3–5 others from the same course struggling with overlapping topics.",
    },
    {
      name: "Profile Coach",
      hook: "Make your profile irresistible.",
      body:
        "AI runs a weekly audit: missing fields, stale work history, weak headline. Ships one suggestion at a time, not a wall of errors.",
    },
    {
      name: "Who-to-Meet at Events",
      hook: "Top 5 connections at this meetup.",
      body:
        "Event RSVP list is ranked for each attendee. 'Of the 42 RSVPs, here are the 5 you'll get the most from meeting.'",
    },
    {
      name: "Voice Intent (push-to-talk)",
      hook: "Tap. Speak. Done.",
      body:
        "Every screen carries a push-to-talk chip. 'Book a guest house for mom next weekend' → intent → action card → confirm.",
    },
    {
      name: "Contextual Reply Chips",
      hook: "Three replies per incoming message.",
      body:
        "AI generates contextual reply options under every chat message — one short, one thoughtful, one declining-politely.",
    },
    {
      name: "Memories You Might Mean",
      hook: "AI recalls the moment, not just the keyword.",
      body:
        "When composing a Scrapbook memory, Interview, or post, the AI surfaces related past moments ('Remember the sunrise at Shiv Mandir?') grounded in the user's own life-event graph and connected BITSians.",
    },
  ];

  // Wrapped card examples — these are what we show at year-end.
  const wrappedCards = [
    { label: "Hired", value: "2", unit: "BITSians", color: "gold" },
    { label: "Referred", value: "7", unit: "to jobs (2 hired)", color: "deep" },
    { label: "Mentored", value: "3", unit: "BITSians", color: "gold" },
    { label: "Attended", value: "5", unit: "chapter meetups", color: "deep" },
    { label: "Partied with", value: "28", unit: "BITSians mapped", color: "gold" },
    { label: "Got married", value: "Mar", unit: "2026", color: "special" },
    { label: "Trips", value: "2", unit: "Goa · Ladakh", color: "deep" },
    { label: "Top collab", value: "@arjun.m", unit: "14 touchpoints", color: "gold" },
  ];

  // Native capture surfaces for the Life Event Graph
  const captureFlows = [
    {
      name: "Life event posts",
      body:
        "Structured post types with metadata: Got married · New job · Promoted · Had a kid · Bought a home · Trip · Award · Moved cities · Started a company.",
    },
    {
      name: "One-tap actions on profiles",
      body:
        "From any BITSian's profile: 'I hired them', 'I referred them', 'I mentored them', 'We travelled together'. Structured, not a free-text comment.",
    },
    {
      name: "Auto-capture from flows",
      body:
        "RSVP → attended event. Job hire confirmation → hired-a-BITSian. Event check-in with co-attendees tagged → partied-with. Calendar 1:1 with mentor tag → mentorship session.",
    },
    {
      name: "Gentle quarterly prompts",
      body:
        "'It's been 3 months. Anything big happen?' Offers a single-tap card grid of common life events. User picks, confirms, posts.",
    },
  ];

  const newProducts = [
    {
      icon: <Globe />,
      name: "BITSian Effect — the live impact engine",
      kind: "Flagship · Beyond RFP",
      flagship: true,
      hook: "A living dashboard of what BITSians built, hired, funded, and changed — updated in real time, embeddable everywhere.",
      body:
        "One always-on surface that turns the BITSian graph into institutional proof. A world map of where every BITSian lives and works, plus live counters of companies founded, revenue generated, jobs created, capital raised, non-profits started, mentorship hours, and hires-of-BITSians-by-BITSians. Every metric is exportable, embeddable on bits.ac.in, and press-kit ready. This is the feature the Marketing Head will quote in every board meeting.",
      how: [
        "World map · live geographic spread of BITSians, zoomable by campus/batch/company",
        "Live counters · companies founded, revenue, jobs, non-profits, capital raised, BITSian-hired-BITSian",
        "Editorial surfaces · BITSian of the Week, Top 100, chapter leaderboards",
        "Embeddable widgets · drop into bits.ac.in, admissions microsites, annual report",
        "Press-kit exports · one-click CSV + branded PNG for every metric",
        "Auto-populated from the Life Event Graph + public company/funding feeds",
      ],
    },
    {
      icon: <Map />,
      name: "Discover BITSians Map",
      kind: "Beyond RFP",
      hook: "Opt-in location, 'open to hang out' mode, privacy-first.",
      body:
        "A living map of BITSians near you — completely opt-in, toggleable, default off. Power move for alumni in a new city who want organic coffee meetups without DM-ping-ponging.",
      how: [
        "Toggle 'Visible' with time-box (2h / 1 day / always)",
        "'Open to hang out' flag surfaces to nearby BITSians",
        "City-level by default, precise location needs second opt-in",
        "No history retained — location is ephemeral",
      ],
    },
    {
      icon: <Briefcase />,
      name: "BITSian Marketplace",
      kind: "Beyond RFP",
      hook: "Freelancer + agency directory, portfolios, hire flow.",
      body:
        "Every BITSian who offers a service — design, dev, legal, accounting, consulting, creative — lives in the marketplace. Other BITSians hire with preference. Revenue-sharing optional.",
      how: [
        "Freelancer/agency profile with portfolio + rates",
        "Recommendation chains (who referred them)",
        "In-app hire request → quote → engagement flow",
        "Ratings only after engagement completes",
      ],
    },
    {
      icon: <Spark />,
      name: "Life Event Graph + BITSians Wrapped",
      kind: "Beyond RFP",
      hook: "The memory layer. The whole reason Wrapped is worth opening.",
      body:
        "Every meaningful interaction a BITSian has with another BITSian — hiring, referring, mentoring, attending, partying, travelling, marrying — is captured as a structured event. At year-end, Wrapped renders it as a keepsake.",
      how: [
        "Native life-event post types + one-tap profile actions",
        "Auto-capture from RSVP, job hire, calendar, event check-in",
        "Privacy-first — each event is opt-out per-entry",
        "Wrapped reads from the graph, not from feed heuristics",
      ],
    },
    {
      icon: <Book />,
      name: "Scrapbook, Living Tribute & The Interview",
      kind: "Beyond RFP",
      hook: "A BITSian's life, captured — while they are still here to tell it.",
      body:
        "A profile-level scrapbook of memories — text, images, video — organised into chapters. 'The Interview' is a guided AI conversation that turns a one-hour chat into a keepsake. 'Living Tribute' lets batchmates co-author a tribute during a BITSian's lifetime, not after.",
      how: [
        "Add a memory · one-tap, multi-modal (text/photo/voice)",
        "Memory Movie · AI stitches memories into a shareable reel",
        "The Interview · AI interviewer, structured story capture",
        "Living Tribute · collaborative, invite-only, time-capsule friendly",
      ],
    },
    {
      icon: <Users />,
      name: "Lineage Tree & BITSian Couples",
      kind: "Beyond RFP",
      hook: "The BITS family tree — across batches, generations, and marriages.",
      body:
        "Every BITSian can map their lineage — siblings, parents, cousins, kids — who also went to BITS. BITSian Couples surfaces alumni couples for chapter meetups, reunions, and life-event nudges.",
      how: [
        "Lineage capture from profile, verified by family tags",
        "BITSian Couples directory with opt-in visibility",
        "Cross-batch reunion nudges by family/couple overlap",
        "Anniversary + milestone reminders into Wrapped",
      ],
    },
    {
      icon: <Diamond />,
      name: "Faculty Directory & Faculty Pages",
      kind: "Beyond RFP",
      hook: "Faculty as a first-class citizen of the network, not a footnote.",
      body:
        "A dedicated directory of BITS faculty — current and emeritus — with discipline, research areas, courses, office hours, and alumni they've taught. Each faculty member gets a rich page students and alumni can connect from.",
      how: [
        "Faculty directory filterable by campus, department, era",
        "Faculty page with courses, research, mentees, alumni taught",
        "Student request for office hours / mentorship in one tap",
        "Alumni thank-you wall tied back to Faculty pages",
      ],
    },
    {
      icon: <Globe />,
      name: "BITSian News",
      kind: "Beyond RFP",
      hook: "A curated, editorial news surface — not a random feed.",
      body:
        "Press mentions, podcast features, funding rounds, awards, book launches, media appearances by BITSians — curated into a single branded news surface. Auto-ingested from public sources, editorialised by chapter admins.",
      how: [
        "Automated ingestion from news + podcast feeds",
        "Chapter-admin curation queue, editorial approval",
        "Auto-notify the BITSian + their close network on publish",
        "Weekly digest email + in-app news tab",
      ],
    },
  ];

  return (
    <Section
      id="features"
      eyebrow="New Features"
      title={<>The BITSian Effect, twelve AI moments, and seven more products beyond the RFP — all at no extra cost.</>}
      kicker="The RFP asked for an alumni portal + student app. We're shipping that — plus the BITSian Effect (a live institutional impact engine for the Marketing Head), twelve AI interactions, and seven new surfaces that turn the app into a network utility. Every beyond-RFP feature ships as a goodwill contribution to the BITSian community — bundled into the same fixed fee."
    >
      <div className="flex gap-2 mb-6">
        {[
          { id: "ai", label: "AI Moments · 12" },
          { id: "new", label: "New Products · 8" },
          { id: "wrapped", label: "BITSians Wrapped" },
        ].map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`px-4 py-2 rounded-full text-[13px] font-semibold border transition-colors ${
              tab === t.id
                ? "bg-bits-deep text-white border-bits-deep"
                : "bg-white text-bits-ink border-bits-line hover:border-bits-deep/40"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === "ai" && (
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 fade-in">
          {aiFeatures.map((f, i) => (
            <Card
              key={i}
              className="group hover:border-bits-gold/40 transition-colors"
            >
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-md bg-bits-gold/15 text-bits-goldDeep flex items-center justify-center shrink-0">
                  <Spark width="16" height="16" />
                </div>
                <div>
                  <div className="font-semibold text-bits-ink text-[14.5px]">
                    {f.name}
                  </div>
                  <div className="text-bits-goldDeep text-[12.5px] font-medium mt-0.5 italic">
                    {f.hook}
                  </div>
                  <p className="text-[13px] text-bits-steel mt-2 leading-relaxed">
                    {f.body}
                  </p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {tab === "new" && (
        <div className="fade-in space-y-6">
          {/* Flagship feature — BITSian Effect */}
          {newProducts.filter((p) => p.flagship).map((f, i) => (
            <Card
              key={i}
              className="relative overflow-hidden bg-gradient-to-br from-bits-deep via-bits-navy to-bits-deep text-white border-transparent p-0"
            >
              <div className="absolute -right-40 -top-40 w-[500px] h-[500px] rounded-full bg-bits-gold/20 blur-3xl pointer-events-none" />
              <div className="absolute -left-32 -bottom-32 w-80 h-80 rounded-full bg-bits-gold/10 blur-3xl pointer-events-none" />
              <div className="relative grid lg:grid-cols-12 gap-0">
                <div className="lg:col-span-7 p-8 md:p-10">
                  <div className="flex items-center gap-2 mb-4">
                    <Tag tone="gold">
                      <Flame width="12" height="12" /> Flagship · Beyond RFP · Free
                    </Tag>
                  </div>
                  <h3 className="font-serif text-4xl md:text-5xl leading-[1.05] tracking-tight">
                    BITSian Effect
                  </h3>
                  <div className="text-[13px] font-semibold uppercase tracking-[0.18em] text-bits-gold mt-3">
                    The live impact engine
                  </div>
                  <p className="text-[15px] text-white/85 mt-4 leading-relaxed max-w-xl">
                    {f.hook}
                  </p>
                  <p className="text-[13.5px] text-white/70 mt-4 leading-relaxed max-w-xl">
                    {f.body}
                  </p>
                  <div className="mt-6 pt-6 border-t border-white/15">
                    <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-gold mb-3">
                      How it works
                    </div>
                    <ul className="grid md:grid-cols-2 gap-x-4 gap-y-1.5">
                      {f.how.map((h, j) => (
                        <li
                          key={j}
                          className="flex items-start gap-2 text-[12.5px] text-white/85 leading-relaxed"
                        >
                          <span className="mt-1.5 w-1 h-1 rounded-full bg-bits-gold shrink-0" />
                          <span>{h}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="lg:col-span-5 bg-white/5 border-l border-white/10 p-8 md:p-10 flex flex-col justify-center">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
                    Signal stats — live
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    {[
                      { v: "12.8k", k: "BITSians hired BITSians" },
                      { v: "312", k: "Companies founded (2026)" },
                      { v: "$420M", k: "Capital raised · BITSian-led" },
                      { v: "45k", k: "Mentorship hours logged" },
                      { v: "84", k: "Non-profits started" },
                      { v: "62", k: "Countries represented" },
                    ].map((s, j) => (
                      <div key={j} className="border-t border-white/15 pt-3">
                        <div className="font-serif text-2xl text-bits-gold num leading-none">
                          {s.v}
                        </div>
                        <div className="text-[11.5px] text-white/75 mt-1.5 leading-snug">
                          {s.k}
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="mt-6 text-[11px] text-white/60 italic leading-relaxed">
                    Illustrative. Real numbers populate from the Life Event Graph
                    + public company/funding data.
                  </div>
                </div>
              </div>
            </Card>
          ))}

          {/* Other beyond-RFP products */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {newProducts.filter((p) => !p.flagship).map((f, i) => (
              <Card key={i} className="relative overflow-hidden flex flex-col">
                <div className="flex items-start gap-3 mb-4">
                  <div className="w-11 h-11 rounded-xl bg-bits-deep text-white flex items-center justify-center shrink-0">
                    {f.icon}
                  </div>
                  <div>
                    <Tag tone="gold">{f.kind}</Tag>
                    <h3 className="font-serif text-xl text-bits-ink mt-1.5 leading-tight">
                      {f.name}
                    </h3>
                  </div>
                </div>
                <p className="text-[14px] text-bits-ink leading-relaxed">
                  {f.hook}
                </p>
                <p className="text-[13px] text-bits-steel mt-2 leading-relaxed">
                  {f.body}
                </p>
                <div className="mt-4 pt-4 border-t border-bits-line">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-bits-goldDeep mb-2">
                    How it works
                  </div>
                  <ul className="space-y-1.5">
                    {f.how.map((h, j) => (
                      <Bullet key={j}>{h}</Bullet>
                    ))}
                  </ul>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {tab === "wrapped" && (
        <div className="grid lg:grid-cols-12 gap-6 fade-in">
          <Card className="lg:col-span-7 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent overflow-hidden relative">
            <div className="absolute -right-24 -bottom-20 w-80 h-80 rounded-full bg-bits-gold/20 blur-3xl" />
            <div className="relative">
              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
                <Flame width="14" height="14" /> Your 2026 in BITSian
              </div>
              <h3 className="font-serif text-3xl leading-tight">
                This is what Wrapped renders — not feed likes. Receipts.
              </h3>
              <p className="text-[13.5px] text-white/75 mt-3 leading-relaxed max-w-xl">
                Every card is a concrete interaction the user actually had,
                captured by the Life Event Graph during the year. No
                hallucination, no vibes — just the year you lived inside the
                network.
              </p>

              <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
                {wrappedCards.map((c, i) => (
                  <div
                    key={i}
                    className={`p-3 rounded-xl border ${
                      c.color === "gold"
                        ? "bg-bits-gold/15 border-bits-gold/40"
                        : c.color === "special"
                        ? "bg-white/10 border-white/30"
                        : "bg-white/8 border-white/15"
                    }`}
                  >
                    <div className="text-[10px] uppercase tracking-wider text-white/70">
                      {c.label}
                    </div>
                    <div
                      className={`font-serif text-[28px] leading-none mt-1 num ${
                        c.color === "gold"
                          ? "text-bits-gold"
                          : c.color === "special"
                          ? "text-white"
                          : "text-white"
                      }`}
                    >
                      {c.value}
                    </div>
                    <div className="text-[11.5px] text-white/80 mt-0.5 leading-snug">
                      {c.unit}
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-5 text-[11.5px] text-white/70">
                Real examples from a hypothetical alumni account.
              </div>
            </div>
          </Card>

          <Card className="lg:col-span-5">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3 flex items-center gap-2">
              <Spark width="14" height="14" /> How we capture the data
            </div>
            <h3 className="font-serif text-xl text-bits-ink mb-3 leading-tight">
              Native surfaces, not a diary prompt
            </h3>
            <p className="text-[13px] text-bits-steel leading-relaxed mb-4">
              Wrapped is only good if the underlying events are real. So we
              don't ask users to journal — we build capture into the flows they
              already use.
            </p>
            <div className="space-y-3">
              {captureFlows.map((f, i) => (
                <div
                  key={i}
                  className="p-3 rounded-lg border border-bits-line bg-white"
                >
                  <div className="flex items-start gap-2.5">
                    <span className="mt-1 w-1.5 h-1.5 rounded-full bg-bits-gold shrink-0" />
                    <div>
                      <div className="text-[13px] font-semibold text-bits-ink">
                        {f.name}
                      </div>
                      <p className="text-[12.5px] text-bits-steel leading-relaxed mt-0.5">
                        {f.body}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="lg:col-span-12 bg-bits-cream border-bits-gold/30">
            <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
              <div className="max-w-2xl">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
                  <Heart width="14" height="14" /> Why this matters
                </div>
                <h3 className="font-serif text-2xl text-bits-ink leading-tight">
                  The alumni graph becomes the product.
                </h3>
                <p className="text-[13.5px] text-bits-steel mt-2 leading-relaxed">
                  AlmaConnect is a contact list. LinkedIn is a resume wall.
                  BITSians Wrapped turns the network into a living record of
                  shared experiences — which is the one asset a BITSian can't
                  reproduce anywhere else.
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <Tag tone="gold">
                  <Flag width="12" height="12" /> Ships Oct 1
                </Tag>
                <Tag tone="navy">Privacy-first</Tag>
                <Tag tone="muted">Opt-out per event</Tag>
              </div>
            </div>
          </Card>
        </div>
      )}
    </Section>
  );
};