// HomePage.jsx
//
// The "/" page - extracted from index.html so every route (including Home)
// follows the same one-file-per-page pattern the per-path migration uses.
// STAT_ICONS/STATS are Home-specific data, not a second module registry -
// ModuleGrid still reads the shared global REAL_MODULES (EarlyAccessGate.jsx),
// and SolutionsTeaser reads the shared global SOLUTIONS (SolutionPage.jsx,
// added to index.html's script list for this) - same single-source
// reasoning both already followed elsewhere on this site.
//
// Deepened with SolutionsTeaser (Home never linked to the Solutions pages
// at all before this - only Navbar's dropdown and Footer did) and a
// top-of-funnel HomeFAQ - deliberately short and link-out heavy (Tally
// Integration, About, Pricing, Product, Security) rather than duplicating
// those pages' own, more detailed FAQs.
//
// 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.

function Hero() {
  return (
    <section className="relative overflow-hidden bg-brand-navy">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(13,106,13,0.25),_transparent_55%)]" />
      <div className="relative mx-auto max-w-7xl px-6 py-24 text-center sm:py-28">
        <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">
          Manufacturing Operations Automation Platform
        </span>
        <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-extrabold leading-tight text-white sm:text-5xl">
          Transform how your manufacturing business runs -
          <span className="text-emerald-400"> from purchase to production to dispatch.</span>
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-blue-100">
          Stop losing money to wastage you can't see, stockouts you didn't predict, and production delays
          nobody flagged in time. SkelBiz replaces the spreadsheets between your purchase orders, your
          production floor, and your dispatch desk with one system that adapts to how your business
          actually works - not the other way around.
        </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/"
            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"
          >
            Explore the Platform
          </a>
        </div>
      </div>
    </section>
  );
}

// Icons are small inline SVGs (no icon-library dependency) - kept as plain
// functions so StatsStrip/TrustSection can stay data-driven (icon key →
// component) instead of hand-repeating JSX per tile.
const STAT_ICONS = {
  grid: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <rect x="3" y="3" width="7" height="7" rx="1.5" />
      <rect x="14" y="3" width="7" height="7" rx="1.5" />
      <rect x="3" y="14" width="7" height="7" rx="1.5" />
      <rect x="14" y="14" width="7" height="7" rx="1.5" />
    </svg>
  ),
  sync: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h5M20 20v-5h-5" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15a8 8 0 0014.5 3.5M19.5 9A8 8 0 005 5.5" />
    </svg>
  ),
  globe: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <circle cx="12" cy="12" r="9" />
      <path strokeLinecap="round" d="M3 12h18M12 3c2.5 2.6 3.8 5.8 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.8-3.8-9S9.5 5.6 12 3z" />
    </svg>
  ),
  shield: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4" />
    </svg>
  ),
  factory: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 21V10l6 4v-4l6 4v-4l6 4v7H3z" />
      <path strokeLinecap="round" d="M7 21v-4M12 21v-4M17 21v-4" />
    </svg>
  ),
  cloud: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M7 18a4.5 4.5 0 01-.5-8.98A5.5 5.5 0 0117 8a4 4 0 01-.5 8H7z" />
    </svg>
  ),
  lock: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <rect x="5" y="11" width="14" height="9" rx="2" />
      <path strokeLinecap="round" d="M8 11V7a4 4 0 018 0v4" />
    </svg>
  ),
  warehouse: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 10.5L12 4l9 6.5V20a1 1 0 01-1 1h-4v-6H8v6H4a1 1 0 01-1-1V10.5z" />
    </svg>
  ),
  refresh: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v6h6M20 20v-6h-6" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M5.5 15a8 8 0 0013.4 3M18.5 9A8 8 0 005 6" />
    </svg>
  ),
  users: (p) => (
    <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <circle cx="9" cy="8" r="3.25" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 19a5.5 5.5 0 0111 0" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.5 5.5a3.25 3.25 0 010 6M20.5 19a5.25 5.25 0 00-4-5.1" />
    </svg>
  ),
};

// Each hue maps to real Tailwind colors this config leaves un-overridden
// (only blue/emerald/green were repainted to brand navy/green, per
// index.html's tailwind.config comment) - sky/amber/violet stay distinct
// from the brand ramp so the strip reads as a genuine 4-color system
// instead of everything defaulting to brand green.
const STAT_HUES = {
  emerald: { chip: "bg-emerald-50 text-emerald-600", ring: "border-emerald-100" },
  sky: { chip: "bg-sky-50 text-sky-600", ring: "border-sky-100" },
  amber: { chip: "bg-amber-50 text-amber-600", ring: "border-amber-100" },
  violet: { chip: "bg-violet-50 text-violet-600", ring: "border-violet-100" },
};

const STATS = [
  { icon: "grid", hue: "emerald", value: `${REAL_MODULES.length} Modules`, label: "One platform for purchase, production, and dispatch" },
  { icon: "factory", hue: "emerald", value: "Full Floor Automation", label: "A configurable workflow engine end to end, not just a ledger" },
  { icon: "globe", hue: "sky", value: "Multi-Language Ready", label: "Multi-languages live today - Indian & global languages on request" },
  { icon: "warehouse", hue: "sky", value: "Multi-Warehouse Ready", label: "Run one warehouse or ten, with a default-warehouse fallback" },
  { icon: "sync", hue: "amber", value: "Tally Integration", label: "Confirmed sales orders sync into Tally as vouchers" },
  { icon: "refresh", hue: "amber", value: "Real-Time Inventory", label: "Stock balances update the moment goods actually move" },
  { icon: "shield", hue: "violet", value: "Enterprise-Grade Security", label: "JWT auth, per-company roles, strict tenant isolation" },
  { icon: "users", hue: "violet", value: "Role-Based Access", label: "View, Contribute, or Manage - set independently per module" },
];

function StatsStrip() {
  return (
    <section className="bg-surface-card py-20">
      <div className="mx-auto grid max-w-7xl grid-cols-2 gap-4 px-6 sm:grid-cols-4">
        {STATS.map((s) => {
          const Icon = STAT_ICONS[s.icon];
          const hue = STAT_HUES[s.hue];
          return (
            <div
              key={s.value}
              className={`flex flex-col items-center gap-3 rounded-card border ${hue.ring} bg-surface-card px-4 py-6 text-center shadow-card`}
            >
              <span className={`flex h-11 w-11 items-center justify-center rounded-full ${hue.chip}`}>
                <Icon className="h-5 w-5" />
              </span>
              <div className="text-sm font-bold text-brand-navy">{s.value}</div>
              <div className="text-xs leading-snug text-slate-500">{s.label}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function TrustSection() {
  return (
    <section className="bg-surface py-20">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-6 lg:grid-cols-5">
        <div className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card lg:col-span-2">
          <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">
            Founding Pilot Partner
          </span>
          <h3 className="mt-4 text-xl font-bold text-brand-navy">Babji Food Industries</h3>
          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            A food manufacturing business running its purchase orders, multi-warehouse inventory, and
            production workflow on SkelBiz today. We're early - one pilot partner, not a logo wall - and
            we'd rather earn the second one than pad this section with names that don't belong here yet.
          </p>
          <a
            href="/request-demo/"
            className="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-emerald-700 hover:text-emerald-800"
          >
            Become our next pilot partner →
          </a>
        </div>

        <div className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card lg:col-span-3">
          <span className="inline-flex items-center rounded-full border border-brand-navy/20 bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-navy">
            Infrastructure
          </span>
          <h3 className="mt-4 text-xl font-bold text-brand-navy">Built on infrastructure you can trust</h3>
          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            We don't cut corners on where your data lives. Files and documents are stored on{" "}
            <strong className="text-brand-navy">Amazon S3</strong>, and the platform runs on a dedicated,
            secured <strong className="text-brand-navy">Hostinger VPS</strong> - the same class of
            infrastructure used by companies far larger than us, not a shared free-tier server.
          </p>
          <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3">
            {[
              { icon: "cloud", label: "Amazon S3 File Storage" },
              { icon: "lock", label: "Dedicated VPS Hosting" },
              { icon: "shield", label: "Tenant-Isolated Data" },
            ].map((b) => {
              const Icon = STAT_ICONS[b.icon];
              return (
                <div key={b.label} className="flex flex-col items-center gap-2 rounded-lg border border-slate-200 bg-surface p-4 text-center">
                  <Icon className="h-5 w-5 text-brand-navy" />
                  <span className="text-xs font-semibold text-slate-600">{b.label}</span>
                </div>
              );
            })}
          </div>
          <a
            href="/security/"
            className="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-emerald-700 hover:text-emerald-800"
          >
            See our full security approach →
          </a>
        </div>
      </div>
    </section>
  );
}

const COMPARISON_ROWS = [
  { label: "Purchase, inventory, and dispatch on one system", sheets: false, erp: true, skelbiz: true },
  { label: "Set up in days, not a multi-month rollout", sheets: true, erp: false, skelbiz: true },
  { label: "Priced and scoped for an SME, not an enterprise budget", sheets: true, erp: false, skelbiz: true },
  { label: "Live, per-warehouse stock - not a count you trust until proven wrong", sheets: false, erp: true, skelbiz: true },
  { label: "A configurable production/WIP workflow, not a rigid fixed process", sheets: false, erp: false, skelbiz: true },
  { label: "Someone actually answers when you ask for a change", sheets: true, erp: false, skelbiz: true },
];

function ComparisonCell({ value }) {
  if (value === true) {
    return (
      <svg className="mx-auto h-5 w-5 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>
    );
  }
  return (
    <svg className="mx-auto h-5 w-5 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>
  );
}

function ComparisonSection() {
  return (
    <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-3xl font-bold text-brand-navy">Spreadsheets weren't built for this. Enterprise ERP wasn't built for you.</h2>
          <p className="mt-3 text-slate-600">
            Every SME manufacturer ends up choosing between two things that don't fit. Here's the honest
            comparison.
          </p>
        </div>

        <div className="mt-12 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-surface text-sm font-semibold text-brand-navy">
                <th className="p-4 text-left">&nbsp;</th>
                <th className="p-4">Spreadsheets</th>
                <th className="p-4">Enterprise ERP</th>
                <th className="p-4 bg-emerald-50 text-emerald-800">SkelBiz</th>
              </tr>
            </thead>
            <tbody>
              {COMPARISON_ROWS.map((row, i) => (
                <tr key={row.label} className={i % 2 === 0 ? "bg-surface-card" : "bg-surface"}>
                  <td className="p-4 text-left text-sm text-slate-600">{row.label}</td>
                  <td className="p-4">
                    <ComparisonCell value={row.sheets} />
                  </td>
                  <td className="p-4">
                    <ComparisonCell value={row.erp} />
                  </td>
                  <td className="bg-emerald-50/60 p-4">
                    <ComparisonCell value={row.skelbiz} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// Home's primary competitive framing is Tally-only, deliberately - most of
// the manufacturers we talk to already run Tally, not Zoho or Odoo, so
// that's the comparison that actually lands here. The full three-way
// comparison still exists (see the small link at the end of this section)
// but isn't the headline, per the site owner's direct instruction.
const TALLY_GAP_HIGHLIGHTS = [
  { label: "Stock re-counted by hand to check it against Tally's godown register - because Tally's WIP is a balance-sheet number, not a live per-stage view" },
  { label: "Dispatch confirmed by phone call, not by a record either side can point back to later" },
  { label: "A partner who doesn't use Tally still has to call someone else just to know today's status" },
];

function TallySection() {
  return (
    <section className="bg-brand-navy py-20">
      <div className="mx-auto max-w-6xl px-6">
        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2">
          <div>
            <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 + Tally Prime
            </span>
            <h2 className="mt-4 text-3xl font-bold text-white">
              Tally runs your books. Who's tracking everything else?
            </h2>
            <p className="mt-3 text-blue-100">
              Most manufacturers we talk to already have Tally installed, and it does its job on the
              accounting side. The manual work is everywhere Tally was never built to cover - SkelBiz fills
              exactly that gap, and syncs straight into Tally instead of replacing it.
            </p>
            <a
              href="/vs-tally-prime/"
              className="mt-6 inline-flex items-center gap-1 rounded-card bg-emerald-600 px-6 py-3 text-sm font-semibold text-white shadow-card transition hover:bg-emerald-700"
            >
              See What Tally Doesn't Cover →
            </a>
            <p className="mt-4 text-xs text-blue-300">
              Evaluating Zoho or Odoo too? <a href="/skelbiz-vs-tally-zoho-odoo/" className="underline hover:text-white">See the full comparison</a>.
            </p>
          </div>
          <div className="space-y-3">
            {TALLY_GAP_HIGHLIGHTS.map((h) => (
              <div key={h.label} className="flex items-start gap-3 rounded-card border border-white/10 bg-white/5 p-5">
                <svg className="mt-0.5 h-4 w-4 shrink-0 text-amber-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" d="M12 9v4M12 17h.01M10.29 3.86l-8.4 14.55A1 1 0 002.75 20h18.5a1 1 0 00.86-1.59l-8.4-14.55a1 1 0 00-1.72 0z" />
                </svg>
                <p className="text-sm leading-relaxed text-blue-100">{h.label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ModuleGrid() {
  return (
    <section className="mx-auto max-w-7xl px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold text-brand-navy">{REAL_MODULES.length} modules. One source of truth.</h2>
        <p className="mt-3 text-slate-600">
          Every module below is a real, running part of SkelBiz today - not a roadmap slide.
        </p>
      </div>
      <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {REAL_MODULES.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"
          >
            <h3 className="text-base font-semibold text-brand-navy group-hover:text-emerald-700">
              {m.name}
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-slate-600">{m.blurb}</p>
          </a>
        ))}
      </div>
    </section>
  );
}

function SolutionsTeaser() {
  return (
    <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-3xl font-bold text-brand-navy">Built for how you actually operate.</h2>
          <p className="mt-3 text-slate-600">
            Same platform, same modules - configured around whether you make, transform, or move goods.
          </p>
        </div>
        <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3">
          {SOLUTIONS.map((s) => (
            <a
              key={s.id}
              href={`/solutions/${s.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"
            >
              <h3 className="text-base font-semibold text-brand-navy group-hover:text-emerald-700">{s.name}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-600">{s.tagline}</p>
              <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">See how it works →</span>
            </a>
          ))}
        </div>
        <div className="mt-8 text-center">
          <a href="/solutions/" className="text-sm font-semibold text-emerald-700 hover:text-emerald-800">
            See all solutions →
          </a>
        </div>
      </div>
    </section>
  );
}

function SimulatorSection() {
  return (
    <section className="bg-white py-20">
      <div className="mx-auto max-w-7xl 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">
            Live Simulation
          </span>
          <h2 className="mt-4 text-3xl font-bold text-brand-navy">
            Watch the Production Workflow Engine think.
          </h2>
          <p className="mt-3 text-slate-600">
            This panel simulates the same stock and wastage-ledger events SkelBiz's Production module
            reacts to in real time - trigger a scenario below.
          </p>
        </div>
        <div className="mt-10">
          <InteractiveSimulator />
        </div>
      </div>
    </section>
  );
}

const PROCESS_STEPS = [
  {
    title: "Request a demo",
    body: "See the platform running on a process that looks like yours - not a generic slide deck.",
  },
  {
    title: "Pay a small onboarding fee",
    body: "That secures your onboarding slot and kicks off setup - it's not a subscription commitment yet.",
  },
  {
    title: "An executive gets to know your operation",
    body: "We learn exactly how you run purchase, production, and dispatch before we configure anything.",
  },
  {
    title: "We build what's genuinely missing",
    body: "If a real gap turns up and it's something enough customers are asking for, we build it - not a maybe-someday roadmap item.",
  },
  {
    title: "Lifetime updates",
    body: "Every future improvement to the modules you're on is included, not a separate upsell.",
  },
  {
    title: "Not satisfied during onboarding? Full refund.",
    body: "No questions asked. If it's not working for you before you're live, you get your money back.",
  },
];

function HowItWorksSection() {
  return (
    <section id="how-it-works" className="bg-surface py-20">
      <div className="mx-auto max-w-7xl 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">
            How It Works
          </span>
          <h2 className="mt-4 text-3xl font-bold text-brand-navy">From demo to live, with a real safety net.</h2>
          <p className="mt-3 text-slate-600">No long-term contract signed blind, and no risk if onboarding doesn't work out.</p>
        </div>
        <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {PROCESS_STEPS.map((step, i) => (
            <div key={step.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-navy text-sm font-bold text-emerald-400">
                {i + 1}
              </span>
              <h3 className="mt-4 text-base font-semibold text-brand-navy">{step.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-600">{step.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const HOME_FAQS = [
  {
    q: "Does this replace our accounting system, or work alongside it?",
    a: "Alongside - confirmed sales orders sync into Tally as vouchers through a real local agent, not a promise. See our Tally Integration page for exactly what's automated today and what isn't yet.",
  },
  {
    q: "We're not \"enterprise\" - is this actually built for a business our size?",
    a: "Yes - that's specifically the gap SkelBiz exists in. See our About page for why we don't chase enterprise-scale rollouts.",
  },
  {
    q: "How is pricing actually determined?",
    a: "Scoped to your modules, warehouse count, and region on a demo call - not a one-size-fits-all number. See our Pricing page for the real Core, Production, and Enterprise tiers.",
  },
  {
    q: "What if we're not sure which modules we need?",
    a: "That's exactly what the demo call is for - we scope it together. See our Product overview first if you'd rather look before you talk to us.",
  },
  {
    q: "Is our data isolated from other companies on the platform?",
    a: "Yes - strict tenant isolation enforced at the API level, not just hidden in the interface. See our Security & Trust page for exactly how.",
  },
];

function HomeFAQ() {
  return (
    <section className="bg-white 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">
          {HOME_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>
  );
}

function ClosingCta() {
  return (
    <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 on a process that looks like yours.
        </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>
  );
}

function HomePage() {
  useDocumentMeta(
    "SkelBiz - Manufacturing Operations Automation Platform",
    "SkelBiz automates purchase orders, multi-warehouse inventory, production workflows, and dispatch on one configurable platform for SME manufacturers - with a business rules engine, Tally ERP integration, and a multi-language, multi-tenant architecture."
  );

  // A cross-page link like /#how-it-works (see RequestDemoPage.jsx) lands
  // here before React has rendered anything, so the browser's native
  // anchor-scroll fires too early and misses. Retry once content exists.
  React.useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView();
  }, []);

  return (
    <>
      <Hero />
      <StatsStrip />
      <ComparisonSection />
      <TallySection />
      <ManualTrackingCalculator />
      <ModuleGrid />
      <SolutionsTeaser />
      <SimulatorSection />
      <WastageCalculator />
      <TrustSection />
      <HowItWorksSection />
      <HomeFAQ />
      <ClosingCta />
    </>
  );
}