window.SectionCommercials = () => {
  const { Section, Card, Tag, Bullet } = window.BITSUI;
  const { Coins, Check, Flag, Spark } = window.BITSIcons;

  const phases = [
    {
      label: "Gate 1 — Signup",
      window: "This week",
      payment: "15%",
      amount: "$52,500",
      deliverables: [
        "Master services agreement signed",
        "AWS + GitHub org provisioned to BITSAA",
        "Kickoff + program owner alignment",
        "Project board + gate review cadence live",
      ],
    },
    {
      label: "Gate 2 — UI/UX + Architecture sign-off",
      window: "W2 · May 10",
      payment: "15%",
      amount: "$52,500",
      deliverables: [
        "Full UI/UX design system locked",
        "Database schema + API surface signed off",
        "AWS + Terraform infra provisioned",
        "Voice Powered Navigation & Support skeleton live in dev",
      ],
    },
    {
      label: "Gate 3 — MVP launched",
      window: "W10 · Jul 1",
      payment: "30%",
      amount: "$105,000",
      deliverables: [
        "Critical-path RFP live (auth, profile, feed, chat, jobs, events, academics, admin)",
        "iOS + Android in stores",
        "Core Voice Powered Navigation & Support live",
        "BITSian Day ready",
      ],
    },
    {
      label: "Gate 4 — Entire RFP complete",
      window: "W18 · Sep 1",
      payment: "30%",
      amount: "$105,000",
      deliverables: [
        "Parent flows, fees, payroll, HR, fundraising, CMS shipped",
        "AlmaConnect migration fully executed",
        "Razorpay wired for fee + fundraising",
        "Moderation + analytics live in admin",
        "Added features batch (Map, Marketplace, Life Event Graph, AI moments) landed by Oct 1",
      ],
    },
    {
      label: "Gate 5 — Warranty wrap",
      window: "Oct 2026 – Jan 2027",
      payment: "10%",
      amount: "$35,000",
      deliverables: [
        "90-day warranty period on launched scope",
        "Bug fixes + minor polish",
        "Full handover documentation",
      ],
    },
  ];

  const supportModels = [
    {
      name: "Handover & self-serve",
      sub: "Post-warranty option A",
      body:
        "We hand over runbooks + docs + training, BITS IT owns the system. We are available on retainer for emergencies only.",
      cost: "Retainer + hourly",
    },
    {
      name: "Managed service",
      sub: "Post-warranty option B",
      body:
        "We continue running the system: on-call, AWS ops, AI cost management, minor feature work, Phase 2 delivery.",
      cost: "Monthly fee",
    },
    {
      name: "Hybrid",
      sub: "Recommended",
      body:
        "BITS IT owns day-to-day ops, we own AI layer + Phase 2 roadmap. Clear split of responsibility, cost-efficient.",
      cost: "Smaller monthly + milestone",
    },
  ];

  return (
    <Section
      id="commercials"
      eyebrow="Commercials & Engagement"
      title={<>Milestone-based. Clear deliverables. Zero surprises.</>}
      kicker="We invoice on phase completion, not on elapsed time. Each phase below has a crisp set of deliverables that either demo or they don't. If a deliverable slips, the milestone doesn't close, and we eat the cost of catching up."
    >
      <div className="grid lg:grid-cols-12 gap-6">
        <Card className="lg:col-span-12 overflow-hidden">
          <div className="flex items-center justify-between mb-6">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-1 flex items-center gap-2">
                <Coins width="14" height="14" /> Payment schedule
              </div>
              <h3 className="font-serif text-2xl text-bits-ink">
                Five gates, five invoices
              </h3>
            </div>
            <Tag tone="gold">Fixed fee · milestone-linked</Tag>
          </div>

          <div className="grid md:grid-cols-5 gap-3">
            {phases.map((p, i) => (
              <div
                key={i}
                className="relative p-4 rounded-xl border border-bits-line bg-white hover:border-bits-gold/50 transition-colors"
              >
                <div className="absolute -top-2 left-3 bg-bits-deep text-white text-[10px] font-bold uppercase tracking-wider num px-2 py-0.5 rounded">
                  Gate {i + 1}
                </div>
                <div className="mt-2 font-semibold text-bits-ink text-[13.5px] leading-snug">
                  {p.label}
                </div>
                <div className="text-[11.5px] text-bits-steel mt-1">{p.window}</div>
                <div className="font-serif text-3xl text-bits-gold num mt-3 leading-none">
                  {p.payment}
                </div>
                <div className="text-[11px] text-bits-ink font-semibold mt-1 num">
                  {p.amount}
                </div>
                <ul className="mt-3 space-y-1 border-t border-bits-line/60 pt-2.5">
                  {p.deliverables.map((d, j) => (
                    <li
                      key={j}
                      className="flex items-start gap-1.5 text-[11.5px] text-bits-ink/85 leading-snug"
                    >
                      <span className="mt-0.5 text-bits-goldDeep shrink-0">
                        <Check width="11" height="11" />
                      </span>
                      <span>{d}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </Card>

        <Card className="lg:col-span-7 bg-gradient-to-br from-bits-deep to-bits-navy text-white border-transparent">
          <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-gold mb-3">
            <Flag width="14" height="14" /> Total engagement
          </div>
          <div className="grid grid-cols-2 gap-6">
            <div>
              <div className="font-serif text-5xl text-bits-gold num leading-none">
                $350,000
              </div>
              <div className="text-[13px] text-white/80 mt-2 leading-relaxed">
                Fixed project fee, billed across 5 gates.
                <br />
                Covers all engineering, design, voice navigation, data
                migration, and launch for MVP + full RFP + added features.
              </div>
            </div>
            <div className="text-[13px] text-white/85 leading-relaxed space-y-2">
              <div className="flex justify-between border-b border-white/15 pb-1.5">
                <span className="text-white/70">Engagement length</span>
                <span className="font-semibold">22 weeks build + 12 weeks warranty</span>
              </div>
              <div className="flex justify-between border-b border-white/15 pb-1.5">
                <span className="text-white/70">Payment model</span>
                <span className="font-semibold">Milestone-linked</span>
              </div>
              <div className="flex justify-between border-b border-white/15 pb-1.5">
                <span className="text-white/70">IP ownership</span>
                <span className="font-semibold">BITSAA from day one</span>
              </div>
              <div className="flex justify-between border-b border-white/15 pb-1.5">
                <span className="text-white/70">Change requests</span>
                <span className="font-semibold">SOW addendum, flat rate</span>
              </div>
              <div className="flex justify-between">
                <span className="text-white/70">Pass-through costs</span>
                <span className="font-semibold">AWS, AI, APIs at cost</span>
              </div>
            </div>
          </div>
        </Card>

        <Card className="lg:col-span-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            What's included in the fee
          </div>
          <ul className="space-y-1.5">
            <Bullet>All engineering labor (20-engineer AI-augmented team) across 22 weeks</Bullet>
            <Bullet>Full PRD + architecture + design handoff (already complete)</Bullet>
            <Bullet>iOS + Android build + Admin + Web fallback</Bullet>
            <Bullet>AlmaConnect <strong>and Almabase</strong> data migration execution</Bullet>
            <Bullet>AWS Terraform infra across dev / staging / prod, multi-AZ · 99.999% uptime SLA</Bullet>
            <Bullet>OWASP-grade security review + remediation</Bullet>
            <Bullet>Admin training + ops runbooks</Bullet>
            <Bullet>Full documentation handover — Debugging Instructions, FAQs &amp; Feature Guide, Architecture, Database Design, Configuration Instructions</Bullet>
            <Bullet>90-day post-launch warranty</Bullet>
            <Bullet><span className="text-bits-goldDeep font-semibold">Added features (beyond RFP) at no extra cost</span> — Discover Map, Marketplace, Life Event Graph, Wrapped, and all 11 AI moments, as a goodwill contribution to the BITSian community</Bullet>
          </ul>
          <div className="mt-4 pt-4 border-t border-bits-line/60 text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-2">
            Pass-through (at cost)
          </div>
          <ul className="space-y-1.5">
            <Bullet>AWS hosting, Claude API, WhatsApp Business, SMS</Bullet>
            <Bullet>App Store + Play Store developer fees</Bullet>
            <Bullet>Domain + SSL + Razorpay processing</Bullet>
          </ul>
        </Card>

        <Card className="lg:col-span-12">
          <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" /> Post-launch support models
          </div>
          <div className="grid md:grid-cols-3 gap-4">
            {supportModels.map((s, i) => {
              const recommended = s.sub === "Recommended";
              return (
                <div
                  key={i}
                  className={`p-4 rounded-xl border ${
                    recommended
                      ? "bg-bits-cream border-bits-gold"
                      : "bg-white border-bits-line"
                  }`}
                >
                  <div className="flex items-center justify-between gap-2">
                    <Tag tone={recommended ? "gold" : "navy"}>{s.sub}</Tag>
                    <span className="text-[11.5px] text-bits-steel">{s.cost}</span>
                  </div>
                  <div className="font-serif text-xl text-bits-ink mt-2">
                    {s.name}
                  </div>
                  <p className="text-[13px] text-bits-steel mt-2 leading-relaxed">
                    {s.body}
                  </p>
                </div>
              );
            })}
          </div>
        </Card>

      </div>
    </Section>
  );
};