// PricingPage.jsx
//
// Real, published pricing (previously "Custom - scoped on a call" only,
// since no Plan/Subscription entity exists in trans-backend to source a
// number from - see this file's prior header comment and git history for
// that reasoning). These figures are a benchmarked proposal built directly
// against researched, real competitor costs - Tally Prime's Gold multi-user
// perpetual license (~₹80K one-time + ~₹5,310/year TSS renewal), Zoho's
// publicly listed Books/Inventory/CRM subscription tiers, and Odoo's real
// Enterprise per-user pricing plus its typical $10K-$60K+ SME implementation
// range (see ComparisonPage.jsx's header comment for the same sourcing) -
// not pulled from any backend entity, because none exists. The founder
// confirmed this pricing-source decision directly rather than have it
// invented silently; treat PRICING_AMOUNTS below as the current published
// number, not a placeholder, but know its origin if it ever needs revising.
//
// Pricing is flat per-company, not per-seat - a deliberate contrast with
// Zoho's and Odoo's per-user billing (see roles-permissions in
// EarlyAccessGate.jsx: roles are a company-scoped template, not a seat
// license), and worth stating explicitly since it's a real structural
// difference, not just a lower number.
//
// India and Global prices are independent regional figures, not one
// converted from the other by an FX rate - standard SaaS regional pricing
// practice, same reasoning as REGION_COPY already documented below.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment. React 19 ships no UMD global, so
// `window.React` here is the bridge index.html's ESM import sets up; hooks
// are called as `React.useState` etc. (fully qualified) for the same
// shared-global-scope reason documented in Navbar.jsx.

const PRICING_TIERS = [
  {
    id: "core",
    name: "Core",
    tagline: "Sales, purchase, and inventory on one system.",
    features: [
      "Sales Orders & Purchase Orders",
      "Goods-Received Notes (GRN)",
      "Inventory Management",
      "Customer, Vendor & Broker records",
      "Analytics & Dashboards",
      "Roles & Permissions",
    ],
  },
  {
    id: "production",
    name: "Production",
    tagline: "Adds the manufacturing floor to Core.",
    features: [
      "Everything in Core",
      "Production & WIP Workflow Engine",
      "Multi-Warehouse Management",
      "Business Rules Engine",
      "Fleet & Dispatch",
      "Customer Portal",
    ],
    highlighted: true,
  },
  {
    id: "enterprise",
    name: "Enterprise",
    tagline: "Full platform, AI assistant, and dedicated onboarding.",
    features: [
      "Everything in Production",
      "AI Business Assistant",
      "Tally ERP Integration",
      "Localization & Multi-Language rollout",
      "Dedicated onboarding & support",
      "Custom SLAs",
    ],
  },
];

// The published figures - flat per-company, billed monthly on an annual
// plan, plus a one-time onboarding/setup fee (HomePage.jsx's "How It Works"
// section already calls this "a small onboarding fee"; these are the real
// numbers behind that language). See this file's header comment for how
// they were benchmarked.
// Revised down twice now - first after the site owner flagged an initial
// draft as too high for a price-sensitive, Tally-loyal first cohort, then
// again with these exact figures (India) given directly by the site owner
// as a GTM decision, explicitly to make the price point an easy "yes" for
// early customers. Global figures are a proportional cut applied to the
// prior Global numbers (not re-benchmarked against competitors from
// scratch) - independent regional figures, not an FX conversion, same
// reasoning as REGION_COPY below. Production is still priced below
// ManualTrackingCalculator.jsx's default-scenario monthly cost
// (~₹13,600/month for a 2-supervisor/1-accountant shop), now by a much
// wider margin.
const PRICING_AMOUNTS = {
  core: {
    india: { monthly: 1499, setup: 4000 },
    global: { monthly: 29, setup: 79 },
  },
  production: {
    india: { monthly: 2499, setup: 6000 },
    global: { monthly: 49, setup: 129 },
  },
  enterprise: {
    india: { monthly: 6998, setup: 18000 },
    global: { monthly: 129, setup: 299 },
  },
};

const EVERY_TIER_INCLUDES = [
  "Role-based access control, enforced server-side - not just hidden in the UI",
  "Strict multi-tenant data isolation - see our Security & Trust page for how that actually works",
  "Lifetime updates to every module you're on, included",
  "A no-questions-asked refund if it's not working out during onboarding",
];

const ROADMAP_ITEMS = [
  { title: "WhatsApp automation", body: "Order confirmations, dispatch updates, and delivery-status prompts sent where your customers and drivers already are." },
  { title: "Payroll processing", body: "Bringing shop-floor and office payroll onto the same platform as everything else, instead of a separate system." },
];

const PRICE_FACTORS = [
  { title: "Module mix", body: "Core, Production, or Enterprise - and whether you need all of a tier's modules or just some." },
  { title: "Warehouse count", body: "Multi-Warehouse Management scales differently for two locations versus twenty." },
  { title: "Rollout timeline", body: "A phased rollout across departments is scoped differently than a single go-live date." },
  { title: "Region", body: "India (INR, GST-compliant) or Global (USD) - see the toggle above." },
];

const REGION_COPY = {
  india: {
    label: "India",
    currencySymbol: "₹",
    note: "GST-compliant invoicing, priced in INR. Prices shown are exclusive of 18% GST.",
  },
  global: {
    label: "Global",
    currencySymbol: "$",
    note: "USD invoicing for international teams.",
  },
};

// Sourced comparison figures - see ComparisonPage.jsx's header comment for
// where each number comes from (Tally's real Gold multi-user license/TSS
// renewal, Zoho's public per-app subscription tiers, Odoo's real Enterprise
// per-user pricing and typical SME implementation range). Tally/Excel is
// deliberately NOT in this list as a blanket dollar claim - per the site
// owner's direct feedback that a flat "you'll save ₹X" assertion won't
// move a price-sensitive, Tally-loyal buyer who feels their process
// already works. That comparison is the ManualTrackingCalculator embedded
// right after this list instead - the visitor's own numbers, not ours.
const ROI_COMPARISONS = [
  {
    title: "vs. Zoho (Books + Inventory + CRM)",
    figure: "A fraction of the bare subscriptions",
    body: "A 3-user Zoho stack on mid-tier plans (Books Professional + Inventory Premium + CRM Professional) runs roughly ₹13,000/month before you've built any real production tracking - Zoho's own docs point you to a separate Zoho Creator app for that. SkelBiz Production (₹2,499/month) costs far less than the bare Zoho subscriptions alone, and includes a native production/WIP engine, dispatch, and business rules - not a custom app you or a partner still has to build and maintain.",
  },
  {
    title: "vs. Odoo",
    figure: "$9,700-$59,700 saved in year one alone",
    body: "Odoo's Manufacturing app is genuinely capable - but a realistic SME implementation runs $10,000-$60,000+ with a certified partner, before the per-user monthly fee even starts. SkelBiz Enterprise's one-time setup is $299, flat, regardless of headcount. That gap alone is $9,700-$59,700 in year one - before comparing the ongoing subscription, and before Odoo's per-user pricing scales up with every additional person you add.",
  },
];

const PRICING_FAQS = [
  {
    q: "Are these prices final, or can they still change for my company?",
    a: "The tiers above are our real, published starting prices. Warehouse count, module additions beyond a tier's default set, and rollout complexity can adjust the final number - that's exactly what the demo call scopes out.",
  },
  {
    q: "Can I start with Core and add Production later?",
    a: "Yes. Modules are enabled per company, so moving from Core to Production is a configuration change, not a migration - you'd move to Production's pricing at that point.",
  },
  {
    q: "Is pricing per user, or per company?",
    a: "Per company, flat - not per seat. Adding another warehouse supervisor or dispatch clerk doesn't add another license fee, unlike Zoho's or Odoo's per-user billing.",
  },
  {
    q: "What does the one-time setup fee actually cover?",
    a: "Onboarding - an executive learning your real process, configuring your modules, warehouses, and roles, and migrating what needs migrating. It secures your onboarding slot, and it's a fraction of what a partner-led Odoo implementation typically costs.",
  },
  {
    q: "Do you support GST and international invoicing?",
    a: "Not directly - GST invoicing is deliberately Tally's job, not SkelBiz's. Confirmed Sales Orders sync into Tally as real vouchers through our Tally Integration, and Tally - your GST-compliant system of record - generates the invoice from there. International customers get real per-company currency and timezone settings through Localization & Multi-Language, but GST compliance itself stays with Tally.",
  },
  {
    q: "What happens after I pay the onboarding fee?",
    a: "An executive works directly with you to understand your operation before anything gets configured. If we find a genuinely missing feature that enough customers are asking for, we build it - and every future update to the modules you're on is included for life.",
  },
  {
    q: "What if it's not working out during onboarding?",
    a: "Full refund, no questions asked. That's a real commitment, not fine print.",
  },
];

// Cumulative module ids per tier - Production includes everything Core has,
// Enterprise includes everything Production has, matching the "Everything
// in X" language already used in PRICING_TIERS' feature bullets.
const TIER_MODULE_IDS = {
  core: ["sales-orders", "purchase-grn", "inventory", "customers", "vendors", "brokers", "analytics-dashboards", "roles-permissions"],
  production: ["production-workflow", "warehouses", "business-rules", "fleet-dispatch", "customer-portal"],
  enterprise: ["ai-assistant", "localization"],
};

const CUMULATIVE_TIER_MODULE_IDS = {
  core: TIER_MODULE_IDS.core,
  production: [...TIER_MODULE_IDS.core, ...TIER_MODULE_IDS.production],
  enterprise: [...TIER_MODULE_IDS.core, ...TIER_MODULE_IDS.production, ...TIER_MODULE_IDS.enterprise],
};

function TierCheck({ included }) {
  if (!included) {
    return (
      <svg className="mx-auto h-4 w-4 text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
      </svg>
    );
  }
  return (
    <svg className="mx-auto h-4 w-4 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
    </svg>
  );
}

function formatAmount(n, region) {
  return region === "india" ? n.toLocaleString("en-IN") : n.toLocaleString("en-US");
}

function PricingPage() {
  useDocumentMeta(
    "Pricing - SkelBiz Manufacturing Operations Platform",
    "SkelBiz pricing for India (INR) and Global (USD) teams: real published rates for Core, Production, and Enterprise, billed monthly on an annual plan plus a one-time setup fee - flat per company, not per seat."
  );
  const [region, setRegion] = React.useState("india");
  const copy = REGION_COPY[region];

  // Cross-page links like /pricing/#roi (see RequestDemoPage.jsx) land here
  // before React has rendered anything, so the browser's native anchor-
  // scroll fires too early and misses - same fix as HomePage.jsx's
  // #how-it-works handling.
  React.useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView();
  }, []);

  return (
    <>
      <section className="bg-brand-navy px-6 py-20 text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-emerald-300">
          Pricing
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          Real pricing. Flat per company, not per seat.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          Billed monthly on an annual plan, plus a one-time setup fee - for India and for teams outside it.
        </p>

        <div className="mx-auto mt-8 inline-flex rounded-card border border-white/15 bg-white/5 p-1">
          {Object.entries(REGION_COPY).map(([key, r]) => (
            <button
              key={key}
              type="button"
              onClick={() => setRegion(key)}
              className={`rounded-card px-5 py-2 text-sm font-semibold transition ${
                region === key ? "bg-emerald-600 text-white shadow-card" : "text-blue-100 hover:text-white"
              }`}
            >
              {r.label} ({r.currencySymbol})
            </button>
          ))}
        </div>
        <p className="mt-3 text-xs text-blue-200">{copy.note}</p>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {PRICING_TIERS.map((tier) => {
            const amounts = PRICING_AMOUNTS[tier.id][region];
            return (
              <div
                key={tier.id}
                className={`flex flex-col rounded-card border p-8 shadow-card ${
                  tier.highlighted
                    ? "border-emerald-500 bg-surface-card ring-2 ring-emerald-500/20"
                    : "border-slate-200 bg-surface-card"
                }`}
              >
                {tier.highlighted && (
                  <span className="mb-4 inline-flex w-fit items-center rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold text-white">
                    Most Common
                  </span>
                )}
                <h3 className="text-xl font-bold text-brand-navy">{tier.name}</h3>
                <p className="mt-2 text-sm text-slate-500">{tier.tagline}</p>
                <div className="mt-6 flex items-baseline gap-2">
                  <span className="text-3xl font-extrabold text-brand-navy">
                    {copy.currencySymbol}{formatAmount(amounts.monthly, region)}
                  </span>
                  <span className="text-sm font-medium text-slate-500">/ month</span>
                </div>
                <p className="text-xs text-slate-500">
                  Billed annually ({copy.currencySymbol}{formatAmount(amounts.monthly * 12, region)}/year) + {copy.currencySymbol}{formatAmount(amounts.setup, region)} one-time setup
                </p>
                <ul className="mt-6 flex-1 space-y-3">
                  {tier.features.map((f) => (
                    <li key={f} className="flex items-start gap-2 text-sm text-slate-600">
                      <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                      </svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href="/request-demo/"
                  className={`mt-8 rounded-card px-5 py-3 text-center text-sm font-semibold transition ${
                    tier.highlighted
                      ? "bg-emerald-600 text-white hover:bg-emerald-700"
                      : "border border-slate-200 text-brand-navy hover:border-brand-navy/30"
                  }`}
                >
                  Get Started
                </a>
              </div>
            );
          })}
        </div>

        <div className="mx-auto mt-10 max-w-4xl rounded-card border border-slate-200 bg-surface p-6">
          <h3 className="text-sm font-semibold uppercase tracking-wide text-brand-steel">Every tier includes</h3>
          <ul className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
            {EVERY_TIER_INCLUDES.map((p) => (
              <li key={p} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                </svg>
                {p}
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section id="roi" className="scroll-mt-16 bg-brand-navy py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <span className="inline-flex items-center rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-emerald-300">
              Return on Investment
            </span>
            <h2 className="mt-4 text-3xl font-bold text-white">What this actually costs you to skip</h2>
            <p className="mt-3 text-blue-100">
              Real, quantifiable numbers against Zoho and Odoo below. Against Tally + Excel specifically, a
              blanket number isn't honest - use the calculator further down this page for your own team.
            </p>
          </div>
          <div className="mt-10 space-y-6">
            {ROI_COMPARISONS.map((item) => (
              <div key={item.title} className="rounded-card border border-white/10 bg-white/5 p-6">
                <div className="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                  <h3 className="text-base font-semibold text-white">{item.title}</h3>
                  <span className="text-sm font-bold text-emerald-300">{item.figure}</span>
                </div>
                <p className="mt-2 text-sm leading-relaxed text-blue-100">{item.body}</p>
              </div>
            ))}
          </div>
          <div className="mt-8 text-center">
            <a href="/skelbiz-vs-tally-zoho-odoo/" className="text-sm font-semibold text-emerald-300 hover:text-emerald-200">
              See the full SkelBiz vs Tally, Zoho & Odoo comparison →
            </a>
          </div>
        </div>
      </section>

      <ManualTrackingCalculator />

      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-6">
          <h2 className="text-center text-3xl font-bold text-brand-navy">Every module, by tier</h2>
          <p className="mt-3 text-center text-slate-600">
            The same {REAL_MODULES.length} real modules covered on our Product pages - not a separate marketing list.
          </p>
          <div className="mt-10 overflow-x-auto">
            <table className="w-full min-w-[560px] border-separate border-spacing-0 overflow-hidden rounded-card border border-slate-200 shadow-card">
              <thead>
                <tr className="bg-white text-sm font-semibold text-brand-navy">
                  <th className="p-4 text-left">Module</th>
                  <th className="p-4">Core</th>
                  <th className="p-4">Production</th>
                  <th className="p-4 bg-emerald-50 text-emerald-800">Enterprise</th>
                </tr>
              </thead>
              <tbody>
                {REAL_MODULES.map((m, i) => (
                  <tr key={m.id} className={i % 2 === 0 ? "bg-surface-card" : "bg-surface"}>
                    <td className="p-4 text-left text-sm">
                      <a href={`/product/${m.id}/`} className="text-slate-700 hover:text-emerald-700">{m.name}</a>
                    </td>
                    <td className="p-4">
                      <TierCheck included={CUMULATIVE_TIER_MODULE_IDS.core.includes(m.id)} />
                    </td>
                    <td className="p-4">
                      <TierCheck included={CUMULATIVE_TIER_MODULE_IDS.production.includes(m.id)} />
                    </td>
                    <td className="bg-emerald-50/60 p-4">
                      <TierCheck included={CUMULATIVE_TIER_MODULE_IDS.enterprise.includes(m.id)} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="mt-4 text-center text-xs text-slate-500">
            Enterprise also includes Tally ERP Integration, dedicated onboarding, and custom SLAs - see the
            Tally Integration page for exactly what's automated today.
          </p>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">What affects your final price</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
            {PRICE_FACTORS.map((f) => (
              <div key={f.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{f.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <span className="inline-flex items-center rounded-full border border-brand-green/30 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-700">
              On the Roadmap
            </span>
            <h2 className="mt-4 text-2xl font-bold text-brand-navy">More capability is coming, at no extra cost to you</h2>
            <p className="mt-3 text-slate-600">
              Lifetime updates (see "Every tier includes" above) means what's next ships to your existing
              modules, not as a separate upsell. Two real items on our own roadmap right now:
            </p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
            {ROADMAP_ITEMS.map((item) => (
              <div key={item.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.body}</p>
              </div>
            ))}
          </div>
          <p className="mx-auto mt-6 max-w-xl text-center text-sm text-slate-500">
            Not built yet - stated directly, same as everywhere else on this site. If a genuinely common need
            comes up on your demo call, it's the kind of thing that ends up on this list.
          </p>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-center text-3xl font-bold text-brand-navy">Pricing questions</h2>
          <div className="mt-10 space-y-6">
            {PRICING_FAQS.map((item) => (
              <div key={item.q} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.q}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="rounded-card bg-brand-navy px-8 py-14 text-center shadow-premium sm:px-16">
          <h2 className="text-2xl font-bold text-white sm:text-3xl">See it running before you commit.</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">
            15 minutes on a call tells us more than any pricing table could - and confirms the exact number
            for your operation.
          </p>
          <a
            href="/request-demo/"
            className="mt-8 inline-block rounded-card bg-emerald-600 px-7 py-3.5 text-sm font-semibold text-white shadow-card transition hover:bg-emerald-700"
          >
            Request a Demo
          </a>
        </div>
      </section>
    </>
  );
}