// App shell — header, hero, calculator, ads, explainer, FAQ, footer, privacy modal, tweaks panel.

const PALETTES = {
  warmCream: {
    label: 'Warm cream + forest',
    swatches: ['#2A4F3F', '#D96846', '#FBF6EF'],
    vars: {
      '--bg': '#FBF6EF', '--bg-2': '#F4ECDF', '--bg-3': '#E9DEC9',
      '--line': '#D9CDB5', '--primary': '#2A4F3F', '--accent': '#D96846',
      '--accent-soft': '#F6E1D6', '--gold': '#C2944A', '--gold-soft': '#F1E4C7',
      '--ink': '#1A1714', '--ink-2': '#4A423A', '--ink-3': '#7A6F62',
      '--primary-ink': '#F4ECDF',
    },
  },
  coolPaper: {
    label: 'Cool paper + pine',
    swatches: ['#244A47', '#C75A3E', '#F6F7F4'],
    vars: {
      '--bg': '#F6F7F4', '--bg-2': '#ECEEE8', '--bg-3': '#DCDFD5',
      '--line': '#CDD1C5', '--primary': '#244A47', '--accent': '#C75A3E',
      '--accent-soft': '#F1DCD3', '--gold': '#A88040', '--gold-soft': '#EBDFC4',
      '--ink': '#16191A', '--ink-2': '#3F4546', '--ink-3': '#6E7677',
      '--primary-ink': '#ECEEE8',
    },
  },
  eveningBlue: {
    label: 'Evening blue',
    swatches: ['#1F3A5F', '#C95C3F', '#F4F2EE'],
    vars: {
      '--bg': '#F4F2EE', '--bg-2': '#EAE6DE', '--bg-3': '#D9D2C5',
      '--line': '#C4BCAB', '--primary': '#1F3A5F', '--accent': '#C95C3F',
      '--accent-soft': '#F2DCD2', '--gold': '#B58440', '--gold-soft': '#EDDCBA',
      '--ink': '#15171A', '--ink-2': '#41464F', '--ink-3': '#74798C',
      '--primary-ink': '#EAE6DE',
    },
  },
};

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [privacyOpen, setPrivacyOpen] = React.useState(false);
  const lastTrigger = React.useRef(null);

  const openPrivacy = (e) => {
    if (e && e.currentTarget) lastTrigger.current = e.currentTarget;
    setPrivacyOpen(true);
  };
  const closePrivacy = () => {
    setPrivacyOpen(false);
    setTimeout(() => lastTrigger.current?.focus?.(), 30);
  };

  // Apply palette
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.warmCream;
    Object.entries(p.vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.palette]);

  // Apply display font
  React.useEffect(() => {
    const fonts = {
      Newsreader: "'Newsreader', Georgia, serif",
      Geist: "'Geist', -apple-system, sans-serif",
      System: "ui-serif, Georgia, serif",
    };
    document.documentElement.style.setProperty('--font-display', fonts[tweaks.displayFont] || fonts.Newsreader);
  }, [tweaks.displayFont]);

  return (
    <>
      <header className="site-header">
        <div className="site-wrap">
          <a className="brand" href="#calculator">
            <span className="brand-mark">F</span>
            <span className="brand-name">fsacredit<span className="tld">.com</span></span>
          </a>
          <span className="header-meta">2025 IRS limits · updated Jan 2026</span>
        </div>
      </header>

      <main>
        <div className="site-wrap">
          <section className="hero">
            <h1>
              {tweaks.heroVariant === 'punchy' && <>The childcare benefits, but <em>not naive</em>.</>}
              {tweaks.heroVariant === 'balanced' && <>Dependent Care FSA vs. Tax Credit — find your <em>optimal split</em>.</>}
              {tweaks.heroVariant === 'plain' && <>Childcare tax benefit calculator for working parents.</>}
            </h1>
            <p className="lede">
              The two main federal childcare benefits — the Dependent Care FSA and the Child &amp; Dependent Care Credit — partially offset each other.
              This calculator finds the split that saves you the most, given your income, filing status, kid count, and childcare costs. Everything runs in your browser.
            </p>

            <div className="hook-strip">
              <span className="hook-pip" aria-hidden="true">!</span>
              <span>
                <strong>The thing most parents miss:</strong> every $1 you put in a Dependent Care FSA reduces the CDCC expense base by $1. You don't get both on the same dollar. Naive "max both" leaves money on the table — sometimes thousands.
              </span>
            </div>
          </section>

          <AdSlot id="top-banner" />

          <div className="main-grid">
            <div>
              <Calculator openPrivacy={openPrivacy} tweaks={tweaks} />

              <AdSlot id="mid-content" />

              <Explainer />
              <FAQ />
            </div>

            <aside className="desktop-sidebar">
              <AdSlot id="sidebar" />
            </aside>
          </div>
        </div>

        <SiteFooter openPrivacy={openPrivacy} />
      </main>

      <MobileStickyAd />
      <PrivacyModal open={privacyOpen} onClose={closePrivacy} />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakSelect
            label="Palette"
            value={tweaks.palette}
            options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.label }))}
            onChange={(v) => setTweak('palette', v)}
          />
          <TweakRadio
            label="Display font"
            value={tweaks.displayFont}
            options={[
              { value: 'Newsreader', label: 'Newsreader' },
              { value: 'Geist', label: 'Geist' },
              { value: 'System', label: 'System' },
            ]}
            onChange={(v) => setTweak('displayFont', v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Headline tone"
            value={tweaks.heroVariant}
            options={[
              { value: 'balanced', label: 'Balanced' },
              { value: 'punchy', label: 'Punchy' },
              { value: 'plain', label: 'Plain' },
            ]}
            onChange={(v) => setTweak('heroVariant', v)}
          />
        </TweakSection>

        <TweakSection label="Result chrome">
          <TweakToggle
            label="Inline privacy badge near inputs"
            value={tweaks.showInlinePrivacyBadge}
            onChange={(v) => setTweak('showInlinePrivacyBadge', v)}
          />
          <TweakToggle
            label='"Recommended" flag on winning card'
            value={tweaks.showRecommendedFlag}
            onChange={(v) => setTweak('showRecommendedFlag', v)}
          />
          <TweakToggle
            label="Show CTC sidecar"
            value={tweaks.ctcSidecar}
            onChange={(v) => setTweak('ctcSidecar', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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