// RequestDemoPage.jsx
//
// The "/request-demo/" page - extracted from index.html as part of the
// per-path migration so it follows the same one-file-per-page pattern as
// every other route. The single most important conversion page on the
// site, so the deepened content below is deliberately about reducing
// pre-submission friction/anxiety, not adding more sales copy: what
// literally happens after the form is submitted (steps 1-2 of Home's real
// PROCESS_STEPS, restated from the submitter's point of view, without
// duplicating steps 3-6 - those stay linked to Home's #how-it-works
// instead of copy-pasted), what's useful to have ready, and an honest FAQ.
// No response-time SLA is stated anywhere here, consistent with Contact
// and Terms of Service's "Service Availability" section.
//
// Deepened with real pricing (PricingPage.jsx's PRICING_AMOUNTS, quoted
// directly rather than re-derived) so a visitor isn't asked to book a call
// just to learn the starting number - pricing is public now, so the call
// is framed as scoping/ROI, not a reveal. WHAT_HAPPENS_NEXT's "pricing
// gets a straight answer" step is updated to match that.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const WHAT_HAPPENS_NEXT = [
  {
    title: "We reach out to schedule",
    body: "A real person - not an autoresponder - reaches out to find a time that works for you.",
  },
  {
    title: "The call itself is scoped to you",
    body: "We walk through the modules relevant to what you told us - purchase, production, inventory, dispatch, or all of it - not a fixed slide deck.",
  },
  {
    title: "We confirm your exact number, live",
    body: "Pricing starts public - see the tiers below - but warehouse count and module mix can move the final figure. That gets confirmed on the same call, not held back for a follow-up email.",
  },
  {
    title: "No pressure either way",
    body: "Want to move forward? The next step is a small onboarding fee, fully refunded if it's not working out during setup. If you don't, that's a complete answer - no drip campaign.",
  },
];

// Mirrors PricingPage.jsx's PRICING_AMOUNTS as literal figures rather than
// a shared global - request-demo/index.html doesn't load PricingPage.jsx,
// and every other cross-referencing page on this site (ComparisonPage.jsx,
// VsTallyPage.jsx) already quotes these as plain text for the same reason.
// Update here if PricingPage.jsx's numbers change.
const PRICING_PREVIEW = [
  { name: "Core", india: "₹1,499/mo", global: "$29/mo", tagline: "Sales, purchase, and inventory on one system." },
  { name: "Production", india: "₹2,499/mo", global: "$49/mo", tagline: "Adds the manufacturing floor to Core.", highlighted: true },
  { name: "Enterprise", india: "₹6,998/mo", global: "$129/mo", tagline: "Full platform, AI assistant, and dedicated onboarding." },
];

const WHAT_TO_BRING = [
  "Roughly how many locations or warehouses you run today",
  "The one problem you'd want solved first - dispatch visibility, production wastage, purchase reconciliation, or something else",
  "Whether you're using Tally (or another accounting tool) today, and how",
  "Who else on your team should probably be on the call",
];

const DEMO_FAQS = [
  {
    q: "Is the demo itself free?",
    a: "Yes - requesting a demo doesn't commit you to anything. The only payment in our process is a small onboarding fee, and that's a separate step after the demo, only if you want to move forward.",
  },
  {
    q: "Do I need to book a call just to find out the price?",
    a: "No - Core, Production, and Enterprise pricing is public on our Pricing page. The call is for scoping your exact number (warehouse count, module mix) and walking through the product, not withholding a price behind a form.",
  },
  {
    q: "How long does the call take?",
    a: "Long enough to actually see your own process working, not a rushed slide deck - we scope it to what you want to look at.",
  },
  {
    q: "Do I need to prepare anything in advance?",
    a: "Not strictly, but the more specific you are about your actual process, the more useful the call is - see \"What to bring\" above.",
  },
  {
    q: "What if I'm just exploring and not ready to commit?",
    a: "That's a completely fine reason to request a demo. We're not going to chase you with a follow-up sequence afterward - see our Contact page for the same policy.",
  },
  {
    q: "Who will actually be on the call from your side?",
    a: "Someone who understands the product directly - not a scripted SDR reading from a deck.",
  },
  {
    q: "What happens after the demo if I want to move forward?",
    a: "A small onboarding fee secures your slot, and an executive gets to know your operation before anything is configured - see the full process on our Home page.",
  },
];

function RequestDemoPage() {
  useDocumentMeta(
    "Request a Demo - SkelBiz Manufacturing Operations Platform",
    "Request a live SkelBiz demo scoped to your manufacturing or processing operation - sales, purchase, multi-warehouse inventory, and the production workflow engine, walked through on your own data."
  );
  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">
          Request a Demo
        </span>
        <h1 className="mt-5 text-3xl font-bold text-brand-navy sm:text-4xl">
          See SkelBiz run on a process that looks like yours.
        </h1>
        <p className="mt-4 text-base leading-relaxed text-slate-600">
          Tell us a bit about your business and we'll walk you through the modules that matter to
          you - purchase, production, inventory, or all of it - live, not a canned script.
        </p>
        <ul className="mt-6 space-y-3">
          {[
            "No pressure, no obligation - a scoping conversation first.",
            "Pricing starts from ₹1,499/month in India or $29/month Global - see full pricing below.",
            "See real module screens, not a slide deck.",
          ].map((item) => (
            <li key={item} className="flex items-start gap-2 text-sm 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>
              {item}
            </li>
          ))}
        </ul>
      </div>
      <DemoRequestForm sourcePage="/request-demo" interestType="demo_request" />
    </section>

    <section className="bg-white py-20">
      <div className="mx-auto max-w-4xl px-6">
        <h2 className="text-2xl font-bold text-brand-navy">What happens after you submit this form</h2>
        <div className="mt-8 space-y-6">
          {WHAT_HAPPENS_NEXT.map((step, i) => (
            <div key={step.title} className="flex gap-5 rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
              <span className="flex h-8 w-8 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.title}</h3>
                <p className="mt-1 text-sm leading-relaxed text-slate-600">{step.body}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="mt-6 text-sm text-slate-500">
          Curious about the full journey, including onboarding and what's built for you along the way? See{" "}
          <a href="/#how-it-works" className="font-semibold text-emerald-700 hover:text-emerald-800">
            how it works
          </a>{" "}
          on our Home page.
        </p>
      </div>
    </section>

    <section className="bg-white py-20">
      <div className="mx-auto max-w-5xl px-6">
        <h2 className="text-2xl font-bold text-brand-navy">What it costs, before you even ask</h2>
        <p className="mt-3 text-sm leading-relaxed text-slate-600">
          Real, published prices - flat per company, not per seat. The call confirms your exact number; it
          doesn't reveal it.
        </p>
        <div className="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-3">
          {PRICING_PREVIEW.map((tier) => (
            <div
              key={tier.name}
              className={`rounded-card border p-6 shadow-card ${
                tier.highlighted ? "border-emerald-500 ring-2 ring-emerald-500/20" : "border-slate-200"
              } bg-surface-card`}
            >
              {tier.highlighted && (
                <span className="mb-3 inline-flex w-fit items-center rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold text-white">
                  Most Common
                </span>
              )}
              <h3 className="text-base font-bold text-brand-navy">{tier.name}</h3>
              <p className="mt-1 text-xs text-slate-500">{tier.tagline}</p>
              <p className="mt-3 text-xl font-extrabold text-brand-navy">{tier.india}</p>
              <p className="text-xs text-slate-500">or {tier.global} Global - billed annually, + one-time setup</p>
            </div>
          ))}
        </div>
        <p className="mt-6 text-sm text-slate-500">
          Not sure that's worth it yet?{" "}
          <a href="/pricing/#roi" className="font-semibold text-emerald-700 hover:text-emerald-800">
            See the ROI calculator
          </a>{" "}
          for what manual tracking is already costing you, or view{" "}
          <a href="/pricing/" className="font-semibold text-emerald-700 hover:text-emerald-800">
            full pricing details
          </a>
          .
        </p>
      </div>
    </section>

    <section className="bg-surface py-20">
      <div className="mx-auto max-w-3xl px-6">
        <h2 className="text-2xl font-bold text-brand-navy">What to bring to make the most of it</h2>
        <p className="mt-3 text-sm leading-relaxed text-slate-600">
          Not required, but the more specific this is, the less generic the call will be.
        </p>
        <ul className="mt-6 space-y-3">
          {WHAT_TO_BRING.map((item) => (
            <li key={item} 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>
              {item}
            </li>
          ))}
        </ul>
      </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">
          {DEMO_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>
    </>
  );
}