// CapturePage.jsx
//
// SPEC-07's anti-hallucination conversion pattern: Resources/Developers
// have no real content behind them (no blog CMS, no public API) and
// structurally won't without external input - so instead of inventing blog
// posts or API docs, each converts a visitor into an early-access signup.
// One data-driven template, not two bespoke pages. ("Case Studies" used to
// live here too but now has its own real content - see
// CaseStudiesPage.jsx - since we have something honest to say there now.)
//
// Deepened beyond the bare capture form: Resources points to the real,
// already-published depth elsewhere on this site instead of pretending a
// blog exists; Developers describes the one real integration the platform
// already has - the Tally Sync Agent (tally-rust-agent/README.md) - as
// honest evidence of a working API layer, without claiming a public API
// exists. Both use the same "planned, not real" framing the rest of the
// site uses (see EarlyAccessGate.jsx, AboutPage.jsx's "we tell you what
// isn't built yet").
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const CAPTURE_PAGES = {
  resources: {
    label: "Insights & Resources",
    eyebrow: "Coming to this site",
    heading: "A real resource library - once we have enough to fill one.",
    body:
      "We'd rather publish guides written from real deployments (multi-warehouse setup, production workflow configuration, business rules design) than pad this page with generic content today. Leave your email and we'll notify you when the first ones go live.",
    interestType: "early_access_resources",
    submitLabel: "Notify Me",
    highlights: [
      {
        title: "Written from real deployments, not filler",
        body: "Every planned guide comes from an actual configuration decision - a warehouse rollout, a production recipe, a business rule - not generic ERP advice that could apply to any product.",
      },
      {
        title: "One notification, not a newsletter",
        body: "We'll email you when the first guide is live - not enroll you in a recurring drip sequence.",
      },
      {
        title: "You can read the real thing today",
        body: "The product and solution pages on this site already go deep on how each part actually works - see below.",
      },
    ],
    exploreLinks: [
      {
        title: "Every module, explained in depth",
        body: "How Sales Orders, Production, Inventory, and 12 more modules actually work - not a feature list.",
        href: "/product/",
        cta: "See All Modules",
      },
      {
        title: "Solutions by industry",
        body: "How the platform fits a manufacturing operation specifically - processing and distribution are covered too.",
        href: "/solutions/manufacturing/",
        cta: "See Solutions",
      },
      {
        title: "Illustrative scenarios",
        body: "Walkthroughs of how the platform would apply to a real kind of operation - clearly labeled as illustrative, not fabricated case studies.",
        href: "/case-studies/",
        cta: "See Scenarios",
      },
      {
        title: "What's honestly still a gap",
        body: "Our Tally Integration page states its real, current limitations directly - not just what works.",
        href: "/tally-integration/",
        cta: "See Tally Integration",
      },
    ],
    plannedTopics: [
      {
        title: "Setting up multi-warehouse routing",
        body: "How default-warehouse fallback actually works when a stock movement doesn't specify a location.",
      },
      {
        title: "Designing a production recipe",
        body: "Turning a real multi-stage process into configured stages and a WIP ledger, not a single \"in production\" flag.",
      },
      {
        title: "Structuring business rules for brokers and vendors",
        body: "When to use per-unit vs. percentage vs. threshold strategies, and what an immutable snapshot actually protects you from.",
      },
      {
        title: "What our Tally rollout looks like in practice",
        body: "The order we actually recommend - voucher import proven stable first, e-way bill automation only after that.",
      },
    ],
    faqs: [
      {
        q: "Is there a blog today?",
        a: "No - we'd rather publish real, deployment-based guides than generic filler content. See \"Topics on our list\" above for what's actually planned.",
      },
      {
        q: "Can I read something real about the product right now?",
        a: "Yes - the Product, Solutions, Case Studies, and Tally Integration pages already go deep on how things actually work. See \"Explore what's real right now\" above.",
      },
      {
        q: "Will I get marketing emails if I sign up?",
        a: "No - just a notification when the first resource actually goes live, not a recurring newsletter.",
      },
    ],
  },
  developers: {
    label: "Developer Platform",
    eyebrow: "On the roadmap",
    heading: "A public API is planned - tell us what you'd build with it.",
    body:
      "There's no public API or developer documentation yet - the modules on this site are consumed through the SkelBiz interface today, not a third-party integration layer. If you'd want to build against one, tell us what for, and we'll reach out when it's ready.",
    interestType: "early_access_developer_api",
    submitLabel: "Tell Us What You'd Build",
    highlights: [
      {
        title: "You're not just filling a waitlist",
        body: "What you tell us about what you'd build directly shapes whether - and how - a public API gets built.",
      },
      {
        title: "There's already a real integration to point to",
        body: "Our Tally Sync agent talks to the platform through a working API today - see how, below.",
      },
      {
        title: "No commitment either way",
        body: "Telling us what you'd build doesn't commit you to anything once it exists.",
      },
    ],
    integrationExample: {
      heading: "The closest thing to an API today: our Tally Sync integration",
      body: "There's no public, general-purpose API yet - but the platform already has a real one working under the hood. A local sync agent polls confirmed sales orders from the cloud platform, pushes them into Tally as invoices, and reports the result back. It's purpose-built for one integration, not general access, but it's honest proof the platform already speaks a working API, not just through its own interface.",
      points: [
        "Polls confirmed, not-yet-synced sales orders on an interval",
        "Maps each order into Tally's own XML voucher import format and pushes it in",
        "Reports the sync result - success, failure, or partial - back to the cloud platform",
        "Failed jobs are retried with backoff instead of silently dropped",
      ],
    },
    wantToKnow: [
      {
        title: "Which data would you need?",
        body: "Orders, inventory levels, shipments, customer records - tell us which objects actually matter for what you're building.",
      },
      {
        title: "Read access, or read and write?",
        body: "Pulling data out is a very different scope than pushing changes in - which one is it for you?",
      },
      {
        title: "Polling or real-time?",
        body: "Would checking on an interval work, or does your use case need a push/webhook model?",
      },
      {
        title: "What's the integration for?",
        body: "A reporting tool, another internal system, a customer-facing app - the reason shapes what we'd prioritize first.",
      },
    ],
    faqs: [
      {
        q: "Is there a sandbox or test environment I can access now?",
        a: "Not yet - there's no public API surface to sandbox. Tell us what you'd build and we'll reach out when there's something real to test.",
      },
      {
        q: "Is the Tally integration itself open source or reusable?",
        a: "No - it's a purpose-built internal agent for one integration, not a general-purpose SDK. It's evidence the platform already exposes a working API layer, not something you can build against directly.",
      },
      {
        q: "Will there be webhooks, or only polling?",
        a: "Undecided - that's exactly the kind of input that shapes it. Tell us your use case in the form.",
      },
      {
        q: "Can I get early access ahead of a public launch?",
        a: "Leave your email with what you'd build - scoped early access for a specific, real use case is more likely than a broad public beta on day one.",
      },
    ],
  },
};

function CapturePage({ slug }) {
  const page = CAPTURE_PAGES[slug];

  useDocumentMeta(
    page ? `${page.label} - SkelBiz Manufacturing Operations Platform` : "SkelBiz",
    page ? page.body : "SkelBiz manufacturing operations platform."
  );

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

  return (
    <>
      <section className="mx-auto grid max-w-6xl grid-cols-1 gap-12 px-6 py-20 lg:grid-cols-2 lg:items-start">
        <div>
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-green/30 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-700">
            {page.eyebrow}
          </span>
          <h1 className="mt-5 text-3xl font-bold text-brand-navy sm:text-4xl">{page.heading}</h1>
          <p className="mt-4 text-base leading-relaxed text-slate-600">{page.body}</p>

          <div className="mt-10 space-y-5">
            {page.highlights.map((item) => (
              <div key={item.title} className="flex items-start gap-3">
                <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>
                <div>
                  <h3 className="text-sm font-semibold text-brand-navy">{item.title}</h3>
                  <p className="mt-0.5 text-sm leading-relaxed text-slate-600">{item.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <DemoRequestForm sourcePage={`/${slug}`} interestType={page.interestType} submitLabel={page.submitLabel} />
      </section>

      {slug === "resources" && (
        <>
          <section className="bg-surface py-20">
            <div className="mx-auto max-w-7xl px-6">
              <h2 className="text-center text-2xl font-bold text-brand-navy">Explore what's real right now</h2>
              <p className="mx-auto mt-3 max-w-xl text-center text-sm text-slate-600">
                No library yet, but plenty of real depth already published on this site.
              </p>
              <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                {page.exploreLinks.map((w) => (
                  <a
                    key={w.title}
                    href={w.href}
                    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">{w.title}</h3>
                    <p className="mt-2 text-sm leading-relaxed text-slate-600">{w.body}</p>
                    <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">{w.cta} →</span>
                  </a>
                ))}
              </div>
            </div>
          </section>

          <section className="bg-white py-20">
            <div className="mx-auto max-w-6xl px-6">
              <h2 className="text-center text-2xl font-bold text-brand-navy">Topics on our list</h2>
              <p className="mx-auto mt-3 max-w-xl text-center text-sm text-slate-600">
                Planned, not published yet - this is what we'd actually write about first.
              </p>
              <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
                {page.plannedTopics.map((t) => (
                  <div key={t.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                    <h3 className="text-base font-semibold text-brand-navy">{t.title}</h3>
                    <p className="mt-2 text-sm leading-relaxed text-slate-600">{t.body}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </>
      )}

      {slug === "developers" && (
        <>
          <section className="bg-surface py-20">
            <div className="mx-auto max-w-4xl px-6">
              <h2 className="text-2xl font-bold text-brand-navy">{page.integrationExample.heading}</h2>
              <p className="mt-4 text-base leading-relaxed text-slate-600">{page.integrationExample.body}</p>
              <ul className="mt-6 space-y-3">
                {page.integrationExample.points.map((p) => (
                  <li key={p} className="flex items-start gap-2 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>
                    {p}
                  </li>
                ))}
              </ul>
            </div>
          </section>

          <section className="bg-white py-20">
            <div className="mx-auto max-w-6xl px-6">
              <h2 className="text-center text-2xl font-bold text-brand-navy">What we'd want to know</h2>
              <p className="mx-auto mt-3 max-w-xl text-center text-sm text-slate-600">
                Answer these in the form above and it directly shapes what gets built first.
              </p>
              <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
                {page.wantToKnow.map((w) => (
                  <div key={w.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                    <h3 className="text-base font-semibold text-brand-navy">{w.title}</h3>
                    <p className="mt-2 text-sm leading-relaxed text-slate-600">{w.body}</p>
                  </div>
                ))}
              </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">
            {page.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>
    </>
  );
}