// b2b-sections.jsx
// Page section components for Stack for Business landing.
// Each is self-contained - App composes them in order.

// ─────────────────────────────────────────────────────────────────────
// CREDIBILITY - stats band between Hero and Problem
// ─────────────────────────────────────────────────────────────────────

function SocialProofSection() {
  const stats = [
  { v: "12K+", k: "Employees benchmarked" },
  { v: "5,000+", k: "Stack consumer users" },
  { v: "200+", k: "Min. team size" },
  { v: "4", k: "Proficiency dimensions" }];


  return (
    <section data-screen-label="01b Credibility" className="tight" style={{
      background: "var(--b2b-bg)",
      borderTop: "1px solid var(--b2b-hair)",
      borderBottom: "1px solid var(--b2b-hair)",
      padding: "48px 0"
    }}>
      <div className="wrap">
        <div className="proof-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1.4fr",
          gap: 48,
          alignItems: "center"
        }}>
          {/* Quote */}
          <div style={{
            display: "flex",
            flexDirection: "column",
            gap: 12,
            paddingRight: 24,
            borderRight: "1px solid var(--b2b-hair)"
          }} className="proof-quote">
            <div className="kicker" style={{ fontSize: 10 }}>From the team behind Stack AIQ</div>
            <div style={{
              fontFamily: "var(--font-sans)",
              fontSize: 16,
              lineHeight: 1.45,
              color: "var(--b2b-body)",
              letterSpacing: "-0.005em"
            }}>
              The same proficiency benchmark used by thousands of individual professionals - now wired into the systems that show leaders <em style={{ fontStyle: "normal", color: "var(--b2b-ink)", fontWeight: 600 }}>which of their employees are ready, which are stuck, and where to act</em>.
            </div>
          </div>

          {/* Stats */}
          <div className="proof-stats" style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 24
          }}>
            {stats.map((s) =>
            <div key={s.k}>
                <div style={{
                fontFamily: "var(--font-display)",
                fontWeight: 500,
                fontSize: "clamp(28px, 3vw, 40px)",
                lineHeight: 0.95,
                letterSpacing: "-0.035em",
                color: "var(--b2b-ink)"
              }}>{s.v}</div>
                <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10.5,
                letterSpacing: ".12em",
                textTransform: "uppercase",
                color: "var(--b2b-meta)",
                marginTop: 8,
                lineHeight: 1.3
              }}>{s.k}</div>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .proof-grid {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
          }
          .proof-quote {
            border-right: none !important;
            padding-right: 0 !important;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--b2b-hair);
          }
        }
        @media (max-width: 520px) {
          .proof-stats {
            grid-template-columns: repeat(2, 1fr) !important;
            row-gap: 28px !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// PROBLEM - "AI transformation is happening. Most companies still can't see it."
// ─────────────────────────────────────────────────────────────────────

const PROBLEMS = [
{
  n: "01",
  h: "Who in your company is actually AI proficient?",
  p: "Without a benchmark, you can't tell who's leveraging AI and who's barely starting."
},
{
  n: "02",
  h: "Which teams are truly adopting AI and which are stuck?",
  p: "Tool access isn't adoption. Token usage ≠ productivity."
},
{
  n: "03",
  h: "Is your AI investment producing real business impact?",
  p: "Token volume isn't value. You can't see whether AI is changing how work gets done."
},
{
  n: "04",
  h: "Where would training and support create the most value?",
  p: "Without department-level insight, enablement is generic, expensive, and unmeasurable."
},
{
  n: "05",
  h: "Can you tell whether a new hire is AI-native?",
  p: "Resumes don't show it and interviews rarely test for it."
}];


function ProblemSection() {
  return (
    <section data-screen-label="02 Problem" style={{ background: "var(--b2b-bg)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="kicker accent">5 questions every leader should be able to answer</span>
        </div>
        <h2 className="h-section" style={{ maxWidth: 920 }}>
          Can you answer these about<br />
          your own workforce?
        </h2>
        <p className="lede" style={{ maxWidth: 720, marginTop: 24, color: "var(--b2b-meta)" }}>
          AI transformation is already happening inside your company. Most leadership teams can't yet see it clearly.
          If any of these questions don't have a confident answer, you're operating in the dark.
        </p>

        <div style={{
          marginTop: 56,
          border: "1px solid var(--b2b-hair)",
          borderRadius: 14,
          overflow: "hidden",
          background: "var(--b2b-surface)"
        }}>
          {PROBLEMS.map((p, i) =>
          <div key={p.n} className="problem-row" style={{
            display: "grid",
            gridTemplateColumns: "72px 1fr",
            gap: 28,
            alignItems: "baseline",
            padding: "28px 36px",
            borderBottom: i < PROBLEMS.length - 1 ? "1px solid var(--b2b-hair)" : "none"
          }}>
              <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              letterSpacing: ".14em",
              color: "var(--b2b-accent-deep)",
              fontWeight: 600,
              lineHeight: 1
            }}>{p.n}</div>
              <div style={{ minWidth: 0 }}>
                <div className="problem-q" style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 600,
                fontSize: 22,
                lineHeight: 1.25,
                letterSpacing: "-0.018em",
                color: "var(--b2b-ink)",
                textWrap: "balance"
              }}>{p.h}</div>
                <div className="problem-a body" style={{
                fontSize: 15,
                lineHeight: 1.5,
                color: "var(--b2b-meta)",
                marginTop: 8,
                textWrap: "pretty"
              }}>{p.p}</div>
              </div>
            </div>
          )}
        </div>

        <style>{`
          @media (max-width: 880px) {
            .problem-row {
              grid-template-columns: 56px 1fr !important;
              gap: 16px !important;
              padding: 24px 22px !important;
            }
          }
          @media (max-width: 640px) {
            .problem-row {
              padding: 22px 20px !important;
              gap: 14px !important;
              grid-template-columns: 44px 1fr !important;
            }
            .problem-q {
              font-size: 17px !important;
              line-height: 1.25 !important;
              letter-spacing: -0.012em !important;
            }
            .problem-a {
              font-size: 14px !important;
              line-height: 1.45 !important;
              margin-top: 6px !important;
            }
          }
        `}</style>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// SOLUTION - narrative intro before the product visual
// ─────────────────────────────────────────────────────────────────────

function SolutionSection() {
  return (
    <section data-screen-label="03 Solution" style={{ background: "#EFE9DD", color: "var(--b2b-ink)", padding: "120px 0", borderTop: "1px solid #E4DECF", borderBottom: "1px solid #E4DECF" }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, margin: "0 auto 56px", textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            <span className="dot" />
            <span className="kicker accent">How it works</span>
          </div>
          <h2 className="h-section">
            Turn AI usage into workforce intelligence.
          </h2>
          <p className="lede" style={{ color: "var(--b2b-body)", marginTop: 24 }}>
            Stack combines AIQ assessments, real AI usage data, and workforce signals to show which teams are AI-native, where skills are missing, and what actions will drive measurable business impact.
          </p>
        </div>

        <div style={{ display: "flex", justifyContent: "center" }}>
          <PlatformDiagram />
        </div>
      </div>
    </section>);

}

// Visualization: data convergence diagram
// Three data sources flow into an enrichment node, which fans out into three actions.
// Animated: data packets travel each path, source cards pulse, enrichment receives + emits.

// Mini dot-grid heatmap inside the AIQ Intelligence card.
// Each dot = a team/role mapped to an AI-readiness band.
// Deterministic - same render every paint so it reads like real data.
function IntelligenceDotGrid() {
  const COLS = 12,ROWS = 5;
  const TOTAL = COLS * ROWS;
  // Deterministic pseudo-random 0..1 per cell
  const v = (i) => {
    const x = Math.sin(i * 13.37 + 4.2) * 10000;
    return x - Math.floor(x);
  };
  return (
    <div style={{ marginTop: 14 }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: `repeat(${COLS}, 1fr)`,
        gap: 3
      }}>
        {Array.from({ length: TOTAL }).map((_, i) => {
          const r = v(i);
          // ~35% bright accent, ~30% mid, rest dim neutral
          const isAccent = r > 0.65;
          const isMid = !isAccent && r > 0.35;
          const bg = isAccent ?
          `rgba(243,126,77,${0.45 + r * 0.45})` :
          isMid ?
          `rgba(250,250,247,${0.22 + r * 0.18})` :
          `rgba(250,250,247,${0.06 + r * 0.06})`;
          return (
            <div key={i} style={{
              width: "100%",
              aspectRatio: "1",
              borderRadius: 2,
              background: bg
            }} />);

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

}

function PlatformDiagram() {
  // SVG viewBox space - % positions reference this so the layout scales fluidly
  const W = 760,H = 520;
  const CARD_W = 188,CARD_H = 88;
  const HEADER_H = 32;
  const Y_TOP = HEADER_H + 24; // 56
  const Y_MID = Y_TOP + CARD_H + 70; // 214
  const Y_BOT = Y_MID + CARD_H + 70; // 372
  const SRC_X = 0;
  const ACT_X = W - CARD_W; // 572
  const ENR_W = 184;
  const ENR_X = (W - ENR_W) / 2; // 288
  const ENR_H = 260;
  const ENR_Y = (Y_TOP + Y_BOT + CARD_H - ENR_H) / 2; // centers between source range
  const enrMidY = ENR_Y + ENR_H / 2;

  const srcRight = SRC_X + CARD_W;
  const enrLeft = ENR_X;
  const enrRight = ENR_X + ENR_W;
  const actLeft = ACT_X;

  const curveIn = (sy) => {
    const mx = (srcRight + enrLeft) / 2;
    return `M ${srcRight} ${sy} C ${mx} ${sy}, ${mx} ${enrMidY}, ${enrLeft} ${enrMidY}`;
  };
  const curveOut = (ty) => {
    const mx = (enrRight + actLeft) / 2;
    return `M ${enrRight} ${enrMidY} C ${mx} ${enrMidY}, ${mx} ${ty}, ${actLeft} ${ty}`;
  };

  const rowYs = [Y_TOP, Y_MID, Y_BOT];
  const inPaths = rowYs.map((y) => curveIn(y + CARD_H / 2));
  const outPaths = rowYs.map((y) => curveOut(y + CARD_H / 2));

  const sources = [
  { y: Y_TOP, label: "Assessment", desc: "AIQ benchmark across core AI fluency, workflow, judgment, and output quality.", delay: "0s" },
  { y: Y_MID, label: "AI Usage", desc: "Signals from Claude, OpenAI, Cursor, Copilot, and other AI tools.", delay: "0.8s" },
  { y: Y_BOT, label: "Workforce", desc: "Role, department, seniority, location, HRIS, LMS, and performance context.", delay: "1.6s" }];

  const actions = [
  { y: Y_TOP, label: "Personalized upskilling", desc: "Custom upskilling by skill gap. Based on role, team, and impact." },
  { y: Y_MID, label: "Improve output quality", desc: "Identify weak prompting patterns, hallucination risk, and low-quality AI workflows." },
  { y: Y_BOT, label: "Optimize AI spend", desc: "Reduce wasted tokens while protecting speed and output quality." }];


  // Convert px to % of the W×H reference frame
  const px = (v) => v / W * 100 + "%";
  const py = (v) => v / H * 100 + "%";

  const StageHeader = ({ label, n }) =>
  <div style={{
    display: "flex",
    alignItems: "center",
    gap: 8,
    height: HEADER_H,
    fontFamily: "var(--font-mono)",
    fontSize: 10.5,
    letterSpacing: ".18em",
    textTransform: "uppercase",
    color: "var(--b2b-meta)",
    fontWeight: 600
  }}>
      <span style={{ color: "var(--b2b-accent-deep)" }}>0{n}</span>
      <span>{label}</span>
    </div>;


  return (
    <>
      {/* Local styles for pulses + reduced-motion respect */}
      <style>{`
        @keyframes platformPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(235,101,43,0.45); }
          50%      { box-shadow: 0 0 0 7px rgba(235,101,43,0); }
        }
        .platform-pulse-dot {
          width: 6px; height: 6px; border-radius: 99px;
          background: var(--b2b-accent);
          flex-shrink: 0;
          animation: platformPulse 2.4s ease-out infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          .platform-pulse-dot { animation: none; }
          .platform-flow-anim { display: none; }
        }
      `}</style>

      {/* DESKTOP - absolute-positioned flow diagram */}
      <div className="platform-diagram-flow" style={{
        position: "relative",
        width: "100%",
        maxWidth: 880,
        aspectRatio: `${W} / ${H}`,
        marginLeft: "auto",
        marginRight: "auto",
        fontFamily: "var(--font-sans)"
      }}>
      <svg
          width="100%"
          height="100%"
          viewBox={`0 0 ${W} ${H}`}
          preserveAspectRatio="none"
          style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
          
        <defs>
          <linearGradient id="flow-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="rgba(11,11,12,0.16)" />
            <stop offset="100%" stopColor="var(--b2b-accent)" />
          </linearGradient>
          <radialGradient id="flow-packet" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor="#FFD9C0" />
            <stop offset="45%" stopColor="var(--b2b-accent)" />
            <stop offset="100%" stopColor="rgba(235,101,43,0)" />
          </radialGradient>
        </defs>

        {/* Base + animated traveling packets per path - sources → enrichment */}
        <g className="platform-flow-anim">
          {inPaths.map((d, i) =>
            <g key={"in-" + i}>
              <path d={d} stroke="rgba(11,11,12,0.10)" strokeWidth="1.2" fill="none" vectorEffect="non-scaling-stroke" />
              <path d={d} stroke="url(#flow-grad)" strokeWidth="1.5" fill="none" vectorEffect="non-scaling-stroke" />
              <circle r="7" fill="url(#flow-packet)" opacity="0.85">
                <animateMotion dur="3s" repeatCount="indefinite" begin={`-${i * 1}s`} path={d} />
              </circle>
              <circle r="2.6" fill="var(--b2b-accent)">
                <animateMotion dur="3s" repeatCount="indefinite" begin={`-${i * 1}s`} path={d} />
              </circle>
            </g>
            )}
          {/* enrichment → actions */}
          {outPaths.map((d, i) =>
            <g key={"out-" + i}>
              <path d={d} stroke="rgba(11,11,12,0.10)" strokeWidth="1.2" fill="none" vectorEffect="non-scaling-stroke" />
              <path d={d} stroke="url(#flow-grad)" strokeWidth="1.5" fill="none" vectorEffect="non-scaling-stroke" />
              <circle r="7" fill="url(#flow-packet)" opacity="0.85">
                <animateMotion dur="3s" repeatCount="indefinite" begin={`-${1.5 + i * 1}s`} path={d} />
              </circle>
              <circle r="2.6" fill="var(--b2b-accent)">
                <animateMotion dur="3s" repeatCount="indefinite" begin={`-${1.5 + i * 1}s`} path={d} />
              </circle>
            </g>
            )}
        </g>

        {/* Pulsing entry-point ring where flows enter the enrichment node */}
        <g className="platform-flow-anim">
          <circle cx={enrLeft} cy={enrMidY} r="4" fill="none" stroke="var(--b2b-accent)" strokeWidth="1.5" opacity="0.7">
            <animate attributeName="r" values="4;12;4" dur="2s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.7;0;0.7" dur="2s" repeatCount="indefinite" />
          </circle>
        </g>
      </svg>

      {/* Stage headers */}
      {[
        { x: SRC_X, w: CARD_W, n: 1, label: "Data Sources" },
        { x: ENR_X, w: ENR_W, n: 2, label: "AIQ Intelligence Graph" },
        { x: ACT_X, w: CARD_W, n: 3, label: "Action" }].
        map((h) =>
        <div key={h.n} style={{
          position: "absolute",
          left: px(h.x),
          top: 0,
          width: px(h.w)
        }}>
          <StageHeader n={h.n} label={h.label} />
        </div>
        )}

      {/* Source cards (data sources) */}
      {sources.map((s) =>
        <div key={s.label} style={{
          position: "absolute",
          left: px(SRC_X),
          top: py(s.y),
          width: px(CARD_W),
          height: py(CARD_H),
          background: "var(--b2b-surface)",
          border: "1px solid var(--b2b-hair)",
          borderRadius: 12,
          padding: "14px 16px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          gap: 6,
          boxShadow: "0 8px 24px -12px rgba(40,20,5,0.10)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span className="platform-pulse-dot" style={{ animationDelay: s.delay }} />
            <div style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 17,
              letterSpacing: "-0.02em",
              color: "var(--b2b-ink)",
              lineHeight: 1.1
            }}>{s.label}</div>
          </div>
          <div style={{
            fontFamily: "var(--font-sans)",
            fontSize: 12.5,
            lineHeight: 1.4,
            color: "var(--b2b-meta)"
          }}>{s.desc}</div>
        </div>
        )}

      {/* Enrichment node - dark center */}
      <div style={{
          position: "absolute",
          left: px(ENR_X),
          top: py(ENR_Y),
          width: px(ENR_W),
          height: py(ENR_H),
          background: "var(--b2b-ink-dark-bg)",
          color: "#FAFAF7",
          border: "1px solid #2A2620",
          borderRadius: 16,
          padding: "20px 18px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          boxShadow: "0 30px 60px -20px rgba(40,20,5,0.45)"
        }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span className="platform-pulse-dot" style={{ width: 5, height: 5, animationDelay: "0.4s" }} />
            <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: ".16em",
                textTransform: "uppercase",
                color: "var(--b2b-accent)",
                fontWeight: 600
              }}>Stack · live</div>
          </div>
          <div style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 22,
              letterSpacing: "-0.025em",
              lineHeight: 1.12,
              color: "#FAFAF7",
              marginTop: 12
            }}>AIQ Intelligence</div>
          <div style={{
              fontFamily: "var(--font-sans)",
              fontSize: 12,
              lineHeight: 1.42,
              color: "rgba(250,250,247,0.62)",
              marginTop: 8
            }}>Every employee, team, and role mapped by AI readiness, tool usage, skill gaps, and business impact.</div>

          {/* Dot grid - every cell = a person/team/role mapped to readiness */}
          <IntelligenceDotGrid />
        </div>
      </div>

      {/* Action cards (action & recommendations) */}
      {actions.map((a) =>
        <div key={a.label} style={{
          position: "absolute",
          left: px(ACT_X),
          top: py(a.y),
          width: px(CARD_W),
          height: py(CARD_H),
          background: "var(--b2b-surface)",
          border: "1px solid var(--b2b-hair)",
          borderRadius: 12,
          padding: "14px 16px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          gap: 6,
          boxShadow: "0 8px 24px -12px rgba(40,20,5,0.10)",
          borderLeft: "2px solid var(--b2b-accent)"
        }}>
          <div style={{
            fontFamily: "var(--font-display)",
            fontWeight: 500,
            fontSize: 17,
            letterSpacing: "-0.02em",
            color: "var(--b2b-ink)",
            lineHeight: 1.1, width: "186px"
          }}>{a.label}</div>
          <div style={{
            fontFamily: "var(--font-sans)",
            fontSize: 12.5,
            lineHeight: 1.4,
            color: "var(--b2b-meta)"
          }}>{a.desc}</div>
        </div>
        )}
    </div>

    {/* MOBILE - stacked vertical layout (3 stages: sources → enrichment → actions) */}
    <div className="platform-diagram-stack" style={{
        display: "none",
        flexDirection: "column",
        gap: 10,
        width: "100%",
        maxWidth: 420,
        marginLeft: "auto",
        marginRight: "auto",
        fontFamily: "var(--font-sans)"
      }}>
      {/* Stage 1 header */}
      <div style={{
          display: "flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".18em",
          textTransform: "uppercase", color: "var(--b2b-meta)", fontWeight: 600
        }}>
        <span style={{ color: "var(--b2b-accent-deep)" }}>01</span><span>Data Sources</span>
      </div>

      {sources.map((s) =>
        <div key={s.label} style={{
          background: "var(--b2b-surface)",
          border: "1px solid var(--b2b-hair)",
          borderRadius: 12,
          padding: "14px 16px",
          display: "flex", flexDirection: "column", gap: 6,
          boxShadow: "0 6px 18px -10px rgba(40,20,5,0.10)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span className="platform-pulse-dot" style={{ animationDelay: s.delay }} />
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 18,
              letterSpacing: "-0.02em", color: "var(--b2b-ink)", lineHeight: 1.1
            }}>{s.label}</div>
          </div>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.4,
            color: "var(--b2b-meta)"
          }}>{s.desc}</div>
        </div>
        )}

      {/* Connector */}
      <div style={{ display: "flex", justifyContent: "center", padding: "4px 0" }}>
        <svg width="2" height="22" viewBox="0 0 2 22">
          <line x1="1" y1="0" x2="1" y2="22" stroke="var(--b2b-accent)" strokeWidth="1.5" />
        </svg>
      </div>

      {/* Stage 2 header */}
      <div style={{
          display: "flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".18em",
          textTransform: "uppercase", color: "var(--b2b-meta)", fontWeight: 600
        }}>
        <span style={{ color: "var(--b2b-accent-deep)" }}>02</span><span>AIQ Intelligence Graph</span>
      </div>

      {/* Enrichment card */}
      <div style={{
          background: "var(--b2b-ink-dark-bg)",
          color: "#FAFAF7",
          border: "1px solid #2A2620",
          borderRadius: 16,
          padding: "18px 20px",
          boxShadow: "0 20px 40px -16px rgba(40,20,5,0.4)"
        }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span className="platform-pulse-dot" style={{ width: 5, height: 5, animationDelay: "0.4s" }} />
          <div style={{
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".16em",
              textTransform: "uppercase", color: "var(--b2b-accent)", fontWeight: 600
            }}>Stack · live</div>
        </div>
        <div style={{
            fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22,
            letterSpacing: "-0.025em", lineHeight: 1.15, color: "#FAFAF7", marginTop: 8
          }}>AIQ Intelligence</div>
        <div style={{
            fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.45,
            color: "rgba(250,250,247,0.65)", marginTop: 8
          }}>Every employee, team, and role mapped by AI readiness, tool usage, skill gaps, and business impact.</div>
        <IntelligenceDotGrid />
      </div>

      {/* Connector */}
      <div style={{ display: "flex", justifyContent: "center", padding: "4px 0" }}>
        <svg width="2" height="22" viewBox="0 0 2 22">
          <line x1="1" y1="0" x2="1" y2="22" stroke="var(--b2b-accent)" strokeWidth="1.5" />
        </svg>
      </div>

      {/* Stage 3 header */}
      <div style={{
          display: "flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".18em",
          textTransform: "uppercase", color: "var(--b2b-meta)", fontWeight: 600
        }}>
        <span style={{ color: "var(--b2b-accent-deep)" }}>03</span><span>Action</span>
      </div>

      {actions.map((a) =>
        <div key={a.label} style={{
          background: "var(--b2b-surface)",
          border: "1px solid var(--b2b-hair)",
          borderLeft: "2px solid var(--b2b-accent)",
          borderRadius: 12,
          padding: "14px 16px",
          display: "flex", flexDirection: "column", gap: 6,
          boxShadow: "0 6px 18px -10px rgba(40,20,5,0.10)"
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 18,
            letterSpacing: "-0.02em", color: "var(--b2b-ink)", lineHeight: 1.1
          }}>{a.label}</div>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.4,
            color: "var(--b2b-meta)"
          }}>{a.desc}</div>
        </div>
        )}
    </div>
    </>);

}

// ─────────────────────────────────────────────────────────────────────
// PRODUCT VISUAL - the big dashboard showcase
// ─────────────────────────────────────────────────────────────────────

function ProductVisualSection() {
  return (
    <section data-screen-label="04 Product" style={{ background: "var(--b2b-bg)", padding: "120px 0 96px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow">
              <span className="dot" />
              <span className="kicker accent">The platform</span>
            </div>
            <h2 className="h-section">
              One view of workforce&nbsp;AI&nbsp;readiness.
            </h2>
          </div>
        </div>

        <ProductDashboard />
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// INDIVIDUAL VIEWS - drill from rollup to per-person profile + plan
// Matches the rest of the landing: warm bg, surface cards, hair borders,
// brand-only accent (orange + positive green). Header uses the standard
// title-left / lede-right pattern from Product + Tool Usage.
// ─────────────────────────────────────────────────────────────────────

function IndividualsSection() {
  const profiles = [
  {
    name: "A. Mendez",
    role: "Head of Marketing",
    badge: { from: "Competent", to: "Advanced", tone: "rise" },
    archetype: "Content-Operator",
    score: "3.0",
    signals: [
    ["70%", "Active rate"],
    ["93", "Conversations"],
    ["412K", "Monthly tokens"],
    ["Manus AI", "Top tool"]],

    action: "Reduce hallucination patterns"
  },
  {
    name: "P. Shah",
    role: "Engineering manager",
    badge: { from: "Advanced", to: "Exceptional", tone: "peak" },
    archetype: "Operator",
    score: "4.5",
    signals: [
    ["58%", "Active rate"],
    ["69", "Conversations"],
    ["1.2M", "Monthly tokens"],
    ["Claude Code", "Top tool"]],

    action: "Mentor 3 teammates this quarter",
    expanded: {
      strengths: [
      "Tight prompts - high signal-to-token ratio.",
      "Pairs Linear + Slack for fast async iteration."],

      weaknesses: [
      "Rarely uses Project Knowledge - repeats context across chats.",
      "Token spend creeps when iterating in long threads."],

      opportunity: "Update Project Knowledge with the right context files."
    }
  },
  {
    name: "M. Davies",
    role: "Head of Operations",
    badge: { from: null, to: "Advanced", tone: "steady" },
    archetype: "Founder-Builder",
    score: "4.25",
    signals: [
    ["52%", "Active rate"],
    ["61", "Conversations"],
    ["860K", "Monthly tokens"],
    ["Claude Cowork", "Top tool"]],

    action: "Codify prompts into team playbook"
  }];


  return (
    <section data-screen-label="04b Individuals" style={{
      background: "var(--b2b-bg)",
      borderTop: "1px solid var(--b2b-hair)",
      padding: "120px 0"
    }}>
      <div className="wrap">
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          flexWrap: "wrap",
          gap: 24,
          marginBottom: 48
        }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow">
              <span className="dot" />
              <span className="kicker accent">Per-person profiles</span>
            </div>
            <h2 className="h-section">Personalized scoring. 
Tailored upskilling plan.
</h2>
          </div>
          <p className="body" style={{ maxWidth: 380, color: "var(--b2b-meta)" }}>See current AIQ score, usage, activity, and the single next move that will move them forward.

          </p>
        </div>

        <div className="individuals-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 16
        }}>
          {profiles.map((p) => <ProfileCard key={p.name} {...p} />)}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          section[data-screen-label="04b Individuals"] .individuals-grid {
            grid-template-columns: minmax(0, 1fr) !important;
          }
          section[data-screen-label="04b Individuals"] .individuals-grid > .pp-card {
            min-width: 0;
          }
        }
        @media (min-width: 981px) and (max-width: 1180px) {
          section[data-screen-label="04b Individuals"] .individuals-grid {
            grid-template-columns: repeat(2, 1fr) !important;
          }
          section[data-screen-label="04b Individuals"] .individuals-grid > div:nth-child(3) {
            display: none;
          }
        }
        /* Click-to-expand recommendations panel */
        .pp-card--open { z-index: 20; }
        @media (hover: none) {
          .pp-toggle { /* still works on touch */ }
        }
      `}</style>
    </section>);

}

function ProfileCard({ name, role, badge, archetype, score, signals, action, expanded }) {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className={"pp-card" + (expanded ? " pp-card--has-expanded" : "") + (isOpen ? " pp-card--open" : "")} style={{
      position: "relative",
      background: "var(--b2b-surface)",
      border: "1px solid var(--b2b-hair)",
      borderRadius: 16,
      padding: "22px 22px 20px",
      display: "flex",
      flexDirection: "column",
      gap: 20,
      transform: "rotate(-0.6deg)",
      transformOrigin: "center",
      boxShadow: "0 18px 40px -24px rgba(40,20,5,0.22), 0 1px 0 rgba(40,20,5,0.02)"
    }}>
      {/* IDENTITY - role kicker + name */}
      <div>
        <div className="kicker" style={{ marginBottom: 8 }}>{role}</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontWeight: 500,
          fontSize: 24,
          letterSpacing: "-0.025em",
          color: "var(--b2b-ink)",
          lineHeight: 1.1
        }}>{name}</div>
      </div>

      {/* SCORE HERO + signals - promotes the meaningful metric */}
      <div style={{
        borderTop: "1px solid var(--b2b-hair)",
        paddingTop: 18,
        display: "grid",
        gridTemplateColumns: "auto minmax(0, 1fr)",
        gap: 18,
        alignItems: "start"
      }}>
        {/* Score */}
        <div>
          <div style={{
            display: "flex",
            alignItems: "baseline",
            gap: 4
          }}>
            <div style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 44,
              letterSpacing: "-0.04em",
              color: "var(--b2b-ink)",
              lineHeight: 0.95
            }}>{score}</div>
            <div style={{
              fontFamily: "var(--font-sans)",
              fontSize: 14,
              color: "var(--b2b-meta)"
            }}>/ 5</div>
          </div>
          <div className="kicker" style={{ marginTop: 8, fontSize: 9.5 }}>AIQ score</div>
        </div>

        {/* 3 signals - stacked compact column */}
        <div style={{
          display: "flex",
          flexDirection: "column",
          gap: 10,
          paddingLeft: 18,
          borderLeft: "1px solid var(--b2b-hair)"
        }}>
          {signals.map(([v, l]) =>
          <div key={l} style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
              <span className="kicker" style={{ fontSize: 9.5, whiteSpace: "nowrap", flexShrink: 0 }}>{l}</span>
              <span style={{
              fontFamily: "var(--font-sans)",
              fontWeight: 600,
              fontSize: 13.5,
              color: "var(--b2b-ink)",
              letterSpacing: "-0.005em",
              textAlign: "right",
              minWidth: 0,
              overflowWrap: "anywhere"
            }}>{v}</span>
            </div>
          )}
        </div>
      </div>

      {/* Upskilling plan - static in-product footer affordance */}
      <div style={{
        marginTop: 16,
        paddingTop: 14,
        borderTop: "1px solid var(--b2b-hair)",
        display: "flex",
        alignItems: "center",
        gap: 6
      }}>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13.5, color: "var(--b2b-accent-deep)", letterSpacing: "-0.005em", whiteSpace: "nowrap" }}>View upskilling plan</span>
        <span aria-hidden="true" style={{ color: "var(--b2b-accent-deep)", fontSize: 14 }}>→</span>
      </div>
    </div>);

}

function ExpandedBlock({ label, tone, items }) {
  const toneColor = tone === "positive" ? "var(--b2b-positive)" : "var(--b2b-attention)";
  return (
    <div>
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 6,
        marginBottom: 6
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 99,
          background: toneColor,
          display: "inline-block"
        }} />
        <span style={{
          fontFamily: "var(--font-mono)",
          fontSize: 9.5,
          letterSpacing: ".16em",
          textTransform: "uppercase",
          color: "var(--b2b-meta)",
          fontWeight: 600
        }}>{label}</span>
      </div>
      <ul style={{
        margin: 0,
        padding: 0,
        listStyle: "none",
        display: "flex",
        flexDirection: "column",
        gap: 4
      }}>
        {items.map((it, i) =>
        <li key={i} style={{
          fontFamily: "var(--font-sans)",
          fontSize: 12.5,
          lineHeight: 1.45,
          color: "var(--b2b-body)"
        }}>{it}</li>
        )}
      </ul>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────
// TOOL USAGE - zoom into the adoption signal
// ─────────────────────────────────────────────────────────────────────

function ToolUsageSection() {
  return (
    <section data-screen-label="05 Tool usage" style={{ background: "var(--b2b-surface)", borderTop: "1px solid var(--b2b-hair)", borderBottom: "1px solid var(--b2b-hair)", padding: "120px 0" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow">
              <span className="dot" />
              <span className="kicker accent">Tool usage</span>
            </div>
            <h2 className="h-section">
              See which AI tools your workforce actually&nbsp;uses.
            </h2>
          </div>
          <p className="body" style={{ maxWidth: 380, color: "var(--b2b-meta)" }}>
            AI spend is rising and most leaders can't see the ROI. Stack connects tool usage, token spend, and AIQ data so you know which teams are creating value, where costs are leaking, and where to invest next.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1.7fr 1fr",
          gap: 14
        }} className="tool-usage-grid">
          {/* Tool adoption - wide */}
          <div style={{
            background: "var(--b2b-bg)",
            border: "1px solid var(--b2b-hair)",
            borderRadius: 14,
            overflow: "hidden",
            display: "flex",
            flexDirection: "column"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "16px 22px 12px",
              borderBottom: "1px solid var(--b2b-hair)"
            }}>
              <div>
                <div className="kicker" style={{ marginBottom: 4 }}>Tool usage · by employee</div>
                <div style={{
                  fontFamily: "var(--font-sans)",
                  fontWeight: 600,
                  fontSize: 14,
                  color: "var(--b2b-ink)"
                }}>5 tools tracked</div>
              </div>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10.5,
                letterSpacing: ".12em",
                textTransform: "uppercase",
                color: "var(--b2b-meta)"
              }}>Last 30 days</span>
            </div>
            <div style={{ padding: "20px 22px 22px" }}>
              <ToolAdoptionList />
            </div>
          </div>

          {/* Token usage */}
          <div style={{
            background: "var(--b2b-bg)",
            border: "1px solid var(--b2b-hair)",
            borderRadius: 14,
            overflow: "hidden",
            display: "flex",
            flexDirection: "column"
          }}>
            <div style={{
              padding: "16px 22px 12px",
              borderBottom: "1px solid var(--b2b-hair)"
            }}>
              <div className="kicker" style={{ marginBottom: 4 }}>Token usage · monthly</div>
              <div style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 600,
                fontSize: 14,
                color: "var(--b2b-ink)"
              }}>Across 743 employees</div>
            </div>
            <div style={{ padding: "20px 22px 22px", flex: 1 }}>
              <TokenUsageStat />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          section[data-screen-label="05 Tool usage"] .tool-usage-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// ASSESSMENT - what the AIQ Benchmark actually is
// Two-part structure: scenario questions + live AI work
// ─────────────────────────────────────────────────────────────────────

function AssessmentSection() {
  return (
    <section data-screen-label="06 Assessment" style={{
      background: "#EFE9DD",
      borderTop: "1px solid #E4DECF",
      borderBottom: "1px solid #E4DECF",
      padding: "120px 0"
    }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.1fr",
        gap: 72,
        alignItems: "center"
      }}>
        <div>
          <div className="eyebrow">
            <span className="dot" />
            <span className="kicker accent">Inside the AIQ assessment</span>
          </div>
          <h2 className="h-section">
            How do employees really use AI?
          </h2>
          <p className="lede" style={{ marginTop: 28, maxWidth: 540, color: "var(--b2b-body)" }}>
            A 30-minute assessment that combines real-world scenario questions with a live AI workspace - scoring each employee on the four dimensions that separate fluent operators from confused ones, then turning every result into a personalized upskilling plan.
          </p>

          <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {[
            ["Judgment", "Know when to use AI"],
            ["Context", "Brief AI with the inputs that matter"],
            ["Iteration", "Refine until the output is useful"],
            ["Ownership", "Verify and stand behind your work"]].
            map(([h, p]) =>
            <div key={h} style={{
              padding: "16px 18px",
              background: "var(--b2b-surface)",
              border: "1px solid var(--b2b-hair)",
              borderRadius: 12
            }}>
                <div style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 600,
                fontSize: 14.5,
                color: "var(--b2b-ink)",
                letterSpacing: "-0.01em",
                marginBottom: 4
              }}>{h}</div>
                <div style={{
                fontFamily: "var(--font-sans)",
                fontSize: 12.5,
                color: "var(--b2b-meta)",
                lineHeight: 1.45
              }}>{p}</div>
              </div>
            )}
          </div>
        </div>

        <AssessmentVisual />
      </div>

      <style>{`
        @media (max-width: 980px) {
          section[data-screen-label="06 Assessment"] .wrap {
            grid-template-columns: 1fr !important;
            gap: 48px !important;
          }
        }
      `}</style>
    </section>);

}

// Combined visual: assessment result card + personalized upskilling plan
function AssessmentVisual() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "relative", maxWidth: 560, marginLeft: "auto", transform: "rotate(-0.6deg)", transformOrigin: "center" }}>
      <SampleQuestionCard />
      <UpskillResultCard />
    </div>);

}

function UpskillResultCard() {
  const dims = [
  { name: "Judgment", level: 0.85, tag: "Strong" },
  { name: "Context", level: 0.7, tag: "Solid" },
  { name: "Iteration", level: 0.55, tag: "Developing" },
  { name: "Ownership", level: 0.3, tag: "Gap", low: true }];

  return (
    <div style={{
      background: "var(--b2b-surface)",
      border: "1px solid var(--b2b-hair)",
      borderRadius: 16,
      padding: "22px 24px 20px",
      boxShadow: "0 18px 40px -20px rgba(40,20,5,0.18)"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--b2b-meta)", fontWeight: 600 }}>AIQ Benchmark · Result</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--b2b-accent-deep)", fontWeight: 600 }}>Completed</span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, marginBottom: 18, paddingBottom: 16, borderBottom: "1px solid var(--b2b-hair)" }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--b2b-meta)", marginBottom: 6 }}>Revenue Operations</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 18, fontWeight: 600, color: "var(--b2b-ink)", letterSpacing: "-0.01em" }}>A. Mendez</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 3, justifyContent: "flex-end" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 30, fontWeight: 600, color: "var(--b2b-ink)", lineHeight: 1 }}>3.0</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--b2b-meta)" }}>/5</span>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--b2b-meta)", marginTop: 4 }}>AIQ score</div>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
        {dims.map((d) =>
        <div key={d.name} style={{ display: "grid", gridTemplateColumns: "84px 1fr auto", alignItems: "center", gap: 12 }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: d.low ? 600 : 500, color: d.low ? "var(--b2b-accent-deep)" : "var(--b2b-ink)" }}>{d.name}</span>
            <span style={{ height: 6, borderRadius: 99, background: "#EAE5DA", position: "relative", overflow: "hidden" }}>
              <span style={{ position: "absolute", inset: 0, width: d.level * 100 + "%", borderRadius: 99, background: d.low ? "var(--b2b-accent)" : "var(--b2b-ink)" }} />
            </span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: ".1em", textTransform: "uppercase", color: d.low ? "var(--b2b-accent-deep)" : "var(--b2b-meta)", fontWeight: 600, minWidth: 64, textAlign: "right" }}>{d.tag}</span>
          </div>
        )}
      </div>

      {/* Personalized plan - static in-product footer affordance */}
      <div style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: "1px solid var(--b2b-hair)",
        display: "flex",
        alignItems: "center",
        gap: 6
      }}>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13.5, color: "var(--b2b-accent-deep)", letterSpacing: "-0.005em", whiteSpace: "nowrap" }}>View personalized plan</span>
        <span aria-hidden="true" style={{ color: "var(--b2b-accent-deep)", fontSize: 14 }}>→</span>
      </div>
    </div>);

}

function SampleQuestionCard() {
  const options = [
  { label: "Forward the figure to the CFO as-is.", state: "idle" },
  { label: "Cross-check against the source system before sharing.", state: "selected" },
  { label: "Ask ChatGPT to double-check its own answer.", state: "idle" },
  { label: "Send it with a \"per ChatGPT\" caveat.", state: "idle" }];

  return (
    <div style={{
      background: "var(--b2b-surface)",
      border: "1px solid var(--b2b-hair)",
      borderRadius: 16,
      padding: "22px 24px 20px",
      boxShadow: "0 18px 40px -20px rgba(40,20,5,0.18)"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--b2b-meta)", fontWeight: 600 }}>Question 03 / 12</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--b2b-accent-deep)", fontWeight: 600 }}>Sample scenario</span>
      </div>

      <div style={{
        fontFamily: "var(--font-sans)",
        fontSize: 15.5,
        lineHeight: 1.5,
        color: "var(--b2b-ink)",
        fontWeight: 500,
        letterSpacing: "-0.005em"
      }}>
        Your CFO asks for last quarter's revenue during a board prep. You don't have the deck open. ChatGPT returns a confident figure.
      </div>
      <div style={{
        fontFamily: "var(--font-sans)",
        fontSize: 13,
        color: "var(--b2b-meta)",
        marginTop: 8,
        marginBottom: 16,
        fontStyle: "italic"
      }}>What's your next move?</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {options.map((o, i) => {
          const sel = o.state === "selected";
          return (
            <div key={i} style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              padding: "11px 14px",
              border: "1px solid " + (sel ? "var(--b2b-ink)" : "var(--b2b-hair)"),
              borderRadius: 10,
              background: "var(--b2b-surface)",
              fontFamily: "var(--font-sans)",
              fontSize: 13.5,
              color: "var(--b2b-ink)",
              fontWeight: sel ? 500 : 400
            }}>
              <span style={{
                flexShrink: 0,
                width: 16, height: 16, borderRadius: 99,
                border: "1.5px solid " + (sel ? "var(--b2b-ink)" : "var(--b2b-hair-strong)"),
                display: "inline-flex", alignItems: "center", justifyContent: "center"
              }}>
                {sel && <span style={{ width: 7, height: 7, borderRadius: 99, background: "var(--b2b-ink)" }} />}
              </span>
              {o.label}
            </div>
          );
        })}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────
// PILLARS - six product capabilities
// ─────────────────────────────────────────────────────────────────────

const PILLARS = [
{
  n: "01",
  h: "Benchmark AI proficiency",
  p: "Use the AIQ Benchmark to measure how employees actually work with AI - across mindset, capability, workflow adoption, and responsible judgment."
},
{
  n: "02",
  h: "Monitor AI adoption",
  p: "Combine assessment results with AI usage data from Claude, OpenAI, Cursor, and workplace systems to see adoption patterns across teams."
},
{
  n: "03",
  h: "Identify AI champions",
  p: "Find the employees already ahead. Highlight them, support them, and turn them into internal champions who accelerate change from the ground up."
},
{
  n: "04",
  h: "Detect skill gaps by department",
  p: "See which departments are ready, which need support, and where targeted enablement creates the most value."
},
{
  n: "05",
  h: "Build and deploy action plans",
  p: "Turn insight into action: training paths, workshops, team-level enablement, internal champion programs, and hiring benchmarks."
},
{
  n: "06",
  h: "Improve continuously",
  p: "Track progress over time. Measure whether teams are improving, whether usage is becoming more valuable, and whether the organization is becoming more AI-native."
}];


function PillarsSection() {
  return (
    <section data-screen-label="07 Pillars" style={{ background: "var(--b2b-surface)", borderTop: "1px solid var(--b2b-hair)", borderBottom: "1px solid var(--b2b-hair)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="kicker accent">Core product pillars</span>
        </div>
        <h2 className="h-section" style={{ maxWidth: 760 }}>
          From measurement to action - in one platform.
        </h2>

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--b2b-hair)"
        }}>
          {PILLARS.map((p, i) => {
            const col = i % 3;
            return (
              <div key={p.n} style={{
                padding: "32px 28px 36px",
                borderRight: col < 2 ? "1px solid var(--b2b-hair)" : "none",
                borderBottom: i < PILLARS.length - 3 ? "1px solid var(--b2b-hair)" : "none",
                display: "flex",
                flexDirection: "column",
                gap: 14
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    letterSpacing: ".14em",
                    color: "var(--b2b-accent-deep)",
                    fontWeight: 600
                  }}>{p.n}</span>
                  <span style={{ flex: 1, height: 1, background: "var(--b2b-hair)" }} />
                </div>
                <div style={{
                  fontFamily: "var(--font-sans)",
                  fontWeight: 600,
                  fontSize: 20,
                  lineHeight: 1.2,
                  letterSpacing: "-0.018em",
                  color: "var(--b2b-ink)",
                  marginTop: 2
                }}>{p.h}</div>
                <div className="body" style={{ fontSize: 14.5, color: "var(--b2b-meta)" }}>{p.p}</div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// USE CASES - recast as 4 personas to differentiate from Pillars
// (Pillars = product capabilities. Personas = role-based jobs.)
// ─────────────────────────────────────────────────────────────────────

const PERSONAS = [
{
  role: "CHRO",
  title: "Chief People Officer",
  job: "Make people decisions with AI-era data.",
  bullets: [
  "See workforce AI readiness by department",
  "Identify champions and growth paths",
  "Show measurable progress to the CEO"]

},
{
  role: "COO",
  title: "Chief Operating Officer",
  job: "Turn AI investment into measurable productivity.",
  bullets: [
  "Track adoption vs. proficiency by team",
  "See where AI is - and isn't - creating leverage",
  "Tie token spend to operational outcomes"]

},
{
  role: "CLO",
  title: "Chief Learning Officer",
  job: "Stop running generic AI training. Target the gaps that matter.",
  bullets: [
  "Detect skill gaps department by department",
  "Deploy targeted enablement plans",
  "Measure pre / post training movement"]

},
{
  role: "TRANSFORMATION",
  title: "Transformation Lead",
  job: "Lead AI rollout with conviction, not anecdotes.",
  bullets: [
  "Baseline today, benchmark every quarter",
  "Find champions to lead change internally",
  "Report board-ready transformation metrics"]

}];


function UseCasesSection() {
  return (
    <section data-screen-label="08 Use Cases" style={{ background: "var(--b2b-bg)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <div>
            <div className="eyebrow">
              <span className="dot" />
              <span className="kicker accent">For every seat at the table</span>
            </div>
            <h2 className="h-section" style={{ maxWidth: 720 }}>
              Built for the executives leading the change.
            </h2>
          </div>
          <p className="body" style={{ maxWidth: 380, color: "var(--b2b-meta)" }}>
            One platform, four different views - each tuned to the decisions a specific role has to make this quarter.
          </p>
        </div>

        <div className="personas-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 14
        }}>
          {PERSONAS.map((p) =>
          <div key={p.role} style={{
            background: "var(--b2b-surface)",
            border: "1px solid var(--b2b-hair)",
            borderRadius: 16,
            padding: "28px 28px 26px",
            display: "grid",
            gridTemplateColumns: "auto 1fr",
            gap: 24,
            alignItems: "start"
          }}>
              {/* Role badge */}
              <div style={{
              width: 84,
              height: 84,
              borderRadius: 14,
              background: "var(--b2b-bg)",
              border: "1px solid var(--b2b-hair)",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              gap: 6,
              flexShrink: 0
            }}>
                <span style={{
                fontFamily: "var(--font-display)",
                fontWeight: 500,
                fontSize: 22,
                letterSpacing: "-0.025em",
                color: "var(--b2b-accent-deep)",
                lineHeight: 1
              }}>{p.role.length <= 4 ? p.role : p.role[0] + p.role[1]}</span>
                <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 9,
                letterSpacing: ".14em",
                textTransform: "uppercase",
                color: "var(--b2b-meta)"
              }}>For</span>
              </div>

              <div>
                <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10.5,
                letterSpacing: ".14em",
                textTransform: "uppercase",
                color: "var(--b2b-meta)",
                fontWeight: 600,
                marginBottom: 6
              }}>{p.title}</div>
                <div style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 600,
                fontSize: 18,
                lineHeight: 1.25,
                letterSpacing: "-0.018em",
                color: "var(--b2b-ink)",
                marginBottom: 14,
                textWrap: "balance"
              }}>{p.job}</div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.bullets.map((b) =>
                <li key={b} style={{
                  display: "flex",
                  alignItems: "baseline",
                  gap: 10,
                  fontFamily: "var(--font-sans)",
                  fontSize: 14,
                  color: "var(--b2b-body)",
                  lineHeight: 1.45
                }}>
                      <span style={{ width: 10, height: 1.5, background: "var(--b2b-accent)", flexShrink: 0, borderRadius: 1, position: "relative", top: -3 }} />
                      {b}
                    </li>
                )}
                </ul>
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .personas-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// HOW IT WORKS - 4-step flow
// ─────────────────────────────────────────────────────────────────────

const STEPS = [
{ n: "01", h: "Assess", p: "Employees complete the AIQ Benchmark to establish a baseline for AI proficiency." },
{ n: "02", h: "Connect", p: "Stack combines AIQ results with relevant AI usage data and workforce signals." },
{ n: "03", h: "Analyze", p: "Leaders get a clear view of company-wide readiness, department gaps, adoption trends, and internal champions." },
{ n: "04", h: "Improve", p: "Stack recommends targeted action plans to help every team improve continuously." }];


function HowItWorksSection() {
  return (
    <section data-screen-label="09 How it works" style={{ background: "var(--b2b-surface)", borderTop: "1px solid var(--b2b-hair)", borderBottom: "1px solid var(--b2b-hair)" }}>
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="kicker accent">How it works</span>
        </div>
        <h2 className="h-section" style={{ maxWidth: 720 }}>
          A clear path from baseline to&nbsp;continuous&nbsp;improvement.
        </h2>

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          position: "relative"
        }}>
          {/* connector line */}
          <div style={{
            position: "absolute",
            top: 22,
            left: "12.5%",
            right: "12.5%",
            height: 1,
            background: "var(--b2b-hair)",
            zIndex: 0
          }} />
          {STEPS.map((s, i) =>
          <div key={s.n} style={{ position: "relative", zIndex: 1, paddingRight: i < STEPS.length - 1 ? 0 : 0 }}>
              <div style={{
              width: 44, height: 44, borderRadius: 99,
              background: "var(--b2b-surface)",
              border: "1px solid var(--b2b-hair-strong)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              letterSpacing: ".08em",
              color: "var(--b2b-ink)",
              fontWeight: 600,
              marginBottom: 24
            }}>{s.n}</div>
              <div style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 28,
              letterSpacing: "-0.025em",
              color: "var(--b2b-ink)",
              marginBottom: 10
            }}>{s.h}</div>
              <div className="body" style={{ fontSize: 14.5, color: "var(--b2b-meta)", maxWidth: 240 }}>{s.p}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          section[data-screen-label="09 How it works"] .wrap > div:last-child {
            grid-template-columns: 1fr 1fr !important;
            gap: 36px 24px !important;
          }
          section[data-screen-label="09 How it works"] .wrap > div:last-child > div:first-child + div + div + div ~ div { display: block; }
          /* hide connector line on small screens to avoid bad alignment */
          section[data-screen-label="09 How it works"] .wrap > div:last-child > div[style*="position: absolute"] { display: none; }
        }
        @media (max-width: 520px) {
          section[data-screen-label="09 How it works"] .wrap > div:last-child {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// CONTINUOUS IMPROVEMENT - narrative with a small trend visual
// ─────────────────────────────────────────────────────────────────────

function ContinuousSection() {
  return (
    <section data-screen-label="10 Continuous" style={{ background: "var(--b2b-bg)" }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "1.05fr 1fr",
        gap: 80,
        alignItems: "center"
      }}>
        <div>
          <div className="eyebrow">
            <span className="dot" />
            <span className="kicker accent">Not a one-time program</span>
          </div>
          <h2 className="h-section" style={{ maxWidth: 560 }}>
            AI readiness is a moving&nbsp;target.
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 540, color: "var(--b2b-meta)" }}>
            Stack helps companies continuously measure, improve, and adapt as AI changes how work gets done.
            Re-benchmark each quarter. Track which departments are closing the gap. Show measurable movement to your board.
          </p>
        </div>

        {/* Quarterly trend visual */}
        <div className="card dotgrid" style={{ padding: 0, overflow: "hidden", background: "var(--b2b-surface)" }}>
          <div style={{
            padding: "20px 24px",
            borderBottom: "1px solid var(--b2b-hair)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <div>
              <div className="kicker">Readiness · 4 quarters</div>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: "var(--b2b-ink)", marginTop: 4 }}>
                Acme Inc.
              </div>
            </div>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              color: "var(--b2b-positive)",
              fontWeight: 600
            }}>↑ 19 pts YoY</div>
          </div>
          <ContinuousChart />
        </div>
      </div>
    </section>);

}

function ContinuousChart() {
  const W = 520,H = 220,PL = 36,PR = 24,PT = 18,PB = 36;
  const quarters = ["Q1", "Q2", "Q3", "Q4"];
  const lines = [
  { name: "Product", color: "var(--b2b-accent)", data: [62, 68, 73, 78] },
  { name: "Engineering", color: "var(--b2b-ink)", data: [60, 64, 68, 72] },
  { name: "Sales", color: "#A8A39A", data: [42, 44, 48, 51] }];

  const min = 30,max = 90;
  const x = (i) => PL + i / (quarters.length - 1) * (W - PL - PR);
  const y = (v) => H - PB - (v - min) / (max - min) * (H - PT - PB);

  return (
    <div style={{ padding: "8px 0 0" }}>
      <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: "block" }}>
        {/* Gridlines */}
        {[30, 50, 70, 90].map((v) =>
        <g key={v}>
            <line x1={PL} y1={y(v)} x2={W - PR} y2={y(v)} stroke="var(--b2b-hair)" />
            <text x={PL - 8} y={y(v) + 4} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9.5" fill="var(--b2b-meta)">{v}</text>
          </g>
        )}

        {/* Lines */}
        {lines.map((l) => {
          const d = l.data.map((v, i) => (i === 0 ? "M" : "L") + x(i) + " " + y(v)).join(" ");
          return (
            <g key={l.name}>
              <path d={d} fill="none" stroke={l.color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              {l.data.map((v, i) =>
              <circle key={i} cx={x(i)} cy={y(v)} r={i === l.data.length - 1 ? 4 : 2.5} fill={l.color} />
              )}
              <text
                x={x(l.data.length - 1) + 8}
                y={y(l.data[l.data.length - 1]) + 4}
                fontFamily="var(--font-sans)"
                fontSize="11"
                fontWeight="600"
                fill={l.color}>
                {l.name === "Engineering" ? "Eng" : l.name}</text>
            </g>);

        })}

        {/* X axis */}
        {quarters.map((q, i) =>
        <text key={q} x={x(i)} y={H - 14} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.08em" fill="var(--b2b-meta)">{q}</text>
        )}
      </svg>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────
// INTEGRATIONS - small connector section after Tool Usage
// Honest text-only "logo wall" - no fabricated brand graphics
// ─────────────────────────────────────────────────────────────────────

function IntegrationsSection() {
  const integrations = [
  { name: "Claude", logo: "/assets/b2b/logos/claude.png", logoHeight: 18 },
  { name: "OpenAI", logo: "/assets/b2b/logos/openai.png", logoHeight: 18 },
  { name: "Cursor", logo: "/assets/b2b/logos/cursor.png", logoHeight: 16 },
  { name: "Linear", logo: "/assets/b2b/logos/linear.png", logoHeight: 18 },
  { name: "Notion", logo: "/assets/b2b/logos/notion.png", logoHeight: 18 },
  { name: "GitHub", logo: "/assets/b2b/logos/github.png", logoHeight: 20 },
  { name: "Slack", logo: "/assets/b2b/logos/slack.png", logoHeight: 20 },
  { name: "Perplexity", logo: "/assets/b2b/logos/perplexity.png", logoHeight: 18 },
  { name: "Gemini", logo: "/assets/b2b/logos/gemini.png", logoHeight: 18 },
  { name: "Workday", logo: "/assets/b2b/logos/workday.png", logoHeight: 26 }];


  // Logo card. Renders a real wordmark image when `logo` is provided; otherwise
  // falls back to a monogram+name placeholder.
  const Logo = ({ name, logo, logoHeight, accent }) => {
    if (logo) {
      return (
        <div style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "14px 22px",
          height: 54,
          background: "var(--b2b-surface)",
          border: "1px solid " + (accent ? "rgba(243,126,77,0.25)" : "var(--b2b-hair)"),
          borderRadius: 12,
          minWidth: 140,
          boxSizing: "border-box"
        }}>
          <img
            src={logo}
            alt={name}
            style={{
              height: logoHeight || 16,
              width: "auto",
              display: "block",
              opacity: 0.92
            }} />
          
        </div>);

    }
    const initial = name.charAt(0).toUpperCase();
    return (
      <div style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        padding: "10px 18px 10px 10px",
        height: 54,
        background: "var(--b2b-surface)",
        border: "1px solid " + (accent ? "rgba(243,126,77,0.25)" : "var(--b2b-hair)"),
        borderRadius: 12,
        minWidth: 140,
        boxSizing: "border-box"
      }}>
        <div style={{
          width: 34,
          height: 34,
          borderRadius: 8,
          background: accent ? "var(--b2b-accent-soft)" : "var(--b2b-bg)",
          border: "1px solid " + (accent ? "rgba(243,126,77,0.20)" : "var(--b2b-hair)"),
          display: "grid",
          placeItems: "center",
          fontFamily: "var(--font-display)",
          fontWeight: 500,
          fontSize: 18,
          letterSpacing: "-0.025em",
          color: accent ? "var(--b2b-accent-deep)" : "var(--b2b-ink)",
          lineHeight: 1,
          flexShrink: 0
        }}>{initial}</div>
        <span style={{
          fontFamily: "var(--font-sans)",
          fontWeight: 600,
          fontSize: 14,
          color: "var(--b2b-ink)",
          letterSpacing: "-0.005em"
        }}>{name}</span>
      </div>);

  };

  return (
    <section data-screen-label="06b Integrations" className="tight" style={{
      background: "var(--b2b-bg)",
      borderTop: "1px solid var(--b2b-hair)",
      borderBottom: "1px solid var(--b2b-hair)",
      padding: "72px 0"
    }}>
      <div className="wrap">
        <div className="integrations-grid" style={{
          display: "grid",
          gridTemplateColumns: "320px 1fr",
          gap: 56,
          alignItems: "start"
        }}>
          <div>
            <div className="eyebrow">
              <span className="dot" />
              <span className="kicker accent">Integrations</span>
            </div>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: "clamp(26px, 2.4vw, 34px)",
              letterSpacing: "-0.025em",
              lineHeight: 1.1,
              color: "var(--b2b-ink)",
              margin: 0,
              textWrap: "balance"
            }}>
              Plugs into the systems your workforce already&nbsp;uses.
            </h2>
            <p className="body" style={{ color: "var(--b2b-meta)", marginTop: 16, fontSize: 14.5 }}>
              Connect the AI tools your teams use, the platforms where work gets done, and the HR systems where workforce context lives - so every signal lands in one place. Read-only API access, SSO, and SCIM.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                {integrations.map((t) => <Logo key={t.name} {...t} />)}
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .integrations-grid {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// PRICING - two-offer executive decision section
// ─────────────────────────────────────────────────────────────────

function PriceTick({ accent }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
      stroke={accent ? "var(--b2b-accent-deep)" : "var(--b2b-ink)"}
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, marginTop: 3 }}>
      <path d="M2.5 7.5l2.8 2.8L11.5 4" />
    </svg>);

}

function PricingCard({ recommended, badge, name, price, qualifier, desc, includes, value, cta, onCta }) {
  return (
    <div style={{
      position: "relative",
      background: "var(--b2b-surface)",
      border: recommended ? "1.5px solid var(--b2b-accent)" : "1px solid var(--b2b-hair)",
      borderRadius: 20,
      padding: "36px 34px 34px",
      display: "flex",
      flexDirection: "column",
      boxShadow: recommended ?
      "0 40px 80px -44px rgba(235,101,43,0.30), 0 4px 14px -6px rgba(40,20,5,0.08)" :
      "0 30px 60px -44px rgba(40,20,5,0.18)"
    }}>
      {badge &&
      <span style={{
        position: "absolute",
        top: -12,
        left: 34,
        display: "inline-flex",
        alignItems: "center",
        gap: 7,
        background: "var(--b2b-accent)",
        color: "#fff",
        fontFamily: "var(--font-mono)",
        fontSize: 10,
        letterSpacing: ".1em",
        textTransform: "uppercase",
        fontWeight: 600,
        padding: "6px 12px",
        borderRadius: 999,
        boxShadow: "0 8px 20px -8px rgba(235,101,43,0.55)"
      }}>
          <span style={{ width: 5, height: 5, borderRadius: 99, background: "#fff" }} />
          {badge}
        </span>
      }

      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: ".14em",
        textTransform: "uppercase",
        color: recommended ? "var(--b2b-accent-deep)" : "var(--b2b-meta)",
        fontWeight: 600,
        marginBottom: 16
      }}>{name}</div>

      <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
        <span style={{
          fontFamily: "var(--font-display)",
          fontWeight: 500,
          fontSize: 38,
          letterSpacing: "-0.03em",
          color: "var(--b2b-ink)",
          lineHeight: 1
        }}>{price}</span>
      </div>
      <div style={{
        fontFamily: "var(--font-sans)",
        fontSize: 12.5,
        color: "var(--b2b-meta)",
        marginTop: 8
      }}>{qualifier}</div>

      <p style={{
        fontFamily: "var(--font-sans)",
        fontSize: 14.5,
        lineHeight: 1.5,
        color: "var(--b2b-body)",
        margin: "18px 0 0",
        textWrap: "pretty"
      }}>{desc}</p>

      <div style={{ height: 1, background: "var(--b2b-hair)", margin: "24px 0" }} />

      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
        {includes.map((it, i) =>
        <div key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
            <PriceTick accent={recommended} />
            <span style={{
            fontFamily: "var(--font-sans)",
            fontSize: 13.5,
            lineHeight: 1.4,
            color: "var(--b2b-ink)",
            fontWeight: recommended && i === 0 ? 600 : 400
          }}>{it}</span>
          </div>
        )}
      </div>

      {value &&
      <div style={{
        marginTop: 24,
        background: recommended ? "var(--b2b-accent-soft)" : "#F6F4EE",
        border: "1px solid " + (recommended ? "rgba(235,101,43,0.18)" : "var(--b2b-hair)"),
        borderRadius: 12,
        padding: "14px 16px",
        fontFamily: "var(--font-sans)",
        fontSize: 13,
        lineHeight: 1.5,
        color: "var(--b2b-body)",
        textWrap: "pretty"
      }}>{value}</div>
      }

      <div style={{ marginTop: "auto", paddingTop: 28 }}>
        <button type="button" onClick={onCta} className={recommended ? "btn accent" : "btn ghost"} style={{
          width: "100%",
          justifyContent: "center",
          padding: "14px 20px",
          fontSize: 15
        }}>
          {cta} <span aria-hidden="true" style={{ marginLeft: 4 }}>→</span>
        </button>
      </div>
    </div>);

}

function PricingSection({ onCta }) {
  return (
    <section data-screen-label="10 Pricing" style={{
      background: "var(--b2b-bg)",
      borderTop: "1px solid var(--b2b-hair)",
      padding: "120px 0"
    }}>
      <div className="wrap">
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            <span className="dot" />
            <span className="kicker accent">Pricing</span>
          </div>
          <h2 className="h-section" style={{ textWrap: "balance" }}>
            Start with your AI readiness benchmark. Scale into full workforce intelligence.
          </h2>
          <p className="lede" style={{
            marginTop: 24,
            color: "var(--b2b-meta)",
            maxWidth: 640,
            marginLeft: "auto",
            marginRight: "auto"
          }}>
            Measure who is ready for AI, then connect real usage, token spend, and workforce data to see where AI is creating value.
          </p>
        </div>

        <div className="pricing-grid" style={{
          marginTop: 56,
          maxWidth: 960,
          marginLeft: "auto",
          marginRight: "auto",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 22,
          alignItems: "stretch"
        }}>
          <PricingCard
            name="AIQ Benchmark"
            price="Free"
            qualifier="For the first 100 employees"
            desc="Know who is ready, who needs help, and which teams have the highest potential for AI adoption."
            includes={[
            "AIQ assessment for up to 100 employees",
            "Company AI readiness score",
            "Department-level benchmark",
            "AI proficiency segments",
            "Early AI champion detection",
            "Executive summary report",
            "Recommended next steps"]}
            cta="Learn more"
            onCta={() => onCta('pricing_free')} />

          <PricingCard
            recommended
            badge="Recommended for enterprise teams"
            name="Workforce Intelligence"
            price="Speak with us"
            qualifier="For companies connecting AI usage, spend, and workforce data"
            desc="Control rising AI costs, prove ROI, reduce risk, and scale the AI workflows that are already working."
            includes={[
            "Everything in AIQ Benchmark",
            "AI tool usage visibility",
            "Token and model spend analysis",
            "Department adoption trends",
            "AIQ + usage dashboard",
            "Cost leak detection",
            "Risk and governance signals",
            "Workflow reuse opportunities",
            "Recommended executive actions",
            "Ongoing reporting"]}
            cta="Request a demo"
            onCta={() => onCta('pricing_paid')} />
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          section[data-screen-label="10 Pricing"] .pricing-grid {
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 32px !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// FAQ - close objections before the final CTA
// ─────────────────────────────────────────────────────────────────────

const FAQS = [
{
  cat: "Implementation",
  q: "Who takes the AIQ Benchmark - leaders or every employee?",
  a: "Every employee takes the AIQ Benchmark and gets a personal report with action items to grow their AI skills. Only leaders and approved managers see the aggregated dashboards."
},
{
  cat: "Implementation",
  q: "How long does the AIQ Benchmark take per employee?",
  a: "About 25 minutes - 12 scenario questions plus a short live AI task. Employees can save progress and finish across two sittings."
},
{
  cat: "Outcomes",
  q: "How is this different from an internal AI survey or taskforce?",
  a: "Surveys and taskforces produce self-reported confidence and a one-time strategy doc. The AIQ Benchmark measures observed behavior - what employees actually do with AI in scenario tasks and a live workspace - pairs it with real usage data from your tools, and ships every score with a specific next move. Most teams use Stack to give their taskforce something real to measure against."
},
{
  cat: "Outcomes",
  q: "How do we measure ROI?",
  a: "Stack tracks three lines: workforce readiness (AIQ score movement quarter-over-quarter), tool ROI (output quality vs. token spend), and program ROI (cost-per-band-shift on training and enablement). Each links to dollars or hours so finance can underwrite the investment."
},
{
  cat: "Implementation",
  q: "Which AI tools does Stack connect to?",
  a: "Stack connects to the AI assistants and IDEs your teams already use - Claude, OpenAI, Gemini, Perplexity, and Cursor - plus the platforms where work happens (Notion, Linear, GitHub, Slack) and HR systems like Workday for org context. Connections are read-only, with SSO and SCIM, so usage and spend data flows in automatically."
},
{
  cat: "Pricing",
  q: "How does pricing work?",
  a: "The AIQ Benchmark is free for your first 100 employees. Workforce Intelligence - the usage, spend, risk, and ROI analytics - is priced per company based on your size and the data sources you connect; talk to us for a quote. Executive dashboard access and SSO are included."
}];


function FAQSection({ onCta }) {
  const [openIds, setOpenIds] = React.useState(new Set());

  const toggle = (i) => {
    setOpenIds((prev) => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i);else
      next.add(i);
      return next;
    });
  };

  return (
    <section id="faq" data-screen-label="11 FAQ" style={{
      background: "var(--b2b-surface)",
      borderTop: "1px solid var(--b2b-hair)",
      borderBottom: "1px solid var(--b2b-hair)",
      padding: "120px 0"
    }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, margin: "0 auto 48px", textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            <span className="dot" />
            <span className="kicker accent">FAQ</span>
          </div>
          <h2 className="h-section">
            Common questions from leadership teams.
          </h2>
        </div>

        <div style={{ maxWidth: 820, margin: "0 auto", borderTop: "1px solid var(--b2b-hair)" }}>
          {FAQS.map((f, i) => {
            const open = openIds.has(i);
            return (
              <div key={i} style={{ borderBottom: "1px solid var(--b2b-hair)" }}>
                <button
                  type="button"
                  onClick={() => toggle(i)}
                  aria-expanded={open}
                  aria-controls={`faq-panel-${i}`}
                  style={{
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    gap: 24,
                    padding: "24px 4px",
                    background: "transparent",
                    border: 0,
                    cursor: "pointer",
                    textAlign: "left",
                    color: "var(--b2b-ink)",
                    transition: "color .2s var(--ease-out)"
                  }}
                  onMouseEnter={(e) => {e.currentTarget.style.color = "var(--b2b-accent-deep)";}}
                  onMouseLeave={(e) => {e.currentTarget.style.color = "var(--b2b-ink)";}}>
                  
                  <span style={{
                    fontFamily: "var(--font-sans)",
                    fontWeight: 600,
                    fontSize: 18,
                    letterSpacing: "-0.015em",
                    lineHeight: 1.3,
                    color: "inherit"
                  }}>{f.q}</span>
                  <span aria-hidden="true" style={{
                    width: 32, height: 32,
                    borderRadius: 99,
                    border: "1px solid " + (open ? "var(--b2b-ink)" : "var(--b2b-hair-strong)"),
                    background: open ? "var(--b2b-ink)" : "transparent",
                    color: open ? "#FAFAF7" : "var(--b2b-ink)",
                    display: "grid",
                    placeItems: "center",
                    flexShrink: 0,
                    transition: "transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out)",
                    transform: open ? "rotate(45deg)" : "rotate(0deg)"
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                      <line x1="6" y1="1.5" x2="6" y2="10.5" />
                      <line x1="1.5" y1="6" x2="10.5" y2="6" />
                    </svg>
                  </span>
                </button>

                <div
                  id={`faq-panel-${i}`}
                  role="region"
                  style={{
                    display: "grid",
                    gridTemplateRows: open ? "1fr" : "0fr",
                    transition: "grid-template-rows .35s var(--ease-out)"
                  }}>
                  
                  <div style={{ minHeight: 0, overflow: "hidden" }}>
                    <div style={{
                      paddingBottom: 24,
                      paddingRight: 56,
                      fontFamily: "var(--font-sans)",
                      fontSize: 15.5,
                      lineHeight: 1.6,
                      color: "var(--b2b-meta)",
                      letterSpacing: "-0.005em"
                    }}>{f.a}</div>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function CredibilitySection() {
  // Use neutral monospace stand-in "logos" so we don't fabricate real customer logos.
  const operators = ["LINEAR", "STRIPE", "RAMP", "VERCEL", "ANTHROPIC", "FIGMA"];
  return (
    <section data-screen-label="02 Credibility" className="tight" style={{ background: "var(--b2b-bg)", borderBottom: "1px solid var(--b2b-hair)" }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.6fr",
        gap: 56,
        alignItems: "center"
      }}>
        <div style={{
          fontFamily: "var(--font-sans)",
          fontSize: 14,
          lineHeight: 1.55,
          color: "var(--b2b-meta)",
          maxWidth: 340
        }}>
          Backed by operators and investors from companies shaping the future of work and&nbsp;AI.
        </div>
        <div style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 8,
          rowGap: 14,
          justifyContent: "flex-end"
        }}>
          {operators.map((o) =>
          <div key={o} style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11.5,
            letterSpacing: ".16em",
            color: "var(--b2b-meta)",
            padding: "8px 16px",
            border: "1px solid var(--b2b-hair)",
            borderRadius: 99,
            background: "var(--b2b-surface)"
          }}>{o}</div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          section[data-screen-label="02 Credibility"] .wrap {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
          }
          section[data-screen-label="02 Credibility"] .wrap > div:last-child {
            justify-content: flex-start !important;
          }
        }
      `}</style>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────
// INVESTORS BANNER - slim rolling marquee of company names
// Text wordmarks only (no logo recreations). Lives directly under hero.
// ─────────────────────────────────────────────────────────────────────

function InvestorsBanner() {
  // Logos available in assets/logos are rendered as images; others stay as text wordmarks.
  // Per-logo height tunes optical balance (some PNGs carry internal transparent padding).
  const logoMap = {
    "Fiverr": { src: "/assets/b2b/logos/fiverr.png", h: 20 },
    "Wix": { src: "/assets/b2b/logos/wix.png", h: 24 },
    "Anthropic": { src: "/assets/b2b/logos/anthropic.png", h: 58 },
    "Cursor": { src: "/assets/b2b/logos/cursor.png", h: 22 },
    "Notion": { src: "/assets/b2b/logos/notion.png", h: 26 }
  };
  const names = ["Fiverr", "Wix", "Anthropic", "Cursor", "Notion"];
  // Duplicated once for a seamless -50% scroll loop
  const row = [...names, ...names];

  return (
    <section data-screen-label="01b Investors" style={{
      background: "var(--b2b-bg)",
      padding: "26px 0",
      overflow: "hidden"
    }}>
      <div className="investors-row" style={{
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 36,
        alignItems: "center",
        maxWidth: 1240,
        margin: "0 auto",
        padding: "0 32px"
      }}>
        <div className="kicker" style={{ whiteSpace: "nowrap" }}>
          Backed by investors from
        </div>

        <div className="investors-track" style={{
          position: "relative",
          overflow: "hidden",
          maskImage: "linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%)",
          WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%)"
        }}>
          <div className="investors-strip" style={{
            display: "flex",
            alignItems: "center",
            gap: 56,
            width: "max-content",
            animation: "investors-scroll 38s linear infinite"
          }}>
            {row.map((n, i) =>
            logoMap[n] ?
            <img key={i} src={logoMap[n].src} alt={n} style={{
              height: logoMap[n].h,
              width: "auto",
              objectFit: "contain",
              opacity: 0.62,
              filter: "grayscale(1)"
            }} /> :
            <span key={i} style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 19,
              letterSpacing: "-0.02em",
              color: "var(--b2b-meta)",
              whiteSpace: "nowrap"
            }}>{n}</span>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes investors-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .investors-track:hover .investors-strip { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .investors-strip { animation: none !important; }
        }
        @media (max-width: 720px) {
          .investors-row { grid-template-columns: 1fr !important; gap: 12px !important; }
        }
      `}</style>
    </section>);

}


Object.assign(window, {
  ProblemSection, SolutionSection, ProductVisualSection,
  IndividualsSection, InvestorsBanner,
  ToolUsageSection, AssessmentSection,
  PillarsSection, UseCasesSection, HowItWorksSection,
  ContinuousSection, CredibilitySection,
  SocialProofSection, IntegrationsSection, FAQSection
});