// Main app — wires state + form + results.

const computeScenario = window.SCorpEngine.computeScenario;
const findBreakEven = window.SCorpEngine.findBreakEven;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showAds": true,
  "showFooterCTA": true,
  "accentMode": "warm"
}/*EDITMODE-END*/;

function App() {
  const [privacyOpen, setPrivacyOpen] = React.useState(false);
  const privacyTriggerRef = React.useRef(null);

  const [s, setS] = React.useState({
    netIncome: 120000,
    entity: 'smllc',
    industry: 'consulting',
    state: 'CA',
    salary: 70000,
    otherW2: 0,
    healthInsurance: 0,
    retirementPct: 0,
    payroll: 600,
    taxPrep: 1000,
    registeredAgent: 150,
    filing: 'single',
    _salaryTouched: false,
  });
  const set = (patch) => setS(prev => ({ ...prev, ...patch }));

  const result = React.useMemo(() => computeScenario({
    netIncome: s.netIncome,
    state: s.state,
    industry: s.industry,
    salary: s.salary,
    otherW2: s.otherW2,
    healthInsurance: s.healthInsurance,
    retirementPct: s.retirementPct,
    filing: s.filing,
    overhead: {
      payroll: s.payroll,
      taxPrep: s.taxPrep,
      registeredAgent: s.registeredAgent,
    },
  }), [s]);

  const breakEven = React.useMemo(() => findBreakEven({
    state: s.state,
    industry: s.industry,
    otherW2: s.otherW2,
    healthInsurance: s.healthInsurance,
    retirementPct: s.retirementPct,
    filing: s.filing,
    overhead: {
      payroll: s.payroll,
      taxPrep: s.taxPrep,
      registeredAgent: s.registeredAgent,
    },
  }), [s.state, s.industry, s.otherW2, s.healthInsurance, s.retirementPct,
       s.filing, s.payroll, s.taxPrep, s.registeredAgent]);

  const ads = TWEAK_DEFAULTS.showAds;

  return (
    <>
      <div className="top-strip">
        <span>Not tax advice. Estimates only — confirm with a CPA before filing Form 2553.</span>
      </div>

      <div className="page">
        <nav className="nav">
          <div className="nav-brand">
            <div className="nav-brand-mark">S</div>
            <span>S-Corp Breakeven</span>
          </div>
          <div className="nav-links">
            <a href="#how-it-works">How it works</a>
            <a href="#reasonable-comp">Reasonable comp</a>
            <a href="#qbi">QBI wrinkle</a>
            <a href="#faq">FAQ</a>
          </div>
        </nav>

        <header className="hero">
          <div className="hero-eyebrow">Free calculator · updated for 2025</div>
          <h1>
            Find your S-Corp <em>break-even</em>{' '}
            in under a minute.
          </h1>
          <p className="lede">
            Most calculators tell you what you'd save. This one tells you the
            net-income threshold where the savings start to outweigh the
            paperwork — so you know if you're comfortably above it, hovering
            near it, or not there yet.
          </p>
          <div className="hero-meta">
            <span>Handles state-specific rules</span>
            <span>Models QBI &amp; SSTB phaseouts</span>
            <span>Accounts for other W-2 income</span>
          </div>
        </header>

        {/* Slot 1 — top-banner. Below H1, above calculator. */}
        {ads && (
          <div className="ad-wrap ad-wrap--banner">
            <ResponsiveAd
              desktop="leaderboard"
              mobile="large-mobile-banner"
              slotId="top-banner"
            />
          </div>
        )}

        <main className="calc-app" data-screen-label="01 Calculator">
          <Calculator s={s} set={set} />
          {/* Slot 2 — post-result. Rendered inside ResultsPanel. */}
          <ResultsPanel result={result} breakEven={breakEven} s={s} showAds={ads} />
        </main>
      </div>

      {/* Long-form area with sticky right rail (Slot 4 — sidebar). */}
      <div className="long-form page" data-screen-label="02 Long-form">
        <div className="long-with-rail">
          <div className="long-main">
            <HowItWorks />

            {/* Slot 3 — mid-content. Between sections in the editorial flow. */}
            {ads && (
              <div className="ad-wrap ad-wrap--inline">
                <ResponsiveAd
                  desktop="leaderboard"
                  mobile="mrec"
                  slotId="mid-content"
                />
              </div>
            )}

            <ReasonableComp />
            <QBISection />

            {/* Slot 5 (optional 6th in spec) — pre-faq. Long page qualifies. */}
            {ads && (
              <div className="ad-wrap ad-wrap--inline">
                <ResponsiveAd
                  desktop="leaderboard"
                  mobile="mrec"
                  slotId="pre-faq"
                />
              </div>
            )}

            <FAQ />
          </div>

          {ads && (
            <aside className="long-rail">
              <div className="long-rail-sticky">
                <AdSlot
                  size="halfpage"
                  slotId="sidebar"
                  className="desktop-only"
                />
              </div>
            </aside>
          )}
        </div>
      </div>

      <SiteFooter onOpenPrivacy={() => setPrivacyOpen(true)} privacyRef={privacyTriggerRef} />

      <PrivacyModal
        open={privacyOpen}
        onClose={() => setPrivacyOpen(false)}
        triggerRef={privacyTriggerRef}
      />

      {/* Slot 6 — mobile-sticky. Dismissible session-persistent bottom anchor. */}
      {ads && <StickyMobileAd slotId="mobile-sticky" />}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);