// VsZohoPage.jsx
//
// "/vs-zoho/" - dedicated deep-dive off ComparisonPage.jsx's "Go deeper on
// one competitor" links, and off the hub page's ZOHO_FACTS. Deliberately
// does NOT claim mobile/cloud access or multi-language support as an
// advantage here (unlike VsTallyPage.jsx) - Zoho is a genuinely capable
// cloud SaaS suite with broad language support already, so that contrast
// would be false. The real, sourced differentiator is native production
// workflow (Zoho's own docs point to a separate Zoho Creator build for
// that - see ComparisonPage.jsx's header comment for sourcing) and
// subscription-stacking cost, not access or localization.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const ZOHO_STRENGTHS = [
  "A genuinely broad, mature cloud suite - Books, Inventory, CRM, and dozens of other apps, all browser and mobile accessible",
  "Real multi-currency, multi-language support across the suite - a mature, global product, not a narrow regional tool",
  "Composite items in Zoho Inventory handle basic kitting/assembly for straightforward bundles",
  "Transparent, published per-app pricing you can see without a sales call",
];

const ZOHO_GAPS = [
  "Zoho's own documentation frames real multi-stage manufacturing - production, QC, job work, dispatch - as something built using Zoho Creator, a separate low-code app builder, not a feature that ships in Inventory or Books",
  "Bill-of-materials support works through the \"composite items\" bundling feature - a workaround for basic assemblies, not a purpose-built recipe or stage engine with wastage tracking",
  "No native dispatch tracking or customer-facing delivery confirmation portal",
  "No automated broker/vendor/customer commission or pricing-rule engine",
  "Books, Inventory, and CRM are three separate subscriptions, each billed on its own - the full operational picture usually means stacking apps",
];

const WHY_NOT_JUST_CREATOR = [
  {
    title: "A Zoho Creator app is a project, not a feature toggle",
    body: "Building production/QC/dispatch tracking in Zoho Creator means scoping, building, testing, and maintaining a custom application - either your own time or a developer's, indefinitely, every time your process changes.",
  },
  {
    title: "Wastage tracking has to be designed, not just recorded",
    body: "SkelBiz's Production & WIP Workflow Engine evaluates wastage automatically, per stage, per cycle, from the same stock events driving Inventory. In a custom Creator app, that logic - and every edge case in it - is something you or your developer has to design and keep correct.",
  },
  {
    title: "Pricing rules and dispatch still need their own build",
    body: "SkelBiz's Business Rules Engine (5 calculation strategies, immutable snapshots) and Fleet & Dispatch with a no-login Customer Portal are native modules. In the Zoho ecosystem, both would be additional custom scope on top of the Creator production app.",
  },
];

const ZOHO_TABLE = [
  { label: "Configurable multi-stage production workflow with per-stage wastage tracking", skelbiz: "Built in - your own recipes and stages", zoho: "Not native - built yourself in Zoho Creator" },
  { label: "Bill of materials / assemblies", skelbiz: "Part of the native production engine", zoho: "\"Composite items\" workaround for basic bundles" },
  { label: "Automated broker, customer & vendor commission/pricing rules", skelbiz: "5 strategies built in, immutable snapshots", zoho: "Not native" },
  { label: "No-login customer portal for delivery confirmation & disputes", skelbiz: "Built in - one link per shipment", zoho: "Not native to Inventory or Books" },
  { label: "Multi-warehouse with default-warehouse fallback routing", skelbiz: "Built in from day one", zoho: "Multi-warehouse on higher-tier plans" },
  { label: "Live, role-scoped drill-down analytics", skelbiz: "Built in, permission-aware by default", zoho: "Separate Zoho Analytics subscription" },
  { label: "How many separate subscriptions to reach one workflow", skelbiz: "One", zoho: "Books + Inventory + CRM (+ a custom Creator app)" },
  { label: "Native sync into Tally as real vouchers", skelbiz: "Built in - local agent, no re-typing", zoho: "Not native" },
];

const ZOHO_VS_FAQS = [
  {
    q: "Isn't Zoho cheaper than SkelBiz?",
    a: "The raw per-app subscriptions can look cheaper at first - a 3-user Books + Inventory + CRM stack runs roughly ₹13,000/month on mid-tier plans. But that doesn't include real production, dispatch, or commission automation, which Zoho's own docs point you toward building yourself in Zoho Creator. See the ROI section on our Pricing page for the full comparison.",
  },
  {
    q: "We already use Zoho Books for accounting - do we have to give it up?",
    a: "Our integration work has focused on Tally specifically, since that's where the accounting side of most SME manufacturers we talk to already lives. If Zoho Books integration is a real requirement for you, tell us on a demo call.",
  },
  {
    q: "Can't we just build what we need in Zoho Creator ourselves?",
    a: "You can - plenty of businesses do. The honest tradeoff is that it becomes a software project you own: scoping, building, testing, and maintaining it as your process changes, rather than a module that already works.",
  },
  {
    q: "Does Zoho actually lack manufacturing features?",
    a: "Zoho Inventory has composite items for basic assemblies, and Zoho's own Creator platform can be used to build production/QC/dispatch tracking - it's real capability, just not something that ships natively the way it does in SkelBiz. We'd rather state that accurately than overclaim a gap that isn't there.",
  },
];

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 VsZohoPage() {
  useDocumentMeta(
    "SkelBiz vs Zoho - Manufacturing Operations Platform for MSMEs",
    "An honest comparison of SkelBiz and Zoho (Books/Inventory/CRM) for SME manufacturers - why native production tracking, dispatch, and commission automation aren't features Zoho ships, and what that costs to build yourself."
  );

  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 Zoho
        </span>
        <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-extrabold leading-tight text-white sm:text-5xl">
          Zoho is a real cloud suite. Your production floor is still a Zoho Creator project.
        </h1>
        <p className="mx-auto mt-5 max-w-2xl text-lg text-blue-100">
          Zoho's own documentation is honest about this: real manufacturing tracking isn't a Books or
          Inventory feature - it's something you or a developer build in Zoho Creator. SkelBiz ships it
          native.
        </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="/product/production-workflow/" 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 the Production Engine
          </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 Zoho is genuinely good at</h2>
            <p className="mt-3 text-slate-600">A real, mature suite - the honest question is what it takes to cover a manufacturing floor with it.</p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
            <ComparisonCard title="Real strengths" tone="positive" items={ZOHO_STRENGTHS} />
            <ComparisonCard title="Where it stops - stated directly" tone="warning" items={ZOHO_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">"Just build it in Zoho Creator" - what that actually means</h2>
          </div>
          <div className="mt-10 space-y-6">
            {WHY_NOT_JUST_CREATOR.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">Zoho</th>
                </tr>
              </thead>
              <tbody>
                {ZOHO_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.zoho}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="bg-brand-navy py-20">
        <div className="mx-auto max-w-4xl px-6 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">
            Your ROI
          </span>
          <h2 className="mt-4 text-2xl font-bold text-white sm:text-3xl">A fraction of the bare subscriptions, no DIY build</h2>
          <p className="mt-4 text-blue-100">
            A 3-user Zoho stack on mid-tier plans (Books Professional + Inventory Premium + CRM Professional)
            runs roughly ₹13,000/month before any real production tracking exists. SkelBiz Production is
            ₹2,499/month in India (or $49/month Global) - far less than that bare Zoho subscription stack
            alone, and it includes the native production/WIP engine, dispatch, and business rules that Zoho
            would still need a custom Creator build - and its ongoing maintenance - to replicate.
          </p>
          <a href="/pricing/" 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">
            See Full Pricing & ROI
          </a>
        </div>
      </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">
            {ZOHO_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 native production tracking, not a custom build.</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>
    </>
  );
}