// SolutionPage.jsx
//
// Single template rendering any of the 3 SOLUTIONS entries - same
// single-registry principle as ProductModulePage.jsx (SPEC-07 Section 2).
// Each solution is framed entirely in terms of the real REAL_MODULES
// (EarlyAccessGate.jsx) most relevant to that vertical - no invented
// vertical-specific features that don't map to an actual module.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const SOLUTIONS = [
  {
    id: "manufacturing",
    name: "Manufacturing SMEs",
    tagline: "Purchase raw materials, track them through production, and dispatch finished goods - on one system.",
    description:
      "Manufacturing SMEs typically run purchase, production, and dispatch as three disconnected systems - a purchase ledger, a production whiteboard or spreadsheet, and a dispatch register that's rebuilt by hand from the other two. SkelBiz replaces the gap between them: raw materials received through Purchase Orders & GRN flow directly into the Production & WIP Workflow Engine, which tracks exactly what's at each stage until finished goods are ready to dispatch.",
    moduleIds: ["production-workflow", "purchase-grn", "inventory", "warehouses", "business-rules", "analytics-dashboards"],
    challenges: [
      "Purchase, production, and dispatch tracked in three disconnected systems that never fully agree with each other",
      "No visibility into what's actually happening on the production floor until a shift is already over",
      "Raw material shortages discovered when the floor runs dry, not before",
      "Finished-goods dispatch that isn't actually connected to what was produced, so the two get reconciled by hand",
    ],
    workflow: [
      { step: "Raw material is ordered and received", detail: "A Purchase Order tracks what was ordered; the GRN records exactly what arrived, line by line - partial deliveries included." },
      { step: "Material enters production", detail: "Received stock flows straight into the Production & WIP Workflow Engine, at whichever stage your recipe defines as the starting point." },
      { step: "It moves through your real stages", detail: "The WIP ledger tracks the balance at each stage as material moves through - not one combined \"in production\" number." },
      { step: "Finished goods land in Inventory", detail: "Output from the final stage becomes real, available stock - the same live balance Sales Orders and dashboards read from." },
      { step: "Orders are confirmed and dispatched", detail: "A Sales Order draws on that stock, and Fleet & Dispatch tracks it through to a customer-confirmed delivery." },
    ],
    whoItsFor: [
      "Small-batch and made-to-order manufacturers who need real production visibility, not just a purchase and sales ledger",
      "Businesses running more than one production stage, where losing track between stages is the actual problem",
      "Manufacturers currently reconciling purchase-to-dispatch by hand at month-end",
    ],
    faqs: [
      {
        q: "Do I need to use every module listed here?",
        a: "No - modules are enabled per company. Most manufacturing SMEs start with Purchase, Inventory, and Sales, and add the Production & WIP Workflow Engine once it's clear where the visibility gap actually is.",
      },
      {
        q: "What if my production process doesn't match a standard template?",
        a: "It's not built around one - recipes and stages are configured per company to match your actual process, not a generic manufacturing template.",
      },
      {
        q: "Can I start small and add Production later?",
        a: "Yes - see our Pricing page. Core covers purchase, inventory, and sales; Production is a configuration change, not a migration, when you're ready for it.",
      },
    ],
  },
  {
    id: "processing",
    name: "Processing & Converting",
    tagline: "Track yield and wastage at every stage of a multi-step process, not just at the end.",
    description:
      "Processing and converting businesses - food processing, plastics, textiles, and similar multi-stage operations - live or die on yield. SkelBiz's Production & WIP Workflow Engine keeps a double-entry ledger of every stage, so wastage and yield-loss are visible per stage, per cycle - not just as a single number at the end of the month.",
    moduleIds: ["production-workflow", "inventory", "warehouses", "analytics-dashboards", "business-rules"],
    challenges: [
      "Yield loss only discovered at month-end stocktake, long after the stage that caused it is finished",
      "No way to tell which specific stage - not which shift, which stage - a loss actually happened at",
      "Co-products and blending that make manual, spreadsheet-based tracking nearly impossible to keep accurate",
      "Wastage numbers reconciled by hand, after the fact, instead of flagged while it's still happening",
    ],
    workflow: [
      { step: "Raw material enters the first stage", detail: "A stock-in event registers the input - via GRN receipt or an internal transfer - against that stage's WIP balance." },
      { step: "It moves through each processing stage", detail: "Every stage transition is a real, double-entry ledger movement - what left the previous stage, what entered the next one." },
      { step: "Wastage is evaluated per stage, per cycle", detail: "Not once for the whole plant - each stage's cycle is evaluated independently, so a yield-loss spike is traceable to exactly where it happened." },
      { step: "A negative balance is flagged, not hidden", detail: "If a stage's balance goes negative - often a sign of an automated downstream deduction outrunning what was actually logged in - it's surfaced as a diagnostic warning." },
      { step: "Finished goods reach Inventory", detail: "Output from the last stage becomes real, sellable stock, with the full stage-by-stage history behind it." },
    ],
    whoItsFor: [
      "Food processors and other operations where raw material quality and yield vary batch to batch",
      "Plastics and materials converters running multi-stage extrusion, blending, or forming processes",
      "Textile and similar processors where co-products or blended outputs make simple in/out tracking meaningless",
      "Any operation where yield loss is a real, material cost - not a rounding error absorbed into overhead",
    ],
    faqs: [
      {
        q: "Can this handle co-products from the same input?",
        a: "Yes - the WIP ledger tracks balances per product per stage, which is what makes representing co-products and blending possible without a separate batch ID hack.",
      },
      {
        q: "How quickly would we see a wastage spike?",
        a: "As soon as the relevant stage's cycle is evaluated - not on a monthly schedule. See it demonstrated live on our Home page's Workflow Engine panel.",
      },
      {
        q: "Do we need to redesign our process to fit the system?",
        a: "No - stages and recipes are configured to match your actual process. This is the same distinction covered on the Production & WIP Workflow Engine page.",
      },
    ],
  },
  {
    id: "distribution",
    name: "Distribution & Logistics",
    tagline: "Purchase, warehouse, and dispatch - with brokers and multi-warehouse routing built in.",
    description:
      "Distribution businesses move goods, not make them - the priorities are different: multiple warehouses, broker relationships, and a dispatch process customers can track without calling in. SkelBiz's Fleet & Dispatch, Multi-Warehouse Management, and Customer Portal are built around exactly that.",
    moduleIds: ["fleet-dispatch", "warehouses", "brokers", "customer-portal", "sales-orders"],
    challenges: [
      "Stock spread across multiple locations with no live, combined view of what's actually available",
      "Delivery dates promised based on what one warehouse shows, without knowing another location already covers it",
      "Broker commissions reconciled by hand at month-end, against deals nobody fully remembers the terms of",
      "Delivery disputes that come down to two different memories of a phone call, with no record either side trusts",
    ],
    workflow: [
      { step: "Stock arrives across your warehouses", detail: "Each location is a real, company-scoped Warehouse record - a receipt with no location specified resolves to your default warehouse automatically." },
      { step: "A sales order draws on live combined stock", detail: "Balances are tracked per product, per warehouse, so sales can see what's really available before promising a date." },
      { step: "Broker commission applies automatically", detail: "If the sale involves a broker, their assigned Business Rule calculates commission the moment the deal is recorded - not at month-end reconciliation." },
      { step: "The order is dispatched", detail: "Fleet & Dispatch tracks the shipment from Pending through Dispatched, linked to the sales order it fulfills." },
      { step: "The customer confirms delivery themselves", detail: "A Customer Portal link lets them confirm or dispute - no account needed - creating a record that locks once the shipment reaches its final state." },
    ],
    whoItsFor: [
      "Distributors running more than one warehouse or depot",
      "Businesses that work through brokers and need commission calculated consistently, not tracked in a side spreadsheet",
      "Operations where delivery confirmation disputes are a recurring, costly problem",
    ],
    faqs: [
      {
        q: "How many warehouses can we run on this?",
        a: "There's no fixed limit - warehouses are a standard company-scoped record, covered in full on the Multi-Warehouse Management page.",
      },
      {
        q: "Does every customer need to use the Customer Portal?",
        a: "It's there when you need it - a shareable, no-login link per shipment. Customers who don't use it can still be confirmed manually.",
      },
      {
        q: "Can different brokers have different commission structures?",
        a: "Yes - each broker's rule is assigned individually through the Business Rules Engine, covered on the Broker Management page.",
      },
    ],
  },
];

function SolutionPage({ slug }) {
  const solution = SOLUTIONS.find((s) => s.id === slug);

  useDocumentMeta(
    solution ? `${solution.name} - SkelBiz Manufacturing Operations Platform` : "SkelBiz",
    solution ? `${solution.tagline} ${solution.description}` : "SkelBiz manufacturing operations platform."
  );

  if (!solution) {
    return <EarlyAccessGate path={`/solutions/${slug}`} />;
  }

  const modules = REAL_MODULES.filter((m) => solution.moduleIds.includes(m.id));

  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">
          Solutions
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">{solution.name}</h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">{solution.tagline}</p>
      </section>

      <section className="mx-auto max-w-3xl px-6 py-20">
        <p className="text-lg leading-relaxed text-slate-600">{solution.description}</p>

        {solution.challenges && solution.challenges.length > 0 && (
          <>
            <h2 className="mt-12 text-2xl font-bold text-brand-navy">What makes this hard today</h2>
            <ul className="mt-4 space-y-3">
              {solution.challenges.map((c) => (
                <li key={c} className="flex items-start gap-3 rounded-card border border-slate-200 bg-surface p-5 text-sm leading-relaxed text-slate-600">
                  <svg className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <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>
                  {c}
                </li>
              ))}
            </ul>
          </>
        )}

        {solution.whoItsFor && solution.whoItsFor.length > 0 && (
          <>
            <h2 className="mt-12 text-2xl font-bold text-brand-navy">Who this is built for</h2>
            <ul className="mt-4 space-y-3">
              {solution.whoItsFor.map((w) => (
                <li key={w} className="flex items-start gap-3 text-sm leading-relaxed text-slate-600">
                  <svg className="mt-0.5 h-4 w-4 shrink-0 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>
                  {w}
                </li>
              ))}
            </ul>
          </>
        )}
      </section>

      {solution.workflow && solution.workflow.length > 0 && (
        <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">How a typical order flows through SkelBiz</h2>
            <p className="mt-3 text-center text-slate-600">Grounded in the real modules below - not a generic pipeline diagram.</p>
            <div className="mt-10 space-y-5">
              {solution.workflow.map((step, i) => (
                <div key={step.step} className="flex gap-5 rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                  <span className="flex h-9 w-9 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">{step.step}</h3>
                    <p className="mt-1 text-sm leading-relaxed text-slate-600">{step.detail}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">The modules built for this</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {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>
        </div>
      </section>

      {solution.faqs && solution.faqs.length > 0 && (
        <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">
              {solution.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>
      )}

      <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 {solution.name.toLowerCase()} process.</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">A live walkthrough scoped to your own operation.</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>
    </>
  );
}
