// Pricing v2 — page-volume slider auto-selects the right tier.
const PricingV2 = () => {
  const { useState, useMemo } = React;
  const [pages, setPages] = useState(2000);

  const tiers = [
    {
      name: "Core Digitization", price: 199, cap: 1000,
      hours: "Saves ~40 hours/month",
      bullets: [
        "AI reads handwriting in <60 sec",
        "Per-field confidence + missing-field flags",
        "Review & correct before export",
        "Export to CSV, JSON, or REST API",
        "HIPAA-conscious processing",
      ],
    },
    {
      name: "Workflow Automation", price: 399, cap: 2500,
      hours: "Saves ~150 hours/month",
      bullets: [
        "Everything in Core",
        "Auto-ingest faxes, emails, watched folders",
        "Auto-approve clean documents above threshold",
        "Webhook to your EHR / LIMS / workqueue",
        "Priority support + Slack channel",
      ],
    },
    {
      name: "Health System", price: null, cap: Infinity,
      hours: "Volume + integrations",
      bullets: [
        "Everything in Workflow",
        "BAA + custom retention policies",
        "Per-document-type model tuning",
        "HL7 / FHIR adapters & SSO",
        "Dedicated solutions engineer",
      ],
    },
  ];

  const recommendedIndex = useMemo(() => {
    if (pages <= 1000) return 0;
    if (pages <= 2500) return 1;
    return 2;
  }, [pages]);

  return (
    <section id="pricing" className="section">
      <div className="container">
        <div className="section-head" style={{ alignItems: "flex-start" }}>
          <span className="eyebrow">Pricing</span>
          <h2>Tell us your volume. We'll pick the plan.</h2>
          <p className="lede">No per-seat fees. No setup fees. Cancel anytime. Move the slider to your monthly page volume — we'll highlight the right tier.</p>
        </div>

        {/* Volume picker */}
        <div className="card" style={{ padding: 22, marginBottom: 20, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 550, color: "var(--ink-2)" }}>How many pages does your team process per month?</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 22, fontWeight: 600, color: "var(--green-ink)", letterSpacing: "-0.01em" }}>
              {pages >= 5000 ? "5,000+" : pages.toLocaleString()} <span style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 500 }}>pages/mo</span>
            </span>
          </div>
          <input type="range" min={100} max={5000} step={100} value={pages}
            onChange={(e) => setPages(Number(e.target.value))}
            style={{ width: "100%", accentColor: "var(--green)" }}/>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--ink-5)" }}>
            <span>100</span><span>1,000</span><span>2,500</span><span>5,000+</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          {tiers.map((t, i) => {
            const featured = i === recommendedIndex;
            return (
              <div key={t.name} className="card" style={{
                padding: 0, overflow: "hidden", position: "relative",
                background: featured ? "var(--ink)" : "#fff",
                color: featured ? "#fff" : "var(--ink)",
                borderColor: featured ? "var(--ink)" : "var(--line)",
                transform: featured ? "translateY(-4px)" : "none",
                transition: "transform .25s ease, background .25s ease",
                boxShadow: featured ? "0 24px 48px rgba(12,20,16,0.18)" : "none",
              }}>
                <div style={{ padding: "24px 24px 20px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, minHeight: 22 }}>
                    <h3 style={{ fontSize: 17, color: featured ? "#fff" : "var(--ink)" }}>{t.name}</h3>
                    {featured && (
                      <span style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--green)", fontWeight: 600 }}>
                        Right for you
                      </span>
                    )}
                  </div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8, minHeight: 52, whiteSpace: "nowrap" }}>
                    {t.price ? (
                      <>
                        <span style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>${t.price}</span>
                        <span style={{ fontSize: 14, color: featured ? "rgba(255,255,255,0.6)" : "var(--ink-4)" }}>/ month</span>
                      </>
                    ) : (
                      <span style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>Talk to us</span>
                    )}
                  </div>
                  <div style={{ fontSize: 13, color: featured ? "rgba(255,255,255,0.7)" : "var(--ink-3)" }}>
                    {t.cap === Infinity ? "Custom volume + integrations" : `Up to ${t.cap.toLocaleString()} pages / month`}
                  </div>
                  <div style={{ fontSize: 12, color: featured ? "rgba(255,255,255,0.55)" : "var(--ink-4)", marginTop: 4 }}>{t.hours}</div>
                </div>
                <div style={{ padding: "0 24px 24px" }}>
                  <a href="contact.html" className="btn arrow" style={{
                    width: "100%", justifyContent: "center",
                    background: featured ? "var(--green)" : "var(--ink)",
                    color: "#fff",
                  }}>Request free trial</a>
                  <div style={{ fontSize: 11, color: featured ? "rgba(255,255,255,0.55)" : "var(--ink-4)", textAlign: "center", marginTop: 8 }}>
                    30-min walkthrough · BAA on request · No commitment
                  </div>
                </div>
                <div style={{ padding: "16px 24px", borderTop: featured ? "1px solid rgba(255,255,255,0.1)" : "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 10 }}>
                  {t.bullets.map((b) => (
                    <div key={b} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: featured ? "rgba(255,255,255,0.85)" : "var(--ink-2)" }}>
                      <span style={{ marginTop: 2, color: featured ? "var(--green)" : "var(--green-ink)" }}><window.Icons.Check size={14} stroke={2.4}/></span>
                      {b}
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 24, padding: "16px 20px", border: "1px dashed var(--line-strong)", borderRadius: 12, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, background: "var(--bg-soft)" }}>
          <div style={{ fontSize: 13.5, color: "var(--ink-3)" }}>
            <strong style={{ color: "var(--ink)" }}>See it on your docs:</strong> 30-minute walkthrough with our team. We'll process a real sample.
          </div>
          <a href="contact.html" style={{ fontSize: 13, color: "var(--green-ink)", fontWeight: 500 }}>Need EHR / LIMS integration? Talk to us →</a>
        </div>
      </div>
    </section>
  );
};

window.PricingV2 = PricingV2;