/* app.jsx — root: gated video funnel, white/blue, Stone-style stacked layout */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F5C9E",
  "mainVideoId": "1175833543"
}/*EDITMODE-END*/;

const BOOKING_ID = '8N0gRw4B3R9AEAPzRJt7';

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [funnelOpen, setFunnelOpen] = useState(false);
  const [unlocked, setUnlocked] = useState(false);
  const accent = t.accent;

  useEffect(() => { document.documentElement.style.setProperty('--blue', accent); }, [accent]);

  useEffect(() => {
    const unique = window.LPTrack.isFirstVisit();
    window.LPTrack.logLocal('page_view', { unique });
    window.LPTrack.track('PageView');
  }, []);

  const openFunnel = () => {
    window.LPTrack.logLocal('cta_click');
    setFunnelOpen(true);
  };

  return (
    <div>
      <div className="wrap">
        <section style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'clamp(12px,2.4vh,24px)', paddingTop: 14, paddingBottom: 16 }}>
          <Hero accent={accent} />
          <GatedVideo accent={accent} unlocked={unlocked} videoId={t.mainVideoId} onUnlockRequest={openFunnel} />
          <StepCTA accent={accent} unlocked={unlocked} onCta={openFunnel} />
        </section>
        <Proof accent={accent} />
        <FinalCTA accent={accent} unlocked={unlocked} onCta={openFunnel} />
        <Footer accent={accent} />
      </div>

      {funnelOpen && (
        <Funnel accent={accent} brand={""} bookingId={BOOKING_ID}
          videoId={t.mainVideoId}
          onQualified={() => setUnlocked(true)}
          onClose={() => setFunnelOpen(false)} />
      )}

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={accent}
          options={['#2F5C9E', '#3A6AB0', '#21426F', '#2C6E6A', '#3D5A80']}
          onChange={v => setTweak('accent', v)} />
        <TweakSection label="Main video" />
        <TweakText label="Vimeo ID (unlocks after form)" value={t.mainVideoId} placeholder="e.g. 1071544418" onChange={v => setTweak('mainVideoId', v.trim())} />
        <TweakSection label="Tools" />
        <TweakButton label="View analytics dashboard" onClick={() => window.open('analytics.html', '_blank')} />
      </TweaksPanel>
    </div>
  );
}

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