/* global React */
// Sections — group C:
//  · TrustLogosSection   — "Trusted by enterprise teams" logo strip
//  · MidCTASection       — "AI moves quickly—and so should you." banner
//
// These layer credibility + conversion into the page without adding
// content the visitor has to read carefully. Both are designed to be
// visually quiet so they punctuate, not interrupt.

// ─── TRUST LOGOS ────────────────────────────────────────────────────
// Tasteful enterprise-style wordmarks rendered as monochrome SVG. Each
// is a stylized type-only mark — no real brand recreation. The strip
// is two rows on narrow screens, single row on wide.
function TrustLogosSection() {
  const logos = [
  { kind: "wordmark", text: "MERIDIAN", weight: 800, tracking: "0.06em", font: "var(--font-display)" },
  { kind: "mark+word", glyph: "◆", text: "Northwind", font: "var(--font-display)", weight: 600, tracking: "-0.01em" },
  { kind: "wordmark", text: "ATLAS·CO", weight: 700, tracking: "0.18em", font: "var(--font-mono)" },
  { kind: "mark+word", glyph: "▲", text: "Vertex Health", font: "var(--font-display)", weight: 600, tracking: "-0.01em" },
  { kind: "wordmark", text: "halcyon", weight: 500, tracking: "-0.02em", font: "var(--font-display)", italic: true },
  { kind: "mark+word", glyph: "●", text: "ORBIT CAPITAL", font: "var(--font-mono)", weight: 700, tracking: "0.12em" },
  { kind: "wordmark", text: "BRIGHTPATH", weight: 800, tracking: "-0.005em", font: "var(--font-display)" }];


  return (
    <S tone="dark" padY={56} style={{ paddingTop: 56, paddingBottom: 56 }}>
      <div className="reveal trust-logos-grid" style={{
        display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "center"
      }}>
        <div className="trust-label" style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "rgba(255,255,255,0.55)", letterSpacing: "0.14em", textTransform: "uppercase",
          paddingRight: 36,
          borderRight: "1px solid rgba(255,255,255,0.10)",
          whiteSpace: "nowrap",
          maxWidth: 220,
          lineHeight: 1.5
        }}>
          Trusted by enterprise teams<br />across regulated industries
        </div>

        <div className="trust-row" style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 36, flexWrap: "wrap"
        }}>
          {logos.map((l, i) =>
          <div key={i} className="trust-logo" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            color: "rgba(255,255,255,0.55)",
            transition: "color 240ms var(--ease), transform 240ms var(--ease)",
            cursor: "default"
          }}>
              {l.kind === "mark+word" &&
            <span style={{
              fontSize: 16, lineHeight: 1, color: "rgba(255,255,255,0.65)"
            }}>{l.glyph}</span>
            }
              <span style={{
              fontFamily: l.font,
              fontWeight: l.weight,
              fontSize: 17,
              fontStyle: l.italic ? "italic" : "normal",
              letterSpacing: l.tracking,
              textTransform: l.kind === "wordmark" && l.font === "var(--font-mono)" ? "none" : "none"
            }}>{l.text}</span>
            </div>
          )}
        </div>
      </div>

      <style>{`
        .trust-logo:hover { color: white !important; transform: translateY(-1px); }
        @media (max-width: 900px) {
          .trust-row > div:first-child { width: 100% !important; }
        }
        @media (max-width: 720px) {
          .trust-logos-grid {
            grid-template-columns: 1fr !important; gap: 20px !important;
          }
          .trust-label { padding-right: 0 !important; border-right: none !important;
            padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.10);
            max-width: none !important;
          }
        }
      `}</style>
    </S>);

}

// ─── MID-PAGE CTA: "AI moves quickly—and so should you." ───────────
// Punctuation banner between heavy content blocks. Big quote-style
// statement on the left, dual CTAs + email on the right.
function MidCTASection() {
  return (
    <S tone="tint" padY={88}>
      <div className="reveal mid-cta-grid" style={{
        position: "relative", overflow: "hidden",
        display: "flex", flexDirection: "column", gap: 36,
        padding: "56px 64px",
        background: "linear-gradient(135deg, var(--ink-900) 0%, #052782 100%)",
        color: "white",
        border: "1px solid rgba(151,194,247,0.20)",
        boxShadow: "0 24px 60px -20px rgba(0,29,107,0.45)"
      }}>
        {/* Decorative wash */}
        <div style={{
          position: "absolute", width: 520, height: 520, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(151,194,247,0.30), transparent 70%)",
          right: -160, top: -200, pointerEvents: "none"
        }} />
        <div style={{
          position: "absolute", width: 380, height: 380, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(124,77,255,0.20), transparent 70%)",
          left: -120, bottom: -160, pointerEvents: "none"
        }} />

        <div style={{ position: "relative", maxWidth: 820 }}>
          <Eyebrow tone="dark">The case for moving now</Eyebrow>
          <h2 style={{
            marginTop: 20,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.06, letterSpacing: "-0.03em",
            color: "white", textWrap: "balance"
          }}>
            AI moves quickly<span style={{ color: "var(--sky-400)" }}>—</span>and so should you.
          </h2>
          <p style={{
            marginTop: 18, maxWidth: 720,
            fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "rgba(255,255,255,0.78)", letterSpacing: "-0.005em",
            textWrap: "pretty"
          }}>
            We'll help you turn uncertainty into an actionable plan built for measurable impact — across the tools your teams already use.
          </p>
        </div>

        {/* Single-row conversion strip: email input + primary CTA + secondary CTA */}
        <form
          className="mid-cta-row"
          onSubmit={(e) => {
            e.preventDefault();
            const email = e.currentTarget.elements.email.value.trim();
            if (!email) return;
            window.location.href = `mailto:contact@ajaia.ai?subject=Enterprise%20AI%20training%20plan&body=Work%20email%3A%20${encodeURIComponent(email)}%0D%0A%0D%0AI%27d%20like%20a%20custom%20enterprise%20AI%20training%20plan%20for%20my%20team.`;
          }}
          style={{
            position: "relative",
            display: "flex", alignItems: "stretch", gap: 12,
            flexWrap: "nowrap"
          }}>
          {/* Email + submit composite */}
          <div className="mid-cta-input" style={{
            display: "flex", alignItems: "stretch", flex: "1 1 480px", minWidth: 0,
            background: "linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%)",
            border: "1px solid rgba(255,255,255,0.22)",
            backdropFilter: "blur(14px)",
            WebkitBackdropFilter: "blur(14px)",
            boxShadow: "0 18px 40px -18px rgba(0,12,55,0.55), inset 0 1px 0 rgba(255,255,255,0.10)",
            padding: 6
          }}>
            <label htmlFor="midcta-email" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              paddingLeft: 14, paddingRight: 6,
              color: "rgba(255,255,255,0.55)",
              pointerEvents: "none"
            }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
                <rect x="1.5" y="3" width="13" height="10" />
                <path d="M1.5 3.5l6.5 5 6.5-5" strokeLinecap="round" />
              </svg>
            </label>
            <input
              id="midcta-email"
              name="email"
              type="email"
              required
              placeholder="Your work email"
              autoComplete="email"
              style={{
                flex: 1, minWidth: 0, height: 52,
                border: "none", outline: "none", background: "transparent",
                color: "white",
                fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15.5,
                letterSpacing: "-0.005em",
                padding: "0 8px"
              }} />
            <button type="submit" className="aj-cta" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              height: 52, padding: "0 22px",
              background: "var(--sky-400)", color: "var(--ink-900)",
              border: "none", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15,
              letterSpacing: "-0.01em", whiteSpace: "nowrap",
              position: "relative", overflow: "hidden",
              boxShadow: "0 0 0 1px rgba(151,194,247,0.5), 0 0 30px -8px rgba(151,194,247,0.55)"
            }}>
              Build my training plan
              <AjIcon.ArrowRight size={15} />
            </button>
          </div>

          {/* Compact momentum illustration — pictogram pair to the form */}
          <div className="mid-cta-illo" aria-hidden="true" style={{
            flexShrink: 0,
            width: 180, height: 64,
            position: "relative",
            background: "linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)",
            border: "1px solid rgba(151,194,247,0.22)",
            backdropFilter: "blur(10px)",
            WebkitBackdropFilter: "blur(10px)",
            overflow: "hidden",
            padding: "8px 12px",
            display: "flex", flexDirection: "column", justifyContent: "space-between"
          }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 9, color: "rgba(255,255,255,0.55)",
                letterSpacing: "0.14em", textTransform: "uppercase"
              }}>Adoption curve</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 4,
                fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--sky-400)",
                letterSpacing: "0.10em"
              }}>
                <span className="pulse-dot" style={{ width: 5, height: 5, borderRadius: 999, background: "var(--sky-400)" }} />
                LIVE
              </span>
            </div>

            <svg viewBox="0 0 156 30" width="100%" height="30" style={{ display: "block", overflow: "visible" }}>
              <defs>
                <linearGradient id="midcta-curve" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="rgba(151,194,247,0.20)" />
                  <stop offset="100%" stopColor="rgba(151,194,247,1)" />
                </linearGradient>
                <linearGradient id="midcta-fill" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="rgba(151,194,247,0.30)" />
                  <stop offset="100%" stopColor="rgba(151,194,247,0)" />
                </linearGradient>
              </defs>

              {/* Filled area */}
              <path d="M2,26 C30,24 50,22 70,16 C90,10 110,6 154,2 L154,30 L2,30 Z"
              fill="url(#midcta-fill)" />
              {/* Curve */}
              <path d="M2,26 C30,24 50,22 70,16 C90,10 110,6 154,2"
              fill="none" stroke="url(#midcta-curve)" strokeWidth="1.6"
              strokeLinecap="round" />

              {/* Milestone dots */}
              <circle cx="2" cy="26" r="2" fill="rgba(151,194,247,0.50)" />
              <circle cx="40" cy="22.5" r="2" fill="rgba(151,194,247,0.65)" />
              <circle cx="80" cy="14" r="2" fill="rgba(151,194,247,0.85)" />
              <circle cx="120" cy="7" r="2.2" fill="#DCE9FF" />

              {/* Endpoint with halo */}
              <circle cx="154" cy="2" r="6" fill="rgba(151,194,247,0.20)" className="pulse-dot" />
              <circle cx="154" cy="2" r="3" fill="var(--sky-400)" />

              {/* Spark glyph at endpoint */}
              <g transform="translate(148,-8)" opacity="0.9">
                <path d="M6 0 L6.9 4.1 L11 5 L6.9 5.9 L6 10 L5.1 5.9 L1 5 L5.1 4.1 Z"
                fill="#DCE9FF" />
              </g>
            </svg>
          </div>
        </form>

        {/* Trust line + email fallback */}
        <div className="mid-cta-trust" style={{
          position: "relative",
          display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap",
          fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55,
          color: "rgba(255,255,255,0.62)", marginTop: -20
        }}>
          {["Free scoping call", "Custom-tailored plan within 48h", "No prep required"].map((t, i) =>
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--sky-400)" strokeWidth="1.8" strokeLinecap="round">
                <path d="M3 8l3 3 7-7" />
              </svg>
              {t}
            </span>
          )}
          <span style={{ width: 1, height: 12, background: "rgba(255,255,255,0.18)" }} />
          <a href="mailto:contact@ajaia.ai" style={{
            display: "inline-flex", alignItems: "center", gap: 7,
            color: "var(--sky-400)", textDecoration: "none",
            fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.02em", fontWeight: 500
          }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
              <rect x="1.5" y="3" width="13" height="10" />
              <path d="M1.5 3.5l6.5 5 6.5-5" strokeLinecap="round" />
            </svg>
            contact@ajaia.ai
          </a>
        </div>

        <Squares color="var(--sky-400)" corner="tr" size={14} />
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .mid-cta-grid { padding: 44px 36px !important; }
        }
        @media (max-width: 760px) {
          .mid-cta-row { flex-wrap: wrap !important; }
          .mid-cta-input { flex-wrap: wrap !important; padding: 10px !important; flex-basis: 100% !important; }
          .mid-cta-input input { width: 100% !important; height: 44px !important; }
          .mid-cta-input button { width: 100% !important; justify-content: center !important; }
          .mid-cta-input label { display: none !important; }
          .mid-cta-illo { display: none !important; }
        }
        .mid-cta-input:focus-within {
          border-color: rgba(151,194,247,0.45) !important;
          box-shadow: 0 18px 40px -18px rgba(0,12,55,0.55), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 3px rgba(151,194,247,0.12) !important;
        }
        .mid-cta-input input::placeholder { color: rgba(255,255,255,0.42); }
        .mid-cta-input button:hover { filter: brightness(1.05); }
        .mid-cta-input button:active { transform: scale(0.985); }
      `}</style>
    </S>);

}

// ─── STATS BAND ─────────────────────────────────────────────────────
// Dedicated "by the numbers" section, lifted out of the hero per
// product request. Three big stats on a light surface, framed against
// the dark hero + trust-logos blocks for visual contrast.
function StatsBandSection() {
  const stats = [
  {
    value: 25,
    suffix: "k+",
    label: "Employees Trained",
    sub: "Across enterprise, education, government, and healthcare rollouts.",
    accent: "var(--sky-400)",
    shape: "sparkline"
  },
  {
    value: 100,
    suffix: "+",
    label: "Enterprises Supported",
    sub: "From pilot cohorts to organization-wide adoption programs.",
    accent: "#5683FF",
    shape: "bars"
  },
  {
    value: 4.8,
    suffix: "",
    label: "Avg. Program Feedback",
    sub: "Five-star rating averaged across all delivered training programs.",
    accent: "#FFC857",
    shape: "stars"
  }];


  return (
    <S tone="light" padY={112}>
      {/* Header — centered, full-width, matches design system rhythm */}
      <div className="reveal" style={{
        textAlign: "center", maxWidth: 820, margin: "0 auto"
      }}>
        <Eyebrow>By the numbers</Eyebrow>
        <h2 className="h2" style={{
          marginTop: 18,
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
          color: "var(--ink-900)", textWrap: "balance"
        }}>
          Trusted to deliver measurable AI training outcomes
        </h2>
        <p style={{
          marginTop: 18, marginLeft: "auto", marginRight: "auto", maxWidth: 620,
          fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.6,
          color: "var(--ink-muted)", letterSpacing: "-0.002em",
          textWrap: "pretty"
        }}>
          Numbers from real enterprise rollouts — not pilots — across regulated and complex industries.
        </p>
      </div>

      {/* Stats row */}
      <div className="reveal stats-band-row" style={{
        marginTop: 64,
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 24,
        position: "relative"
      }}>
        {stats.map((s, i) =>
        <StatsBandCell key={i} {...s} delay={i * 140} />
        )}
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .stats-band-row { gap: 18px !important; }
        }
        @media (max-width: 720px) {
          .stats-band-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </S>);

}

// One stat card with count-up + per-shape accent visual.
function StatsBandCell({ value, suffix, label, sub, accent, shape, delay = 0 }) {
  const ref = React.useRef(null);
  const [current, setCurrent] = React.useState(0);
  React.useEffect(() => {
    let raf,startedAt = 0,started = false;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started) {
        started = true;
        const dur = 1500;
        const step = (t) => {
          if (!startedAt) startedAt = t + delay;
          const p = Math.min(1, Math.max(0, (t - startedAt) / dur));
          const eased = 1 - Math.pow(1 - p, 3);
          setCurrent(value * eased);
          if (p < 1) raf = requestAnimationFrame(step);
        };
        raf = requestAnimationFrame(step);
      }
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => {io.disconnect();cancelAnimationFrame(raf);};
  }, [value, delay]);

  const isFloat = String(value).includes(".");
  const display = isFloat ?
  current.toFixed(1) :
  Math.round(current).toString();

  return (
    <div ref={ref} className="lift stats-band-cell" style={{
      position: "relative",
      background: "linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%)",
      border: "1px solid rgba(0,29,107,0.10)",
      padding: "32px 32px 28px",
      boxShadow: "0 24px 60px -28px rgba(0,29,107,0.18), 0 2px 6px -2px rgba(0,29,107,0.06)",
      display: "flex", flexDirection: "column", gap: 18,
      overflow: "hidden",
      minHeight: 240, borderRadius: "0px"

    }}>
      {/* Corner accent block — design-system style accent */}
      <div style={{ ...{
          position: "absolute", top: 0, left: 0,
          width: 60, height: 4,
          background: accent
        }, background: "rgb(101, 87, 255)" }} />
      <div style={{ ...{
          position: "absolute", top: 0, left: 0,
          width: 4, height: 60,
          background: accent
        }, background: "rgb(96, 87, 255)" }} />

      {/* Decorative tint wash */}
      <div style={{
        position: "absolute",
        right: -80, bottom: -80,
        width: 220, height: 220, borderRadius: "50%",
        background: accent, opacity: 0.06, filter: "blur(40px)",
        pointerEvents: "none"
      }} />

      <div style={{
        position: "relative",
        display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--ink-subtle)", letterSpacing: "0.18em", textTransform: "uppercase"
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999,
          background: accent,
          boxShadow: `0 0 8px ${accent}`
        }} />
        {label}
      </div>

      <div style={{
        position: "relative",
        display: "flex", alignItems: "baseline", gap: 4,
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 84, lineHeight: 0.95, letterSpacing: "-0.045em",
        color: "var(--ink-900)"
      }} className="num-tabular stats-band-number">
        {display}
        <span style={{
          fontSize: 48, color: accent, marginLeft: 4,
          fontWeight: 700,
          letterSpacing: "-0.03em"
        }}>{suffix}</span>
      </div>

      {shape === "stars" &&
      <div style={{ position: "relative", display: "inline-flex", gap: 4 }}>
          {[0, 1, 2, 3, 4].map((i) =>
        <svg key={i} width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(0,29,107,0.18)" strokeWidth="1.3">
              <path d="M12 2l3.1 6.6 7.2 1-5.2 5 1.2 7.2L12 18.4 5.7 21.8l1.2-7.2L1.7 9.6l7.2-1L12 2z" />
            </svg>
        )}
          <div style={{
          position: "absolute", inset: 0, overflow: "hidden",
          width: `${(parseFloat(display) || 0) / 5 * 100}%`,
          display: "inline-flex", gap: 4, pointerEvents: "none",
          transition: "width 1200ms cubic-bezier(0.22, 1, 0.36, 1)"
        }}>
            {[0, 1, 2, 3, 4].map((i) =>
          <svg key={i} width="22" height="22" viewBox="0 0 24 24" fill={accent} style={{ flexShrink: 0 }}>
                <path d="M12 2l3.1 6.6 7.2 1-5.2 5 1.2 7.2L12 18.4 5.7 21.8l1.2-7.2L1.7 9.6l7.2-1L12 2z" />
              </svg>
          )}
          </div>
        </div>
      }

      {shape === "sparkline" &&
      <svg width="140" height="28" viewBox="0 0 140 28" style={{ display: "block" }}>
          <defs>
            <linearGradient id="sb-spk" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor={accent} stopOpacity="0.25" />
              <stop offset="100%" stopColor={accent} stopOpacity="1" />
            </linearGradient>
          </defs>
          <polyline
          points="2,24 16,20 30,21 44,15 58,16 72,11 86,12 100,7 114,8 136,3"
          fill="none" stroke="url(#sb-spk)" strokeWidth="2"
          strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="136" cy="3" r="3.5" fill={accent} />
        </svg>
      }

      {shape === "bars" &&
      <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 28 }}>
          {[8, 11, 9, 14, 12, 17, 16, 22, 26].map((h, i) =>
        <div key={i} style={{
          width: 9, height: h,
          background: i >= 6 ?
          accent :
          `${accent}55`,
          borderRadius: 2
        }} />
        )}
        </div>
      }

      <div style={{
        position: "relative",
        marginTop: "auto", paddingTop: 6,
        fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55,
        color: "var(--ink-muted)", letterSpacing: "-0.002em",
        textWrap: "pretty"
      }}>{sub}</div>
    </div>);

}

Object.assign(window, { TrustLogosSection, MidCTASection, StatsBandSection });