// primer-pricing.jsx — Pricing hero + plan grid (original layout/copy, matches Primer's own design system)

const { useState } = React;

const ALL_FEATURES = [
  "Parcel Information", "GIS Layers", "AI Zoning Analysis & Chat", "Site Capacity",
  "Renderings", "PDF & CAD Export", "Market Intelligence", "Site Search", "Rent Comps",
  "Owner Contact Information", "Project Delivery & Repository", "Dedicated Enterprise Support",
];

function splitFeatures(includedCount) {
  return { features: ALL_FEATURES.slice(0, includedCount), dim: ALL_FEATURES.slice(includedCount) };
}

const PLANS = [
  {
    name: "Basic",
    blurb: "Explore any site with essential parcel data.",
    monthly: 0,
    annual: 0,
    unit: "",
    note: "Free to explore",
    cta: "Get Started",
    ghost: true,
    ...splitFeatures(1),
  },
  {
    name: "Standard",
    blurb: "Core feasibility toolkit for individual users.",
    monthly: 124,
    annual: 99,
    unit: "/ seat / mo",
    note: "Billed monthly",
    annualNote: "Billed annually at $1,188/yr",
    cta: "Get Started",
    ghost: true,
    ...splitFeatures(6),
  },
  {
    name: "Pro",
    blurb: "Full platform with site search, comps, and market intelligence.",
    monthly: 249,
    annual: 199,
    unit: "/ seat / mo",
    note: "Billed monthly",
    annualNote: "Billed annually at $2,388/yr",
    cta: "Get Started",
    popular: true,
    ...splitFeatures(10),
  },
  {
    name: "Enterprise",
    blurb: "Multi-user, org-wide access with project delivery.",
    monthly: null,
    annual: null,
    unit: "",
    note: "Tailored to your org",
    cta: "Contact Sales",
    ghost: true,
    ...splitFeatures(12),
  },
];

function PricingHero({ annual, setAnnual }) {
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "64px 0 88px" }}>
      <div className="p-container" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
        <h1 className="p-pricing-hero-title" style={{ fontSize: 58, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.05, maxWidth: 780, marginBottom: 22 }}>
          Straightforward plans,<br/>built for every deal size.
        </h1>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,0.55)", maxWidth: 520, lineHeight: 1.6, marginBottom: 40 }}>
          Start free. Upgrade when you're ready. Every plan includes feasibility coverage across all 50 states.
        </p>

        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontSize: 14.5, fontWeight: 500, color: annual ? "rgba(255,255,255,0.5)" : "var(--paper)" }}>Monthly</span>
          <button
            onClick={() => setAnnual(a => !a)}
            aria-label="Toggle annual billing"
            style={{
              width: 46, height: 26, borderRadius: 999, border: "none", position: "relative",
              background: annual ? "var(--paper)" : "rgba(255,255,255,0.18)", transition: "background .2s", flexShrink: 0,
            }}
          >
            <span style={{
              position: "absolute", top: 3, left: annual ? 23 : 3, width: 20, height: 20, borderRadius: 999,
              background: annual ? "var(--ink)" : "var(--paper)", transition: "left .2s",
            }}/>
          </button>
          <span style={{ fontSize: 14.5, fontWeight: 500, color: annual ? "var(--paper)" : "rgba(255,255,255,0.5)" }}>Annual</span>
          <span className="p-mono" style={{ background: "rgba(255,255,255,0.12)", color: "var(--paper)", padding: "5px 12px", borderRadius: 999, fontSize: 11 }}>Save 20%</span>
        </div>
      </div>
    </section>
  );
}

function planCtaHref(plan) {
  if (plan.name === "Enterprise") return "Contact.html";
  return (window.PrimerLinks && window.PrimerLinks.trial("pricing")) || "#";
}

function PlanCard({ plan, annual }) {
  const price = annual ? plan.annual : plan.monthly;
  return (
    <div style={{ position: "relative", height: "100%" }}>
      {plan.popular &&
        <div aria-hidden="true" style={{
          position: "absolute", inset: "-10px -8px", zIndex: 0,
          background: "var(--accent)", opacity: 0.16, filter: "blur(20px)", borderRadius: 30,
        }}/>
      }
      <div style={{
        background: "var(--paper)", borderRadius: 20,
        border: plan.popular ? "1px solid var(--ink)" : "1px solid var(--line)",
        padding: "28px 26px 32px", position: "relative", display: "flex", flexDirection: "column",
        height: "100%",
        boxShadow: plan.popular ? "0 24px 60px -28px rgba(0,0,0,0.28)" : "none",
      }}>
      {plan.popular &&
        <div style={{
          position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)",
          background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)",
          fontSize: 10.5, letterSpacing: "0.08em", padding: "6px 14px", borderRadius: 999, whiteSpace: "nowrap",
        }}>MOST POPULAR</div>
      }

      <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", marginBottom: 8 }}>{plan.name}</div>
      <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5, marginBottom: 24, minHeight: 42 }}>{plan.blurb}</p>

      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
        {price === null ?
          <span style={{ fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em" }}>Custom</span> :
          <>
            <span style={{ fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em" }}>${price}</span>
            {plan.unit && <span style={{ fontSize: 13.5, color: "var(--muted)" }}>{plan.unit}</span>}
          </>
        }
      </div>
      <div className="p-mono" style={{ fontSize: 11.5, color: "var(--muted)", marginBottom: 24, whiteSpace: "nowrap" }}>
        {price === null ? plan.note : (annual ? (plan.annualNote || plan.note) : plan.note)}
      </div>

      <a href={planCtaHref(plan)} className={`p-btn ${plan.popular ? "p-btn-dark" : "p-btn-ghost"}`} style={{ width: "100%", justifyContent: "center", marginBottom: 26 }}>
        {plan.cta}
      </a>

      <div className="p-mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: "0.08em", marginBottom: 14, paddingBottom: 14, borderBottom: "1px solid var(--line)" }}>INCLUDES</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
        {plan.features.map(f => (
          <div key={f} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5 }}>
            <span style={{ color: plan.popular ? "var(--ink)" : "var(--muted)" }}><Ico.check/></span>
            {f}
          </div>
        ))}
        {plan.dim.map(f => (
          <div key={f} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "var(--muted-2)" }}>
            <span style={{ width: 13, height: 13, borderRadius: 999, border: "1px solid var(--muted-2)", flexShrink: 0 }}/>
            {f}
          </div>
        ))}
      </div>
      </div>
    </div>
  );
}

function PricingGrid({ annual }) {
  return (
    <section className="p-section" style={{ paddingTop: 64 }}>
      <div className="p-container">
        <div className="p-plan-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, alignItems: "stretch" }}>
          {PLANS.map(p => <PlanCard key={p.name} plan={p} annual={annual}/>)}
        </div>
      </div>
    </section>
  );
}

// ── Feature comparison ──────────────────────────────────────────────────────
const COMPARE_GROUPS = [
  {
    label: "Site intelligence",
    rows: [
      ["Property details and zoning summary", "Complete property information and zoning overview", [1,1,1,1]],
      ["Interactive site mapping", "Visual property boundaries and context mapping", [1,1,1,1]],
      ["AI-powered zoning analysis", "Intelligent interpretation of zoning regulations and permitted uses", [0,1,1,1]],
      ["Automated site capacity studies", "Development potential calculations and buildable area scenarios", [0,1,1,1]],
    ],
  },
  {
    label: "Development tools",
    rows: [
      ["Development modeling", "Financial feasibility analysis and pro forma tools", [0,1,1,1]],
      ["AI renderings", "Photorealistic renderings from any angle", [0,1,1,1]],
      ["PDF export", "Investor-ready PDF reports in one click", [0,1,1,1]],
      ["CAD export", "Export site layouts directly to CAD software", [0,1,1,1]],
    ],
  },
  {
    label: "Market intelligence",
    rows: [
      ["Site search", "Search and filter available sites across markets", [0,0,1,1]],
      ["Sale comps", "Comparable sale and transaction data", [0,0,1,1]],
      ["Rent comps", "Rental comparable data and market trends", [0,0,1,1]],
      ["Owner contact information", "Property owner details and contact data", [0,0,1,1]],
      ["Advanced reporting and exports", "Custom reports, advanced data downloads, and analytics", [0,0,1,1]],
    ],
  },
  {
    label: "Enterprise",
    rows: [
      ["Project delivery and repository", "Centralized project management and document storage", [0,0,0,1]],
      ["Team management", "Roles, permissions, and multi-seat administration", [0,0,0,1]],
      ["Custom GIS layers", "Request custom data layers with 48-hour turnaround", [0,0,0,1]],
      ["SSO and security compliance", "Enterprise-grade authentication and data security", [0,0,0,1]],
      ["Dedicated account manager", "Personalized onboarding and ongoing support", [0,0,0,1]],
    ],
  },
  {
    label: "Support",
    rows: [
      ["Email support", "", [1,1,1,1]],
      ["Priority support", "", [0,0,0,1]],
    ],
  },
];

function FeatureComparison() {
  return (
    <section className="p-section" style={{ paddingTop: 0, paddingBottom: 100 }}>
      <div className="p-container" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 56 }}>
        <div className="p-mono p-section-label">— COMPARE PLANS</div>
        <h2 className="p-h2">Feature comparison.</h2>
      </div>
      <div className="p-container">
        <div className="p-scroll-x">
          <div className="p-cmp-table">
            <div className="p-cmp-head-row">
              <span>Feature</span>
              {["Basic", "Standard", "Pro", "Enterprise"].map((n, i) => (
                <span key={n} style={{ color: i === 2 ? "var(--accent)" : "var(--ink)" }}>{n}</span>
              ))}
            </div>
            {COMPARE_GROUPS.map(g => (
              <div key={g.label}>
                <div className="p-cmp-group">{g.label}</div>
                {g.rows.map(([name, desc, marks]) => (
                  <div key={name} className="p-cmp-row">
                    <div>
                      <div className="p-cmp-name">{name}</div>
                      {desc && <div className="p-cmp-desc">{desc}</div>}
                    </div>
                    {marks.map((m, i) => (
                      <div key={i} className="p-cmp-mark">
                        <span className={m ? "p-cmp-yes" : "p-cmp-no"}>{m ? <Ico.check/> : <Ico.x/>}</span>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────────────────────────
const PRICING_FAQ = [
  ["What's included in the free plan?", "Basic gives you core parcel and zoning lookups on any US address at no cost — enough to explore a site before committing to a deeper analysis."],
  ["What's the difference between Standard and Pro?", "Standard covers the full feasibility toolkit for one analyst at a time. Pro adds market intelligence — site search, sale and rent comps, owner contact data — for teams sourcing deals across markets."],
  ["Can I try a paid plan before committing?", "Yes — every paid plan starts with a 14-day trial, no card required. You can run full reports and cancel anytime before billing starts."],
  ["How does per-seat pricing work?", "Standard and Pro are billed per active seat per month. Add or remove seats as your team changes size; annual billing saves 20% over monthly."],
  ["What makes Enterprise different?", "Enterprise adds multi-seat administration, custom GIS layers, SSO, and a dedicated account manager — built for teams running feasibility across an entire portfolio."],
  ["Can I switch plans or cancel anytime?", "Yes. Upgrade, downgrade, or cancel from your billing settings at any time — changes take effect on your next billing cycle."],
];

function PricingFAQ() {
  const [open, setOpen] = useState(-1);
  return (
    <section className="p-section" style={{ paddingTop: 0, paddingBottom: 100 }}>
      <div className="p-container" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 48 }}>
        <div className="p-mono p-section-label">— FAQ</div>
        <h2 className="p-h2">Common questions.</h2>
      </div>
      <div className="p-container" style={{ maxWidth: 760 }}>
        {PRICING_FAQ.map(([q, a], i) => (
          <div key={q} className="p-faq-item" onClick={() => setOpen(open === i ? -1 : i)}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
              <span className="p-faq-q">{q}</span>
              <span className="p-faq-toggle">{open === i ? <Ico.minus/> : <Ico.plus/>}</span>
            </div>
            {open === i && <p className="p-faq-a">{a}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}

function PricingPage() {
  const [annual, setAnnual] = useState(true);
  return (
    <div style={{ position: "relative" }}>
      <div className="p-top-black-bg" />
      <Nav/>
      <div style={{ background: "var(--ink)" }}>
        <PricingHero annual={annual} setAnnual={setAnnual}/>
      </div>
      <PricingGrid annual={annual}/>
      <FeatureComparison/>
      <PricingFAQ/>
      <Footer/>
    </div>
  );
}

Object.assign(window, { PricingPage });