// Main app — wires together the full landing prototype with Tweaks

const { useState: useState2, useEffect: useEffect2 } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "coral",
  "density": "airy",
  "headlineTone": "alone",
  "emphasizeStarter": true
}/*EDITMODE-END*/;

function Nav({ onSignup }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <div className="nav-brand">
          <img src="./images/Logo.png?v=10" alt="USANRetirement" className="nav-brand-mark" />
        </div>
        <div className="nav-links">
          <a href="#clara">Meet Clara</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#families">For families</a>
          <a href="#faq">FAQ</a>
          <a href="tel:18008720000" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--ink-900)' }}>
            <Icon.Phone width="18" height="18" /> 1-800-USA-CARE
          </a>
          <button className="btn btn-primary" style={{ height: 48, padding: '0 22px', fontSize: 16 }} onClick={onSignup}>
            Start free trial
          </button>
        </div>
      </div>
    </nav>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [signupOpen, setSignupOpen] = useState2(false);

  useEffect2(() => {
    document.documentElement.dataset.palette = tweaks.palette;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.palette, tweaks.density]);

  const open = () => setSignupOpen(true);

  return (
    <>
      <Nav onSignup={open} />
      <Hero tone={tweaks.headlineTone} onSignup={open} />
      <Problem />
      <ClaraSection />
      <HowItWorks />
      <Pricing onSignup={open} emphasizeStarter={tweaks.emphasizeStarter} />
      <ForFamilies onSignup={open} />
      <Trust />
      <Testimonials />
      <FAQ />
      <Footer />
      <SignupModal open={signupOpen} onClose={() => setSignupOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent palette">
          <TweakRadio
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'coral', label: 'Coral' },
              { value: 'terracotta', label: 'Terracotta' },
              { value: 'sage', label: 'Sage' },
              { value: 'gold', label: 'Gold' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'airy', label: 'Airy' },
              { value: 'compact', label: 'Compact' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero headline tone">
          <TweakSelect
            value={tweaks.headlineTone}
            onChange={(v) => setTweak('headlineTone', v)}
            options={[
              { value: 'alone', label: 'A friendly call every morning…' },
              { value: 'peace', label: 'Daily check-ins. Peace of mind.' },
              { value: 'mom', label: 'Mom\u2019s not alone today.' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Pricing emphasis">
          <TweakRadio
            value={tweaks.emphasizeStarter ? 'starter' : 'maximum'}
            onChange={(v) => setTweak('emphasizeStarter', v === 'starter')}
            options={[
              { value: 'starter', label: 'Highlight Starter' },
              { value: 'maximum', label: 'Highlight Maximum' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Quick actions">
          <TweakButton onClick={() => setSignupOpen(true)}>Open signup modal</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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