// Caret landing — app composition + Tweaks

const HEADLINES = [
  'Find it. Reuse it. Get it done.',
  'Write at the speed of your cursor.',
  'AI actions on whatever you\u2019re working on.',
  'Select. ⌥Space. Done.',
];

const ACCENTS = {
  '#1F6BFF': { hover: '#195CE0', press: '#1450C7', soft: '#E8F0FF' }, // spirit blue
  '#2E83FF': { hover: '#2474EC', press: '#1E62CC', soft: '#E7F1FF' }, // brief blue
  '#6A5CFF': { hover: '#5A4DEB', press: '#4C40D6', soft: '#ECEAFF' }, // indigo
  '#18C2BE': { hover: '#12ABA8', press: '#0E928F', soft: '#E1F8F7' }, // teal
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Find it. Reuse it. Get it done.",
  "accent": "#1F6BFF",
  "animateHero": true
}/*EDITMODE-END*/;

function usePrefersReduced() {
  const [r, setR] = useState(false);
  useEffect(() => {
    const m = window.matchMedia('(prefers-reduced-motion: reduce)');
    const on = () => setR(m.matches); on();
    m.addEventListener('change', on); return () => m.removeEventListener('change', on);
  }, []);
  return r;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const prefersReduced = usePrefersReduced();
  const reduced = prefersReduced || !t.animateHero;

  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS['#1F6BFF'];
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-hover', a.hover);
    r.setProperty('--accent-press', a.press);
    r.setProperty('--accent-soft', a.soft);
    r.setProperty('--shadow-accent', `0 6px 20px ${t.accent}59`);
  }, [t.accent]);

  return (
    <React.Fragment>
      <Nav />
      <Hero headline={t.headline} reduced={reduced} />
      <TheLoop />
      <DemoSection reduced={reduced} />
      <EverydayFeatures />
      <ActionLibrary />
      <Byo />
      <Privacy />
      <FirstMinute />
      <Pricing />
      <Faq />
      <FinalCta />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline} options={HEADLINES}
          onChange={(v) => setTweak('headline', v)} />
        <TweakToggle label="Animate the demo" value={t.animateHero}
          onChange={(v) => setTweak('animateHero', v)} />
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={Object.keys(ACCENTS)} onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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