/* ── PRICING PAGE — Simple, honest pricing + comparison ─────────── */

function PricingPage() {
  const [billing, setBilling] = useState("monthly");

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

  const PLANS = [
    { name: "Starter",    audience: "Solo agents & small teams getting started",  price: 499,
      features: ["Up to 500 leads", "1 integration source", "Booking Calendar", "1 Booking Link", "Basic dashboard", "2 team members"],
      cta: "Get Started", featured: false },
    { name: "Growth",     audience: "Growing teams with multiple lead sources",   price: 2499,
      features: ["Unlimited leads", "All 4 integrations", "Lead analysis & reporting", "5 Booking Links", "5 team members"],
      cta: "Get Started", featured: false },
    { name: "Pro",        audience: "Teams wanting automated email follow-ups",   price: 4999,
      features: ["Everything in Growth", "Email Automation (3 flows)", "CSV data export", "10 Booking Links", "10 team members"],
      cta: "Get Started", featured: false },
    { name: "Business",   audience: "High-volume orgs with WhatsApp-first comms", price: 8999,
      features: ["Everything in Pro", "WhatsApp Automation (5 flows)", "Customisable WA templates", "Custom booking domain", "Unlimited Booking Links", "20 team members"],
      cta: "Get Started", featured: true },
    { name: "Enterprise", audience: "Full automation stack, unlimited scale",     price: 14999,
      features: ["Everything in Business", "SMS Automation (4 flows)", "Unlimited team members", "API access", "Priority support & onboarding"],
      cta: "Contact us", featured: false },
  ];

  const priceFor = (p) => billing === "yearly" ? Math.round(p.price * 0.8) : p.price;

  // Comparison table
  const TABLE = [
    {
      group: "CRM",
      rows: [
        { feature: "Leads",                 vals: ["500", "Unlimited", "Unlimited", "Unlimited", "Unlimited"] },
        { feature: "Pipeline board",        vals: [true, true, true, true, true] },
        { feature: "Lead analysis",         vals: [false, true, true, true, true] },
        { feature: "Customisable dashboard",vals: [false, true, true, true, true] },
        { feature: "CSV export",            vals: [false, false, true, true, true] },
        { feature: "API access",            vals: [false, false, false, false, true] },
      ],
    },
    {
      group: "Integrations",
      rows: [
        { feature: "Integration sources",   vals: ["1", "All 4", "All 4", "All 4", "All 4"] },
      ],
    },
    {
      group: "Booking",
      rows: [
        { feature: "Booking Calendar",      vals: [true, true, true, true, true] },
        { feature: "Booking Links",         vals: ["1", "5", "10", "Unlimited", "Unlimited"] },
        { feature: "Custom booking domain", vals: [false, false, false, true, true] },
      ],
    },
    {
      group: "Automation",
      rows: [
        { feature: "Email automation",      vals: [false, false, true, true, true] },
        { feature: "WhatsApp automation",   vals: [false, false, false, true, true] },
        { feature: "SMS automation",        vals: [false, false, false, false, true] },
      ],
    },
    {
      group: "Team",
      rows: [
        { feature: "Team members",          vals: ["2", "5", "10", "20", "Unlimited"] },
        { feature: "Priority support",      vals: [false, false, false, false, true] },
      ],
    },
  ];

  const FAQS = [
    { q: "What happens after my 15-day trial?",
      a: "Your workspace 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: "Can I change my plan later?",
      a: "Yes. Upgrade or downgrade from your billing settings at any time. Pro-rated automatically; no calls with sales required." },
    { q: "How is the seat limit enforced?",
      a: "Each plan includes the listed team members. Add more seats from settings at ₹299/seat (Growth), ₹499/seat (Pro+). No surprise charges." },
    { q: "Are automation flows included or billed separately?",
      a: "All listed flows are included with no extra cost. You can build unlimited custom flows on top via n8n or webhooks on every plan." },
    { q: "Can I cancel anytime?",
      a: "Yes — cancel from settings in one click. We'll keep your data available for export for 60 days after cancellation." },
    { q: "Is there a setup fee?",
      a: "No setup fee, ever. Migration assistance is free on Growth and above. Enterprise gets a dedicated onboarding manager." },
  ];

  const [openFaq, setOpenFaq] = useState(0);

  return (
    <div className="kr-page" style={{ minHeight: "100vh", background: "#fff", color: "var(--ink)" }}>
      <Navbar route="/pricing" />

      {/* ════════ HERO ════════ */}
      <section style={{ position: "relative", overflow: "hidden", padding: "150px 0 60px" }}>
        <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .5, pointerEvents: "none" }} />
        <div style={{ position: "absolute", top: -120, left: -100, width: 460, height: 460, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(59,130,246,.18), transparent 70%)", filter: "blur(40px)",
          animation: "kr-orb-drift 14s ease-in-out infinite", pointerEvents: "none" }} />
        <div style={{ position: "absolute", top: -60, right: -80, width: 460, height: 460, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(201,162,39,.14), transparent 70%)", filter: "blur(40px)",
          animation: "kr-orb-drift 16s ease-in-out infinite", animationDelay: "-5s", pointerEvents: "none" }} />

        <div style={{ position: "relative", maxWidth: 900, margin: "0 auto", padding: "0 24px", textAlign: "center" }}>
          <Reveal>
            <div className="kr-pill kr-pill-gold" style={{ margin: "0 auto" }}>
              <svg 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>
              Start now to capture your sales
            </div>
            <AnimatedHeading
              as="h1" className="display"
              style={{ marginTop: 22, fontSize: "clamp(48px, 6.4vw, 84px)", lineHeight: 1, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.035em" }}
              motion="word-up"
              lines={[
                "Simple,",
                { text: "honest", gradient: true, underline: true },
                "pricing",
              ]}
            />
            <p style={{ margin: "26px auto 0", maxWidth: 520, fontSize: 17, lineHeight: 1.55, color: "var(--muted)", fontWeight: 500 }}>
              Choose the plan that fits your team. Change or cancel anytime — no contracts, no hidden fees.
            </p>
          </Reveal>

          {/* Billing toggle */}
          <Reveal delay={0.15}>
            <div style={{ marginTop: 32, display: "flex", justifyContent: "center" }}>
              <div ref={toggleRef} style={{
                position: "relative",
                display: "inline-flex", padding: 4, borderRadius: 999,
                background: "#f8fafc", border: "1px solid var(--line-2)",
              }}>
                <span style={{
                  position: "absolute", top: 4, bottom: 4,
                  left: sliderPos.left,
                  width: sliderPos.width,
                  background: "linear-gradient(135deg, #1d4ed8, #3b82f6)",
                  borderRadius: 999,
                  boxShadow: "0 6px 18px -6px rgba(59,130,246,.5)",
                  transition: "left .3s var(--ease), width .3s var(--ease)",
                }} />
                {["monthly", "annual"].map(b => {
                  const val = b === "annual" ? "yearly" : b;
                  return (
                    <button key={b} ref={el => { btnRefs.current[val] = el; }} onClick={() => setBilling(val)} style={{
                      position: "relative", padding: "10px 26px", border: 0, background: "transparent",
                      fontSize: 13, fontWeight: 800, cursor: "pointer",
                      color: billing === val ? "#fff" : "var(--muted)",
                      textTransform: "capitalize", whiteSpace: "nowrap",
                      transition: "color .3s var(--ease)",
                    }}>
                      {b}
                      {b === "annual" && (
                        <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>
      </section>

      {/* ════════ PLAN CARDS ════════ */}
      <section style={{ padding: "20px 0 80px", position: "relative" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px" }}>
          <div className="kr-pricing-cards" style={{ 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-pp-featured" : "kr-pp-plan"} style={{
                  position: "relative", borderRadius: 22, padding: 20, minHeight: 460,
                  display: "flex", flexDirection: "column",
                  background: "#fff",
                  border: p.featured ? "2px solid #3b82f6" : "1px solid var(--line-2)",
                  boxShadow: p.featured
                    ? "0 30px 60px -22px rgba(59,130,246,.32), 0 0 0 6px rgba(59,130,246,.06)"
                    : "0 1px 0 rgba(15,23,42,.02)",
                  transition: "transform .25s var(--ease), box-shadow .25s var(--ease)",
                  overflow: "visible",
                }}>
                  {p.featured && (
                    <span style={{
                      position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
                      padding: "4px 14px", borderRadius: 999,
                      background: "linear-gradient(135deg, #1d4ed8, #3b82f6)", color: "#fff",
                      fontSize: 10, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase",
                      boxShadow: "0 6px 16px -4px rgba(59,130,246,.5)",
                    }}>Best fit</span>
                  )}

                  <div>
                    <p style={{ margin: 0, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: p.featured ? "#3b82f6" : "var(--muted)" }}>{p.name}</p>
                  </div>

                  <div style={{ marginTop: 14 }}>
                    <div style={{ display: "flex", alignItems: "flex-end", gap: 3 }}>
                      <span style={{ fontSize: 14, fontWeight: 800, color: "var(--muted)" }}>₹</span>
                      <span className="display" style={{ fontSize: 38, fontWeight: 800, color: "var(--ink)", lineHeight: 1, letterSpacing: "-.03em" }}>
                        {priceFor(p).toLocaleString("en-IN")}
                      </span>
                      <span style={{ marginBottom: 4, fontSize: 12, fontWeight: 700, color: "var(--muted-2)" }}>/mo</span>
                    </div>
                    {billing === "yearly" && (
                      <p style={{ margin: "4px 0 0", fontSize: 10, fontWeight: 700, color: "#8a6a14" }}>
                        billed yearly · ₹{(priceFor(p) * 12).toLocaleString("en-IN")}/yr
                      </p>
                    )}
                    <p style={{ margin: "14px 0 0", fontSize: 12, fontWeight: 600, lineHeight: 1.5, color: "var(--muted)", minHeight: 36 }}>{p.audience}</p>
                  </div>

                  <a href="/get-started" style={{
                    marginTop: 16, height: 42, borderRadius: 12,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontSize: 12, fontWeight: 800,
                    background: p.featured ? "#0a0e1a" : "#fff",
                    color: p.featured ? "#fff" : "var(--ink)",
                    border: p.featured ? 0 : "1.5px solid var(--line-2)",
                    boxShadow: p.featured ? "0 10px 24px -8px rgba(10,14,26,.4)" : "none",
                    textDecoration: "none",
                  }}>
                    {p.cta}
                  </a>

                  <ul style={{ margin: "20px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, 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="var(--emerald)" />
                        </span>
                        <span style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.45, color: "var(--muted)" }}>{f}</span>
                      </li>
                    ))}
                  </ul>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`
          .kr-pp-plan:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(15,23,42,.22)}
          .kr-pp-featured:hover{transform:translateY(-4px);box-shadow:0 36px 70px -22px rgba(59,130,246,.4), 0 0 0 6px rgba(59,130,246,.08)}
        `}</style>
      </section>

      {/* ════════ COMPARISON TABLE ════════ */}
      <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: 1180, margin: "0 auto", padding: "0 24px" }}>
          <Reveal>
            <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
              <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "#3b82f6" }}>Compare plans</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={["Everything included,", { text: "side by side", gradient: true }]}
              />
            </div>
          </Reveal>

          <Reveal delay={0.1}>
            <div className="kr-comparison-scroll" style={{ marginTop: 48 }}>
            <div style={{ borderRadius: 22, background: "#fff", border: "1px solid var(--line-2)", overflow: "hidden", boxShadow: "0 24px 60px -22px rgba(15,23,42,.16)", minWidth: 600 }}>
              {/* Header row */}
              <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(5, 1fr)", borderBottom: "1px solid var(--line-2)" }}>
                <div style={{ padding: "18px 22px", display: "flex", alignItems: "center" }}>
                  <p style={{ margin: 0, fontSize: 11, fontWeight: 800, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)" }}>Feature</p>
                </div>
                {PLANS.map((p) => (
                  <div key={p.name} style={{
                    padding: "18px 14px", textAlign: "center", position: "relative",
                    background: p.featured ? "linear-gradient(180deg, rgba(59,130,246,.06), rgba(59,130,246,.0))" : "transparent",
                  }}>
                    {p.featured && <span style={{ position: "absolute", left: 0, right: 0, top: 0, height: 2, background: "linear-gradient(90deg, transparent, #3b82f6, transparent)" }} />}
                    <p style={{ margin: 0, fontSize: 13, fontWeight: 800, color: p.featured ? "#3b82f6" : "var(--ink)" }}>{p.name}</p>
                    <p style={{ margin: "4px 0 0", fontSize: 10, fontWeight: 700, color: p.featured ? "#3b82f6" : "var(--muted-2)" }}>
                      ₹{priceFor(p).toLocaleString("en-IN")}/mo
                    </p>
                  </div>
                ))}
              </div>

              {/* Groups + rows */}
              {TABLE.map((g, gi) => (
                <div key={g.group}>
                  <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(5, 1fr)", background: "#fafbfd", borderBottom: "1px solid var(--line)" }}>
                    <div style={{ padding: "12px 22px", gridColumn: "1 / span 6" }}>
                      <p style={{ margin: 0, fontSize: 10, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "#3b82f6" }}>{g.group}</p>
                    </div>
                  </div>
                  {g.rows.map((row, ri) => (
                    <Reveal key={row.feature} delay={(gi * 0.04 + ri * 0.04)} y={12}>
                      <div className="kr-tbl-row" style={{
                        display: "grid", gridTemplateColumns: "1.4fr repeat(5, 1fr)",
                        borderBottom: gi === TABLE.length - 1 && ri === g.rows.length - 1 ? "none" : "1px solid var(--line)",
                        transition: "background .15s var(--ease)",
                      }}>
                        <div style={{ padding: "14px 22px", display: "flex", alignItems: "center" }}>
                          <p style={{ margin: 0, fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>{row.feature}</p>
                        </div>
                        {row.vals.map((v, vi) => {
                          const featured = PLANS[vi].featured;
                          return (
                            <div key={vi} style={{
                              padding: "14px 12px", textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center",
                              background: featured ? "rgba(59,130,246,.04)" : "transparent",
                              borderLeft: vi === 0 ? "1px solid var(--line)" : "none",
                            }}>
                              {v === true ? (
                                <span style={{ width: 22, height: 22, borderRadius: "50%", background: "rgba(16,185,129,.14)", display: "grid", placeItems: "center" }}>
                                  <Check size={12} color="var(--emerald)" />
                                </span>
                              ) : v === false ? (
                                <span style={{ width: 18, height: 2, background: "var(--line-2)", borderRadius: 999 }} />
                              ) : (
                                <span style={{ fontSize: 13, fontWeight: featured ? 800 : 700, color: featured ? "#3b82f6" : "var(--ink)" }}>{v}</span>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    </Reveal>
                  ))}
                </div>
              ))}
            </div>
            </div>
          </Reveal>
        </div>

        <style>{`.kr-tbl-row:hover{background:rgba(15,23,42,.015)}`}</style>
      </section>

      {/* ════════ FAQ ════════ */}
      <section 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: "#3b82f6" }}>FAQS</p>
              <AnimatedHeading
                as="h2" className="display"
                style={{ marginTop: 12, fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
                motion="letter-up"
                lines={["Frequently asked questions"]}
              />
            </div>
          </Reveal>

          <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 10 }}>
            {FAQS.map((it, i) => {
              const isOpen = openFaq === 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={() => setOpenFaq(isOpen ? -1 : i)} style={{
                      width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                      padding: 20, border: 0, background: "transparent", cursor: "pointer", textAlign: "left",
                    }}>
                      <h3 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: "var(--ink)" }}>{it.q}</h3>
                      <span style={{
                        width: 28, height: 28, borderRadius: 8, 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 ? 200 : 0, opacity: isOpen ? 1 : 0,
                      overflow: "hidden",
                      transition: "max-height .35s var(--ease), opacity .25s var(--ease)",
                    }}>
                      <p style={{ margin: 0, padding: "0 20px 20px", fontSize: 13, lineHeight: 1.65, color: "var(--muted)", fontWeight: 500 }}>
                        {it.a}
                      </p>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* ════════ STILL NOT SURE CTA ════════ */}
      <section style={{ padding: "80px 0", background: "#f8fafc", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(50% 50% at 50% 50%, rgba(59,130,246,.06), transparent 70%)" }} />
        <div style={{ position: "relative", maxWidth: 720, margin: "0 auto", padding: "0 24px", textAlign: "center" }}>
          <Reveal>
            <AnimatedHeading
              as="h2" className="display"
              style={{ margin: 0, fontSize: "clamp(28px, 3.4vw, 42px)", lineHeight: 1.1, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="slide-right"
              lines={["Still not sure which plan is right?"]}
            />
            <p style={{ margin: "16px auto 0", maxWidth: 460, fontSize: 14, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              Talk to our team. We'll help you pick the right fit and get you set up in under 20 minutes.
            </p>
            <div style={{ marginTop: 26, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
              <a href="/get-started" style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                height: 46, padding: "0 22px", borderRadius: 12,
                background: "linear-gradient(135deg, #1d4ed8, #3b82f6)", color: "#fff",
                fontSize: 13, fontWeight: 800, textDecoration: "none",
                boxShadow: "0 10px 28px -8px rgba(59,130,246,.55)",
              }}>Get Started</a>
              <a href="/" style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                height: 46, padding: "0 22px", borderRadius: 12,
                background: "#fff", color: "var(--ink)",
                border: "1.5px solid var(--line-2)",
                fontSize: 13, fontWeight: 800, textDecoration: "none",
              }}>Talk to Sales →</a>
            </div>
          </Reveal>
        </div>
      </section>

      <FullFooter />
    </div>
  );
}

Object.assign(window, { PricingPage });
