// TallyIntegrationPage.jsx
//
// Grounded in tally-rust-agent's real, documented behavior (per
// features/tally_features.md and SPEC-07 Section 0/7) - a local Windows
// bridge agent, not a cloud service, that polls confirmed sales orders and
// pushes them into Tally as vouchers. Explicitly does NOT claim the two
// documented gaps as working: ui_automation.rs does not read back the
// e-way bill number, and does not drive the PDF export dialog to
// completion. Those are stated directly in the "Not yet automated"
// section rather than omitted, alongside a third real gap (GST ledger
// splitting) pulled from tally_xml_mapper.rs's doc comment. The rollout
// section mirrors the README's actual recommended order (voucher import
// proven first, e-way bill automation only after supervised testing) -
// not a generic "how integrations work" explainer.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const TALLY_STEPS = [
  {
    title: "A sales order is confirmed",
    body: "The moment a Sales Order in SkelBiz reaches CONFIRMED status, it becomes eligible for sync - no manual export step.",
  },
  {
    title: "The local agent picks it up",
    body: "A lightweight agent running on the same Windows machine as Tally polls for confirmed, not-yet-synced orders on a short interval, and skips a cycle if the previous one is still running.",
  },
  {
    title: "It's mapped and pushed into Tally",
    body: "The order is mapped to Tally's own voucher format and imported through Tally's local XML gateway - the same interface Tally itself exposes for integrations.",
  },
  {
    title: "Status is reported back",
    body: "Success or failure is reported back to SkelBiz, with failed syncs held in a retry queue instead of silently disappearing.",
  },
];

const TALLY_AUTOMATED = [
  "Confirmed Sales Orders synced into Tally as Sales vouchers",
  "Automatic retry with backoff for failed sync attempts, not a silent drop",
  "A polling loop that stays responsive to being stopped mid-cycle",
];

const TALLY_NOT_YET_AUTOMATED = [
  "Reading the e-way bill number back into SkelBiz after Tally generates it - it's generated in Tally, but the number itself isn't synced back yet",
  "Completing the PDF export dialog inside Tally end-to-end - the agent can trigger it, but doesn't drive it to a finished file yet",
  "GST ledger splitting (CGST/SGST/IGST) isn't computed by the agent itself - if your Tally stock items and voucher type already auto-calculate tax ledgers, you don't need this; if not, it's a setup detail we work through with you",
];

const TALLY_WHY_LOCAL = [
  {
    title: "Tally's own gateway is local, not cloud",
    body: "Tally exposes an XML HTTP gateway on the same machine it's installed on - that's the real, documented interface for integrations, not a workaround. A bridge has to run next to it.",
  },
  {
    title: "Failed jobs are held, not dropped",
    body: "A sync that fails - Tally briefly unreachable, a network blip - goes into a retry queue with backoff, and unrecoverable ones land in a dead-letter store instead of silently disappearing.",
  },
  {
    title: "It stays responsive to being stopped",
    body: "The polling loop checks for a shutdown signal every 250 milliseconds, so stopping the agent mid-cycle doesn't mean waiting out a long-running job or killing it uncleanly.",
  },
];

const TALLY_ROLLOUT = [
  {
    title: "Voucher import only, first",
    body: "E-way bill automation stays off. We confirm CONFIRMED orders create correct Sales vouchers in your Tally - right party, items, amounts, and the cloud order number as reference - before anything else runs.",
  },
  {
    title: "Confirm voucher number lookup",
    body: "Tally's exact response shape for a voucher-number lookup can vary by version, so we verify it returns the right number for your specific Tally setup before depending on it.",
  },
  {
    title: "One supervised order, with e-way bill automation on",
    body: "Only once step 1 is solid do we turn on e-way bill automation - and the first order runs with a human watching the screen, not unattended.",
  },
  {
    title: "Unattended running, only after that's proven",
    body: "Scheduled, hands-off syncing turns on only after supervised runs have proven reliable across several real orders on your Tally version - not on day one.",
  },
];

const TALLY_FAQS = [
  {
    q: "Does this replace Tally, or work alongside it?",
    a: "Alongside - Tally stays your system of record for accounting. The agent only pushes confirmed sales orders in as vouchers; it doesn't touch anything else in Tally.",
  },
  {
    q: "What happens if Tally or the network is briefly unreachable?",
    a: "The failed sync goes into a retry queue with backoff, not a silent drop - and if it still can't recover, it's held in a dead-letter store instead of disappearing.",
  },
  {
    q: "Does this work with a cloud-hosted Tally, or only a local install?",
    a: "It talks to Tally's local XML gateway, so it's built for a local Tally install on the same network as the agent - that's the real, documented integration point Tally itself exposes.",
  },
  {
    q: "Can we turn on full automation, including e-way bills, from day one?",
    a: "We don't recommend it, and the rollout above reflects that directly - e-way bill automation only goes live after supervised testing on your specific Tally version.",
  },
];

function TallyIntegrationPage() {
  useDocumentMeta(
    "Tally Integration - SkelBiz Manufacturing Operations Platform",
    "How SkelBiz syncs confirmed sales orders into Tally ERP as vouchers through a local Windows agent - what's automated today, and what isn't yet, stated directly."
  );

  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">
          Tally Integration
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          Confirmed orders, synced into Tally - automatically.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          A local agent bridges SkelBiz and Tally so your accounting team isn't re-typing what sales already
          confirmed.
        </p>
      </section>

      <section className="mx-auto max-w-4xl px-6 py-20">
        <h2 className="text-2xl font-bold text-brand-navy">How it works</h2>
        <div className="mt-8 space-y-6">
          {TALLY_STEPS.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>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 px-6 sm:grid-cols-2">
          <div className="rounded-card border border-emerald-200 bg-emerald-50 p-8">
            <h3 className="text-lg font-bold text-emerald-800">Automated today</h3>
            <ul className="mt-4 space-y-3">
              {TALLY_AUTOMATED.map((item) => (
                <li key={item} className="flex items-start gap-2 text-sm leading-relaxed text-emerald-900">
                  <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>
          <div className="rounded-card border border-amber-200 bg-amber-50 p-8">
            <h3 className="text-lg font-bold text-amber-800">Not yet automated - stated directly</h3>
            <ul className="mt-4 space-y-3">
              {TALLY_NOT_YET_AUTOMATED.map((item) => (
                <li key={item} className="flex items-start gap-2 text-sm leading-relaxed text-amber-900">
                  <svg className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path strokeLinecap="round" d="M12 9v4M12 17h.01M10.29 3.86l-8.4 14.55A1 1 0 002.75 20h18.5a1 1 0 00.86-1.59l-8.4-14.55a1 1 0 00-1.72 0z" />
                  </svg>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-4xl px-6">
          <h2 className="text-2xl font-bold text-brand-navy">Why it runs locally, next to Tally</h2>
          <div className="mt-8 space-y-6">
            {TALLY_WHY_LOCAL.map((item) => (
              <div key={item.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.body}</p>
              </div>
            ))}
          </div>
        </div>
      </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">How we roll it out with you</h2>
          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            Deliberately cautious, in this order - not everything turned on at once.
          </p>
          <div className="mt-8 space-y-6">
            {TALLY_ROLLOUT.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>
        </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">
            {TALLY_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>

      <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 the Tally sync running live.</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">We'll walk through exactly what syncs and what doesn't.</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>
    </>
  );
}
