// VsOdooPage.jsx
//
// "/vs-odoo/" - dedicated deep-dive off ComparisonPage.jsx's "Go deeper on
// one competitor" links, and off the hub page's ODOO_FACTS. Unlike
// VsZohoPage.jsx, this one does NOT claim SkelBiz has a capability Odoo
// lacks - Odoo's Manufacturing app (work orders, BOMs, routing) is real,
// per real research (see ComparisonPage.jsx's header comment for sourcing:
// $24-35/user/month Enterprise pricing, $10K-$60K+ typical SME
// implementation range, 1-6 month manufacturing rollout timelines from
// silentinfotech.com/cudio.com/erpresearch.com). The differentiator argued
// here is entirely cost, complexity, and time-to-value for a
// resource-constrained MSME - the most quantifiable and honest of the
// three comparisons, since both sides of the number are real.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const ODOO_STRENGTHS = [
  "A genuinely real Manufacturing app - work orders, bills of materials, and routing all exist, not a workaround",
  "80+ apps covering nearly every business function, if you need that breadth",
  "Open-source core with real extensibility - a developer can build almost anything on top of it",
  "A mature, global product with a large partner ecosystem",
];

const ODOO_GAPS = [
  "Enterprise pricing runs roughly $24-35 per user, per month - and that's before implementation",
  "A realistic first-year SME implementation budget - certified partner, configuration, data migration, training - typically lands between $10,000 and $60,000+",
  "Manufacturing-specific rollouts commonly take one to six months before the floor is actually live on it",
  "Cost scales with headcount - every additional user is another per-seat fee, on top of the implementation",
  "That power requires configuration and often custom development to fit your specific process - it isn't pre-configured for an MSME's floor out of the box",
];

const WHY_COST_MATTERS = [
  {
    title: "The capability gap isn't the real gap - the budget is",
    body: "Odoo's Manufacturing app can genuinely do what SkelBiz does, and more, in some dimensions. The honest question for most MSMEs isn't \"can Odoo do this\" - it's whether a $10,000-$60,000+, multi-month implementation project is something the business can actually fund and staff right now.",
  },
  {
    title: "A partner project is still a project",
    body: "Odoo implementations are typically partner-led: requirements gathering, configuration, data migration, custom development, training. That's real, valuable work - and real time your team spends in meetings and testing instead of running the floor.",
  },
  {
    title: "Per-seat pricing punishes exactly the growth you want",
    body: "Adding a warehouse, a shift, or a dispatch clerk on Odoo adds another per-user fee. SkelBiz's pricing is flat per company - the same subscription whether five people touch it or twenty.",
  },
];

const ODOO_TABLE = [
  { label: "Configurable multi-stage production workflow with per-stage wastage tracking", skelbiz: "Built in - your own recipes and stages", odoo: "Native Manufacturing app, partner-configured" },
  { label: "Automated broker, customer & vendor commission/pricing rules", skelbiz: "5 strategies built in, immutable snapshots", odoo: "Possible via Sales/CRM configuration" },
  { label: "No-login customer portal for delivery confirmation & disputes", skelbiz: "Built in - one link per shipment", odoo: "Portal app exists; needs setup" },
  { label: "Pricing model", skelbiz: "Flat per company", odoo: "Per user, per app, per month" },
  { label: "Typical first-year setup cost", skelbiz: "$299 one-time (Enterprise, Global)", odoo: "$10,000-$60,000+ partner-led implementation" },
  { label: "Realistic time to floor-level value", skelbiz: "Days to weeks", odoo: "1-6 months, partner-led" },
  { label: "Native sync into Tally as real vouchers", skelbiz: "Built in - local agent, no re-typing", odoo: "Not native" },
];

const ODOO_VS_FAQS = [
  {
    q: "Is Odoo actually worse than SkelBiz for manufacturing?",
    a: "No - Odoo's Manufacturing app is real and capable, and we won't claim otherwise. The honest differentiator is cost and time-to-value for an MSME: a $10,000-$60,000+, one-to-six-month implementation versus SkelBiz's much smaller setup fee and days-to-weeks rollout.",
  },
  {
    q: "Why does Odoo cost so much to implement if the software itself has a low sticker price?",
    a: "The per-user subscription is genuinely inexpensive at small scale - the real cost is configuring 80+ apps' worth of flexibility down into your specific process, which is what a certified implementation partner is paid to do.",
  },
  {
    q: "Does SkelBiz's pricing really not go up as we add users?",
    a: "Correct - pricing is flat per company, not per seat. See our Pricing page for the exact figures by tier.",
  },
  {
    q: "Could we start with Odoo and switch to SkelBiz later?",
    a: "You could, though it would mean re-running a data migration a second time. Most businesses we talk to find it more efficient to scope this once, on a demo call, before committing budget either way.",
  },
];

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 VsOdooPage() {
  useDocumentMeta(
    "SkelBiz vs Odoo - Manufacturing Operations Platform for MSMEs",
    "An honest cost and time-to-value comparison of SkelBiz and Odoo for SME manufacturers - Odoo's Manufacturing app is genuinely capable, but a realistic MSME implementation runs $10,000-$60,000+ and one to six months."
  );

  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 Odoo
        </span>
        <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-extrabold leading-tight text-white sm:text-5xl">
          Odoo can do it. Can your budget survive the implementation?
        </h1>
        <p className="mx-auto mt-5 max-w-2xl text-lg text-blue-100">
          Odoo's Manufacturing app is real. The honest question for most MSMEs isn't capability - it's
          whether a $10,000-$60,000+, multi-month partner-led rollout fits the business today.
        </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="/pricing/" 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 Real Pricing
          </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 Odoo is genuinely good at</h2>
            <p className="mt-3 text-slate-600">A real, capable platform - the honest question is cost and time, not capability.</p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
            <ComparisonCard title="Real strengths" tone="positive" items={ODOO_STRENGTHS} />
            <ComparisonCard title="What it actually costs an MSME - stated directly" tone="warning" items={ODOO_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">Why the budget question matters more than the feature list</h2>
          </div>
          <div className="mt-10 space-y-6">
            {WHY_COST_MATTERS.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">Odoo</th>
                </tr>
              </thead>
              <tbody>
                {ODOO_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.odoo}</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">$9,700-$59,700 saved in year one alone</h2>
          <p className="mt-4 text-blue-100">
            SkelBiz Enterprise's one-time setup is $299, flat, regardless of headcount. A realistic Odoo
            SME implementation runs $10,000-$60,000+ with a certified partner - before the per-user monthly
            fee even starts, and before that fee scales up with every person you add. That gap alone is
            $9,700-$59,700 in year one, before the ongoing subscriptions are even compared.
          </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">
            {ODOO_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 it running - without a six-month implementation.</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>
    </>
  );
}