// SolutionsIndexPage.jsx
//
// The "/solutions" overview - the counterpart Product already had
// (ProductIndexPage.jsx) but Solutions never got: the Navbar's "Solutions"
// dropdown and Footer's "Company & Solutions" column both link straight to
// the 3 individual solution pages with no landing page tying them
// together. Renders the same SOLUTIONS registry (SolutionPage.jsx) rather
// than a second hand-written list, same reasoning as Product's index.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const SOLUTION_FIT_GUIDE = [
  {
    question: "You buy raw material and make something new from it",
    answer: "Manufacturing SMEs",
    slug: "manufacturing",
  },
  {
    question: "You transform an input through multiple stages, and yield is the number that matters",
    answer: "Processing & Converting",
    slug: "processing",
  },
  {
    question: "You move goods you didn't make - purchase, warehouse, dispatch",
    answer: "Distribution & Logistics",
    slug: "distribution",
  },
];

const SOLUTIONS_INDEX_FAQS = [
  {
    q: "What if my business is a mix of these - some manufacturing, some distribution?",
    a: "That's genuinely common, and it's fine - solutions here describe emphasis, not a rigid category you have to fit into. The underlying platform is the same; which modules you actually enable is scoped on a demo call, not locked in by which page you started on.",
  },
  {
    q: "Do solutions cost differently from the base platform?",
    a: "No - there's no separate \"solutions pricing.\" See our Pricing page for the real Core, Production, and Enterprise tiers; a solution page just shows which modules typically matter most for that kind of operation.",
  },
  {
    q: "Can I see a solution page before requesting a demo?",
    a: "Yes - each one below is real content, not a lead-gated preview. Read through, then request a demo scoped to what you saw.",
  },
];

function SolutionsIndexPage() {
  useDocumentMeta(
    "Solutions - SkelBiz Manufacturing Operations Platform",
    `How SkelBiz fits ${SOLUTIONS.length} kinds of operations - manufacturing, processing, and distribution - each configured around the modules that actually matter for how you run.`
  );

  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">
          One platform, configured for how you actually operate.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          Not {SOLUTIONS.length} different products - the same modules, emphasized differently depending on
          whether you make, transform, or move goods.
        </p>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {SOLUTIONS.map((s) => (
            <a
              key={s.id}
              href={`/solutions/${s.id}/`}
              className="group flex flex-col rounded-card border border-slate-200 bg-surface-card p-8 shadow-card transition hover:-translate-y-0.5 hover:border-brand-green/30 hover:shadow-lifted"
            >
              <h2 className="text-xl font-bold text-brand-navy group-hover:text-emerald-700">{s.name}</h2>
              <p className="mt-3 text-sm font-medium text-brand-steel">{s.tagline}</p>
              <p className="mt-4 flex-1 text-sm leading-relaxed text-slate-600">{s.description}</p>
              <p className="mt-5 text-xs font-semibold uppercase tracking-wide text-brand-steel">
                {s.moduleIds.length} modules typically enabled
              </p>
              <span className="mt-3 inline-block text-sm font-semibold text-emerald-700">See how it works →</span>
            </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">Not sure which one fits?</h2>
          <p className="mx-auto mt-3 max-w-xl text-center text-sm text-slate-600">
            A rough guide, not a rigid category - most real businesses lean toward one.
          </p>
          <div className="mt-10 space-y-4">
            {SOLUTION_FIT_GUIDE.map((f) => (
              <a
                key={f.slug}
                href={`/solutions/${f.slug}/`}
                className="group flex flex-col items-start justify-between gap-3 rounded-card border border-slate-200 bg-white p-6 shadow-card transition hover:border-brand-green/30 sm:flex-row sm:items-center"
              >
                <p className="text-sm leading-relaxed text-slate-600">{f.question}</p>
                <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 group-hover:bg-emerald-100">
                  {f.answer} →
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <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">
            {SOLUTIONS_INDEX_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">Not sure which modules you need either way?</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>
    </>
  );
}