// Main app: composition, modal state, dark surface tone, tweaks.
const ACCENTS = {
  'Azure':  { pink: '#2d8cff', grad: 'linear-gradient(135deg,#2d8cff 0%,#1d4ed8 100%)', glow: '0 12px 44px -8px rgba(45,140,255,.5)' },
  'Indigo': { pink: '#6366f1', grad: 'linear-gradient(135deg,#6366f1 0%,#4338ca 100%)', glow: '0 12px 44px -8px rgba(99,102,241,.5)' },
  'Sky':    { pink: '#38bdf8', grad: 'linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%)', glow: '0 12px 44px -8px rgba(56,189,248,.5)' },
  'Violet': { pink: '#a855f7', grad: 'linear-gradient(135deg,#a855f7 0%,#7c3aed 100%)', glow: '0 12px 44px -8px rgba(168,85,247,.5)' },
};
const TONES = {
  'deep':  { '--bg': '#070b16', '--bg-2': '#080d1a', '--lt-bg': '#0a1020', '--lt-bg-2': '#0c1426' },
  'slate': { '--bg': '#0a1020', '--bg-2': '#0d1426', '--lt-bg': '#0e1526', '--lt-bg-2': '#10182c' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "split",
  "accent": "Azure",
  "tone": "deep"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = React.useState(null); // 'buy' | 'trial' | 'contact'

  // apply accent to :root
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.Azure;
    const r = document.documentElement.style;
    r.setProperty('--pink', a.pink);
    r.setProperty('--grad-primary', a.grad);
    r.setProperty('--glow-pink', a.glow);
  }, [t.accent]);

  // apply page surface tone to :root
  React.useEffect(() => {
    const tone = TONES[t.tone] || TONES.deep;
    const r = document.documentElement.style;
    Object.entries(tone).forEach(([k, v]) => r.setProperty(k, v));
  }, [t.tone]);

  // Auto-open the Buy modal when the page is loaded with ?buy=1 in the URL —
  // lets links from elsewhere (e.g. the "Upgrade" links inside app.html)
  // land the visitor directly in the checkout-choice modal, rather than
  // just scrolling to the pricing section and requiring an extra click.
  //
  // Also explicitly scrolls to #pricing — the browser's automatic
  // #pricing anchor-scroll on page load silently fails here, because this
  // is a client-rendered React page: the #pricing element doesn't exist
  // in the DOM yet at the exact moment the browser tries to scroll to it.
  // requestAnimationFrame waits until after React has actually painted
  // the page before attempting the scroll.
  React.useEffect(() => {
    try {
      const params = new URLSearchParams(window.location.search);
      if (params.get('buy') === '1') {
        setModal('buy');
        requestAnimationFrame(() => {
          const el = document.getElementById('pricing');
          if (el) el.scrollIntoView({ block: 'start' });
        });
      } else if (params.get('contact') === '1') {
        setModal('contact');
      }
    } catch (e) {}
  }, []);

  const onBuy = () => setModal('buy');
  const onTrial = () => setModal('trial');
  const onContact = () => setModal('contact');
  const onKey = () => setModal('key');

  const isMobile = useIsMobile();

  // Desktop composition — unchanged from the original page.
  const desktopMain = (
    <>
      <Hero variant={t.heroStyle} onBuy={onBuy} onTrial={onTrial} />
      <TrustStrip />
      <HowItWorks />

      <div>
        <div className="lt-top"></div>
        <div className="lt">
          <Features />
          <Benefits />
          <Pricing onBuy={onBuy} onTrial={onTrial} />
        </div>
        <div className="lt-bot"></div>
      </div>

      <Testimonials />
      <FAQ />
    </>
  );

  // Mobile/tablet composition — Pricing pulled up (Hero → Solution → Pricing →
  // rest), trust strip below hero, send-link capture, FAQ. Desktop is untouched.
  const mobileMain = (
    <>
      <Hero variant={t.heroStyle} onBuy={onBuy} onTrial={onTrial} />
      <TrustStrip />
      <MobileTrustStrip />
      <HowItWorks />

      <div>
        <div className="lt-top"></div>
        <div className="lt">
          <Features />
          <Benefits />
          <Pricing onBuy={onBuy} onTrial={onTrial} />
        </div>
        <div className="lt-bot"></div>
      </div>

      <SendLinkCard />
      <Testimonials />
      <FAQ />
    </>
  );

  return (
    <>
      <Nav onBuy={onBuy} onTrial={onTrial} onKey={onKey} />
      {isMobile ? mobileMain : desktopMain}
      <Footer onContact={onContact} />

      {isMobile && <MobileStickyCTA onBuy={onBuy} onTrial={onTrial} />}
      {isMobile && <div className="m-cta-spacer"></div>}

      {modal === 'buy' && <BuyModal onClose={() => setModal(null)} />}
      {modal === 'trial' && <TrialModal onClose={() => setModal(null)} />}
      {modal === 'contact' && <ContactModal onClose={() => setModal(null)} />}
      {modal === 'key' && <KeyModal onClose={() => setModal(null)} />}

      <TweaksPanel>
        <TweakSection label="Hero layout" />
        <TweakRadio label="Direction" value={t.heroStyle}
          options={['split', 'centered', 'beforeafter']}
          onChange={(v) => setTweak('heroStyle', v)} />
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={(ACCENTS[t.accent] || ACCENTS.Azure).pink}
          options={Object.values(ACCENTS).map((a) => a.pink)}
          onChange={(v) => {
            const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].pink === v) || 'Azure';
            setTweak('accent', name);
          }} />
        <TweakSection label="Page depth" />
        <TweakRadio label="Tone" value={t.tone}
          options={['deep', 'slate']}
          onChange={(v) => setTweak('tone', v)} />
      </TweaksPanel>
    </>
  );
}

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