// AboutPage.jsx
//
// Mission/philosophy framing only - deliberately no fabricated founding
// date, team headcount, or bios, since none of that is known/verifiable.
// The one concrete fact used (Babji Food Industries as pilot partner) is
// already established honestly on the Home page's TrustSection.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const BELIEFS = [
  {
    title: "Real software over roadmap slides",
    body: "Every module on this site is something you can click into and see running today - not a feature promised for next quarter.",
  },
  {
    title: "We tell you what isn't built yet",
    body: "Our Tally Integration page states its real gaps directly. That's not an accident - it's the same policy applied everywhere on this site.",
  },
  {
    title: "Priced for what you actually need",
    body: "Core, Production, and Enterprise tiers exist so you're not paying for - or configuring around - modules your operation doesn't use.",
  },
  {
    title: "Your process, not our template",
    body: "Production recipes, business rules, and role permissions are configured per company. We don't ask you to reshape how you work to fit the software.",
  },
];

const WHO_ITS_FOR = [
  "SME manufacturers and processors currently running purchase, production, and dispatch across spreadsheets, WhatsApp, and phone calls - often alongside Tally Prime for accounting",
  "Businesses with a real multi-stage production process, where visibility between stages is the actual problem",
  "Teams who want a working demo scoped to their own operation before committing to anything",
];

const WHO_ITS_NOT_FOR = [
  "If you need a system live today with zero onboarding, that's not how we work - see our process, it starts with a scoping call",
  "Large enterprises already running SAP, Oracle, or a dedicated in-house ERP team are likely better served by that existing investment",
  "If you're looking for a replacement for Tally or another accounting system, that's deliberately not what we do - see our Tally Integration page for how we work alongside it instead",
  "If you want a fully hands-off, no-human-involved setup, our onboarding is deliberately a conversation, not a self-serve wizard",
];

const ABOUT_FAQS = [
  {
    q: "How do you decide what to build next?",
    a: "Directly from onboarding conversations - see our process on the Home page. If a genuinely missing feature comes up and enough customers need it, it gets built. We publish a short, honest roadmap on our Pricing page for what's already been asked for enough times to commit to - not a wishlist nobody revisits.",
  },
  {
    q: "Do you compete with Tally, Zoho, or Odoo?",
    a: "No - we integrate with Tally specifically, and we're not trying to become an accounting system ourselves. See our SkelBiz vs Tally, Zoho & Odoo comparison for an honest breakdown of where each one actually fits.",
  },
  {
    q: "Can I switch from spreadsheets without stopping operations?",
    a: "That's exactly what the onboarding scoping call is for - understanding your current process before anything gets configured, so the switch doesn't mean a production stoppage.",
  },
  {
    q: "Is there a free trial?",
    a: "Our process is a demo, a small onboarding fee, and a full no-questions-asked refund if it's not working out during onboarding - see the full breakdown on our Home page and Pricing page.",
  },
  {
    q: "What happens to my data if I stop using SkelBiz?",
    a: "You retain all rights to the operational data you enter - see our Terms of Service. Reach out through Contact for anything specific to your account.",
  },
];

function AboutPage() {
  useDocumentMeta(
    "About - SkelBiz Manufacturing Operations Platform",
    "Why SkelBiz exists: SME manufacturers deserve better than a spreadsheet between purchase, production, and dispatch - without the cost or rigidity of enterprise ERP, and without replacing the Tally Prime they already trust for accounting."
  );

  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">
          About
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          Built for the business between the spreadsheet and the enterprise ERP.
        </h1>
      </section>

      <section className="mx-auto max-w-3xl px-6 py-20">
        <p className="text-lg leading-relaxed text-slate-600">
          Most SME manufacturers and processors run their operation on a mix of spreadsheets, WhatsApp, and
          a phone call to check what's actually happening on the floor. The enterprise ERPs built to fix
          that are priced, and configured, for companies ten times their size.
        </p>
        <p className="mt-6 text-lg leading-relaxed text-slate-600">
          SkelBiz exists in that gap: a platform that covers purchase orders, multi-warehouse inventory, a
          configurable production workflow, and dispatch - priced and scoped for a business that doesn't
          need (or want) an enterprise rollout to get there.
        </p>
        <p className="mt-6 text-lg leading-relaxed text-slate-600">
          Most of the manufacturers we talk to already have Tally Prime for accounting, and we're not
          trying to replace it - SkelBiz is the operations layer Tally was never built to be, syncing
          confirmed orders straight into the Tally you already trust instead of asking you to give it up.
        </p>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">What we believe</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
            {BELIEFS.map((b) => (
              <div key={b.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{b.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-3xl px-6 py-20">
        <h2 className="text-2xl font-bold text-brand-navy">How we build</h2>
        <p className="mt-4 text-base leading-relaxed text-slate-600">
          Every module on this site is something you can actually click into and see running - not a
          roadmap slide. Where something isn't built yet, we say so directly (see the Tally Integration
          page for an example) instead of implying it works. We'd rather you trust what's on this site
          completely than be impressed by it briefly.
        </p>

        <h2 className="mt-12 text-2xl font-bold text-brand-navy">Where we are today</h2>
        <p className="mt-4 text-base leading-relaxed text-slate-600">
          We're early. Babji Food Industries is our founding pilot partner, running purchase, inventory, and
          production workflows on SkelBiz today. We're building the platform alongside real operational
          feedback, not in isolation - which is also why a demo call starts with understanding your process,
          not a fixed script.
        </p>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-6 lg:grid-cols-2">
          <div>
            <h2 className="text-xl font-bold text-brand-navy">Who this is for</h2>
            <ul className="mt-4 space-y-3">
              {WHO_ITS_FOR.map((w) => (
                <li key={w} 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>
                  {w}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 className="text-xl font-bold text-brand-navy">Who this isn't for</h2>
            <ul className="mt-4 space-y-3">
              {WHO_ITS_NOT_FOR.map((w) => (
                <li key={w} 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-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
                  </svg>
                  {w}
                </li>
              ))}
            </ul>
          </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">
            {ABOUT_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">Want to see it firsthand?</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">Talk to us directly - no sales deck required.</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>
    </>
  );
}