/* global React, Icon, ProcessOrbit, LogoMark */
// ===== Books In The Loop — content sections =====
const { useState: useS, useEffect: useE, useRef: useR } = React;

// ---------------- Trust strip ----------------
function TrustStrip() {
  const tools = ["QuickBooks", "Xero", "Gusto", "Bill.com", "Stripe"];
  return (
    <div className="trust">
      <div className="wrap trust__inner">
        <div className="trust__label">Fluent in the tools you already use</div>
        <div className="trust__logos">
          {tools.map((t) => (
            <div key={t} className="trust__logo"><span className="d"></span>{t}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------------- Services ----------------
const SERVICES = [
  { ic: "ledger", t: "Monthly Bookkeeping", d: "Every transaction categorized and your books closed on a steady monthly schedule." },
  { ic: "reconcile", t: "Bank & Card Reconciliation", d: "Accounts matched to the penny so your balances are always accurate and audit-ready." },
  { ic: "invoice", t: "Accounts Receivable", d: "Invoicing, payment tracking, and friendly follow-up so you get paid faster." },
  { ic: "bill", t: "Accounts Payable", d: "Bills entered, scheduled, and paid on time — no late fees, no surprises." },
  { ic: "payroll", t: "Payroll Processing", d: "Run payroll, file the right forms, and keep every paycheck on schedule." },
  { ic: "report", t: "Financial Reporting", d: "Clear monthly P&L, balance sheet, and cash-flow statements you can actually read." },
  { ic: "cleanup", t: "Catch-Up & Clean-Up", d: "Behind or messy? We rebuild and reconcile prior months to get you current." },
  { ic: "setup", t: "Software Setup & Migration", d: "QuickBooks or Xero set up right — chart of accounts, connections, and clean data." },
  { ic: "tax1099", t: "1099 Preparation", d: "Contractor tracking and year-end 1099 prep and filing handled for you." },
];

function Services() {
  return (
    <section className="section section--paper" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">What we handle</div>
          <h2 className="display h-md">Everything your books need —<br />without the bookkeeper headache.</h2>
          <p className="lede">A full bookkeeping department, minus the overhead. Pick the pieces you need, or hand us the whole thing.</p>
        </div>
        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <article key={s.t} className={"scard reveal d" + ((i % 3) + 1)}>
              <span className="scard__num">{String(i + 1).padStart(2, "0")}</span>
              <div className="scard__ic"><Icon name={s.ic} size={22} /></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </article>
          ))}
        </div>
        <p className="services__note reveal">
          Plus budgeting &amp; cash-flow tracking, sales-tax filing, and clean year-end books handed off to your CPA.
          &nbsp;<b>Not sure what you need? That's what the free call is for.</b>
        </p>
      </div>
    </section>
  );
}

// ---------------- Process ----------------
const STEPS = [
  { t: "Discovery call", d: "A free 30-minute chat about your business, your current setup, and where the books stand today." },
  { t: "Onboarding & clean-up", d: "We connect your accounts, tidy any backlog, and build a chart of accounts that fits how you actually operate." },
  { t: "Monthly close", d: "Each month we reconcile, categorize, run payroll and bills, and close your books — quietly, on time." },
  { t: "Stay in the loop", d: "You get clear reports and a quick recap, so you always know where the business stands. Questions? We're a text away." },
];

function Process({ spin }) {
  const [active, setActive] = useS(0);
  const hovered = useR(false);
  useE(() => {
    if (!spin) return;
    const id = setInterval(() => { if (!hovered.current) setActive((a) => (a + 1) % STEPS.length); }, 3600);
    return () => clearInterval(id);
  }, [spin]);
  return (
    <section className="section section--navy process" id="process">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">How it works</div>
          <h2 className="display h-md">A simple rhythm that<br />keeps you in the loop.</h2>
        </div>
        <div className="process__layout">
          <div className="process__viz reveal">
            <ProcessOrbit size={420} active={active} spin={spin} onPick={setActive} />
          </div>
          <div className="process__steps"
               onMouseEnter={() => (hovered.current = true)}
               onMouseLeave={() => (hovered.current = false)}>
            {STEPS.map((s, i) => (
              <div key={s.t} className={"pstep reveal d" + (i + 1) + (i === active ? " is-active" : "")}
                   onMouseEnter={() => setActive(i)}>
                <div className="pstep__n">{i + 1}</div>
                <div>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Why us ----------------
const WHY = [
  { big: "1", suf: "day", t: "Real responsiveness", d: "Most questions answered within one business day — by the person who knows your books." },
  { big: "100", suf: "%", t: "On-time closes", d: "Your books are closed on a dependable schedule, every single month." },
  { big: "0", suf: "", t: "Surprise jargon", d: "Reports in plain English, with a recap of what the numbers actually mean." },
  { big: "1", suf: "", t: "Dedicated bookkeeper", d: "One consistent point of contact — not a rotating call-center queue." },
];

function WhyUs() {
  return (
    <section className="section section--paper2" id="why">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">Why Books in the Loop</div>
          <h2 className="display h-md">Boutique attention.<br />Big-firm reliability.</h2>
          <p className="lede">We're small on purpose — so your business gets a bookkeeper who knows it by name, not a ticket number.</p>
        </div>
        <div className="why__grid">
          {WHY.map((w, i) => (
            <div key={w.t} className={"why__item reveal d" + (i + 1)}>
              <div className="big">{w.big}<span className="u">{w.suf}</span></div>
              <h3>{w.t}</h3>
              <p>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- About ----------------
function About() {
  return (
    <section className="section section--navy" id="about">
      <div className="wrap about__grid">
        <div className="about__body reveal">
          <div className="eyebrow">Who you're working with</div>
          <h2 className="display h-md" style={{ color: "var(--cream)" }}>Local roots, modern books.</h2>
          <p>
            Books in the Loop is a business bookkeeping practice based in Monson, Massachusetts,
            working with small businesses, freelancers, and growing teams both nearby and remote.
          </p>
          <p>
            We started with a simple belief: owners shouldn't have to choose between knowing their
            numbers and running their business. So we handle the ledgers, the reconciliations, and
            the reports — and keep you genuinely in the loop the whole way.
          </p>
          <p style={{ color: "rgba(247,243,234,.55)", fontSize: 14.5 }}>
            We're bookkeepers, not CPAs — we keep your books accurate, organized, and ready to
            hand off at tax time.
          </p>
          <div className="about__sig">
            <LogoMark size={42} dot="#d3a253" stroke="#e3b566" />
            <div>
              <div className="nm">Books in the Loop</div>
              <small>Business Bookkeeping · Monson, MA</small>
            </div>
          </div>
        </div>
        <div className="about__card reveal d2">
          <div className="quotebox">
            <div className="qm">&ldquo;</div>
            <p className="q">Knowing where your money is shouldn't feel like guesswork. We make it the most boring part of your week — in the best way.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustStrip, Services, Process, WhyUs, About });