// ComparisonPage.jsx
//
// "/skelbiz-vs-tally-zoho-odoo/" - the dedicated comparison page linked from
// Home's ComparisonTeaser, Navbar, and Footer. Positions SkelBiz explicitly
// as an operations/floor-automation platform, not an accounting system -
// the same distinction TallyIntegrationPage.jsx already draws ("Alongside -
// Tally stays your system of record for accounting").
//
// Every SkelBiz-side claim reuses REAL_MODULES (EarlyAccessGate.jsx) - no
// second, hand-written capability list. Every competitor-side claim is
// grounded in each product's own public positioning (Tally's godown/WIP/job
// -costing features and Silver/Gold perpetual licensing; Zoho Inventory's
// documented "composite items" BOM workaround and Zoho Creator dependency
// for production/QC/dispatch tracking; Odoo's real per-user Enterprise
// pricing and typical $10K-$60K+/1-6 month partner-led SME implementation
// range) - not invented weaknesses. Nothing here claims a competitor lacks
// a feature it genuinely has (Odoo's Manufacturing app is real and is
// described that way); the differentiator argued is cost/complexity/fit for
// a resource-constrained MSME, not a fabricated capability gap. No SkelBiz
// price or percentage-savings figure appears - PricingPage.jsx's own
// comment already established why (no Plan/Subscription entity exists to
// source a number from) - cost-saving claims here are about structure
// (no stacked per-app subscriptions, no separate implementation-partner
// project) not an invented number.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const WHY_TALLY_EXCEL = [
  {
    title: "Tally is genuinely good at what it was built for",
    body: "GST-compliant invoicing, a ledger every accountant already knows, godown-level stock tracking, job costing, and a one-time license instead of a recurring bill - real reasons Tally is the default across Indian MSME manufacturing, not just inertia.",
  },
  {
    title: "The gap opens the moment accounting isn't the question",
    body: "Which production stage actually lost material this week? Did that shipment really reach the customer? What does this broker's commission come to above their volume threshold? Tally's ledger was never built to answer those - so someone builds a second system to cover it.",
  },
  {
    title: "That second system is almost always Excel",
    body: "A spreadsheet doesn't warn anyone when a formula breaks, doesn't lock a number once it's true, and doesn't talk to Tally at all - so the two systems drift apart, and reconciling them becomes somebody's monthly job.",
  },
];

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 ZOHO_FACTS = [
  "Zoho Inventory's own documentation frames real multi-stage manufacturing - production, QC, job work, dispatch - as something you build 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",
  "Books, Inventory, and CRM are three separate subscriptions, each billed on its own - the full picture usually means stacking apps, or committing to the 50+ app Zoho One bundle to get them under one price",
];

const ODOO_FACTS = [
  "Odoo's Manufacturing app is real - work orders, bills of materials, and routing all genuinely exist, unlike Zoho's workaround",
  "Enterprise pricing runs roughly $24-35 per user, per month - and that's before implementation",
  "A realistic first-year budget for an SME rollout - certified implementation 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 - a serious ask for a business that adopted Tally and Excel precisely because it needed something working this quarter",
];

const COMPARISON_TABLE = [
  {
    label: "Configurable, multi-stage production workflow with automated 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",
    zoho: "Not native - built yourself in Zoho Creator",
    odoo: "Native Manufacturing app, partner-configured",
  },
  {
    label: "Multi-warehouse with a default-warehouse fallback for unassigned stock movements",
    skelbiz: "Built in from day one",
    tally: "Multiple godowns; no automatic fallback routing",
    zoho: "Multi-warehouse on higher-tier plans",
    odoo: "Native, configured per rollout",
  },
  {
    label: "Automated broker, customer & vendor commission/pricing rules",
    skelbiz: "5 strategies built in, immutable snapshots",
    tally: "Not a built-in feature",
    zoho: "Not native",
    odoo: "Possible via Sales/CRM configuration",
  },
  {
    label: "No-login customer portal for delivery confirmation & disputes",
    skelbiz: "Built in - one link per shipment",
    tally: "Not offered",
    zoho: "Not native to Inventory or Books",
    odoo: "Portal app exists; needs setup",
  },
  {
    label: "Live, role-scoped drill-down analytics",
    skelbiz: "Built in, permission-aware by default",
    tally: "Standard reports, not role-scoped drill-down",
    zoho: "Separate Zoho Analytics subscription",
    odoo: "Built in, configuration-heavy",
  },
  {
    label: "Per-module roles enforced at the API level",
    skelbiz: "View, Contribute, or Manage - server-enforced",
    tally: "Owner vs. data-entry operator, desktop-level",
    zoho: "Role-based, per app",
    odoo: "Native and granular",
  },
  {
    label: "Native sync into Tally as real vouchers",
    skelbiz: "Built in - local agent, no re-typing",
    tally: "This is Tally",
    zoho: "Not native",
    odoo: "Not native",
  },
  {
    label: "Typical cost structure",
    skelbiz: "Flat per company, from ₹1,499/mo (India) or $29/mo (Global) + one-time setup - see Pricing",
    tally: "One-time multi-user license (~₹80K) + annual renewal",
    zoho: "Per-app subscriptions that stack quickly",
    odoo: "Per-user fees + $10K-$60K+ implementation",
  },
  {
    label: "Realistic time to floor-level value",
    skelbiz: "Days to weeks",
    tally: "Days - for the accounting side only",
    zoho: "Days for accounting; months to DIY production tracking",
    odoo: "1-6 months, partner-led",
  },
];

const MONEY_MECHANISMS = [
  {
    title: "No stacked implementation-partner project",
    body: "Odoo's real capability comes with a real cost most MSMEs don't budget for - a certified partner, a $10,000-$60,000+ first-year engagement, months before go-live. SkelBiz is onboarded directly, on your own process, without a separate implementation project sitting on top of the subscription.",
  },
  {
    title: "No stacking three subscriptions to reconstruct one workflow",
    body: "Zoho's real production tracking isn't a feature you switch on - it's a Zoho Creator app you or a partner build, layered on top of separately-billed Books and Inventory subscriptions. One platform, one bill, is a structurally different cost shape.",
  },
  {
    title: "Wastage you can finally see, not just a number on the balance sheet",
    body: "Tally's WIP figure tells you what's tied up in production as a value. It doesn't tell you which stage lost it. SkelBiz's per-stage wastage evaluation does - and wastage nobody can see is wastage nobody can fix.",
  },
  {
    title: "Disputes settled by a record, not a phone call",
    body: "A delivery dispute resolved by a timestamped customer confirmation costs a business less - in time and in the relationship - than one settled by two people's differing memory of a phone call.",
  },
  {
    title: "Commission and pricing math nobody has to remember correctly, forever",
    body: "A spreadsheet formula for broker commissions breaks silently the day someone edits the wrong cell. A rule that calculates itself, snapshotted immutably on every applied record, doesn't.",
  },
];

const MANUFACTURING_FIRST = [
  { id: "production-workflow", label: "A configurable, multi-stage Production & WIP Workflow Engine - not an accounting module with a manufacturing label on it" },
  { id: "warehouses", label: "Multi-Warehouse Management with default-warehouse fallback, built for a real multi-site floor" },
  { id: "business-rules", label: "A Business Rules Engine built specifically for broker, vendor, and customer pricing" },
  { id: "fleet-dispatch", label: "Fleet & Dispatch tracking a shipment through to customer-confirmed delivery" },
  { id: "analytics-dashboards", label: "Drill-down Analytics reading the same live floor data every other module writes" },
  { id: "ai-assistant", label: "An AI Business Assistant that answers in plain language, including Gujarati" },
];

const 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: "We already use Zoho or Odoo for parts of this - can SkelBiz still help?",
    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 or Odoo integration is a real blocker for you, tell us on a demo call - it's the kind of thing we scope directly rather than guess at here.",
  },
  {
    q: "Is SkelBiz actually cheaper than Tally, Zoho, or Odoo?",
    a: "We don't publish a number, for the same reason our Pricing page doesn't - every SME's module mix, warehouse count, and rollout looks different. What we can say honestly: SkelBiz doesn't add a separate implementation-partner project on top of a subscription, or ask you to stack multiple per-app subscriptions to get one workflow. A real quote comes from a demo call.",
  },
  {
    q: "Do we have to give up Tally to use SkelBiz?",
    a: "No - SkelBiz runs alongside Tally, not instead of it. That's the entire point of the integration.",
  },
  {
    q: "Does SkelBiz handle GST invoicing and compliance?",
    a: "No - that's deliberately Tally's job, and it stays that way. SkelBiz is an operations and process automation platform: purchase, multi-warehouse inventory, production, and dispatch. We integrate with the accounting software you already trust instead of trying to become one ourselves.",
  },
  {
    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 ComparisonPage() {
  useDocumentMeta(
    "SkelBiz vs Tally Prime, Zoho & Odoo - Manufacturing Operations Platform for MSMEs",
    "An honest comparison for SME manufacturers: why Tally Prime, Zoho, and Odoo all fall short of real floor-level production automation, and how SkelBiz's operations platform 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, Zoho & Odoo
        </span>
        <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-extrabold leading-tight text-white sm:text-5xl">
          You already trust Tally with your books. Your production floor still runs on Excel.
        </h1>
        <p className="mx-auto mt-5 max-w-2xl text-lg text-blue-100">
          SkelBiz isn't another accounting system competing with Tally, Zoho, or Odoo for your ledger. It's
          the operations layer none of them were built to be - purchase, multi-warehouse inventory,
          floor-level production, dispatch, and commissions on one live system, syncing straight into Tally
          instead of replacing it.
        </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="mx-auto max-w-6xl px-6 py-20">
        <h2 className="text-center text-2xl font-bold text-brand-navy sm:text-3xl">
          Why Tally became the default - and where the job stops being about accounting
        </h2>
        <div className="mt-10 space-y-6">
          {WHY_TALLY_EXCEL.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>
      </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">
              Zoho and Odoo: broader software, still not manufacturing-floor-first
            </h2>
            <p className="mt-3 text-slate-600">
              Both are real, capable platforms - the honest question for an MSME is fit, not feature counts.
            </p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
            <div className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card">
              <h3 className="text-lg font-bold text-brand-navy">Zoho (Books / Inventory)</h3>
              <ul className="mt-4 space-y-3">
                {ZOHO_FACTS.map((item) => (
                  <li key={item} 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-brand-steel" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <circle cx="12" cy="12" r="9" />
                      <path strokeLinecap="round" d="M12 8v4M12 16h.01" />
                    </svg>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card">
              <h3 className="text-lg font-bold text-brand-navy">Odoo</h3>
              <ul className="mt-4 space-y-3">
                {ODOO_FACTS.map((item) => (
                  <li key={item} 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-brand-steel" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <circle cx="12" cy="12" r="9" />
                      <path strokeLinecap="round" d="M12 8v4M12 16h.01" />
                    </svg>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl 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>
            <p className="mt-3 text-slate-600">Every claim here is stated plainly - including where a competitor genuinely has the capability.</p>
          </div>
          <div className="mt-10 overflow-x-auto">
            <table className="w-full min-w-[880px] 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>
                  <th className="p-4 text-left">Zoho</th>
                  <th className="p-4 text-left">Odoo</th>
                </tr>
              </thead>
              <tbody>
                {COMPARISON_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>
                    <td className="p-4 align-top text-slate-600">{row.zoho}</td>
                    <td className="p-4 align-top text-slate-600">{row.odoo}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-2xl font-bold text-brand-navy sm:text-3xl">Go deeper on one competitor</h2>
            <p className="mt-3 text-slate-600">A full breakdown, real numbers, and an ROI comparison specific to each.</p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3">
            {[
              { href: "/vs-tally-prime/", name: "SkelBiz vs Tally Prime", body: "Where Tally's accounting-first design leaves your production floor uncovered." },
              { href: "/vs-zoho/", name: "SkelBiz vs Zoho", body: "Why real production tracking isn't a Zoho Inventory feature - it's a Zoho Creator app you build yourself." },
              { href: "/vs-odoo/", name: "SkelBiz vs Odoo", body: "Real capability, real cost - what a partner-led implementation actually runs for an MSME." },
            ].map((c) => (
              <a
                key={c.href}
                href={c.href}
                className="group rounded-card border border-slate-200 bg-surface-card p-6 shadow-card transition hover:-translate-y-0.5 hover:border-brand-green/30 hover:shadow-lifted"
              >
                <h3 className="text-base font-semibold text-brand-navy group-hover:text-emerald-700">{c.name}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{c.body}</p>
                <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">Read the comparison →</span>
              </a>
            ))}
          </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">Where SkelBiz actually saves an MSME manufacturer money</h2>
            <p className="mt-3 text-slate-600">
              Real mechanisms below - and real ₹/$ figures on our{" "}
              <a href="/pricing/" className="font-semibold text-emerald-700 hover:text-emerald-800">Pricing page's ROI section</a>.
            </p>
          </div>
          <div className="mt-10 space-y-6">
            {MONEY_MECHANISMS.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>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-2xl font-bold text-brand-navy sm:text-3xl">Manufacturing-first, not accounting-first with a manufacturing label</h2>
            <p className="mt-3 text-slate-600">
              Tally, Zoho, and Odoo all started as (or remain, at their core) accounting and business-suite
              software. SkelBiz starts on the floor.
            </p>
          </div>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {MANUFACTURING_FIRST.map((m) => (
              <a
                key={m.id}
                href={`/product/${m.id}/`}
                className="group rounded-card border border-slate-200 bg-surface-card p-6 shadow-card transition hover:-translate-y-0.5 hover:border-brand-green/30 hover:shadow-lifted"
              >
                <p className="text-sm leading-relaxed text-slate-700 group-hover:text-brand-navy">{m.label}</p>
                <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">Learn more →</span>
              </a>
            ))}
          </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">
            Better Together
          </span>
          <h2 className="mt-4 text-2xl font-bold text-white sm:text-3xl">SkelBiz runs your floor. Tally stays your books.</h2>
          <p className="mt-4 text-blue-100">
            The moment a Sales Order in SkelBiz is confirmed, a local agent maps it into Tally's own voucher
            format and pushes it through Tally's local XML gateway - the same interface Tally itself exposes
            for integrations. Your accounting team keeps working in the Tally they already know; they just
            stop re-typing what sales already confirmed.
          </p>
          <a
            href="/tally-integration/"
            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 the Full Tally Integration
          </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">
            {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>
      </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 process automated, syncing straight into the Tally you already trust.
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">
            A live walkthrough, on your own products and warehouses - not a canned script.
          </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>
    </>
  );
}
