// Quality & Parts section — ported from the Claude Design handoff
// (Quality & Parts v2.html). Two scroll-gated, animated panels:
//   01 — Pre-shipment QA  : EV silhouette + 6 inspection points + scan
//                           beam + software/localization step + diagnostic
//                           log + PASS stamp on a loop.
//   02 — China-to-door parts : 4-station rail with packages flying along,
//                              air-freight arc, day counter, "JUST
//                              SHIPPED" SKU ticker.
//
// Two mechanical adaptations from the design source:
//   - React hooks aliased to QP-prefixed names (the SPA loads all babel
//     files into one shared scope; useState/useEffect would collide).
//   - All file-local data + helper components prefixed QP_ for the same
//     reason.
// Visual output is identical to the design HTML.

const {
  useState: useStateQ,
  useEffect: useEffectQ,
  useRef: useRefQ,
  useMemo: useMemoQ,
} = React;

// ─── Hooks ──────────────────────────────────────────────────────────────────

// Fires once when ref enters viewport at given threshold. Disconnects after.
function useInViewQP(ref, threshold) {
  const [inView, setInView] = useStateQ(false);
  useEffectQ(() => {
    if (!ref.current || inView) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) { setInView(true); obs.disconnect(); }
      },
      { threshold: threshold == null ? 0.2 : threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [inView, threshold]);
  return inView;
}

// Animated count-up, gated on `trigger` going truthy.
function useCountUpQP(target, ms, trigger) {
  const [v, setV] = useStateQ(0);
  useEffectQ(() => {
    if (!trigger) return;
    let raf, t0 = performance.now();
    const loop = (now) => {
      const t = Math.min(1, (now - t0) / ms);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(target * eased);
      if (t < 1) raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [target, ms, trigger]);
  return v;
}

// ─── Section 01 data ────────────────────────────────────────────────────────

const QP_INSPECTION_POINTS = [
  { id: 1, x: 150, y: 168, k: "Drivetrain",  label: "Rear suspension & brakes" },
  { id: 2, x: 95,  y: 150, k: "Body",         label: "Trunk, tail lights, rear sensors" },
  { id: 3, x: 400, y: 95,  k: "Body",         label: "Glass, seals, roof, ADAS" },
  { id: 4, x: 650, y: 130, k: "Electronics",  label: "Hood, headlights, front cameras" },
  { id: 5, x: 640, y: 168, k: "Drivetrain",  label: "Front suspension & brakes" },
  { id: 6, x: 400, y: 196, k: "Drivetrain",  label: "HV battery pack, underbody" },
];

// Diagnostic log lines — appear progressively as the scan advances. The
// `at` field is the step (0..7) at which each line should become visible.
const QP_LOG_LINES = [
  { at: 0, t: "+0.5s", line: "OBD-II INIT",      val: "NO DTC" },
  { at: 1, t: "+1.0s", line: "HV PACK",          val: "SOH 96.3%" },
  { at: 1, t: "+1.3s", line: "BRAKES F/R",       val: "WEAR OK" },
  { at: 2, t: "+1.8s", line: "STEERING ANGLE",   val: "CAL 0.4°" },
  { at: 3, t: "+2.3s", line: "AIRBAG ECU",       val: "6/6 OK" },
  { at: 3, t: "+2.7s", line: "ADAS CAMERA",      val: "ALIGN OK" },
  { at: 4, t: "+3.2s", line: "TPMS",             val: "4/4 OK" },
  { at: 4, t: "+3.6s", line: "HVAC COMPRESSOR",  val: "OK" },
  { at: 5, t: "+4.1s", line: "PAINT · 12-PANEL", val: "UV SCAN OK" },
  { at: 5, t: "+4.4s", line: "CHARGE PORT",      val: "CCS2 OK" },
  { at: 6, t: "+4.9s", line: "INFOTAINMENT OS",  val: "v2.4.7-INTL" },
  { at: 6, t: "+5.2s", line: "LANG PACK",        val: "EN INSTALLED" },
  { at: 6, t: "+5.5s", line: "NAV MAPS",         val: "ME REGION OK" },
  { at: 7, t: "+5.9s", line: "SIGN-OFF",         val: "MECHANIC #04" },
];

// ─── Section 01 — Pre-shipment QA ──────────────────────────────────────────

function QPQASection() {
  const sectionRef = useRefQ(null);
  const inView = useInViewQP(sectionRef, 0.2);

  // Step machine. 0..5 = physical points lighting; 6 = software step;
  // 7 = pass hold; reset back to 0.
  const STEPS = QP_INSPECTION_POINTS.length; // 6
  const SOFTWARE_STEP = STEPS;               // 6
  const PASS_STEP = STEPS + 1;               // 7
  const TICK = 900;
  const SW_HOLD = 1700;
  const PASS_HOLD = 2400;

  const [step, setStep] = useStateQ(0);

  useEffectQ(() => {
    if (!inView) return;
    let timeout;
    if (step < STEPS) {
      timeout = setTimeout(() => setStep(step + 1), TICK);
    } else if (step === SOFTWARE_STEP) {
      timeout = setTimeout(() => setStep(PASS_STEP), SW_HOLD);
    } else if (step === PASS_STEP) {
      timeout = setTimeout(() => setStep(0), PASS_HOLD);
    }
    return () => clearTimeout(timeout);
  }, [step, inView]);

  // Checkpoint counter ramps 0 → 127. Reaches 127 by SOFTWARE step.
  const targetCount = step >= SOFTWARE_STEP ? 127 : Math.round((step / STEPS) * 122);
  const [count, setCount] = useStateQ(0);
  useEffectQ(() => {
    if (!inView) return;
    let raf, t0 = performance.now();
    const start = count;
    const dur = 500;
    const loop = (now) => {
      const t = Math.min(1, (now - t0) / dur);
      setCount(Math.round(start + (targetCount - start) * t));
      if (t < 1) raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [targetCount, inView]);

  const passRate  = useCountUpQP(98.7, 1300, inView);
  const shopCount = useCountUpQP(12,   900,  inView);

  const visibleLog = useMemoQ(
    () => QP_LOG_LINES.filter((l) => l.at <= step),
    [step]
  );

  const isPass = step === PASS_STEP;
  const isSoftware = step === SOFTWARE_STEP || step === PASS_STEP;

  return (
    <section ref={sectionRef} className={`qsec qa-sec ${inView ? "in-view" : ""}`}>
      <div className="wrap qsec-grid">

        <div className="qsec-copy">
          <span className="qsec-eyebrow">01 · Pre-shipment QA</span>
          <h2 className="qsec-h">
            Inspected before<br />
            <span className="quiet">it ships.</span>
          </h2>
          <p className="qsec-body">
            Every vehicle passes a <strong>127-point inspection</strong> at our
            Guangzhou facility: drivetrain, body, electronics, suspension,
            paint, plus an <strong>infotainment OS install in your
            language</strong>. Cars that fail return to the seller. Cars that
            pass are sealed in the container with the report and a localized
            head unit, ready to drive.
          </p>
          <div className="qsec-stats">
            <div>
              <span className="qstat-k">Checkpoints</span>
              <span className="qstat-v">127</span>
            </div>
            <div>
              <span className="qstat-k">Pass rate · 2025</span>
              <span className="qstat-v"><span className="amber">{passRate.toFixed(1)}</span>%</span>
            </div>
            <div>
              <span className="qstat-k">Inspection network</span>
              <span className="qstat-v">{Math.round(shopCount)} shops</span>
            </div>
          </div>
        </div>

        <div className="qa-anim-wrap">
          <div className="qa-frame">
            <div className="qa-frame-head">
              <span className="qa-frame-id">
                <span className="qa-pulse" aria-hidden="true" />
                INSPECTION · GZ-2026-0518
              </span>
              <span className="qa-frame-cnt">
                <span className="num">{String(count).padStart(3, "0")}</span>
                <span className="den">/127 CHECKPOINTS</span>
              </span>
            </div>

            <div className="qa-stage">
              <QPCarSVG step={step} isSoftware={isSoftware} />
              {isSoftware && <QPSoftwarePanel passing={isPass} />}
              {isPass && <QPPassStamp />}
            </div>

            <QPDiagnosticLog lines={visibleLog} />

            <div className="qa-frame-foot">
              <div className="qa-systems">
                {["Electronics","Drivetrain","Body","Suspension","Software","Paint"].map((s, i) => {
                  const on = (s === "Software")
                    ? step >= SOFTWARE_STEP
                    : step > i;
                  return (
                    <span key={s} className={`qa-sys ${on ? "on" : ""}`}>
                      <span className="qa-sys-dot" />
                      {s.toUpperCase()}
                    </span>
                  );
                })}
              </div>
              <span className={`qa-status ${isPass ? "pass" : ""}`}>
                {isPass ? "PASS · CONTAINER SEALED"
                  : step === SOFTWARE_STEP ? "INSTALLING LANGUAGE PACK…"
                  : step > 0 ? "SCANNING…" : "STANDBY"}
              </span>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        .qa-anim-wrap { position: relative; }
        .qa-frame {
          border: 1px solid var(--line-2);
          background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
          position: relative;
        }
        .qa-frame-head, .qa-frame-foot {
          display: flex; justify-content: space-between; align-items: center;
          padding: 14px 18px;
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
        }
        .qa-frame-head { border-bottom: 1px solid var(--line-1); }
        .qa-frame-foot { border-top: 1px solid var(--line-1); gap: 16px; flex-wrap: wrap; }
        .qa-frame-id {
          display: inline-flex; align-items: center; gap: 10px;
          color: var(--mute);
        }
        .qa-pulse {
          width: 7px; height: 7px; border-radius: 50%;
          background: var(--amber);
          animation: qaPulse 1.8s ease-in-out infinite;
        }
        @keyframes qaPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(232,115,46,0.55); }
          70%      { box-shadow: 0 0 0 7px rgba(232,115,46,0); }
        }
        .qa-frame-cnt {
          display: inline-flex; align-items: baseline; gap: 6px;
          color: var(--bone);
          font-variant-numeric: tabular-nums;
        }
        .qa-frame-cnt .num { font-weight: 500; color: var(--bone); }
        .qa-frame-cnt .den { color: var(--mute-2); }

        .qa-stage { position: relative; }
        .qa-svg {
          display: block; width: 100%; height: auto;
          aspect-ratio: 800 / 280;
          background:
            radial-gradient(ellipse at 50% 65%, rgba(232,115,46,0.04), transparent 65%);
        }

        .qa-ping {
          transform-origin: center;
          animation: qaPing .9s cubic-bezier(.4,0,.2,1) forwards;
        }
        @keyframes qaPing {
          0%   { r: 6; opacity: 0.9; }
          100% { r: 22; opacity: 0; }
        }
        .qa-label { animation: qaLabelIn .35s ease forwards; }
        @keyframes qaLabelIn { from { opacity: 0; } to { opacity: 1; } }

        .qa-systems { display: flex; gap: 18px; flex-wrap: wrap; }
        .qa-sys {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: var(--mono); font-size: 9.5px;
          letter-spacing: 0.22em;
          color: var(--mute-3);
          transition: color .3s ease;
        }
        .qa-sys-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--mute-3);
          transition: background .3s ease, box-shadow .3s ease;
        }
        .qa-sys.on { color: var(--bone); }
        .qa-sys.on .qa-sys-dot {
          background: var(--amber);
          box-shadow: 0 0 6px rgba(232,115,46,0.7);
        }
        .qa-status {
          font-family: var(--mono); font-size: 10px;
          letter-spacing: 0.22em;
          color: var(--mute-2);
        }
        .qa-status.pass { color: var(--amber); }

        @media (max-width: 980px) {
          .qa-systems { gap: 10px; }
          .qa-sys { font-size: 8.5px; letter-spacing: 0.16em; }
        }
      `}</style>
    </section>
  );
}

// ── Car silhouette — premium fastback EV (category-shape, not any
//    specific manufacturer's design).
function QPCarSVG({ step }) {
  const STEPS = QP_INSPECTION_POINTS.length;
  const wheelRot = step * 78;
  const scanX = step >= STEPS ? 800 : (step / STEPS) * 800;

  return (
    <svg viewBox="0 0 800 280" className="qa-svg" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <linearGradient id="qaScan" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%"  stopColor="rgba(232,115,46,0)" />
          <stop offset="50%" stopColor="rgba(232,115,46,0.55)" />
          <stop offset="100%" stopColor="rgba(232,115,46,0)" />
        </linearGradient>
        <pattern id="qaGrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(239,233,221,0.04)" strokeWidth="0.5" />
        </pattern>
      </defs>

      <rect width="800" height="280" fill="url(#qaGrid)" />

      <g stroke="rgba(239,233,221,0.25)" strokeWidth="1" fill="none">
        <path d="M 8 8 L 24 8 M 8 8 L 8 24" />
        <path d="M 792 8 L 776 8 M 792 8 L 792 24" />
        <path d="M 8 272 L 24 272 M 8 272 L 8 256" />
        <path d="M 792 272 L 776 272 M 792 272 L 792 256" />
      </g>

      <g className="qa-car">
        <ellipse cx="395" cy="218" rx="320" ry="3.5" fill="rgba(0,0,0,0.55)" />

        <path
          d="M 62 195 L 56 175 L 56 165 Q 60 158 82 152 L 130 142 L 175 138 C 200 120 250 92 330 75 C 360 70 400 68 460 70 L 470 70 C 495 75 515 100 545 130 L 565 135 L 650 142 Q 700 142 720 152 L 735 168 L 735 178 L 728 195 Z"
          fill="rgba(239,233,221,0.045)"
          stroke="rgba(239,233,221,0.62)"
          strokeWidth="1.4"
          strokeLinejoin="round"
        />

        <path
          d="M 200 135 C 215 118 260 95 320 82 L 460 78 C 480 84 495 102 515 128 L 200 135 Z"
          fill="rgba(0,0,0,0.45)"
          stroke="rgba(239,233,221,0.35)"
          strokeWidth="0.9"
        />
        <line x1="380" y1="78" x2="395" y2="135" stroke="rgba(239,233,221,0.35)" strokeWidth="0.9" />

        <path d="M 60 174 Q 350 168 730 170" fill="none" stroke="rgba(239,233,221,0.16)" strokeWidth="0.7" />
        <path d="M 80 188 L 720 188" stroke="rgba(0,0,0,0.55)" strokeWidth="2" />

        <rect x="700" y="151" width="33" height="2.4" rx="1.2" fill="rgba(232,115,46,0.55)" />
        <rect x="705" y="156" width="22" height="1"   rx="0.5" fill="rgba(232,115,46,0.35)" />

        <rect x="60" y="148" width="60" height="2.4" rx="1.2" fill="rgba(217,107,107,0.55)" />
        <rect x="68" y="152" width="44" height="1"   rx="0.5" fill="rgba(217,107,107,0.32)" />

        <line x1="280" y1="156" x2="305" y2="156" stroke="rgba(239,233,221,0.4)" strokeWidth="1.2" strokeLinecap="round" />
        <line x1="448" y1="158" x2="473" y2="158" stroke="rgba(239,233,221,0.4)" strokeWidth="1.2" strokeLinecap="round" />

        <line x1="285" y1="138" x2="285" y2="184" stroke="rgba(239,233,221,0.18)" strokeWidth="0.8" />
        <line x1="455" y1="135" x2="455" y2="184" stroke="rgba(239,233,221,0.18)" strokeWidth="0.8" />

        <path d="M 612 142 Q 660 144 705 144" fill="none" stroke="rgba(239,233,221,0.2)" strokeWidth="0.7" />

        <circle cx="118" cy="162" r="2.2" fill="none" stroke="rgba(239,233,221,0.55)" strokeWidth="0.9" />
        <circle cx="118" cy="162" r="0.8" fill="rgba(232,115,46,0.6)" />

        <path d="M 575 162 L 605 162 L 610 168 L 575 168 Z" fill="rgba(0,0,0,0.4)" stroke="rgba(239,233,221,0.3)" strokeWidth="0.6" />

        <line x1="200" y1="194" x2="600" y2="194" stroke="rgba(232,115,46,0.35)" strokeWidth="1" strokeDasharray="3 2" />

        <g style={{ transform: `rotate(${wheelRot}deg)`, transformOrigin: "150px 184px", transition: "transform .9s cubic-bezier(.16,1,.3,1)" }}>
          <circle cx="150" cy="184" r="32" fill="rgba(0,0,0,0.7)" stroke="rgba(239,233,221,0.55)" strokeWidth="1.3" />
          <circle cx="150" cy="184" r="22" fill="none" stroke="rgba(239,233,221,0.22)" strokeWidth="0.7" />
          <g stroke="rgba(239,233,221,0.32)" strokeWidth="1">
            <line x1="150" y1="160" x2="150" y2="208" />
            <line x1="126" y1="184" x2="174" y2="184" />
            <line x1="134" y1="167" x2="166" y2="201" />
            <line x1="166" y1="167" x2="134" y2="201" />
          </g>
          <circle cx="150" cy="184" r="3.5" fill="rgba(239,233,221,0.5)" />
        </g>
        <g style={{ transform: `rotate(${wheelRot}deg)`, transformOrigin: "640px 184px", transition: "transform .9s cubic-bezier(.16,1,.3,1)" }}>
          <circle cx="640" cy="184" r="32" fill="rgba(0,0,0,0.7)" stroke="rgba(239,233,221,0.55)" strokeWidth="1.3" />
          <circle cx="640" cy="184" r="22" fill="none" stroke="rgba(239,233,221,0.22)" strokeWidth="0.7" />
          <g stroke="rgba(239,233,221,0.32)" strokeWidth="1">
            <line x1="640" y1="160" x2="640" y2="208" />
            <line x1="616" y1="184" x2="664" y2="184" />
            <line x1="624" y1="167" x2="656" y2="201" />
            <line x1="656" y1="167" x2="624" y2="201" />
          </g>
          <circle cx="640" cy="184" r="3.5" fill="rgba(239,233,221,0.5)" />
        </g>
      </g>

      <rect
        x={-40} y={0}
        width="80" height="280"
        fill="url(#qaScan)"
        style={{
          transform: `translateX(${scanX}px)`,
          transition: "transform .9s cubic-bezier(.4,0,.2,1)",
        }}
      />

      {QP_INSPECTION_POINTS.map((p, i) => {
        const active = step > i;
        const justActivated = step === i + 1 && step <= QP_INSPECTION_POINTS.length;
        return (
          <g key={p.id} transform={`translate(${p.x},${p.y})`}>
            {justActivated && (
              <circle r="6" fill="none" stroke="var(--amber)" strokeWidth="1.2" className="qa-ping" />
            )}
            <circle r="6" fill="var(--ink-0)" stroke={active ? "var(--amber)" : "rgba(239,233,221,0.35)"} strokeWidth="1.4" />
            {active && (
              <>
                <circle r="2.5" fill="var(--amber)" />
                <path d="M -3.5 0 L -1.2 2.3 L 3.5 -2.4" stroke="var(--ink-0)" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                <g className="qa-label">
                  <line x1="0" y1="0" x2={p.y < 100 ? 18 : -18} y2={p.y < 100 ? -22 : 22} stroke="rgba(239,233,221,0.35)" strokeWidth="0.8" />
                  <text
                    x={p.y < 100 ? 22 : -22}
                    y={p.y < 100 ? -22 : 24}
                    textAnchor={p.y < 100 ? "start" : "end"}
                    fontFamily="var(--mono)" fontSize="9" letterSpacing="1.4"
                    fill="rgba(239,233,221,0.7)"
                  >
                    {p.k.toUpperCase()}
                  </text>
                  <text
                    x={p.y < 100 ? 22 : -22}
                    y={p.y < 100 ? -10 : 38}
                    textAnchor={p.y < 100 ? "start" : "end"}
                    fontFamily="var(--sans)" fontSize="10.5"
                    fill="var(--bone)"
                  >
                    {p.label}
                  </text>
                </g>
              </>
            )}
          </g>
        );
      })}
    </svg>
  );
}

// ── Software / localization panel ──────────────────────────────────────────
function QPSoftwarePanel({ passing }) {
  const [tick, setTick] = useStateQ(0);
  useEffectQ(() => {
    const id = setInterval(() => setTick(t => Math.min(4, t + 1)), 220);
    return () => clearInterval(id);
  }, []);

  const LANGS = [
    { code: "EN", on: true  },
    { code: "FR", on: false },
    { code: "ES", on: false },
    { code: "AR", on: false },
  ];
  const ITEMS = [
    { k: "System UI",    v: "EN" },
    { k: "Maps + POI",   v: "EN" },
    { k: "Voice assist", v: "EN" },
    { k: "Charging UI",  v: "EN" },
  ];

  return (
    <div className={`qa-soft ${passing ? "passing" : ""}`}>
      <div className="qa-soft-h">
        <span className="qa-soft-dot" />
        INFOTAINMENT · LOCALIZATION
      </div>
      <div className="qa-soft-langs">
        {LANGS.map(l => (
          <span key={l.code} className={`qa-lang ${l.on ? "on" : ""}`}>
            {l.code}
          </span>
        ))}
      </div>
      <div className="qa-soft-rows">
        {ITEMS.map((it, i) => (
          <div key={it.k} className={`qa-soft-row ${tick > i ? "done" : ""}`}>
            <span className="qa-soft-row-k">{it.k}</span>
            <span className="qa-soft-row-dots">·····················</span>
            <span className="qa-soft-row-v">{it.v}</span>
            <span className="qa-soft-row-tick">{tick > i ? "✓" : "·"}</span>
          </div>
        ))}
      </div>
      <div className="qa-soft-foot">
        {tick >= 4 ? "READY · 4 LANGUAGES SHIP-ABLE" : "INSTALLING…"}
      </div>

      <style>{`
        .qa-soft {
          position: absolute;
          top: 28px; right: 28px;
          width: 280px;
          padding: 12px 14px;
          background: rgba(10,10,11,0.92);
          border: 1px solid var(--amber);
          font-family: var(--mono);
          color: var(--bone);
          backdrop-filter: blur(8px);
          animation: qaSoftIn .4s cubic-bezier(.16,1,.3,1) both;
        }
        .qa-soft::before {
          content: "";
          position: absolute;
          top: 100%; left: 22px;
          width: 1px; height: 32px;
          background: var(--amber);
          opacity: 0.6;
        }
        @keyframes qaSoftIn {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: none; }
        }
        .qa-soft-h {
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 9.5px;
          letter-spacing: 0.24em;
          color: var(--amber);
          padding-bottom: 8px;
          border-bottom: 1px solid var(--line-1);
          margin-bottom: 10px;
        }
        .qa-soft-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--amber);
          animation: qaPulse 1.4s ease-in-out infinite;
        }
        .qa-soft-langs {
          display: flex; gap: 6px;
          margin-bottom: 10px;
        }
        .qa-lang {
          font-size: 10px;
          padding: 3px 8px;
          border: 1px solid var(--line-2);
          color: var(--mute-2);
          letter-spacing: 0.1em;
        }
        .qa-lang.on {
          color: var(--amber);
          border-color: var(--amber);
          background: rgba(232,115,46,0.08);
        }
        .qa-soft-rows {
          display: flex; flex-direction: column; gap: 4px;
          margin-bottom: 10px;
        }
        .qa-soft-row {
          display: grid;
          grid-template-columns: auto 1fr auto auto;
          gap: 6px;
          align-items: baseline;
          font-size: 10px;
          color: var(--mute-2);
          opacity: 0.45;
          transition: opacity .25s ease, color .25s ease;
        }
        .qa-soft-row.done { opacity: 1; color: var(--mute); }
        .qa-soft-row-k { letter-spacing: 0.04em; white-space: nowrap; }
        .qa-soft-row-dots {
          font-size: 9px;
          color: var(--mute-3);
          overflow: hidden; white-space: nowrap;
        }
        .qa-soft-row-v { color: var(--mute); letter-spacing: 0.1em; }
        .qa-soft-row.done .qa-soft-row-v { color: var(--bone); }
        .qa-soft-row-tick { width: 10px; text-align: right; color: var(--amber); }
        .qa-soft-foot {
          font-size: 9px;
          letter-spacing: 0.22em;
          color: var(--mute-2);
          padding-top: 8px;
          border-top: 1px solid var(--line-1);
        }
        .qa-soft.passing .qa-soft-foot { color: var(--amber); }

        @media (max-width: 720px) {
          .qa-soft { width: 220px; top: 16px; right: 16px; padding: 10px 12px; }
          .qa-soft-h { font-size: 8.5px; }
          .qa-soft-row { font-size: 9px; }
        }
      `}</style>
    </div>
  );
}

// ── PASS stamp ─────────────────────────────────────────────────────────────
function QPPassStamp() {
  return (
    <div className="qa-stamp" aria-hidden="true">
      <div className="qa-stamp-frame">
        <div className="qa-stamp-word">PASS</div>
        <div className="qa-stamp-line">SIGNED · GZ MECHANIC #04</div>
        <div className="qa-stamp-line dim">2026-05-18 · 14:22 CST</div>
      </div>
      <style>{`
        .qa-stamp {
          position: absolute;
          left: 50%; top: 50%;
          transform: translate(-50%, -50%);
          animation: qaStampIn .4s cubic-bezier(.16,1,.3,1) both;
          pointer-events: none;
        }
        @keyframes qaStampIn {
          from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
          to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        .qa-stamp-frame {
          padding: 18px 36px;
          border: 2px solid var(--amber);
          background: rgba(10,10,11,0.85);
          text-align: center;
        }
        .qa-stamp-word {
          font-family: var(--serif); font-weight: 500;
          font-size: 38px;
          letter-spacing: 0.18em;
          color: var(--amber);
          line-height: 1;
        }
        .qa-stamp-line {
          font-family: var(--mono);
          font-size: 9px;
          letter-spacing: 0.22em;
          color: var(--amber);
          margin-top: 8px;
        }
        .qa-stamp-line.dim {
          color: rgba(232,115,46,0.65);
          margin-top: 2px;
        }
      `}</style>
    </div>
  );
}

// ── Diagnostic log — scrolling terminal-style ──────────────────────────────
function QPDiagnosticLog({ lines }) {
  const VISIBLE = 4;
  const LINE_H = 22;
  const offset = Math.max(0, lines.length - VISIBLE) * LINE_H;

  return (
    <div className="qa-log">
      <div className="qa-log-h">DIAGNOSTIC LOG</div>
      <div className="qa-log-window">
        <div className="qa-log-rail" style={{ transform: `translateY(-${offset}px)` }}>
          {lines.map((l) => (
            <div key={`${l.at}-${l.t}`} className="qa-log-line">
              <span className="t">{l.t.padStart(7, " ")}</span>
              <span className="sep">·</span>
              <span className="k">{l.line}</span>
              <span className="dots">······</span>
              <span className="v">{l.val}</span>
              <span className="ok">OK</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .qa-log {
          display: flex; align-items: center; gap: 18px;
          padding: 12px 18px;
          border-top: 1px solid var(--line-1);
          font-family: var(--mono);
          background: rgba(0,0,0,0.25);
          overflow: hidden;
        }
        .qa-log-h {
          font-size: 9.5px;
          letter-spacing: 0.22em;
          color: var(--mute-2);
          white-space: nowrap;
        }
        .qa-log-window {
          flex: 1;
          height: ${VISIBLE * LINE_H}px;
          overflow: hidden;
          position: relative;
        }
        .qa-log-window::after {
          content: "";
          position: absolute;
          left: 0; right: 0; top: 0; height: ${LINE_H}px;
          background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
          pointer-events: none;
        }
        .qa-log-rail { transition: transform .5s cubic-bezier(.16,1,.3,1); }
        .qa-log-line {
          display: flex; align-items: baseline; gap: 8px;
          height: ${LINE_H}px;
          font-size: 11px;
          color: var(--mute);
          animation: qaLogIn .35s ease both;
        }
        @keyframes qaLogIn {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: none; }
        }
        .qa-log-line .t   { color: var(--mute-3); font-variant-numeric: tabular-nums; min-width: 50px; }
        .qa-log-line .sep { color: var(--mute-3); }
        .qa-log-line .k   { color: var(--bone); letter-spacing: 0.04em; min-width: 130px; }
        .qa-log-line .dots{ color: var(--mute-3); font-size: 10px; flex: 1; overflow: hidden; white-space: nowrap; }
        .qa-log-line .v   { color: var(--mute); letter-spacing: 0.08em; }
        .qa-log-line .ok  { color: var(--amber); letter-spacing: 0.22em; font-weight: 500; }

        @media (max-width: 720px) {
          .qa-log { flex-direction: column; align-items: flex-start; gap: 6px; }
          .qa-log-window { width: 100%; }
          .qa-log-line .k { min-width: 90px; }
        }
      `}</style>
    </div>
  );
}

// ─── Section 02 data ────────────────────────────────────────────────────────

const QP_STATIONS = [
  { x: 80,  label: "China hub",     sub: "Guangzhou",               glyph: "warehouse" },
  { x: 340, label: "Air freight",   sub: "DHL · FedEx · Aramex",    glyph: "plane" },
  { x: 600, label: "Local customs", sub: "Pre-cleared",             glyph: "stamp" },
  { x: 820, label: "Your door",     sub: "To you or your mechanic", glyph: "door" },
];

const QP_PACKAGES = [
  { id: "a", offset: 0.00, sku: "OEM 31-12-7-647-082", dest: "Beirut" },
  { id: "b", offset: 0.33, sku: "OEM 12-90-1-274-668", dest: "Dubai"  },
  { id: "c", offset: 0.66, sku: "OEM 64-11-9-237-555", dest: "Lagos"  },
];

const QP_RECENT_SHIPMENTS = [
  { sku: "31-12-7-647-082", dest: "Beirut, LB",     d: 4 },
  { sku: "12-90-1-274-668", dest: "Dubai, AE",      d: 6 },
  { sku: "64-11-9-237-555", dest: "Lagos, NG",      d: 9 },
  { sku: "37-14-6-866-987", dest: "Riyadh, SA",     d: 5 },
  { sku: "11-42-7-622-339", dest: "Amman, JO",      d: 7 },
  { sku: "61-66-9-301-547", dest: "Casablanca, MA", d: 8 },
];

// ─── Section 02 — China-to-door parts ──────────────────────────────────────

function QPPartsSection() {
  const sectionRef = useRefQ(null);
  const inView = useInViewQP(sectionRef, 0.2);

  const [t, setT] = useStateQ(0);
  useEffectQ(() => {
    if (!inView) return;
    let raf;
    const start = performance.now();
    const loop = (now) => {
      setT(((now - start) / 10000) % 1);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [inView]);

  const day = Math.max(1, Math.min(10, Math.ceil(t * 10)));

  const [recentIdx, setRecentIdx] = useStateQ(0);
  useEffectQ(() => {
    if (!inView) return;
    const id = setInterval(() => setRecentIdx(i => (i + 1) % QP_RECENT_SHIPMENTS.length), 2400);
    return () => clearInterval(id);
  }, [inView]);

  const partsShipped = useCountUpQP(1840, 1400, inView);
  const skuCount     = useCountUpQP(14200, 1600, inView);
  const countries    = useCountUpQP(38,   1100, inView);

  const phaseToX = (phase) => {
    const p = ((phase % 1) + 1) % 1;
    const segs = QP_STATIONS.length - 1;
    const seg = Math.floor(p * segs);
    const local = (p * segs) - seg;
    const a = QP_STATIONS[seg];
    const b = QP_STATIONS[Math.min(segs, seg + 1)];
    const eased = 1 - Math.pow(1 - local, 1.6);
    return a.x + (b.x - a.x) * eased;
  };
  const phaseToY = (phase) => {
    const p = ((phase % 1) + 1) % 1;
    const segs = QP_STATIONS.length - 1;
    const seg = Math.floor(p * segs);
    const local = (p * segs) - seg;
    if (seg === 1) return 110 - Math.sin(local * Math.PI) * 28;
    return 110;
  };

  return (
    <section ref={sectionRef} className={`qsec parts-sec ${inView ? "in-view" : ""}`}>
      <div className="wrap qsec-grid">

        <div className="qsec-copy">
          <span className="qsec-eyebrow">02 · China-to-door parts</span>
          <h2 className="qsec-h">
            Parts on the road<br />
            <span className="amber">before you&apos;d notice.</span>
          </h2>
          <p className="qsec-body">
            When something needs replacing after delivery, we air-freight the
            part direct from our China hub to your country. Typical lead time:
            <strong> 5 to 10 days door-to-door</strong>. Not the three months
            a local dealer would quote, if they could source it at all.
          </p>
          <div className="qsec-stats">
            <div>
              <span className="qstat-k">Door-to-door</span>
              <span className="qstat-v">
                <span className="amber">5–10</span>
                <span style={{ fontSize: "14px", marginLeft: "6px", letterSpacing: "0.1em", fontFamily: "var(--mono)", color: "var(--mute-2)" }}>days</span>
              </span>
            </div>
            <div>
              <span className="qstat-k">Hub stock · SKUs</span>
              <span className="qstat-v">{Math.round(skuCount).toLocaleString("en-US")}</span>
            </div>
            <div>
              <span className="qstat-k">Countries served</span>
              <span className="qstat-v">{Math.round(countries)}</span>
            </div>
          </div>
        </div>

        <div className="parts-anim-wrap">
          <div className="parts-frame">
            <div className="parts-frame-head">
              <span className="parts-frame-id">
                <span className="qa-pulse" aria-hidden="true" />
                PARTS REQUEST · CBA-2026-1872
              </span>
              <span className="parts-frame-day">
                <span className="dlabel">DAY</span>
                <span className="dnum">{String(day).padStart(2, "0")}</span>
                <span className="dlabel">/ 10</span>
              </span>
            </div>

            <svg viewBox="0 0 880 220" className="parts-svg" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <defs>
                <pattern id="partsGrid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(239,233,221,0.04)" strokeWidth="0.5" />
                </pattern>
              </defs>
              <rect width="880" height="220" fill="url(#partsGrid)" />

              <g stroke="rgba(239,233,221,0.25)" strokeWidth="1" fill="none">
                <path d="M 8 8 L 24 8 M 8 8 L 8 24" />
                <path d="M 872 8 L 856 8 M 872 8 L 872 24" />
                <path d="M 8 212 L 24 212 M 8 212 L 8 196" />
                <path d="M 872 212 L 856 212 M 872 212 L 872 196" />
              </g>

              <line x1={QP_STATIONS[0].x} y1="110" x2={QP_STATIONS[QP_STATIONS.length-1].x} y2="110"
                    stroke="rgba(239,233,221,0.18)" strokeWidth="1" strokeDasharray="3 4" />

              <path
                d={`M ${QP_STATIONS[1].x} 110 Q ${(QP_STATIONS[1].x + QP_STATIONS[2].x)/2} 72 ${QP_STATIONS[2].x} 110`}
                fill="none"
                stroke="rgba(232,115,46,0.25)"
                strokeWidth="1"
                strokeDasharray="2 3"
              />

              {QP_STATIONS.map((s, i) => (
                <g key={s.label} transform={`translate(${s.x}, 110)`}>
                  <circle r="14" fill="var(--ink-0)" stroke="rgba(239,233,221,0.55)" strokeWidth="1.2" />
                  <QPStationGlyph glyph={s.glyph} />
                  <text x="0" y="44" textAnchor="middle" fontFamily="var(--mono)" fontSize="9.5" letterSpacing="2.2" fill="rgba(239,233,221,0.7)">
                    {s.label.toUpperCase()}
                  </text>
                  <text x="0" y="56" textAnchor="middle" fontFamily="var(--mono)" fontSize="8" letterSpacing="1.4" fill="rgba(239,233,221,0.4)">
                    {s.sub}
                  </text>
                  <text x="0" y="-26" textAnchor="middle" fontFamily="var(--mono)" fontSize="8.5" letterSpacing="2" fill="var(--amber)">
                    {`0${i+1}`}
                  </text>
                </g>
              ))}

              {QP_PACKAGES.map((pkg, i) => {
                const phase = (t + pkg.offset) % 1;
                const x = phaseToX(phase);
                const y = phaseToY(phase);
                const showLabel = i === 0 && phase > 0.05 && phase < 0.95;
                return (
                  <g key={pkg.id} transform={`translate(${x}, ${y})`}>
                    <QPPackage />
                    {showLabel && (
                      <g className="parts-pkg-label">
                        <line x1="0" y1="-20" x2="0" y2="-32" stroke="rgba(232,115,46,0.55)" strokeWidth="0.8" />
                        <text x="0" y="-40" textAnchor="middle" fontFamily="var(--mono)" fontSize="8.5" letterSpacing="1.6" fill="var(--amber)">
                          {pkg.sku}
                        </text>
                      </g>
                    )}
                  </g>
                );
              })}

              <g transform="translate(0, 190)">
                {QP_STATIONS.map((s, i) => {
                  const lit = QP_PACKAGES.some(p => ((t + p.offset) % 1) * (QP_STATIONS.length - 1) >= i);
                  return (
                    <g key={s.label} transform={`translate(${s.x}, 0)`}>
                      <circle r="2.5" fill={lit ? "var(--amber)" : "rgba(239,233,221,0.2)"} />
                    </g>
                  );
                })}
              </g>
            </svg>

            <div className="parts-ticker">
              <div className="parts-ticker-h">JUST SHIPPED</div>
              <div className="parts-ticker-window">
                <div className="parts-ticker-rail" style={{ transform: `translateY(-${recentIdx * 100}%)` }}>
                  {QP_RECENT_SHIPMENTS.map((r) => (
                    <div key={r.sku} className="parts-ticker-row">
                      <span className="parts-ticker-sku">OEM {r.sku}</span>
                      <span className="parts-ticker-arrow">→</span>
                      <span className="parts-ticker-dest">{r.dest}</span>
                      <span className="parts-ticker-day">DAY {String(r.d).padStart(2, "0")}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="parts-frame-foot">
              <div className="parts-mode">
                <span className="parts-mode-k">MODE</span>
                <span className="parts-mode-v">Air freight · sea on request</span>
              </div>
              <div className="parts-mode">
                <span className="parts-mode-k">CHANNEL</span>
                <span className="parts-mode-v">24/7 parts request line</span>
              </div>
              <div className="parts-mode">
                <span className="parts-mode-k">LAST 12 MONTHS</span>
                <span className="parts-mode-v"><strong>{Math.round(partsShipped).toLocaleString("en-US")}</strong> parts shipped</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        .parts-anim-wrap { position: relative; }
        .parts-frame {
          border: 1px solid var(--line-2);
          background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
          position: relative;
        }
        .parts-frame-head, .parts-frame-foot {
          display: flex; padding: 14px 18px;
          font-family: var(--mono); font-size: 10px;
          letter-spacing: 0.22em; text-transform: uppercase;
        }
        .parts-frame-head { border-bottom: 1px solid var(--line-1); justify-content: space-between; align-items: center; }
        .parts-frame-foot { border-top: 1px solid var(--line-1); gap: 32px; flex-wrap: wrap; }
        .parts-frame-id {
          display: inline-flex; align-items: center; gap: 10px;
          color: var(--mute);
        }
        .parts-frame-day {
          display: inline-flex; align-items: baseline; gap: 8px;
          color: var(--bone);
          font-variant-numeric: tabular-nums;
        }
        .parts-frame-day .dlabel { color: var(--mute-2); }
        .parts-frame-day .dnum {
          font-family: var(--serif);
          font-size: 22px; line-height: 1; font-weight: 500;
          color: var(--amber);
        }
        .parts-svg {
          display: block; width: 100%; height: auto;
          aspect-ratio: 880 / 220;
        }

        .parts-pkg-label { animation: pkgLabelIn .25s ease forwards; }
        @keyframes pkgLabelIn {
          from { opacity: 0; transform: translateY(4px); }
          to   { opacity: 1; transform: none; }
        }

        .parts-ticker {
          display: flex; align-items: center; gap: 18px;
          padding: 12px 18px;
          border-top: 1px solid var(--line-1);
          background: rgba(0,0,0,0.25);
          overflow: hidden;
          font-family: var(--mono);
        }
        .parts-ticker-h {
          font-size: 9.5px;
          letter-spacing: 0.22em;
          color: var(--mute-2);
          white-space: nowrap;
        }
        .parts-ticker-window {
          flex: 1;
          height: 18px;
          overflow: hidden;
          position: relative;
        }
        .parts-ticker-rail { transition: transform .55s cubic-bezier(.16,1,.3,1); }
        .parts-ticker-row {
          height: 18px;
          display: grid;
          grid-template-columns: auto auto 1fr auto;
          gap: 10px;
          align-items: center;
          font-size: 11px;
          color: var(--mute);
        }
        .parts-ticker-sku   { color: var(--bone); letter-spacing: 0.04em; }
        .parts-ticker-arrow { color: var(--amber); }
        .parts-ticker-dest  { color: var(--mute); }
        .parts-ticker-day   {
          color: var(--amber);
          letter-spacing: 0.18em;
          font-size: 10px;
        }

        .parts-mode { display: flex; flex-direction: column; gap: 4px; }
        .parts-mode-k {
          font-family: var(--mono); font-size: 9.5px;
          letter-spacing: 0.22em;
          color: var(--mute-3);
        }
        .parts-mode-v {
          font-family: var(--sans); font-size: 13px;
          color: var(--mute);
        }
        .parts-mode-v strong {
          color: var(--bone); font-weight: 500;
          font-variant-numeric: tabular-nums;
        }

        @media (max-width: 720px) {
          .parts-ticker { flex-direction: column; align-items: flex-start; gap: 6px; }
          .parts-ticker-row { grid-template-columns: auto auto auto; }
          .parts-ticker-dest { display: none; }
        }
      `}</style>
    </section>
  );
}

function QPPackage() {
  return (
    <g>
      <circle r="12" fill="rgba(232,115,46,0.12)" />
      <g transform="translate(-8, -8)">
        <rect x="0" y="0" width="16" height="16" fill="var(--ink-0)" stroke="var(--amber)" strokeWidth="1.4" />
        <line x1="0" y1="8" x2="16" y2="8" stroke="var(--amber)" strokeWidth="0.8" opacity="0.6" />
        <line x1="8" y1="0" x2="8" y2="16" stroke="var(--amber)" strokeWidth="0.8" opacity="0.6" />
      </g>
    </g>
  );
}

function QPStationGlyph({ glyph }) {
  const stroke = "rgba(239,233,221,0.8)";
  if (glyph === "warehouse") {
    return (
      <g fill="none" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M -6 -3 L 0 -7 L 6 -3 L 6 5 L -6 5 Z" />
        <path d="M -2 5 L -2 1 L 2 1 L 2 5" />
      </g>
    );
  }
  if (glyph === "plane") {
    return (
      <g fill="none" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M -7 0 L 7 0" />
        <path d="M -2 -4 L 5 0 L -2 4" />
        <path d="M -7 -2 L -5 0 L -7 2" />
      </g>
    );
  }
  if (glyph === "stamp") {
    return (
      <g fill="none" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="-5" y="-1" width="10" height="6" />
        <path d="M -3 -1 L -3 -5 L 3 -5 L 3 -1" />
        <path d="M -6 7 L 6 7" />
      </g>
    );
  }
  if (glyph === "door") {
    return (
      <g fill="none" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M -6 6 L -6 -4 L 6 -4 L 6 6" />
        <path d="M -6 6 L 6 6" />
        <circle cx="3" cy="2" r="0.8" fill={stroke} stroke="none" />
      </g>
    );
  }
  return null;
}

// ─── Wrapper + shared section primitives ────────────────────────────────────
//
// The .qsec / .qsec-grid / .qsec-eyebrow / .qsec-h / .qstat-* classes are
// shared by both sections. Defined here once and applied via the SPA's
// global CSS scope.

function QualityParts() {
  return (
    <>
      <style>{`
        .qsec {
          padding: 140px 0;
          border-top: 1px solid var(--line-1);
          background: var(--ink-0);
          position: relative;
          overflow: hidden;
        }
        .qsec-grid {
          display: grid;
          grid-template-columns: 5fr 7fr;
          gap: 80px;
          align-items: center;
        }
        .qsec-copy { max-width: 480px; }
        .qsec-eyebrow {
          display: inline-flex; align-items: center; gap: 12px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.24em;
          text-transform: uppercase;
          color: var(--mute);
          margin-bottom: 28px;
        }
        .qsec-eyebrow::before {
          content: ""; width: 28px; height: 1px; background: var(--amber);
        }
        .qsec-h {
          font-family: var(--serif);
          font-weight: 500;
          font-size: clamp(40px, 4.4vw, 64px);
          line-height: 1.04;
          letter-spacing: -0.02em;
          margin: 0 0 28px;
          color: var(--bone);
          max-width: 14ch;
        }
        .qsec-h .quiet { color: var(--mute); }
        .qsec-h .amber { color: var(--amber); }
        .qsec-body {
          font-family: var(--sans);
          font-size: 16px; line-height: 1.65;
          color: var(--mute);
          margin: 0 0 36px;
          max-width: 44ch;
        }
        .qsec-body strong { color: var(--bone); font-weight: 500; }
        .qsec-stats {
          display: grid; grid-template-columns: 1fr 1fr 1fr;
          gap: 24px;
          padding-top: 24px;
          border-top: 1px solid var(--line-1);
        }
        .qstat-k {
          display: block;
          font-family: var(--mono); font-size: 10px;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--mute-2);
          margin-bottom: 8px;
        }
        .qstat-v {
          display: block;
          font-family: var(--serif);
          font-weight: 400;
          font-size: 28px; line-height: 1;
          letter-spacing: -0.015em;
          color: var(--bone);
          font-variant-numeric: tabular-nums;
        }
        .qstat-v .amber { color: var(--amber); }

        /* Scroll-triggered entry */
        .qsec .qsec-copy > * {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
        }
        .qsec.in-view .qsec-copy > * { opacity: 1; transform: none; }
        .qsec.in-view .qsec-copy > *:nth-child(1) { transition-delay: 0ms; }
        .qsec.in-view .qsec-copy > *:nth-child(2) { transition-delay: 100ms; }
        .qsec.in-view .qsec-copy > *:nth-child(3) { transition-delay: 200ms; }
        .qsec.in-view .qsec-copy > *:nth-child(4) { transition-delay: 300ms; }

        .qsec .qa-anim-wrap, .qsec .parts-anim-wrap {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity .9s cubic-bezier(.16,1,.3,1) 200ms, transform .9s cubic-bezier(.16,1,.3,1) 200ms;
        }
        .qsec.in-view .qa-anim-wrap,
        .qsec.in-view .parts-anim-wrap { opacity: 1; transform: none; }

        @media (max-width: 980px) {
          .qsec { padding: 80px 0; }
          .qsec-grid { grid-template-columns: 1fr; gap: 48px; }
          .qsec-copy { max-width: 100%; }
          .qsec-stats { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
          .qstat-v { font-size: 22px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .qsec .qsec-copy > *, .qsec .qa-anim-wrap, .qsec .parts-anim-wrap {
            opacity: 1 !important; transform: none !important; transition: none !important;
          }
        }
      `}</style>
      <QPQASection />
      <QPPartsSection />
    </>
  );
}