// ProductModulePage.jsx
//
// Single template rendering any of the 15 REAL_MODULES entries (declared in
// EarlyAccessGate.jsx, loaded before this file) - SPEC-07 Section 2's
// "single content registry, no per-page hand-authoring" principle applied
// to product detail pages. Adding a 16th real module means adding one
// REAL_MODULES entry, not a 16th page file.
//
// 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 ProductModulePage({ slug }) {
  const mod = REAL_MODULES.find((m) => m.id === slug);

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

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

  const related = REAL_MODULES.filter((m) => m.id !== mod.id).slice(0, 3);

  return (
    <>
      <section className="bg-brand-navy px-6 py-20 text-center">
        <a href="/product/" className="text-xs font-semibold uppercase tracking-wide text-emerald-300 hover:text-emerald-200">
          ← All Modules
        </a>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">{mod.name}</h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">{mod.tagline}</p>
        <div className="mt-8">
          <a
            href="/request-demo/"
            className="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 {mod.name} in a Demo
          </a>
        </div>
      </section>

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

        {mod.painPoint && (
          <div className="mt-8 rounded-card border border-slate-200 bg-surface p-6">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-brand-steel">The problem this solves</h2>
            <p className="mt-2 text-sm leading-relaxed text-slate-600">{mod.painPoint}</p>
          </div>
        )}

        <h2 className="mt-12 text-2xl font-bold text-brand-navy">What it actually does</h2>
        <ul className="mt-6 space-y-4">
          {mod.capabilities.map((c) => (
            <li key={c} className="flex items-start gap-3 rounded-card border border-slate-200 bg-surface-card p-5 shadow-card">
              <svg className="mt-0.5 h-5 w-5 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>
              <span className="text-sm leading-relaxed text-slate-700">{c}</span>
            </li>
          ))}
        </ul>

        {mod.howItWorksDetail && (
          <>
            <h2 className="mt-12 text-2xl font-bold text-brand-navy">How it works</h2>
            <p className="mt-4 text-base leading-relaxed text-slate-600">{mod.howItWorksDetail}</p>
          </>
        )}

        {mod.useCases && mod.useCases.length > 0 && (
          <>
            <h2 className="mt-12 text-2xl font-bold text-brand-navy">When you'd use this</h2>
            <ul className="mt-4 space-y-3">
              {mod.useCases.map((u) => (
                <li key={u} className="flex items-start gap-3 text-sm leading-relaxed text-slate-600">
                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-600" />
                  {u}
                </li>
              ))}
            </ul>
          </>
        )}
      </section>

      {mod.faqs && mod.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">
              {mod.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="bg-white py-20">
        <div className="mx-auto max-w-7xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Works alongside</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3">
            {related.map((r) => (
              <a
                key={r.id}
                href={`/product/${r.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">{r.name}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{r.blurb}</p>
              </a>
            ))}
          </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 {mod.name} on your own data.</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">
            A live walkthrough scoped to how you actually work - 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>
    </>
  );
}