// VsTallyPage.jsx
//
// "/vs-tally-prime/" - dedicated deep-dive off ComparisonPage.jsx's "Go
// deeper on one competitor" links. Expands that hub page's Tally section
// specifically, plus two things the hub page only covers briefly:
// (1) SkelBiz's own portal accessibility - genuinely grounded in
// trans-frontend's real responsive Tailwind breakpoints (56/91 .tsx files)
// and dedicated mobile-drawer components (MobileFilterDrawer.tsx,
// DashboardNavigation.tsx) - a real, verified contrast with Tally's
// local-install, remote-access-restricted architecture (imports blocked,
// no ODBC over remote access - see ComparisonPage.jsx's TALLY_GAPS); and
// (2) per-company role templates (roles-permissions in EarlyAccessGate.jsx
// - "Supervisor" used here as an illustrative role name, since roles are
// freely named per company, not a hardcoded system role - confirmed
// against trans-backend's Role entity, which stores a free-text `name` and
// a per-module `config` map, not a fixed enum).
//
// Deliberately does NOT claim mobile/cloud access or multi-language support
// as an advantage over Zoho or Odoo elsewhere on this site - both are
// already cloud/mobile SaaS products with broad language support, and
// claiming otherwise would be false. That contrast is real specifically
// against Tally's desktop-anchored design, which is why it lives here.
//
// ROI is deliberately NOT a blanket "you'll save ₹X" claim (per the site
// owner's direct feedback that most Tally-loyal MSME customers are price-
// sensitive and skeptical, and a flat assertion won't move them) - it
// reuses ManualTrackingCalculator.jsx, the same visitor-driven-numbers
// calculator on the Home page, so the number comes from their own team and
// hours instead of an asserted average.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const TALLY_STRENGTHS = [
  "GST-compliant invoicing and accounting, trusted by accountants across India",
  "Unlimited godowns for raw material, WIP, and finished-goods stock",
  "Job costing - material, labour, and overhead rolled up per job or order",
  "A one-time perpetual license (Silver for single-user, Gold for multi-user) instead of a mandatory subscription",
];

const TALLY_GAPS = [
  "WIP shows up as a balance-sheet value - not a per-stage ledger showing which stage actually lost the material",
  "No configurable multi-stage production/recipe engine - stages and yield loss aren't something you define and track",
  "No dispatch tracking or customer-facing delivery confirmation - proof of delivery is still a phone call",
  "No automated broker/vendor/customer commission or pricing-rule engine",
  "Default access is Owner vs. Data Entry Operator - finer roles exist, but as a locally-administered desktop setting, not permissions enforced by a server API",
  "Built around a local install next to your data - real remote access exists, but with real restrictions (imports are blocked, ODBC isn't available) that keep it anchored to one machine",
];

const PORTAL_CAPABILITIES = [
  {
    title: "Genuinely responsive - not remote access to a desktop app",
    body: "The SkelBiz portal is built with real responsive layouts across the platform, not a desktop screen shrunk down or a remote-access session into one machine. A warehouse supervisor can check stock from a phone on the floor; an owner can review dashboards from a tablet between meetings - the same live data Tally's remote access restricts (no imports, no ODBC) when you're off the local machine.",
  },
  {
    title: "Per-company roles - a Supervisor sees only what a Supervisor needs",
    body: "Tally's default is Owner or Data Entry Operator. SkelBiz's Roles & Permissions module lets you define a role - \"Warehouse Supervisor,\" for example - with Manage access to Fleet & Dispatch and Inventory, View-only on pricing, and nothing on Business Rules, enforced at the API level, not just hidden in the interface.",
  },
  {
    title: "Built for a multi-language floor, not just a multi-language invoice",
    body: "SkelBiz's interface is translation-file driven, with Gujarati live today alongside English - covering the actual working interface your floor staff use, not just invoice templates. The AI Business Assistant shares that same bilingual layer, so a question can be asked in the language your team already works in.",
  },
];

const TALLY_TABLE = [
  { label: "Configurable multi-stage production workflow with per-stage wastage tracking", skelbiz: "Built in - your own recipes and stages", tally: "WIP is a balance-sheet value, not a stage-by-stage ledger" },
  { label: "Multi-warehouse with default-warehouse fallback routing", skelbiz: "Built in from day one", tally: "Multiple godowns; no automatic fallback routing" },
  { label: "Automated broker, customer & vendor commission/pricing rules", skelbiz: "5 strategies built in, immutable snapshots", tally: "Not a built-in feature" },
  { label: "No-login customer portal for delivery confirmation & disputes", skelbiz: "Built in - one link per shipment", tally: "Not offered" },
  { label: "Access from phone, tablet, or desktop with the same live data", skelbiz: "Genuinely responsive portal", tally: "Local install; remote access has real restrictions" },
  { label: "Per-module roles enforced at the API level", skelbiz: "View, Contribute, or Manage - server-enforced", tally: "Owner vs. data-entry operator, desktop-level" },
  { label: "Native sync into Tally as real vouchers", skelbiz: "Built in - local agent, no re-typing", tally: "This is Tally" },
  { label: "Typical cost structure", skelbiz: "Flat per company, from ₹1,499/mo (India) or $29/mo (Global)", tally: "One-time multi-user license (~₹80K) + ~₹5,310/year renewal" },
];

const TALLY_VS_FAQS = [
  {
    q: "Are you trying to replace Tally?",
    a: "No. Tally stays your system of record for accounting - confirmed Sales Orders sync into Tally as real vouchers through a local agent, so your accounting team isn't re-typing what sales already confirmed. See our Tally Integration page for exactly what's automated today and what isn't yet.",
  },
  {
    q: "Is SkelBiz cheaper than Tally?",
    a: "No, and we won't pretend otherwise - Tally's own license is genuinely inexpensive because it's accounting software, not an operations platform. The honest comparison is what running your floor on Excel next to Tally is quietly costing you. See the ROI section on our Pricing page for that math.",
  },
  {
    q: "Can our warehouse supervisor use SkelBiz from their phone?",
    a: "Yes - the portal is built with genuinely responsive layouts, not a remote session into a desktop app. A role can be scoped to exactly what that supervisor needs to see and touch.",
  },
  {
    q: "Does SkelBiz work in Gujarati?",
    a: "Yes - the interface and the AI Business Assistant both run on the same translation-file-driven localization layer, with Gujarati live today alongside English.",
  },
  {
    q: "What if our production process doesn't look like a typical factory?",
    a: "Stages and recipes are configured per company, not assumed from a template - see our Production & WIP Workflow Engine page for how that actually works.",
  },
];

function ComparisonCard({ title, tone, items }) {
  const toneClasses =
    tone === "positive"
      ? { border: "border-emerald-200", bg: "bg-emerald-50", heading: "text-emerald-800", text: "text-emerald-900", icon: "text-emerald-600" }
      : { border: "border-amber-200", bg: "bg-amber-50", heading: "text-amber-800", text: "text-amber-900", icon: "text-amber-600" };
  return (
    <div className={`rounded-card border ${toneClasses.border} ${toneClasses.bg} p-8`}>
      <h3 className={`text-lg font-bold ${toneClasses.heading}`}>{title}</h3>
      <ul className="mt-4 space-y-3">
        {items.map((item) => (
          <li key={item} className={`flex items-start gap-2 text-sm leading-relaxed ${toneClasses.text}`}>
            <svg className={`mt-0.5 h-4 w-4 shrink-0 ${toneClasses.icon}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
            </svg>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

function VsTallyPage() {
  useDocumentMeta(
    "SkelBiz vs Tally Prime - Manufacturing Operations Platform for MSMEs",
    "An honest, feature-by-feature comparison of SkelBiz and Tally Prime for SME manufacturers - where Tally genuinely excels, where the gap opens on the production floor, and how SkelBiz integrates with Tally instead of replacing it."
  );

  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">
          SkelBiz vs Tally Prime
        </span>
        <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-extrabold leading-tight text-white sm:text-5xl">
          Tally runs your books brilliantly. It was never meant to run your floor.
        </h1>
        <p className="mx-auto mt-5 max-w-2xl text-lg text-blue-100">
          SkelBiz syncs directly into the Tally you already trust - as the operations layer for purchase,
          multi-warehouse inventory, production, and dispatch that Tally was never built to be.
        </p>
        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <a href="/request-demo/" className="w-full rounded-card bg-emerald-600 px-7 py-3.5 text-sm font-semibold text-white shadow-lifted transition hover:bg-emerald-700 sm:w-auto">
            Request a Demo
          </a>
          <a href="/tally-integration/" className="w-full rounded-card border border-white/20 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10 sm:w-auto">
            See How the Tally Sync Works
          </a>
        </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">
            <h2 className="text-2xl font-bold text-brand-navy sm:text-3xl">What Tally Prime is genuinely good at</h2>
            <p className="mt-3 text-slate-600">And where the gap opens once you're past the ledger.</p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
            <ComparisonCard title="Real strengths" tone="positive" items={TALLY_STRENGTHS} />
            <ComparisonCard title="Where it stops - stated directly" tone="warning" items={TALLY_GAPS} />
          </div>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-2xl font-bold text-brand-navy sm:text-3xl">Built for how your team actually works</h2>
            <p className="mt-3 text-slate-600">Three real differences that matter specifically against a desktop-anchored system.</p>
          </div>
          <div className="mt-10 space-y-6">
            {PORTAL_CAPABILITIES.map((item, i) => (
              <div key={item.title} className="flex gap-5 rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-navy text-sm font-bold text-emerald-400">
                  {i + 1}
                </span>
                <div>
                  <h3 className="text-base font-semibold text-brand-navy">{item.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-slate-600">{item.body}</p>
                </div>
              </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">
            <h2 className="text-2xl font-bold text-brand-navy sm:text-3xl">Side by side</h2>
          </div>
          <div className="mt-10 overflow-x-auto">
            <table className="w-full min-w-[720px] border-separate border-spacing-0 overflow-hidden rounded-card border border-slate-200 shadow-card text-sm">
              <thead>
                <tr className="bg-surface text-sm font-semibold text-brand-navy">
                  <th className="p-4 text-left">&nbsp;</th>
                  <th className="bg-emerald-50 p-4 text-left text-emerald-800">SkelBiz</th>
                  <th className="p-4 text-left">Tally Prime</th>
                </tr>
              </thead>
              <tbody>
                {TALLY_TABLE.map((row, i) => (
                  <tr key={row.label} className={i % 2 === 0 ? "bg-surface-card" : "bg-surface"}>
                    <td className="p-4 align-top text-left font-medium text-slate-700">{row.label}</td>
                    <td className="bg-emerald-50/60 p-4 align-top text-emerald-900">{row.skelbiz}</td>
                    <td className="p-4 align-top text-slate-600">{row.tally}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="bg-brand-navy pt-20 pb-4 text-center">
        <div className="mx-auto max-w-3xl px-6">
          <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">
            Your ROI
          </span>
          <h2 className="mt-4 text-2xl font-bold text-white sm:text-3xl">Not a break-even guess - your own numbers</h2>
          <p className="mt-4 text-blue-100">
            Tally Prime's own license really is cheaper than SkelBiz - because it doesn't do what SkelBiz
            does. Rather than assert a blanket saving, here's a calculator for exactly what stays manual once
            Tally is installed - plug in your own team and hours below.
          </p>
        </div>
      </section>

      <ManualTrackingCalculator />

      <section className="bg-white pb-20 pt-4 text-center">
        <a href="/pricing/" className="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">
          See Full Pricing & ROI
        </a>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Frequently asked</h2>
          <div className="mt-10 space-y-5">
            {TALLY_VS_FAQS.map((item) => (
              <div key={item.q} className="rounded-card border border-slate-200 bg-white 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 className="mt-8 text-center">
            <a href="/skelbiz-vs-tally-zoho-odoo/" className="text-sm font-semibold text-emerald-700 hover:text-emerald-800">
              See the full SkelBiz vs Tally, Zoho & Odoo comparison →
            </a>
          </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 your floor automated, syncing straight into Tally.</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">A live walkthrough, on your own products and warehouses.</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>
    </>
  );
}