// ProductIndexPage.jsx
//
// The "/product" overview - what Navbar's logo-adjacent nav, the Hero's
// "Explore the Platform" CTA, and Footer's "View Full Platform" link all
// point to. Renders the same REAL_MODULES registry (EarlyAccessGate.jsx)
// as Home's ModuleGrid, since a second hand-written module list would
// immediately drift from the real one (SPEC-07 Section 2).
//
// Deepened beyond a single flat 15-card grid: MODULE_CATEGORIES groups the
// same REAL_MODULES ids by where they sit in the real domain flow (see
// CLAUDE.md's "Domain flow" - Purchase -> GRN -> Inventory -> Production ->
// Sales -> Dispatch -> Customer Portal, plus the Partners/Insight modules
// around it) - still id references into one array, not a duplicate module
// list. PRODUCT_FLOW restates that same domain flow as a short numbered
// walkthrough, since 15 cards alone don't show that this is one connected
// system, not 15 unrelated features.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const MODULE_CATEGORIES = [
  {
    title: "Order & Fulfillment",
    moduleIds: ["sales-orders", "purchase-grn", "fleet-dispatch", "customer-portal"],
  },
  {
    title: "Inventory & Production",
    moduleIds: ["inventory", "warehouses", "production-workflow"],
  },
  {
    title: "Pricing & Partners",
    moduleIds: ["business-rules", "vendors", "brokers", "customers"],
  },
  {
    title: "Insight & Control",
    moduleIds: ["analytics-dashboards", "ai-assistant", "roles-permissions", "localization"],
  },
];

const PRODUCT_FLOW = [
  { title: "Purchase & receive", body: "A Purchase Order is raised, and the GRN records exactly what arrived, line by line - partial deliveries included." },
  { title: "Stock becomes real", body: "Received goods flow straight into Inventory, tracked per warehouse, the moment they're logged." },
  { title: "Production, if it applies", body: "Raw material moves through your own configured stages, tracked on a live WIP ledger - not a single \"in production\" flag." },
  { title: "Sales draws on live stock", body: "A Sales Order is confirmed against what's actually available, not a number from last week's count." },
  { title: "Dispatch, then proof of delivery", body: "Fleet & Dispatch tracks the shipment through to a customer-confirmed delivery via the Customer Portal - no phone call needed." },
];

const PRODUCT_INDEX_FAQS = [
  {
    q: "Do I need all 15 modules?",
    a: "No - modules are enabled per company. See our Pricing page for which modules are typically bundled into Core, Production, and Enterprise.",
  },
  {
    q: "Can I add a module later without migrating?",
    a: "Yes - enabling a module is a configuration change on the same platform, not a separate rollout or data migration.",
  },
  {
    q: "Which modules should I start with?",
    a: "That's exactly what a demo call scopes out with you, based on your actual process - see our Solutions pages for how this typically breaks down by kind of operation.",
  },
];

function ProductIndexPage() {
  useDocumentMeta(
    "Product Overview - SkelBiz Manufacturing Operations Platform",
    `Every SkelBiz module in one place: ${REAL_MODULES.length} real, running capabilities covering sales, purchase, multi-warehouse inventory, the production workflow engine, business rules, analytics, and more.`
  );

  const byId = Object.fromEntries(REAL_MODULES.map((m) => [m.id, m]));

  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">
          Product
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          {REAL_MODULES.length} modules. One platform.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          Every module below is real and running today - click through for exactly what it does.
        </p>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <h2 className="text-center text-2xl font-bold text-brand-navy">How the modules connect</h2>
        <p className="mx-auto mt-3 max-w-xl text-center text-sm text-slate-600">
          One event stream, not 15 unrelated features reconciled by hand.
        </p>
        <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
          {PRODUCT_FLOW.map((step, i) => (
            <div key={step.title} className="rounded-card border border-slate-200 bg-surface-card p-5 shadow-card">
              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-navy text-xs font-bold text-emerald-400">
                {i + 1}
              </span>
              <h3 className="mt-3 text-sm font-semibold text-brand-navy">{step.title}</h3>
              <p className="mt-1.5 text-xs leading-relaxed text-slate-600">{step.body}</p>
            </div>
          ))}
        </div>
      </section>

      {MODULE_CATEGORIES.map((cat, i) => (
        <section key={cat.title} className={i % 2 === 0 ? "bg-surface py-20" : "bg-white py-20"}>
          <div className="mx-auto max-w-7xl px-6">
            <h2 className="text-xl font-bold text-brand-navy">{cat.title}</h2>
            <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {cat.moduleIds.map((id) => {
                const m = byId[id];
                return (
                  <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>
                    <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">Learn more →</span>
                  </a>
                );
              })}
            </div>
          </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">
            {PRODUCT_INDEX_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">Not sure which modules you need?</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">
            That's exactly what the demo call is for - we'll scope it together.
          </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>
    </>
  );
}