/* global React, Arrow, SectionHead, Check, WhatsAppIcon */

// ============================================================
// Featured product / case study — BIGNMS equivalent
// "How we work" — Method spotlight
// ============================================================
const Method = () => (
  <section className="method-section" style={{ background: "var(--cream-2)" }}>
    <div className="wrap method-wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center" }}>
      <div className="reveal method-copy" style={{ display: "flex", flexDirection: "column", gap: 24, minWidth: 0 }}>
        <span className="eyebrow">THE METHOD — HOW AN ENGAGEMENT FEELS</span>
        <h2 className="h2" style={{ margin: 0 }}>
          A 90-day cadence,<br />
          built around{" "}
          <span style={{ color: "var(--bel-orange)", fontStyle: "italic", fontWeight: 500 }}>
            decisions
          </span>{" "}
          — not deliverables.
        </h2>
        <p className="lead" style={{ margin: 0 }}>
          We replace the 200-slide deck with four crisp decision points. Every two weeks, your leadership team owns the call — we own getting them ready to make it.
        </p>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            { w: "Week 1–2", t: "Diagnostic", d: "We sit with your team, read your contracts, and map what's actually broken." },
            { w: "Week 3–6", t: "Options on the table", d: "Three credible paths, costed, with the trade-offs spelled out — not hidden." },
            { w: "Week 7–10", t: "Pilot in the wild", d: "We stand up the smallest version that proves the answer, not the biggest one that looks impressive." },
            { w: "Week 11–13", t: "Hand-off & playbook", d: "Your team runs it. We document the why, not just the what." },
          ].map((s, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "14px 0", borderTop: "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--bel-blue)", letterSpacing: "0.06em", fontWeight: 600, paddingTop: 2 }}>{s.w}</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 2 }}>{s.t}</div>
                <div style={{ fontSize: 14, color: "var(--ink-soft)" }}>{s.d}</div>
              </div>
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
          <a href="#contact" className="btn btn--primary">
            Scope an engagement
            <span className="arrow"><Arrow size={11} /></span>
          </a>
          <a href="#" className="btn btn--ghost">
            See sample diagnostic
          </a>
        </div>
      </div>

      <MethodVisual />
    </div>

    <style>{`
      /* Mobile fixes for the Method section */
      @media (max-width: 880px) {
        .method-wrap {
          grid-template-columns: 1fr !important;
          gap: 32px !important;
        }
        .method-copy { min-width: 0; }
        .method-copy * { min-width: 0; max-width: 100%; }
        .method-copy h2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1; }
        .method-copy p, .method-copy li { word-break: break-word; overflow-wrap: anywhere; }
        .method-copy li > div:first-child { font-size: 11px !important; }
        .method-copy li > div:last-child > div:first-child { font-size: 16px !important; }
        .method-copy li > div:last-child > div:last-child  { font-size: 13.5px !important; line-height: 1.5; }

        /* Visual — flatten the absolute card so nothing overflows */
        .method-visual {
          aspect-ratio: auto !important;
          max-width: 100% !important;
          width: 100% !important;
          justify-self: stretch !important;
        }
        .method-visual > [aria-hidden="true"] { display: none !important; }
        .method-visual > div:not([aria-hidden]) {
          position: static !important;
          inset: auto !important;
          width: 100% !important;
          padding: 18px !important;
          gap: 14px !important;
        }
        .method-visual h2 + div, .method-visual > div > div:first-child > div span:nth-child(2) {
          font-size: 16px !important;
        }
        /* 3 options grid — keep horizontal but compact */
        .method-visual div[style*="grid-template-columns: 1fr 1fr 1fr"] {
          gap: 8px !important;
        }
        .method-visual div[style*="grid-template-columns: 1fr 1fr 1fr"] > div {
          padding: 10px 8px !important;
          min-width: 0 !important;
        }
        .method-visual div[style*="grid-template-columns: 1fr 1fr 1fr"] > div > span:first-child {
          font-size: 10.5px !important;
          line-height: 1.2 !important;
          word-break: break-word;
        }
        .method-visual div[style*="grid-template-columns: 1fr 1fr 1fr"] > div > span:nth-child(2) {
          font-size: 12.5px !important;
          white-space: nowrap;
        }
        .method-visual div[style*="grid-template-columns: 1fr 1fr 1fr"] > div > span:nth-child(3) {
          font-size: 9px !important;
          padding: 2px 5px !important;
        }
      }
    `}</style>
  </section>
);

const MethodVisual = () => (
  <div className="reveal method-visual" style={{ position: "relative", aspectRatio: "0.92 / 1", maxWidth: 560, justifySelf: "end", width: "100%" }}>
    {/* Background diagonal accent */}
    <div aria-hidden style={{
      position: "absolute", inset: "8% -4% 4% -4%",
      background: "var(--bel-blue)",
      borderRadius: 28,
      transform: "rotate(-2deg)",
    }} />

    {/* Decision card */}
    <div style={{
      position: "absolute", inset: "4% 4% 4% 0",
      background: "var(--paper)",
      borderRadius: 24,
      padding: 28,
      display: "flex", flexDirection: "column", gap: 18,
      boxShadow: "0 32px 70px -28px rgba(120, 69, 233,0.4)",
      border: "1px solid var(--line)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", textTransform: "uppercase" }}>Decision Brief · 03 of 04</span>
          <span style={{ fontWeight: 600, fontSize: 20, letterSpacing: "-0.015em", marginTop: 4 }}>Cloud vendor: AWS or Azure?</span>
        </div>
        <span style={{
          padding: "4px 10px", background: "var(--bel-orange-soft)", color: "var(--bel-orange-deep)",
          fontSize: 11, fontWeight: 600, borderRadius: 999, fontFamily: "var(--font-mono)", letterSpacing: 0.06,
        }}>OPEN · 3 DAYS</span>
      </div>

      <div style={{ height: 1, background: "var(--line-2)" }} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
        {[
          { name: "Option A · AWS-first", tco: "₹4.2 Cr / yr", flag: "fastest", flagColor: "var(--bel-blue)" },
          { name: "Option B · Azure-first", tco: "₹3.8 Cr / yr", flag: "cheapest", flagColor: "var(--bel-orange)" },
          { name: "Option C · Hybrid", tco: "₹4.6 Cr / yr", flag: "safest", flagColor: "#0E7E5B" },
        ].map((o, i) => (
          <div key={i} style={{
            padding: 12,
            borderRadius: 12,
            border: i === 1 ? "1.5px solid var(--bel-orange)" : "1px solid var(--line)",
            background: i === 1 ? "var(--bel-orange-soft)" : "var(--cream)",
            display: "flex", flexDirection: "column", gap: 6,
          }}>
            <span style={{ fontWeight: 600, fontSize: 12.5, lineHeight: 1.25 }}>{o.name}</span>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, letterSpacing: "-0.02em" }}>{o.tco}</span>
            <span style={{
              alignSelf: "flex-start",
              fontSize: 10, fontWeight: 700, letterSpacing: 0.08,
              padding: "3px 7px", borderRadius: 999,
              background: o.flagColor, color: "white",
              fontFamily: "var(--font-mono)", textTransform: "uppercase",
            }}>{o.flag}</span>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ fontSize: 12.5, color: "var(--ink-soft)", fontWeight: 600 }}>Trade-offs spelled out:</div>
        {[
          "Azure-first saves ₹40L/yr but adds 6 weeks to migration.",
          "AWS-first ships in Q1 but locks in Lambda commitments.",
          "Hybrid avoids lock-in; ops cost +18%.",
        ].map((t, i) => (
          <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13.5, color: "var(--ink)" }}>
            <span style={{ color: "var(--bel-blue)", flexShrink: 0, marginTop: 2 }}><Check size={13} /></span>
            <span>{t}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: "auto", paddingTop: 14, borderTop: "1px dashed var(--line)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <span style={{ fontSize: 12, color: "var(--ink-soft)" }}>Prepared by · Anisha M., Lead Advisor</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)" }}>BEL-DB-0234</span>
      </div>
    </div>
  </div>
);

// ============================================================
// Industries grid
// ============================================================
const Industries = () => {
  const list = [
    { name: "Pharmaceuticals", count: 62, hue: "#0B5BD3", kpi: "DPDP-ready", icon: "pharma" },
    { name: "Healthcare", count: 48, hue: "#0E7E5B", kpi: "HIPAA-aligned", icon: "health" },
    { name: "Finance & Banking", count: 31, hue: "#1A1F36", kpi: "RBI / SEBI", icon: "bank" },
    { name: "Oil & Gas", count: 9, hue: "#D35614", kpi: "Critical infra", icon: "oil" },
    { name: "eCommerce", count: 24, hue: "#6A1FCB", kpi: "PCI-DSS", icon: "bag" },
    { name: "Technology & Research", count: 78, hue: "#0B5BD3", kpi: "SOC 2 Type II", icon: "chip" },
    { name: "Manufacturing", count: 37, hue: "#A06B1F", kpi: "OT / SCADA", icon: "factory" },
    { name: "Construction", count: 12, hue: "#3F3F46", kpi: "ERP migration", icon: "hat" },
    { name: "Transportation", count: 18, hue: "#0E7E5B", kpi: "Fleet IoT", icon: "truck" },
    { name: "Cash & Logistics", count: 8, hue: "#B02A30", kpi: "ISO 27001", icon: "cash" },
    { name: "Chemicals", count: 14, hue: "#A06B1F", kpi: "Regulatory", icon: "flask" },
    { name: "Government & Public", count: 21, hue: "#1A1F36", kpi: "MeitY empanelled", icon: "capitol" },
  ];
  return (
    <section id="industries">
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 36 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "end" }}>
          <SectionHead
            eyebrow="INDUSTRIES — WHERE WE&apos;VE EARNED OUR SCARS"
            title={<>Twelve sectors we&apos;ve done <em style={{ fontStyle: "italic", color: "var(--bel-blue)", fontWeight: 500 }}>real&nbsp;work</em> in.</>}
          />
          <p className="lead reveal" style={{ margin: 0, justifySelf: "end", maxWidth: 460 }}>
            Numbers are honest counts — active and former clients we&apos;ve advised in each sector since 2012. Heavy in regulated industries by design.
          </p>
        </div>

        <div className="ind-grid swipe-grid swipe-grid--industries">
          {list.map((it, i) => <IndustryCard key={i} {...it} delay={i * 0.05} />)}
        </div>

        <style>{`
          .ind-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
          }
          @media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
          @media (max-width: 640px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
        `}</style>
      </div>
    </section>
  );
};

const IndustryCard = ({ name, count, hue, kpi, icon, delay }) => (
  <a href="#contact" className="reveal ind-card" style={{
    position: "relative",
    background: "var(--paper)",
    border: "1px solid var(--line)",
    borderRadius: 18,
    padding: "26px 20px",
    display: "flex", flexDirection: "column", gap: 14,
    minHeight: 200,
    overflow: "hidden",
    transitionDelay: `${delay}s`,
    color: "var(--ink)",
    "--hue": hue,
    textAlign: "center",
    alignItems: "center",
    justifyContent: "center",
  }}>
    <span aria-hidden className="ind-accent" style={{
      position: "absolute", top: -36, right: -36,
      width: 120, height: 120, borderRadius: "50%",
      background: `radial-gradient(circle, ${hue}26, transparent 65%)`,
      transition: "transform .4s ease",
    }} />
    <span aria-hidden className="ind-bar" style={{
      position: "absolute", top: 0, left: "50%", transform: "translateX(-50%) scaleX(0)",
      height: 2, width: 60, borderRadius: 2,
      background: hue, opacity: 0.85,
      transformOrigin: "center",
      transition: "transform .4s ease",
    }} />

    <span className="ind-icon" style={{
      width: 80, height: 80, borderRadius: 18,
      background: `${hue}14`,
      color: hue,
      display: "grid", placeItems: "center",
      transition: "transform .35s ease, background .35s ease",
    }}>
      <IndustryIcon name={icon} />
    </span>

    <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "center" }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.015em", lineHeight: 1.2 }}>{name}</span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        <span style={{ width: 4, height: 4, borderRadius: "50%", background: hue }} />{kpi}
      </span>
    </div>

    <style>{`
      .ind-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
      .ind-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--hue) 35%, var(--line)); box-shadow: 0 22px 44px -22px color-mix(in oklab, var(--hue) 40%, transparent); }
      .ind-card:hover .ind-icon { transform: scale(1.06) rotate(-3deg); background: color-mix(in oklab, var(--hue) 18%, white); }
      .ind-card:hover .ind-accent { transform: scale(1.6); }
      .ind-card:hover .ind-bar { transform: translateX(-50%) scaleX(1); }
    `}</style>
  </a>
);

// Animated count-up
const Counter = ({ value }) => {
  const ref = React.useRef(null);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const dur = 900;
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(eased * value));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value]);
  return <span ref={ref}>{n}</span>;
};

const IndustryIcon = ({ name }) => {
  const p = { width: 38, height: 38, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const fill = "color-mix(in oklab, currentColor 16%, transparent)";
  switch (name) {
    case "pharma":  return <svg {...p}><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(-35 12 12)" fill={fill}/><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(-35 12 12)"/></svg>;
    case "health":  return <svg {...p}><circle cx="12" cy="12" r="9" fill={fill}/><path d="M4 12h3l2-4 4 8 2-4h5"/></svg>;
    case "bank":    return <svg {...p}><path d="M3 10l9-5 9 5z" fill={fill}/><path d="M4 11v8h16v-8M3 10h18M8 12v6M12 12v6M16 12v6M3 20h18"/></svg>;
    case "oil":     return <svg {...p}><path d="M12 3c-3 4-5 6.5-5 9.5a5 5 0 0 0 10 0c0-3-2-5.5-5-9.5z" fill={fill}/><path d="M12 3c-3 4-5 6.5-5 9.5a5 5 0 0 0 10 0c0-3-2-5.5-5-9.5z"/></svg>;
    case "bag":     return <svg {...p}><path d="M5 8h14l-1.5 9a2 2 0 0 1-2 1.7h-7a2 2 0 0 1-2-1.7L5 8z" fill={fill}/><path d="M5 8h14l-1.5 9a2 2 0 0 1-2 1.7h-7a2 2 0 0 1-2-1.7L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>;
    case "chip":    return <svg {...p}><rect x="7" y="7" width="10" height="10" rx="1.5" fill={fill}/><rect x="9.5" y="9.5" width="5" height="5"/><path d="M10 7V4M14 7V4M10 20v-3M14 20v-3M7 10H4M7 14H4M20 10h-3M20 14h-3"/></svg>;
    case "factory": return <svg {...p}><path d="M3 20V11l5 3V11l5 3V8l8 5v7H3z" fill={fill}/><path d="M3 20V11l5 3V11l5 3V8l8 5v7H3z"/></svg>;
    case "hat":     return <svg {...p}><path d="M4 16h16v3H4z" fill={fill}/><path d="M6 16V9a6 6 0 0 1 12 0v7"/><path d="M4 16h16v3H4zM12 3v3"/></svg>;
    case "truck":   return <svg {...p}><path d="M2 7h11v9H2z" fill={fill}/><path d="M2 7h11v9H2zM13 10h5l3 3v3h-8"/><circle cx="6.5" cy="17.5" r="1.7" fill="white" stroke="currentColor"/><circle cx="17.5" cy="17.5" r="1.7" fill="white" stroke="currentColor"/></svg>;
    case "cash":    return <svg {...p}><rect x="3" y="7" width="18" height="11" rx="1.5" fill={fill}/><rect x="3" y="7" width="18" height="11" rx="1.5"/><circle cx="12" cy="12.5" r="2.5"/><path d="M6 11v3M18 11v3"/></svg>;
    case "flask":   return <svg {...p}><path d="M10 3v6.5L5 19a2 2 0 0 0 1.7 3h10.6A2 2 0 0 0 19 19l-5-9.5V3" fill={fill}/><path d="M10 3v6.5L5 19a2 2 0 0 0 1.7 3h10.6A2 2 0 0 0 19 19l-5-9.5V3M9 3h6M7 15h10"/></svg>;
    case "capitol": return <svg {...p}><path d="M5 20V9l7-4 7 4v11" fill={fill}/><path d="M5 20V9l7-4 7 4v11M3 20h18M9 20v-6M15 20v-6M5 9h14"/></svg>;
    default: return null;
  }
};


// ============================================================
// Testimonials
// ============================================================
const Testimonials = () => {
  const quotes = [
    {
      quote: "BEL didn't sell us a roadmap. They sat with our team for six weeks and rewrote our cloud strategy from the inside. We cut infra cost 38% in the first year — and more importantly, our engineering team finally agrees with finance.",
      name: "Anisha Mishra",
      role: "Group CTO",
      org: "Genes2Me",
      stat: "−38%",
      statLabel: "infra cost · Year 1",
    },
    {
      quote: "We&apos;d been told we needed to ‘do AI&apos; by three different vendors. The BEL team spent two weeks talking to our pharmacovigilance team and told us we needed better data governance first. They were right. That single re-prioritisation saved us about ₹1.2 Cr.",
      name: "Mohit Singh",
      role: "Director — IT & Digital",
      org: "MacMillan Pharmaceuticals",
      stat: "₹1.2 Cr",
      statLabel: "wasted spend avoided",
    },
    {
      quote: "Their corporate-legal practice quietly rewrote our entire vendor MSA template. Six months later we noticed our procurement cycle had dropped from 11 weeks to 4. That&apos;s the kind of work you don&apos;t see in a pitch deck.",
      name: "Rina Saini",
      role: "VP Operations",
      org: "Onextel Media",
      stat: "11 → 4 wks",
      statLabel: "procurement cycle",
    },
  ];
  const [active, setActive] = React.useState(0);
  const q = quotes[active];

  return (
    <section style={{ background: "var(--bel-blue)", color: "white", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle at 90% 20%, rgba(239,106,31,0.18), transparent 50%), radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08), transparent 40%)",
      }} />
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 36, position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "end" }}>
          <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.85)" }}>CLIENTS — WHAT THEY ACTUALLY SAY</span>
            <h2 className="h2" style={{ margin: 0, color: "white" }}>
              Three quotes, three numbers,<br />
              <span style={{ color: "rgba(255,255,255,0.65)", fontWeight: 400 }}>and a real name beside each one.</span>
            </h2>
          </div>
          <div className="reveal" style={{ display: "flex", gap: 8, justifySelf: "end", alignItems: "center" }}>
            <button onClick={() => setActive((active - 1 + quotes.length) % quotes.length)}
              aria-label="Previous"
              style={{ width: 44, height: 44, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.3)", color: "white", display: "grid", placeItems: "center" }}>
              <Arrow size={14} className="rot" />
              <style>{`.rot { transform: rotate(180deg); }`}</style>
            </button>
            <button onClick={() => setActive((active + 1) % quotes.length)}
              aria-label="Next"
              style={{
                width: 44, height: 44, borderRadius: "50%",
                background: "linear-gradient(135deg, #FFB678 0%, #FF8A3D 100%)",
                color: "white", display: "grid", placeItems: "center",
                boxShadow: "0 10px 24px -8px rgba(255,138,61,0.55)",
              }}>
              <Arrow size={14} />
            </button>
          </div>
        </div>

        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 36, alignItems: "stretch" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
            <span style={{
              fontFamily: "var(--font-display)", fontSize: 96, fontWeight: 600,
              background: "linear-gradient(135deg, #FFE9C7 0%, #FFB678 35%, #FF8A3D 100%)",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              color: "transparent",
              lineHeight: 0.6, marginBottom: -32,
            }}>“</span>
            <p className="h3" style={{ margin: 0, color: "white", fontWeight: 500, fontFamily: "var(--font-display)", letterSpacing: "-0.015em", lineHeight: 1.32 }}>
              {q.quote.replace(/&apos;/g, "'")}
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.2)" }}>
              <div style={{
                width: 48, height: 48, borderRadius: "50%",
                background: "linear-gradient(135deg, #FFB678 0%, #FF8A3D 100%)",
                color: "white", display: "grid", placeItems: "center",
                fontWeight: 700, fontFamily: "var(--font-display)", fontSize: 18,
                boxShadow: "0 8px 20px -6px rgba(255,138,61,0.5)",
              }}>
                {q.name.split(" ").map(w => w[0]).join("")}
              </div>
              <div>
                <div style={{ fontWeight: 600 }}>{q.name}</div>
                <div style={{ fontSize: 13.5, opacity: 0.8 }}>{q.role} · {q.org}</div>
              </div>
            </div>
          </div>

          <div style={{
            background: "rgba(255,255,255,0.08)",
            border: "1px solid rgba(255,255,255,0.22)",
            borderRadius: 22,
            padding: 28,
            display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24,
            backdropFilter: "blur(20px)",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
          }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", opacity: 0.75, textTransform: "uppercase" }}>The outcome</div>
            <div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 72, fontWeight: 700,
                letterSpacing: "-0.04em", lineHeight: 1,
                background: "linear-gradient(135deg, #FFE9C7 0%, #FFB678 35%, #FF8A3D 100%)",
                WebkitBackgroundClip: "text",
                backgroundClip: "text",
                color: "transparent",
                textShadow: "0 2px 16px rgba(255,138,61,0.25)",
              }}>{q.stat}</div>
              <div style={{ marginTop: 8, fontSize: 14, color: "rgba(255,255,255,0.78)", maxWidth: 220 }}>{q.statLabel}</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              {quotes.map((_, i) => (
                <span key={i} style={{
                  width: i === active ? 28 : 8, height: 8, borderRadius: 4,
                  background: i === active
                    ? "linear-gradient(90deg, #FFB678, #FF8A3D)"
                    : "rgba(255,255,255,0.3)",
                  transition: "all .3s",
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Method, Industries, Testimonials });
