/* ── LANDING SECTIONS ─────────────────────────────────────────────── */

/* ── Intersection helper ─────────────────────────────────────────────
   Replays the entrance animation every time the element re-enters the
   viewport (scroll down AND scroll up). Two observers:
   • Enter — fires when the element is comfortably in view (uses the
     caller's tighter threshold/rootMargin), flipping `seen` → true.
   • Leave — fires only when the element is *fully* off-screen, flipping
     `seen` → false so the next entry can replay. The reset happens
     out of view, so the user never sees the content disappear.
─────────────────────────────────────────────────────────────────── */
function useInView(ref, options = { threshold: 0.15, rootMargin: "-60px" }) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;

    const enterObs = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) setSeen(true); });
    }, options);
    enterObs.observe(el);

    const leaveObs = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (!en.isIntersecting) setSeen(false); });
    }, { threshold: 0, rootMargin: "0px" });
    leaveObs.observe(el);

    return () => { enterObs.disconnect(); leaveObs.disconnect(); };
  }, [ref]);
  return seen;
}

function Reveal({ children, delay = 0, y = 24, style }) {
  const ref = useRef(null);
  const seen = useInView(ref);
  return (
    <div ref={ref} style={{
      opacity: seen ? 1 : 0,
      transform: seen ? "translateY(0)" : `translateY(${y}px)`,
      transition: `opacity .65s var(--ease) ${delay}s, transform .65s var(--ease) ${delay}s`,
      ...style,
    }}>
      {children}
    </div>
  );
}

/* ── ANIMATED HEADING ─────────────────────────────────────────────
   Reusable heading w/ motion variants:
     word-up      — words fade-up with stagger (default)
     letter-up    — letters fade-up with stagger
     slide-right  — words slide in from the right
     blur-in      — words fade from blur to focus
     mask-reveal  — sliding gold mask reveals each line
     highlight    — gold highlight wipes behind text as you scroll in
   lines: ["plain", { text, gradient: true, underline: true }]
─────────────────────────────────────────────────────────────────── */
function AnimatedHeading({ lines, motion = "word-up", as: Tag = "h2", className, style, delay = 0 }) {
  const ref = useRef(null);
  const seen = useInView(ref, { threshold: 0.25, rootMargin: "-40px" });

  const normLines = lines.map(l => (typeof l === "string" ? { text: l } : l));

  return (
    <Tag ref={ref} className={className} style={{ position: "relative", ...style }}>
      {normLines.map((line, li) => (
        <span key={li} style={{ display: "block", position: "relative" }}>
          <HeadingLine
            text={line.text}
            motion={motion}
            seen={seen}
            startDelay={delay + li * 0.18}
            gradient={line.gradient}
          />
          {line.underline && (
            <svg style={{ position: "absolute", left: 0, bottom: "-.05em", width: "100%", height: "0.18em", pointerEvents: "none" }} viewBox="0 0 360 14" fill="none" preserveAspectRatio="none">
              <path d="M2 10 C 90 2, 240 16, 358 8"
                stroke="#C9A227" strokeWidth="3" strokeLinecap="round" fill="none"
                strokeDasharray="500"
                style={{
                  strokeDashoffset: seen ? 0 : 500,
                  transition: `stroke-dashoffset 1.4s var(--ease) ${delay + li * 0.18 + 0.4}s`,
                }} />
            </svg>
          )}
        </span>
      ))}
    </Tag>
  );
}

function HeadingLine({ text, motion, seen, startDelay, gradient }) {
  // Split text — letter-up splits into letters w/ word groups; others split into words
  if (motion === "mask-reveal") {
    return (
      <span style={{
        display: "inline-block", position: "relative",
        clipPath: seen ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
        transition: `clip-path 1s var(--ease) ${startDelay}s`,
        ...(gradient ? {
          background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
        } : null),
      }}>
        {text}
      </span>
    );
  }

  if (motion === "highlight") {
    return (
      <span style={{ position: "relative", display: "inline-block" }}>
        <span style={{
          position: "absolute", left: -6, right: -6, top: "20%", bottom: "5%",
          background: "linear-gradient(135deg, rgba(201,162,39,.16), rgba(201,162,39,.32))",
          borderRadius: 8,
          transform: seen ? "scaleX(1)" : "scaleX(0)",
          transformOrigin: "left",
          transition: `transform .9s var(--ease) ${startDelay}s`,
          zIndex: 0,
        }} />
        <span style={{
          position: "relative", zIndex: 1,
          ...(gradient ? {
            background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
          } : null),
        }}>{text}</span>
      </span>
    );
  }

  if (motion === "letter-up") {
    // split into words to preserve spacing, each word into chars
    const words = text.split(" ");
    let idx = 0;
    return (
      <>
        {words.map((w, wi) => (
          <React.Fragment key={wi}>
            <span style={{ display: "inline-block", whiteSpace: "nowrap" }}>
              {[...w].map((ch) => {
                const i = idx++;
                return (
                  <span key={i} style={{
                    display: "inline-block",
                    opacity: seen ? 1 : 0,
                    transform: seen ? "translateY(0)" : "translateY(.4em)",
                    transition: `opacity .4s var(--ease) ${startDelay + i * 0.018}s, transform .5s var(--ease) ${startDelay + i * 0.018}s`,
                    ...(gradient ? {
                      background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
                      WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
                    } : null),
                  }}>{ch}</span>
                );
              })}
            </span>
            {wi < words.length - 1 ? " " : ""}
          </React.Fragment>
        ))}
      </>
    );
  }

  // word-based motions
  const words = text.split(" ");
  return (
    <>
      {words.map((w, i) => {
        let initial = "translateY(.5em)";
        if (motion === "slide-right") initial = "translateX(.5em)";
        if (motion === "blur-in") initial = "translateY(.2em)";
        return (
          <React.Fragment key={i}>
            <span style={{
              display: "inline-block",
              opacity: seen ? 1 : 0,
              filter: motion === "blur-in" ? (seen ? "blur(0)" : "blur(10px)") : "none",
              transform: seen ? "translate(0,0)" : initial,
              transition: `opacity .55s var(--ease) ${startDelay + i * 0.08}s, transform .6s var(--ease) ${startDelay + i * 0.08}s, filter .55s var(--ease) ${startDelay + i * 0.08}s`,
              ...(gradient ? {
                background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
              } : null),
            }}>{w}</span>
            {i < words.length - 1 ? " " : ""}
          </React.Fragment>
        );
      })}
    </>
  );
}

/* ── HOW IT WORKS ────────────────────────────────────────────────── */
function HowItWorks() {
  const ref = useRef(null);
  const seen = useInView(ref);
  const STEPS = [
    {
      step: "01", color: "#3b82f6", bg: "rgba(59,130,246,.12)",
      title: "Connect your sources",
      desc: "Link Meta Ads, Google Ads, or add a booking form. Leads flow in automatically from the platforms you already use.",
      icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>,
    },
    {
      step: "02", color: "#8b5cf6", bg: "rgba(139,92,246,.12)",
      title: "Build your pipeline",
      desc: "Create custom stages that match your sales process. Assign owners, set up automation rules, invite your team.",
      icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>,
    },
    {
      step: "03", color: "#10b981", bg: "rgba(16,185,129,.12)",
      title: "Close more deals",
      desc: "Automated follow-ups go out the moment a lead is ready. Your team focuses on conversations, not admin.",
      icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>,
    },
  ];

  return (
    <section id="how-it-works" style={{ padding: "100px 0", background: "#f8fafc", position: "relative", overflow: "hidden", scrollMarginTop: 100 }}>
      <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .5, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: 1100, margin: "0 auto", padding: "0 24px" }}>
        <Reveal>
          <div style={{ maxWidth: 600, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>How it works</p>
            <AnimatedHeading
              as="h2" className="display"
              style={{ marginTop: 12, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="highlight"
              lines={["From day one to growth"]}
            />
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              Three steps to a running sales operation. No configuration consultants needed.
            </p>
          </div>
        </Reveal>

        <div ref={ref} className="kr-how-grid" style={{ position: "relative", marginTop: 60, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28 }}>
          {/* connecting line */}
          <div className="kr-how-connector" style={{
            position: "absolute", top: 36, left: "16.67%", right: "16.67%", height: 2,
            background: "linear-gradient(90deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent)",
            transform: seen ? "scaleX(1)" : "scaleX(0)",
            transformOrigin: "left",
            transition: "transform 1.2s var(--ease) .2s",
          }} />
          {/* moving dot along line */}
          <div className="kr-how-connector" style={{
            position: "absolute", top: 30, left: "16.67%", width: 14, height: 14, borderRadius: "50%",
            background: "var(--gold)", boxShadow: "0 0 0 4px rgba(201,162,39,.2), 0 4px 12px rgba(201,162,39,.4)",
            opacity: seen ? 1 : 0, transition: "opacity .4s var(--ease) 1.2s",
            animation: seen ? "kr-step-dot 6s ease-in-out infinite" : "none",
          }} />

          {STEPS.map((s, i) => (
            <Reveal key={s.step} delay={0.2 + i * 0.12}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", position: "relative", zIndex: 1 }}>
                <div style={{
                  position: "relative", width: 76, height: 76, borderRadius: 20,
                  background: "#fff", border: "1px solid var(--line-2)",
                  display: "grid", placeItems: "center", color: s.color,
                  boxShadow: "0 12px 30px -12px rgba(15,23,42,.18)",
                  marginBottom: 24,
                }}>
                  {s.icon}
                  <span style={{
                    position: "absolute", top: -10, right: -10, width: 28, height: 28, borderRadius: "50%",
                    background: "var(--ink)", color: "var(--gold)", display: "grid", placeItems: "center",
                    fontSize: 11, fontWeight: 800,
                  }}>{s.step}</span>
                </div>
                <h3 className="display" style={{ margin: 0, fontSize: 19, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.02em" }}>{s.title}</h3>
                <p style={{ margin: "12px auto 0", maxWidth: 280, fontSize: 14, lineHeight: 1.55, color: "var(--muted)", fontWeight: 500 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes kr-step-dot {
          0%   { left: 16.67%; }
          33%  { left: 50%; }
          66%  { left: calc(83.33% - 14px); }
          100% { left: 16.67%; }
        }
      `}</style>
    </section>
  );
}

/* ── PIPELINE SECTION (animated kanban) ──────────────────────────── */
function PipelineSection() {
  const COLS = [
    { label: "New", color: "#3b82f6", count: 12 },
    { label: "Qualified", color: "#10b981", count: 8 },
    { label: "Closed Won", color: "#059669", count: 38 },
  ];

  // Card "in motion" — every cycle, a card travels from col 0 → col 1 → col 2
  const [phase, setPhase] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setPhase(p => (p + 1) % 4), 1800);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="pipeline" style={{ padding: "100px 0", background: "#fff", position: "relative" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
        <div className="kr-pipe-grid" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 56, alignItems: "center" }}>

          <Reveal>
            <div>
              <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>Visual pipeline</p>
              <AnimatedHeading
                as="h2" className="display"
                style={{ marginTop: 12, fontSize: "clamp(32px, 3.6vw, 46px)", lineHeight: 1.05, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
                motion="slide-right"
                lines={["See every deal at a glance."]}
              />
              <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
                Drag &amp; drop leads through stages. Filter by source, owner, or score. The board updates in real-time across your whole team — no refresh needed.
              </p>
              <ul style={{ marginTop: 22, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
                {[
                  { bold: "Customisable stages", rest: ", match your sales motion exactly." },
                  { bold: "Live presence", rest: ", see who's on which lead, like a Figma file." },
                  { bold: "Smart filters", rest: ", saved views per role, market, or rep." },
                ].map(it => (
                  <li key={it.bold} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{ width: 22, height: 22, borderRadius: "50%", background: "rgba(16,185,129,.14)", display: "grid", placeItems: "center", marginTop: 2, flexShrink: 0 }}>
                      <Check size={12} />
                    </span>
                    <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: "var(--muted)", fontWeight: 500 }}>
                      <span style={{ color: "var(--ink)", fontWeight: 800 }}>{it.bold}</span>{it.rest}
                    </p>
                  </li>
                ))}
              </ul>
              <a href="#cta" style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 800, color: "var(--ink)", textDecoration: "underline", textDecorationColor: "var(--gold)", textUnderlineOffset: 6 }}>
                Explore the pipeline board <Arrow size={14} />
              </a>
            </div>
          </Reveal>

          <Reveal delay={0.15}>
            <div style={{
              borderRadius: 24, background: "#fff",
              border: "1px solid var(--line-2)", padding: 16,
              boxShadow: "0 30px 70px -22px rgba(15,23,42,.22), 0 8px 24px -10px rgba(15,23,42,.08)",
            }}>
              <div className="kr-pipe-kanban" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
                {COLS.map((col, ci) => (
                  <div key={col.label} style={{ borderRadius: 14, background: "#f8fafc", padding: 12, minHeight: 280 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 11, fontWeight: 800, color: "var(--ink)", textTransform: "uppercase", letterSpacing: ".1em" }}>
                        <span style={{ width: 8, height: 8, borderRadius: "50%", background: col.color }} />{col.label}
                      </span>
                      <span style={{ fontSize: 11, fontWeight: 700, color: "var(--muted)", background: "#fff", border: "1px solid var(--line)", borderRadius: 999, padding: "2px 8px" }}>{col.count}</span>
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 8, position: "relative" }}>
                      {ci === 0 && <PipelineCard title="New enquiry" sub="Website · Meta Ads" tag="Meta" tagColor="#1877f2" highlight={phase === 0} />}
                      {ci === 0 && <PipelineCard title="Callback request" sub="Landing · Website" tag="Web" tagColor="#7c3aed" />}
                      {ci === 1 && <PipelineCard title="Qualified lead" sub="Google · high intent" tag="Google" tagColor="#ea4335" highlight={phase === 1 || phase === 2} ring={phase === 1} />}
                      {ci === 1 && <PipelineCard title="Demo request" sub="Website · booking" tag="Web" tagColor="#7c3aed" />}
                      {ci === 2 && <PipelineCard title="Deal marked won" sub="Pipeline · closed" tag="Won" tagColor="#059669" highlight={phase === 3} />}
                      {ci === 2 && <PipelineCard title="Follow-up done" sub="n8n · automated" tag="Won" tagColor="#059669" />}
                    </div>
                  </div>
                ))}
              </div>

              {/* Live presence chips */}
              <div style={{ marginTop: 14, padding: "10px 14px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "#f8fafc", borderRadius: 12, border: "1px solid var(--line)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--emerald)" }} className="kr-pulse-dot" />
                  <span style={{ fontSize: 11, fontWeight: 800, color: "var(--ink)" }}>3 teammates viewing</span>
                </div>
                <div style={{ display: "flex" }}>
                  {["#3b82f6","#8b5cf6","#C9A227"].map((c, i) => (
                    <span key={i} style={{ width: 22, height: 22, borderRadius: "50%", background: c, marginLeft: i === 0 ? 0 : -6, border: "2px solid #f8fafc", display: "grid", placeItems: "center", color: "#fff", fontSize: 9, fontWeight: 800 }}>
                      {["A","S","V"][i]}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PipelineCard({ title, sub, tag, tagColor, highlight, ring }) {
  return (
    <div style={{
      borderRadius: 10, background: "#fff",
      border: `1px solid ${ring ? "rgba(59,130,246,.45)" : "var(--line)"}`,
      padding: 10,
      boxShadow: highlight ? `0 10px 22px -10px ${tagColor}66, 0 0 0 2px ${tagColor}22` : "0 1px 0 rgba(15,23,42,.02)",
      transform: highlight ? "translateY(-3px) scale(1.03)" : "translateY(0)",
      transition: "all .4s var(--ease)",
    }}>
      <div style={{ fontSize: 12, fontWeight: 800, color: "var(--ink)" }}>{title}</div>
      <div style={{ fontSize: 11, fontWeight: 600, color: "var(--muted-2)", marginTop: 2 }}>{sub}</div>
      <div style={{ marginTop: 8 }}>
        <span style={{ fontSize: 10, fontWeight: 800, padding: "2px 8px", borderRadius: 999, color: tagColor, background: `${tagColor}18` }}>{tag}</span>
      </div>
    </div>
  );
}

/* ── INTEGRATIONS — animated HUB (data flows into Kredoo) ──────── */
function IntegrationsSection() {
  // 10 integration nodes arranged around an ellipse
  const ITEMS = [
    { name: "Meta Ads",  color: "#1877F2", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#1877F2"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>) },
    { name: "Google",    color: "#4285F4", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" /><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" /><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" /><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" /></svg>) },
    { name: "WhatsApp",  color: "#25D366", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#25D366"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" /></svg>) },
    { name: "n8n",       color: "#FF6D5A", icon: (
      <svg width="36" height="22" viewBox="0 0 48 32" fill="none"><circle cx="8" cy="16" r="7" fill="#FF6D5A" /><circle cx="40" cy="16" r="7" fill="#FF6D5A" /><line x1="15" y1="16" x2="33" y2="16" stroke="#FF6D5A" strokeWidth="3" /><circle cx="24" cy="16" r="4" fill="white" opacity="0.8" /></svg>) },
    { name: "LinkedIn",  color: "#0A66C2", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#0A66C2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>) },
    { name: "Instagram", color: "#d6249f", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24">
        <defs><radialGradient id="iglp3" cx="30%" cy="107%" r="150%">
          <stop offset="0%" stopColor="#fdf497" /><stop offset="30%" stopColor="#fd5949" />
          <stop offset="60%" stopColor="#d6249f" /><stop offset="90%" stopColor="#285AEB" />
        </radialGradient></defs>
        <path fill="url(#iglp3)" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.791-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
      </svg>) },
    { name: "Gmail",     color: "#EA4335", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#EA4335"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>) },
    { name: "Outlook",   color: "#0078D4", icon: (
      <svg width="28" height="28" viewBox="0 0 36 36"><rect width="36" height="36" rx="7" fill="#0078D4" /><path d="M7 12l11 8 11-8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" /><rect x="6" y="11" width="24" height="16" rx="2" stroke="white" strokeWidth="2" fill="none" /></svg>) },
    { name: "Slack",     color: "#E01E5A", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#E01E5A" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" /><path fill="#36C5F0" d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" /><path fill="#2EB67D" d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.272 0a2.528 2.528 0 0 1-2.522 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.162 0a2.528 2.528 0 0 1 2.522 2.522v6.312z" /><path fill="#ECB22E" d="M15.162 18.956a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.162 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.272a2.527 2.527 0 0 1-2.52-2.522 2.526 2.526 0 0 1 2.52-2.52h6.316A2.527 2.527 0 0 1 24 15.162a2.528 2.528 0 0 1-2.522 2.522h-6.316z" /></svg>) },
    { name: "Webhooks",  color: "#6C5CE7", icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#6C5CE7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M6 21V9a9 9 0 0 0 9 9" /></svg>) },
  ];

  // ellipse: cx 400, cy 270, rx 340, ry 210
  const cx = 400, cy = 280, rx = 340, ry = 220;
  const pos = ITEMS.map((it, i) => {
    const angle = -Math.PI / 2 + (i / ITEMS.length) * Math.PI * 2;
    return { x: cx + rx * Math.cos(angle), y: cy + ry * Math.sin(angle), ...it };
  });

  // Animated counter — total leads streaming in
  const [count, setCount] = useState(2840);
  useEffect(() => {
    const t = setInterval(() => setCount(c => c + Math.floor(Math.random() * 4) + 1), 1200);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="integrations" style={{ padding: "100px 0", background: "#f8fafc", position: "relative", overflow: "hidden", scrollMarginTop: 100 }}>
      <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .4, pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(50% 50% at 50% 50%, rgba(59,130,246,.08), transparent 70%)", pointerEvents: "none" }} />

      <div style={{ position: "relative", maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
        <Reveal>
          <div style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>Integrations</p>
            <AnimatedHeading
              as="h2" className="display"
              style={{ marginTop: 12, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="blur-in"
              lines={["Every channel flows into one pipeline"]}
            />
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              Native connections to the platforms you already run on. Leads route through Kredoo automatically — no copying, no exports, no spreadsheets.
            </p>
          </div>
        </Reveal>

        {/* HUB visualization */}
        <Reveal delay={0.15}>
          <div className="kr-int-hub" style={{ position: "relative", marginTop: 56, height: 580, maxWidth: 900, marginInline: "auto" }}>
            {/* Pulsing rings behind hub */}
            <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", pointerEvents: "none" }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  position: "absolute", width: 140 + i * 90, height: 140 + i * 90,
                  top: "50%", left: "50%", transform: "translate(-50%,-50%)",
                  borderRadius: "50%", border: "1px solid rgba(201,162,39,.22)",
                  animation: `kr-int-pulse 4s ease-in-out ${i * 1.1}s infinite`,
                }} />
              ))}
            </div>

            {/* SVG with connection lines + flowing dots */}
            <svg viewBox="0 0 800 560" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} preserveAspectRatio="xMidYMid meet">
              <defs>
                <radialGradient id="hubGlow" cx="50%" cy="50%" r="50%">
                  <stop offset="0" stopColor="#C9A227" stopOpacity=".25" />
                  <stop offset="1" stopColor="#C9A227" stopOpacity="0" />
                </radialGradient>
                {pos.map((p, i) => (
                  <linearGradient key={i} id={`line-${i}`} x1={p.x} y1={p.y} x2={cx} y2={cy} gradientUnits="userSpaceOnUse">
                    <stop offset="0" stopColor={p.color} stopOpacity=".55" />
                    <stop offset="1" stopColor={p.color} stopOpacity=".05" />
                  </linearGradient>
                ))}
              </defs>

              {/* hub glow */}
              <circle cx={cx} cy={cy} r="120" fill="url(#hubGlow)" />

              {/* lines from each logo into hub */}
              {pos.map((p, i) => (
                <g key={`line-${i}`}>
                  <line x1={p.x} y1={p.y} x2={cx} y2={cy}
                    stroke={`url(#line-${i})`} strokeWidth="1.4" strokeDasharray="4 6" />
                  {/* flowing dot */}
                  <circle r="4" fill={p.color}>
                    <animate attributeName="cx" from={p.x} to={cx} dur={`${2.4 + (i % 4) * 0.4}s`} repeatCount="indefinite" begin={`${(i * 0.25) % 2.4}s`} />
                    <animate attributeName="cy" from={p.y} to={cy} dur={`${2.4 + (i % 4) * 0.4}s`} repeatCount="indefinite" begin={`${(i * 0.25) % 2.4}s`} />
                    <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.15;.85;1" dur={`${2.4 + (i % 4) * 0.4}s`} repeatCount="indefinite" begin={`${(i * 0.25) % 2.4}s`} />
                    <animate attributeName="r" values="3.5;5;3.5" dur={`${2.4 + (i % 4) * 0.4}s`} repeatCount="indefinite" begin={`${(i * 0.25) % 2.4}s`} />
                  </circle>
                </g>
              ))}
            </svg>

            {/* Logo nodes */}
            {pos.map((p, i) => (
              <div key={p.name} className="kr-int-node" style={{
                position: "absolute", left: `${(p.x / 800) * 100}%`, top: `${(p.y / 560) * 100}%`,
                transform: "translate(-50%,-50%)",
                width: 84, padding: 12,
                background: "#fff", border: "1px solid var(--line)", borderRadius: 18,
                display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                boxShadow: "0 12px 28px -12px rgba(15,23,42,.18)",
                animation: `kr-int-float ${4 + (i % 3) * 0.7}s ease-in-out ${i * 0.2}s infinite`,
                transition: "transform .25s var(--ease), box-shadow .25s var(--ease)",
                cursor: "default",
                zIndex: 2,
              }}>
                <div style={{ height: 28, display: "grid", placeItems: "center" }}>{p.icon}</div>
                <p style={{ margin: 0, fontSize: 10, fontWeight: 800, color: "var(--ink)" }}>{p.name}</p>
              </div>
            ))}

            {/* CENTRAL KREDOO HUB - LIGHT */}
            <div style={{
              position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
              width: 168, height: 168, borderRadius: "50%",
              background: "radial-gradient(circle at 30% 30%, #ffffff 0%, #f8fafc 70%)",
              boxShadow: "0 32px 80px -16px rgba(15,23,42,.22), inset 0 2px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(201,162,39,.45)",
              display: "grid", placeItems: "center", color: "var(--ink)",
              zIndex: 3,
            }}>
              {/* outer rotating shimmer ring */}
              <div style={{
                position: "absolute", inset: -14, borderRadius: "50%",
                background: "conic-gradient(from 0deg, transparent 0%, rgba(201,162,39,.55) 25%, transparent 50%, rgba(59,130,246,.45) 75%, transparent 100%)",
                animation: "kr-spin-slow 7s linear infinite",
                filter: "blur(8px)", opacity: .55,
              }} />
              {/* inner gold ring */}
              <div style={{
                position: "absolute", inset: 6, borderRadius: "50%",
                border: "1px solid rgba(201,162,39,.25)",
              }} />
              <div style={{ position: "relative", textAlign: "center" }}>
                <img src="/kredoo-logo-transparent.png" alt="Kredoo" style={{ height: 32, width: "auto", objectFit: "contain", display: "block" }} />
                <div style={{ marginTop: 6, padding: "2px 10px", borderRadius: 999, background: "linear-gradient(135deg,#FFF8E1,#FFFBEF)", border: "1px solid rgba(201,162,39,.4)", display: "inline-flex", alignItems: "center", gap: 5 }}>
                  <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--gold)" }} className="kr-pulse-dot" />
                  <span style={{ fontSize: 9, fontWeight: 800, color: "#8a6a14", letterSpacing: ".08em", textTransform: "uppercase" }}>Hub</span>
                </div>
              </div>
            </div>

            {/* Floating live counter */}
            <div className="kr-int-counter" style={{
              position: "absolute", right: 8, top: 8, zIndex: 4,
              padding: "10px 14px", borderRadius: 14,
              background: "rgba(255,255,255,.9)", backdropFilter: "blur(8px)",
              border: "1px solid var(--line-2)",
              boxShadow: "0 14px 30px -14px rgba(15,23,42,.2)",
            }}>
              <p style={{ margin: 0, fontSize: 10, fontWeight: 800, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>Leads streaming in</p>
              <p key={count} className="display" style={{ margin: "2px 0 0", fontSize: 22, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.02em", animation: "kr-count .35s var(--ease)" }}>
                {count.toLocaleString()}<span style={{ color: "var(--gold)", fontSize: 14 }}> today</span>
              </p>
            </div>
          </div>
        </Reveal>

        <Reveal delay={0.3}>
          <p style={{ marginTop: 20, textAlign: "center", fontSize: 13, fontWeight: 700, color: "var(--muted)" }}>
            + 30 more integrations via Zapier and webhooks · <a href="/" style={{ color: "var(--ink)", textDecoration: "underline", textDecorationColor: "var(--gold)", textUnderlineOffset: 4 }}>see all integrations →</a>
          </p>
        </Reveal>
      </div>

      <style>{`
        @keyframes kr-int-pulse {
          0%   { transform: translate(-50%,-50%) scale(1);    opacity: .55; }
          70%  { transform: translate(-50%,-50%) scale(1.35); opacity: 0; }
          100% { transform: translate(-50%,-50%) scale(1);    opacity: .55; }
        }
        @keyframes kr-int-float {
          0%,100% { transform: translate(-50%,-50%) translateY(0); }
          50%     { transform: translate(-50%,-50%) translateY(-6px); }
        }
        .kr-int-node:hover { box-shadow: 0 18px 40px -12px rgba(15,23,42,.28); }
      `}</style>
    </section>
  );
}

/* ── PRODUCT PROOF ────────────────────────────────────────────────── */
function ProductProof() {
  const ITEMS = [
    {
      title: "Capture leads the moment they arrive",
      description: "Connect Meta and Google sources so new enquiries land directly in your CRM instead of getting buried in inboxes, exports, or spreadsheets.",
      label: "Lead capture", color: "#3b82f6", motion: "capture",
      stats: [{ val: "Seconds", l: "from form to CRM" }, { val: "Meta + Google", l: "ad sources ready" }],
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>,
    },
    {
      title: "Run your pipeline without spreadsheet chaos",
      description: "Move leads through custom stages, assign owners, track activity, and keep the whole team looking at the same live board.",
      label: "Pipeline workspace", color: "#8b5cf6", motion: "pipeline",
      stats: [{ val: "Custom", l: "stages and fields" }, { val: "Live", l: "team pipeline view" }],
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>,
    },
    {
      title: "Automate the follow-up work",
      description: "Use n8n and webhook flows to trigger emails, WhatsApp messages, tasks, and internal alerts as soon as a lead reaches the right stage.",
      label: "Automation", color: "#10b981", motion: "automation",
      stats: [{ val: "n8n", l: "workflow support" }, { val: "Rules", l: "stage-based triggers" }],
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg>,
    },
    {
      title: "Launch with the basics already covered",
      description: "Start with booking links, imports, field mapping, team roles, and reporting foundations so early sales operations do not become messy later.",
      label: "Ready to operate", color: "#C9A227", motion: "launch",
      stats: [{ val: "CSV", l: "import and mapping" }, { val: "Bookings", l: "links and calendar" }],
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>,
    },
  ];

  return (
    <section style={{ padding: "100px 0", background: "#f8fafc", position: "relative", overflow: "hidden" }}>
      <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .5 }} />
      <div style={{ position: "relative", maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
        <Reveal>
          <div style={{ maxWidth: 700, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>Built for the first sales motion</p>
            <AnimatedHeading
              as="h2" className="display"
              style={{ marginTop: 12, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="word-up"
              lines={["See what Kredoo does before the", "first customer story"]}
            />
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              A practical breakdown of the workflows Kredoo helps you put in place: capture, pipeline, automation, and launch operations.
            </p>
          </div>
        </Reveal>

        <div className="kr-pp-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          {ITEMS.map((it, i) => (
            <Reveal key={it.title} delay={0.08 * i}>
              <article className="kr-pp-card" style={{
                position: "relative", borderRadius: 22, background: "#fff",
                border: "1px solid var(--line-2)", padding: 26, minHeight: 360,
                boxShadow: "0 18px 50px -34px rgba(15,23,42,.32)",
                transition: "transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)",
                overflow: "hidden",
              }}>
                {/* top accent bar with traveling shimmer */}
                <div style={{ position: "absolute", left: 0, right: 0, top: 0, height: 3, background: `linear-gradient(90deg, ${it.color}, transparent)`, overflow: "hidden" }}>
                  <div style={{
                    position: "absolute", top: 0, bottom: 0, width: "30%",
                    background: `linear-gradient(90deg, transparent, ${it.color}, transparent)`,
                    animation: `kr-pp-shimmer 3.4s linear ${i * 0.4}s infinite`,
                  }} />
                </div>

                {/* Background glow */}
                <div className="kr-pp-glow" style={{ position: "absolute", right: -40, top: -40, width: 200, height: 200, borderRadius: "50%", background: `${it.color}24`, filter: "blur(24px)", opacity: 0, transition: "opacity .35s var(--ease)" }} />

                {/* Subtle moving dot pattern in background */}
                <div style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none",
                  backgroundImage: `radial-gradient(${it.color}18 1px, transparent 1px)`,
                  backgroundSize: "20px 20px",
                  animation: `kr-pp-pan 14s linear ${i * 0.3}s infinite`,
                }} />

                <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0, flex: 1 }}>
                    <div style={{
                      position: "relative", flexShrink: 0,
                      width: 46, height: 46, borderRadius: 14,
                      background: `${it.color}1a`, color: it.color,
                      display: "grid", placeItems: "center",
                    }}>
                      {/* ripple ring */}
                      <span style={{
                        position: "absolute", inset: -3, borderRadius: 16,
                        border: `1.5px solid ${it.color}55`,
                        animation: `kr-pp-ripple 2.6s ease-out ${i * 0.3}s infinite`,
                      }} />
                      {it.icon}
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <p style={{ margin: 0, fontSize: 13, fontWeight: 800, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.label}</p>
                      <p style={{ margin: "2px 0 0", fontSize: 10, fontWeight: 700, color: "var(--muted-2)", letterSpacing: ".06em", textTransform: "uppercase" }}>Product capability</p>
                    </div>
                  </div>
                  <span style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 9px", borderRadius: 999, fontSize: 9, fontWeight: 800, color: it.color, background: `${it.color}14`, border: `1px solid ${it.color}33`, letterSpacing: ".1em", textTransform: "uppercase" }}>
                    <span style={{ width: 5, height: 5, borderRadius: "50%", background: it.color }} className="kr-pulse-dot" />
                    Live
                  </span>
                </div>

                <h3 className="display" style={{ position: "relative", margin: "24px 0 0", fontSize: 24, lineHeight: 1.15, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.02em" }}>
                  {it.title}
                </h3>
                <p style={{ position: "relative", margin: "12px 0 0", fontSize: 14, lineHeight: 1.55, color: "var(--muted)", fontWeight: 500 }}>
                  {it.description}
                </p>

                {/* Mini animated visualization */}
                <div style={{ position: "relative", marginTop: 18, height: 36 }}>
                  <PPMotion kind={it.motion} color={it.color} />
                </div>

                <div style={{ position: "relative", marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {it.stats.map(s => (
                    <div key={s.l} style={{ borderRadius: 12, background: "#f8fafc", border: "1px solid var(--line)", padding: 14, position: "relative", overflow: "hidden" }}>
                      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 2, background: it.color }} />
                      <p className="display" style={{ margin: 0, fontSize: 20, fontWeight: 800, color: it.color, letterSpacing: "-.02em", lineHeight: 1 }}>{s.val}</p>
                      <p style={{ margin: "8px 0 0", fontSize: 10, fontWeight: 700, color: "var(--muted-2)", textTransform: "uppercase", letterSpacing: ".08em" }}>{s.l}</p>
                    </div>
                  ))}
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .kr-pp-card:hover{transform:translateY(-4px);border-color:#cbd5e1;box-shadow:0 26px 60px -28px rgba(15,23,42,.4)}
        .kr-pp-card:hover .kr-pp-glow{opacity:1}
        @keyframes kr-pp-shimmer { 0%{left:-30%} 100%{left:100%} }
        @keyframes kr-pp-ripple {
          0%   { transform: scale(1);    opacity: .8; }
          70%  { transform: scale(1.5);  opacity: 0; }
          100% { transform: scale(1);    opacity: .8; }
        }
        @keyframes kr-pp-pan {
          from { background-position: 0 0; }
          to   { background-position: 80px 80px; }
        }
      `}</style>
    </section>
  );
}

/* Mini-visualization per card */
function PPMotion({ kind, color }) {
  if (kind === "capture") {
    // Lead capture: dots flying from "Meta/Google" left → CRM right
    return (
      <svg viewBox="0 0 360 36" preserveAspectRatio="none" style={{ width: "100%", height: 36 }}>
        <text x="6" y="20" fill="#94a3b8" fontSize="9" fontWeight="700" fontFamily="Plus Jakarta Sans, sans-serif" letterSpacing=".08em">META · GOOGLE</text>
        <text x="304" y="20" fill="#0f172a" fontSize="9" fontWeight="800" fontFamily="Plus Jakarta Sans, sans-serif" letterSpacing=".08em">KREDOO</text>
        <line x1="86" y1="18" x2="296" y2="18" stroke="#cbd5e1" strokeWidth="1" strokeDasharray="3 4" />
        {[0, 0.4, 0.8].map((d, i) => (
          <circle key={i} r="3" fill={color}>
            <animate attributeName="cx" from="92" to="290" dur="2.2s" repeatCount="indefinite" begin={`${d}s`} />
            <animate attributeName="cy" values="18;18;18" dur="2.2s" repeatCount="indefinite" begin={`${d}s`} />
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.15;.8;1" dur="2.2s" repeatCount="indefinite" begin={`${d}s`} />
          </circle>
        ))}
      </svg>
    );
  }
  if (kind === "pipeline") {
    // Three stages with a card hopping between them
    return (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, height: 36, alignItems: "center" }}>
        {["New", "Qualified", "Won"].map((stage, i) => (
          <div key={stage} style={{
            position: "relative", height: 28, borderRadius: 8,
            background: "#f8fafc", border: `1px solid ${color}28`,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 9, fontWeight: 800, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase",
          }}>
            {stage}
            <span style={{
              position: "absolute", inset: 2, borderRadius: 6,
              background: color, opacity: 0,
              animation: `kr-pp-stage 4.5s ease-in-out infinite`,
              animationDelay: `${i * 1.5}s`,
            }} />
          </div>
        ))}
        <style>{`
          @keyframes kr-pp-stage {
            0%, 75%, 100% { opacity: 0; transform: scale(.95); }
            8%, 25% { opacity: .14; transform: scale(1); }
          }
        `}</style>
      </div>
    );
  }
  if (kind === "automation") {
    // Trigger → Action animated waveform
    return (
      <svg viewBox="0 0 360 36" preserveAspectRatio="none" style={{ width: "100%", height: 36 }}>
        <defs>
          <linearGradient id="auto-grad" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor={color} stopOpacity="0" />
            <stop offset=".5" stopColor={color} stopOpacity=".7" />
            <stop offset="1" stopColor={color} stopOpacity="0" />
          </linearGradient>
        </defs>
        <text x="6" y="20" fill="#94a3b8" fontSize="9" fontWeight="700" fontFamily="Plus Jakarta Sans, sans-serif" letterSpacing=".08em">TRIGGER</text>
        <text x="304" y="20" fill="#0f172a" fontSize="9" fontWeight="800" fontFamily="Plus Jakarta Sans, sans-serif" letterSpacing=".08em">ACTION</text>
        {/* base line */}
        <path d="M 70 18 Q 110 4, 150 18 T 230 18 T 295 18" fill="none" stroke="#e2e8f0" strokeWidth="1.5" />
        {/* travelling highlight */}
        <path d="M 70 18 Q 110 4, 150 18 T 230 18 T 295 18" fill="none" stroke={color} strokeWidth="2"
          strokeDasharray="50 200" strokeLinecap="round">
          <animate attributeName="stroke-dashoffset" from="250" to="0" dur="2.4s" repeatCount="indefinite" />
        </path>
        <circle cx="70" cy="18" r="3" fill={color} />
        <circle cx="295" cy="18" r="3" fill={color} />
      </svg>
    );
  }
  if (kind === "launch") {
    // Progress bar filling
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10, height: 36 }}>
        <span style={{ fontSize: 9, fontWeight: 800, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase", whiteSpace: "nowrap" }}>Setup</span>
        <div style={{ flex: 1, height: 8, borderRadius: 999, background: "#f8fafc", border: "1px solid var(--line)", overflow: "hidden", position: "relative" }}>
          <div style={{
            position: "absolute", left: 0, top: 0, bottom: 0,
            background: `linear-gradient(90deg, ${color}, ${color}99)`,
            borderRadius: 999,
            animation: "kr-pp-fill 3.6s ease-in-out infinite",
          }} />
        </div>
        <span className="mono" style={{ fontSize: 10, fontWeight: 700, color: "var(--ink)", minWidth: 32, textAlign: "right" }}>
          <span style={{ animation: "kr-pp-pct 3.6s ease-in-out infinite" }}>5m</span>
        </span>
        <style>{`
          @keyframes kr-pp-fill {
            0%   { width: 0%; }
            70%  { width: 100%; }
            100% { width: 100%; }
          }
        `}</style>
      </div>
    );
  }
  return null;
}

Object.assign(window, { HowItWorks, PipelineSection, IntegrationsSection, ProductProof, Reveal, useInView, AnimatedHeading });
