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

/* ── PRICING ─────────────────────────────────────────────────────── */
function PricingSection() {
  const [billing, setBilling] = useState("monthly"); // monthly | yearly
  const yearlyOff = 0.2; // 20% off

  // Toggle slider sizing — measure each button so the dark pill matches the
  // active one's real width (the "yearly SAVE 20%" button is wider).
  const btnRefs = useRef({ monthly: null, yearly: null });
  const [sliderPos, setSliderPos] = useState({ left: 4, width: 0 });
  useEffect(() => {
    const measure = () => {
      const btn = btnRefs.current[billing];
      if (btn) setSliderPos({ left: btn.offsetLeft, width: btn.offsetWidth });
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, [billing]);

  const PLANS = [
    { name: "Starter",    audience: "Solo agents",        price: 499,    note: "Validate your first sales workflow",  cta: "Get Started", featured: false,
      features: ["500 leads", "1 integration source", "Booking calendar + 1 link", "Basic dashboard", "2 team members"] },
    { name: "Growth",     audience: "Growing teams",      price: 2499,   note: "Capture and manage multiple sources", cta: "Get Started", featured: false,
      features: ["Unlimited leads", "All 4 integrations", "Lead analysis & reporting", "5 booking links", "5 team members"] },
    { name: "Pro",        audience: "Automation-ready",   price: 4999,   note: "Add email follow-ups and exports",     cta: "Get Started", featured: false,
      features: ["Everything in Growth", "Email automation (3 flows)", "CSV data export", "10 booking links", "10 team members"] },
    { name: "Business",   audience: "WhatsApp-first",     price: 8999,   note: "Best fit once inbound volume grows",   cta: "Get Started", featured: true,
      features: ["Everything in Pro", "WhatsApp automation (5 flows)", "Custom WA templates", "Unlimited booking links", "20 team members"] },
    { name: "Enterprise", audience: "Full automation",    price: 14999,  note: "For custom scale and API needs",       cta: "Contact us",  featured: false,
      features: ["Everything in Business", "SMS automation (4 flows)", "Unlimited team members", "API access", "Priority support"] },
  ];

  function priceFor(p) {
    return billing === "yearly" ? Math.round(p.price * (1 - yearlyOff)) : p.price;
  }

  return (
    <section id="pricing" style={{ padding: "100px 0", background: "#fff", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 40% at 50% 0%, rgba(201,162,39,.06), transparent 60%)", pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "0 24px" }}>
        <Reveal>
          <div style={{ maxWidth: 640, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>Pricing</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="mask-reveal"
              lines={[
                "Simple pricing.",
                { text: "Built to scale.", gradient: true },
              ]}
            />
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              Pick a plan and go live today. Your pipeline, your pace.
            </p>
          </div>
        </Reveal>

        {/* Billing toggle */}
        <Reveal delay={0.1}>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
            <div style={{
              display: "inline-flex", padding: 4, borderRadius: 999,
              background: "#f8fafc", border: "1px solid var(--line-2)",
              position: "relative",
            }}>
              {/* slider */}
              <span style={{
                position: "absolute", top: 4, bottom: 4,
                left: sliderPos.left,
                width: sliderPos.width,
                background: "var(--ink)", borderRadius: 999,
                boxShadow: "0 6px 18px -6px rgba(10,14,26,.4), inset 0 1px 0 rgba(201,162,39,.3)",
                transition: "left .3s var(--ease), width .3s var(--ease)",
              }} />
              {["monthly", "yearly"].map(b => (
                <button key={b} ref={el => { btnRefs.current[b] = el; }} onClick={() => setBilling(b)} style={{
                  position: "relative", padding: "10px 22px", border: 0, background: "transparent",
                  fontSize: 13, fontWeight: 800, cursor: "pointer",
                  color: billing === b ? "#fff" : "var(--muted)",
                  textTransform: "capitalize", whiteSpace: "nowrap",
                  letterSpacing: ".02em",
                  transition: "color .3s var(--ease)",
                }}>
                  {b}
                  {b === "yearly" && (
                    <span style={{ marginLeft: 8, padding: "2px 8px", borderRadius: 999, background: billing === "yearly" ? "var(--gold)" : "var(--gold-soft)", color: billing === "yearly" ? "#0a0e1a" : "#8a6a14", fontSize: 9, fontWeight: 800, letterSpacing: ".06em" }}>
                      SAVE 20%
                    </span>
                  )}
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        <div className="kr-pricing-cards" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 }}>
          {PLANS.map((p, i) => (
            <Reveal key={p.name} delay={0.06 * i}>
              <article className={p.featured ? "kr-plan-featured" : "kr-plan"} style={{
                position: "relative", borderRadius: 22, padding: 20, minHeight: 460,
                display: "flex", flexDirection: "column",
                background: p.featured
                  ? "linear-gradient(180deg, #0a0e1a 0%, #131c33 100%)"
                  : "#fff",
                color: p.featured ? "#fff" : "var(--ink)",
                border: p.featured ? "1px solid rgba(201,162,39,.45)" : "1px solid var(--line-2)",
                boxShadow: p.featured
                  ? "0 30px 60px -20px rgba(10,14,26,.5), inset 0 1px 0 rgba(201,162,39,.25)"
                  : "0 1px 0 rgba(15,23,42,.02)",
                overflow: "hidden",
                transition: "transform .25s var(--ease), box-shadow .25s var(--ease)",
              }}>
                {/* featured glow */}
                {p.featured && (
                  <>
                    <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 50% at 50% 0%, rgba(201,162,39,.15), transparent 70%)", pointerEvents: "none" }} />
                    <span style={{ position: "absolute", top: 16, right: 16, padding: "4px 10px", borderRadius: 999, background: "linear-gradient(135deg,#E0B842,#C9A227)", color: "#0a0e1a", fontSize: 10, fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase" }}>Best fit</span>
                  </>
                )}

                <div style={{ position: "relative" }}>
                  <p style={{ margin: 0, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: p.featured ? "var(--gold)" : "var(--muted)" }}>{p.name}</p>
                  <p style={{ margin: "4px 0 0", fontSize: 12, fontWeight: 700, color: p.featured ? "rgba(255,255,255,.5)" : "var(--muted-2)" }}>{p.audience}</p>
                </div>

                <div style={{ position: "relative", marginTop: 18 }}>
                  <div style={{ display: "flex", alignItems: "flex-end", gap: 3 }}>
                    <span style={{ fontSize: 14, fontWeight: 800, color: p.featured ? "rgba(255,255,255,.7)" : "var(--muted)" }}>₹</span>
                    <span className="display" style={{ fontSize: 38, fontWeight: 800, color: p.featured ? "#fff" : "var(--ink)", lineHeight: 1, letterSpacing: "-.025em" }}>
                      {priceFor(p).toLocaleString("en-IN")}
                    </span>
                    <span style={{ marginBottom: 4, fontSize: 12, fontWeight: 700, color: p.featured ? "rgba(255,255,255,.55)" : "var(--muted-2)" }}>/mo</span>
                  </div>
                  {billing === "yearly" && (
                    <p style={{ margin: "4px 0 0", fontSize: 10, fontWeight: 700, color: p.featured ? "var(--gold)" : "#8a6a14" }}>
                      billed yearly · ₹{(priceFor(p) * 12).toLocaleString("en-IN")}/yr
                    </p>
                  )}
                  <p style={{ margin: "12px 0 0", fontSize: 12, fontWeight: 600, lineHeight: 1.45, color: p.featured ? "rgba(255,255,255,.65)" : "var(--muted)", minHeight: 36 }}>{p.note}</p>
                </div>

                <a href="/get-started" style={{
                  position: "relative",
                  marginTop: 16, height: 40, borderRadius: 12,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 12, fontWeight: 800,
                  background: p.featured ? "linear-gradient(135deg,#E0B842 0%, #C9A227 100%)" : "#0a0e1a",
                  color: p.featured ? "#0a0e1a" : "#fff",
                  boxShadow: p.featured ? "0 10px 24px -8px rgba(201,162,39,.55)" : "0 8px 20px -8px rgba(10,14,26,.4)",
                  border: 0, textDecoration: "none",
                  transition: "transform .2s var(--ease)",
                }}>
                  {p.cta}
                </a>

                <ul style={{ position: "relative", margin: "20px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 9, flex: 1 }}>
                  {p.features.map(f => (
                    <li key={f} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                      <span style={{ marginTop: 1, flexShrink: 0 }}>
                        <Check size={13} color={p.featured ? "var(--gold)" : "var(--emerald)"} />
                      </span>
                      <span style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.45, color: p.featured ? "rgba(255,255,255,.85)" : "var(--muted)" }}>{f}</span>
                    </li>
                  ))}
                </ul>
              </article>
            </Reveal>
          ))}
        </div>

        <div style={{ marginTop: 28, textAlign: "center" }}>
          <a href="/pricing" style={{ fontSize: 13, fontWeight: 800, color: "var(--ink)", textDecoration: "underline", textDecorationColor: "var(--gold)", textUnderlineOffset: 6 }}>
            See full plan comparison →
          </a>
        </div>
      </div>

      <style>{`
        .kr-plan:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(15,23,42,.22)}
        .kr-plan-featured:hover{transform:translateY(-4px);box-shadow:0 36px 70px -22px rgba(10,14,26,.55), inset 0 1px 0 rgba(201,162,39,.35)}
      `}</style>
    </section>
  );
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
function FAQSection() {
  const ITEMS = [
    { q: "How long does setup actually take?",
      a: "Under 5 minutes for the basic setup. Connect your ad accounts via OAuth, map your stages, invite your team, and you're live. Most accounts see their first auto-captured lead within 10 minutes." },
    { q: "Can I migrate from HubSpot or Pipedrive?",
      a: "Yes — drop in a CSV export from any major CRM and our field-mapping wizard handles the rest. For Growth and Enterprise plans, our team can do the migration for you." },
    { q: "Do you store my customer data securely?",
      a: "All data is encrypted at rest (AES-256) and in transit (TLS 1.3). We're SOC 2 Type II audited, GDPR-compliant, and offer EU data residency on Enterprise plans." },
    { q: "What happens after my 15-day trial?",
      a: "Your account stays active in read-only mode for 30 days, so nothing is lost. Pick a plan whenever you're ready, or export your data anytime. It's yours." },
    { q: "Is there an API?",
      a: "Yes — a full REST API plus webhooks on every plan. Pair it with n8n or Zapier for no-code workflows, or build custom integrations end-to-end." },
  ];

  const [open, setOpen] = useState(0);

  return (
    <section id="faq" style={{ padding: "100px 0", background: "#fff", position: "relative" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "0 24px" }}>
        <Reveal>
          <div style={{ textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>FAQ</p>
            <AnimatedHeading
              as="h2" className="display"
              style={{ marginTop: 12, fontSize: "clamp(32px, 3.8vw, 46px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="letter-up"
              lines={["Questions, answered."]}
            />
          </div>
        </Reveal>

        <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 10 }}>
          {ITEMS.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={it.q} delay={0.05 * i}>
                <div style={{
                  borderRadius: 18, background: "#fff", overflow: "hidden",
                  border: `1px solid ${isOpen ? "var(--line-2)" : "var(--line)"}`,
                  boxShadow: isOpen ? "0 14px 34px -16px rgba(15,23,42,.18)" : "0 1px 0 rgba(15,23,42,.02)",
                  transition: "border-color .25s var(--ease), box-shadow .25s var(--ease)",
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                    padding: 22, border: 0, background: "transparent", cursor: "pointer", textAlign: "left",
                  }}>
                    <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800, color: "var(--ink)" }}>{it.q}</h3>
                    <span style={{
                      width: 32, height: 32, borderRadius: 10, flexShrink: 0,
                      background: isOpen ? "var(--ink)" : "#f8fafc",
                      color: isOpen ? "var(--gold)" : "var(--muted)",
                      display: "grid", placeItems: "center",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                      transition: "transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease)",
                    }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                    </span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 240 : 0, opacity: isOpen ? 1 : 0,
                    overflow: "hidden",
                    transition: "max-height .35s var(--ease), opacity .25s var(--ease)",
                  }}>
                    <p style={{ margin: 0, padding: "0 22px 22px", fontSize: 13, lineHeight: 1.65, color: "var(--muted)", fontWeight: 500 }}>
                      {it.a}
                    </p>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── FINAL CTA (with pulse rings) ─────────────────────────────────── */
function FinalCTA() {
  // live ticker counter
  const [leads, setLeads] = useState(2840);
  useEffect(() => {
    const t = setInterval(() => setLeads(l => l + Math.floor(Math.random() * 3) + 1), 1500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="cta" style={{ padding: "120px 0", position: "relative", overflow: "hidden", background: "linear-gradient(180deg,#f0f6ff 0%, #ffffff 70%, #fafbfd 100%)" }}>
      {/* radial glow */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <div style={{ position: "absolute", top: "50%", left: "50%", width: 900, height: 900, transform: "translate(-50%,-50%)", borderRadius: "50%",
          background: "radial-gradient(circle, rgba(59,130,246,.07) 0%, transparent 65%)" }} />
      </div>

      {/* floating orbs */}
      <div className="kr-orb-a" style={{ position: "absolute", top: 24, left: 48, width: 360, height: 360, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(147,197,253,.45), transparent 70%)", filter: "blur(48px)" }} />
      <div className="kr-orb-b" style={{ position: "absolute", bottom: 32, right: 64, width: 320, height: 320, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(196,181,253,.5), transparent 70%)", filter: "blur(44px)" }} />
      <div className="kr-orb-c" style={{ position: "absolute", top: "30%", right: 60, width: 240, height: 240, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(254,229,138,.6), transparent 70%)", filter: "blur(34px)" }} />
      <div className="kr-orb-d" style={{ position: "absolute", bottom: 64, left: "20%", width: 200, height: 200, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(110,231,183,.35), transparent 70%)", filter: "blur(30px)" }} />

      {/* sparkle particles */}
      {[
        { x: "12%", y: "20%", c: "#C9A227", s: 8, d: 0 },
        { x: "88%", y: "26%", c: "#3b82f6", s: 6, d: 1.2 },
        { x: "18%", y: "78%", c: "#8b5cf6", s: 7, d: 2.4 },
        { x: "82%", y: "72%", c: "#10b981", s: 6, d: 0.6 },
        { x: "50%", y: "12%", c: "#C9A227", s: 5, d: 1.8 },
        { x: "8%",  y: "50%", c: "#ef4444", s: 5, d: 2.8 },
        { x: "92%", y: "48%", c: "#C9A227", s: 6, d: 3.2 },
        { x: "30%", y: "88%", c: "#3b82f6", s: 5, d: 0.9 },
      ].map((p, i) => (
        <span key={i} style={{
          position: "absolute", left: p.x, top: p.y,
          width: p.s, height: p.s, borderRadius: "50%",
          background: p.c, boxShadow: `0 0 ${p.s * 2}px ${p.c}88`,
          animation: `kr-cta-sparkle 3s ease-in-out ${p.d}s infinite`,
          pointerEvents: "none",
        }} />
      ))}

      <div style={{ position: "relative", maxWidth: 1000, margin: "0 auto", padding: "0 24px" }}>
        {/* pulse rings */}
        <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", pointerEvents: "none" }}>
          {[0, 1, 2, 3].map(i => (
            <span key={i} style={{
              position: "absolute", width: 320 + i * 130, height: 320 + i * 130,
              top: "50%", left: "50%", transform: "translate(-50%,-50%)",
              borderRadius: "50%", border: "1px solid rgba(99,102,241,.22)",
              animation: `kr-cta-pulse 4.5s ease-in-out ${i * 1.1}s infinite`,
            }} />
          ))}
        </div>

        <Reveal>
          <div className="kr-cta-card" style={{
            position: "relative", padding: "64px 56px 56px", borderRadius: 32, textAlign: "center",
            background: "rgba(255,255,255,.85)",
            backdropFilter: "blur(28px)", WebkitBackdropFilter: "blur(28px)",
            border: "1px solid rgba(219,234,254,.9)",
            boxShadow: "0 8px 64px rgba(59,130,246,.1), 0 2px 24px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.95)",
          }}>
            {/* social proof */}
            <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
              <div style={{ display: "flex" }}>
                {["#3b82f6","#8b5cf6","#10b981","#C9A227","#ef4444"].map((c, i) => (
                  <span key={i} style={{
                    width: 28, height: 28, borderRadius: "50%", background: c,
                    marginLeft: i === 0 ? 0 : -8, border: "2px solid #fff",
                    display: "grid", placeItems: "center", color: "#fff", fontSize: 10, fontWeight: 800,
                    boxShadow: "0 4px 10px rgba(15,23,42,.12)",
                  }}>
                    {["P","S","A","R","V"][i]}
                  </span>
                ))}
              </div>
              <div style={{ textAlign: "left" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 4, color: "var(--gold)" }}>
                  {[0,1,2,3,4].map(i => (
                    <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9 16.5 13.5 18.5 21 12 17 5.5 21 7.5 13.5 2 9 9 9 12 2" /></svg>
                  ))}
                  <span style={{ marginLeft: 4, fontSize: 11, fontWeight: 800, color: "var(--ink)" }}>4.9</span>
                </div>
                <p style={{ margin: 0, fontSize: 11, fontWeight: 700, color: "var(--muted)" }}>
                  Trusted by <span style={{ color: "var(--ink)", fontWeight: 800 }}>500+ sales teams</span>
                </p>
              </div>
            </div>

            <h2 className="display" style={{ margin: 0, fontSize: "clamp(40px, 5.2vw, 64px)", lineHeight: 1.05, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.03em" }}>
              <StaggerLine words={["Stop", "losing", "leads."]} />
              <br />
              <StaggerLine words={["Start", "closing", "them."]} startDelay={.32} gold />
            </h2>

            <p style={{ margin: "22px auto 0", maxWidth: 520, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              Start with a clean lead capture and follow-up system from day one. Get set up in minutes — no credit card required.
            </p>

            {/* Live counter */}
            <div style={{ marginTop: 24, display: "inline-flex", alignItems: "center", gap: 14, padding: "10px 18px", borderRadius: 999, background: "linear-gradient(135deg, rgba(201,162,39,.08), rgba(201,162,39,.02))", border: "1px solid rgba(201,162,39,.32)" }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#ef4444" }} className="kr-pulse-dot" />
              <span style={{ fontSize: 11, fontWeight: 800, color: "#8a6a14", letterSpacing: ".08em", textTransform: "uppercase" }}>Live</span>
              <span style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)" }}>
                <span key={leads} className="display" style={{ fontWeight: 800, color: "var(--gold)", animation: "kr-count .3s var(--ease)" }}>
                  {leads.toLocaleString()}
                </span> leads captured today across all teams
              </span>
            </div>

            <div style={{ marginTop: 30, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
              <a href="/get-started" className="kr-cta-primary" style={{ height: 56, padding: "0 32px", fontSize: 15 }}>Start free trial <span className="kr-arrow">→</span></a>
              <a href="/login" className="kr-cta-ghost" style={{ height: 56, padding: "0 26px", fontSize: 15 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3" /></svg>
                Continue Demo Mode
              </a>
            </div>

            {/* trust badges */}
            <div style={{ marginTop: 36, paddingTop: 28, borderTop: "1px solid rgba(15,23,42,.06)", display: "flex", justifyContent: "center", gap: 28, flexWrap: "wrap" }}>
              {[
                { label: "Live in", val: "5 min", color: "#3b82f6" },
                { label: "Free for", val: "15 days", color: "#10b981" },
                { label: "Migration", val: "Done-for-you", color: "#8b5cf6" },
                { label: "Cancel", val: "Anytime", color: "#C9A227" },
              ].map((t, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 32, height: 32, borderRadius: 10, background: `${t.color}14`, color: t.color, display: "grid", placeItems: "center" }}>
                    <Check size={14} color={t.color} />
                  </span>
                  <div style={{ textAlign: "left" }}>
                    <p style={{ margin: 0, fontSize: 9, fontWeight: 800, color: "var(--muted-2)", letterSpacing: ".1em", textTransform: "uppercase" }}>{t.label}</p>
                    <p style={{ margin: 0, fontSize: 13, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.01em" }}>{t.val}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @keyframes kr-cta-pulse {
          0%   { transform: translate(-50%,-50%) scale(1);   opacity: .55 }
          50%  { transform: translate(-50%,-50%) scale(1.22); opacity: 0 }
          100% { transform: translate(-50%,-50%) scale(1);   opacity: .55 }
        }
        @keyframes kr-cta-sparkle {
          0%,100% { transform: scale(.6); opacity: .3; }
          50%     { transform: scale(1.4); opacity: 1; }
        }
        .kr-orb-a{animation: kr-orb-drift 9s ease-in-out infinite}
        .kr-orb-b{animation: kr-orb-drift 11s ease-in-out infinite; animation-delay: -2s}
        .kr-orb-c{animation: kr-orb-drift 7s ease-in-out infinite; animation-delay: -1s}
        .kr-orb-d{animation: kr-orb-drift 8s ease-in-out infinite; animation-delay: -3s}
      `}</style>
    </section>
  );
}

function StaggerLine({ words, startDelay = 0, gold = false }) {
  const ref = useRef(null);
  const seen = useInView(ref);
  return (
    <span ref={ref} style={{ display: "inline" }}>
      {words.map((w, i) => (
        <React.Fragment key={i}>
          <span style={{
            display: "inline-block",
            opacity: seen ? 1 : 0,
            transform: seen ? "translateY(0)" : "translateY(28px)",
            transition: `opacity .5s var(--ease) ${startDelay + i * 0.09}s, transform .5s var(--ease) ${startDelay + i * 0.09}s`,
            ...(gold ? {
              background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
            } : { color: "var(--ink)" }),
          }}>{w}</span>
          {i < words.length - 1 ? " " : ""}
        </React.Fragment>
      ))}
    </span>
  );
}

/* ── FULL FOOTER ──────────────────────────────────────────────────── */
function FullFooter() {
  return (
    <footer style={{ background: "#fff", borderTop: "1px solid var(--line)" }}>
      <div className="kr-footer-grid" style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 24px", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 36 }}>
        <div>
          <KredooLogo size={26} />
          <p style={{ marginTop: 22, fontSize: 13, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500, maxWidth: 320 }}>
            The modern sales CRM. Capture every lead, automate follow-ups, and grow predictable revenue.
          </p>
          <div style={{ marginTop: 22, display: "flex", gap: 10 }}>
            {[
              <svg key="x" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>,
              <svg key="li" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><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>,
              <svg key="gh" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>,
            ].map((ic, i) => (
              <a key={i} href="/" style={{ width: 36, height: 36, borderRadius: 10, background: "#f8fafc", border: "1px solid var(--line)", display: "grid", placeItems: "center", color: "var(--muted)", transition: "color .2s var(--ease), background .2s var(--ease)" }}
                onMouseEnter={e => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.background = "#fff"; }}
                onMouseLeave={e => { e.currentTarget.style.color = "var(--muted)"; e.currentTarget.style.background = "#f8fafc"; }}>
                {ic}
              </a>
            ))}
          </div>
        </div>

        {[
          { title: "Product",   links: ["Features", "Pipeline", "Integrations", "Pricing", "Changelog"] },
          { title: "Company",   links: ["About", "Customers", "Careers", "Contact", "Press"] },
          { title: "Resources", links: ["Docs", "Help center", "API reference", "Status", "Security"] },
          { title: "Legal",     links: ["Privacy", "Terms", "DPA", "Cookies", "GDPR"] },
        ].map(col => (
          <div key={col.title}>
            <p style={{ margin: 0, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink)" }}>{col.title}</p>
            <ul style={{ margin: "18px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {col.links.map(l => (
                <li key={l}><a href="/" style={{ fontSize: 13, fontWeight: 600, color: "var(--muted)" }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{ borderTop: "1px solid var(--line)", background: "#fafbfd" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 24px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <p style={{ margin: 0, fontSize: 12, fontWeight: 600, color: "var(--muted-2)" }}>© 2026 ElevAIte Labs · All rights reserved</p>
          <div style={{ display: "flex", gap: 16, fontSize: 12, fontWeight: 600, color: "var(--muted-2)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--emerald)" }} className="kr-pulse-dot" />
              All systems operational
            </span>
            <a href="/">Status</a>
            <a href="/">Privacy</a>
            <a href="/">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PricingSection, FAQSection, FinalCTA, FullFooter });
