/* sections-invoicing.jsx — Automated patient balance invoices via QuickBooks */

const INV_STEPS = [
  { icon: "match",   t: "Payer pays its share",   b: "Once the ERA posts, DataMed knows exactly what insurance covered on every line." },
  { icon: "dollar",  t: "Patient balance computed", b: "The remaining patient responsibility (copay, coinsurance, deductible) is calculated automatically." },
  { icon: "receipt", t: "Invoice created automatically", b: "DataMed drafts a clean, itemized invoice in your accounting software, with no manual entry." },
  { icon: "send",    t: "Sent & synced", b: "The invoice goes to the patient and the balance lands in your books, ready to reconcile when they pay." },
];

const INV_BENEFITS = [
  { icon: "bolt",   t: "No more manual invoicing", b: "Stop re-typing patient balances into your accounting software one by one. DataMed creates each invoice the moment the payer's portion is known." },
  { icon: "clock",  t: "Patients billed faster", b: "Invoices go out as soon as balances are final, not weeks later, so patient payments come in sooner and balances don't pile up." },
  { icon: "sync",   t: "Your books stay in sync", b: "Every patient invoice flows straight into your accounting software, so your accounting always matches what's actually owed." },
  { icon: "check",  t: "Fewer billing errors", b: "Balances are pulled directly from reconciled claims, so patients are charged the right amount the first time." },
];

function QuickBooksInvoice() {
  const lines = [
    { d: "97155 · Adaptive behavior treatment", amt: 320.00, ins: 153.36 },
    { d: "97154 · Group adaptive treatment", amt: 105.00, ins: 52.50 },
  ];
  const billed = lines.reduce((s, l) => s + l.amt, 0);
  const insurance = lines.reduce((s, l) => s + l.ins, 0);
  const due = billed - insurance;
  return (
    <div className="inv-doc">
      <div className="inv-doc-bar">
        <div className="mini-dots"><span></span><span></span><span></span></div>
        <span className="inv-doc-app mono"><I.receipt /> Invoice #1042</span>
        <span className="inv-synced"><span className="live-dot"></span>Synced</span>
      </div>

      <div className="inv-doc-head">
        <div>
          <span className="inv-doc-label mono">Bill to</span>
          <div className="inv-doc-name">Jordan M.</div>
          <div className="inv-doc-sub mono">Patient balance · Riverside ABA</div>
        </div>
        <div className="inv-doc-due">
          <span className="inv-doc-label mono">Balance due</span>
          <div className="inv-doc-amt">{money(due)}</div>
          <span className="inv-doc-terms mono">Due in 30 days</span>
        </div>
      </div>

      <div className="inv-table">
        <div className="inv-row inv-row-head">
          <span>Service</span>
          <span className="inv-r">Billed</span>
          <span className="inv-r">Insurance</span>
          <span className="inv-r">Patient</span>
        </div>
        {lines.map((l, i) => (
          <div key={i} className="inv-row">
            <span className="inv-desc">{l.d}</span>
            <span className="inv-r mono">{money(l.amt)}</span>
            <span className="inv-r mono inv-ins">−{money(l.ins)}</span>
            <span className="inv-r mono inv-pat">{money(l.amt - l.ins)}</span>
          </div>
        ))}
      </div>

      <div className="inv-totals">
        <div className="inv-total-row"><span>Total billed</span><span className="mono">{money(billed)}</span></div>
        <div className="inv-total-row"><span>Insurance paid</span><span className="mono inv-ins">−{money(insurance)}</span></div>
        <div className="inv-total-row inv-total-due"><span>Patient owes</span><span className="mono">{money(due)}</span></div>
      </div>

      <div className="inv-doc-foot mono">Generated automatically by DataMed · synced to your books</div>
    </div>
  );
}

function Invoicing() {
  return (
    <section className="sec-pad invoicing" id="invoicing">
      <div className="wrap">
        <div className="sec-head sec-head-center">
          <Reveal><span className="eyebrow"><span className="dot"></span>Patient billing</span></Reveal>
          <Reveal as="h2" delay={80} className="sec-title">Patient balances, invoiced automatically</Reveal>
          <Reveal as="p" delay={140} className="sec-sub">The moment insurance pays its share, DataMed works out what the patient owes and drafts a ready-to-send invoice right in your accounting software. No spreadsheets, no double entry, just accurate bills that go out on time and stay in sync with your books.</Reveal>
        </div>

        <div className="inv-grid">
          {/* Flow */}
          <Reveal className="inv-flow" delay={100}>
            {INV_STEPS.map((s, i) => {
              const Ico = I[s.icon];
              return (
                <div key={s.t} className="inv-step">
                  <div className="inv-step-rail">
                    <span className="inv-step-node"><Ico /></span>
                    {i < INV_STEPS.length - 1 && <span className="inv-step-line"></span>}
                  </div>
                  <div className="inv-step-tx">
                    <span className="inv-step-num mono">Step {i + 1}</span>
                    <h4 className="inv-step-t">{s.t}</h4>
                    <p className="inv-step-b">{s.b}</p>
                  </div>
                </div>
              );
            })}
          </Reveal>

          {/* Invoice preview */}
          <Reveal className="inv-preview" delay={180}>
            <QuickBooksInvoice />
            <div className="dash-reflect" aria-hidden="true"></div>
          </Reveal>
        </div>

        {/* Benefits */}
        <div className="inv-benefits">
          {INV_BENEFITS.map((bn, i) => {
            const Ico = I[bn.icon];
            return (
              <Reveal key={bn.t} className="inv-benefit" delay={(i % 4) * 80}>
                <div className="inv-benefit-ic"><Ico /></div>
                <h4 className="inv-benefit-t">{bn.t}</h4>
                <p className="inv-benefit-b">{bn.b}</p>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Invoicing });