/* global React, Nav, Hero, Features, Plans, Faq, Footer */
const DS_APP = window.SubEarthDesignSystem_9ae0a6;

function BuySheet({ open, onClose }) {
  const { Button, Badge } = DS_APP;
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100, display: 'grid', placeItems: 'center',
      background: 'rgba(0,0,0,0.6)', backdropFilter: 'var(--blur)', WebkitBackdropFilter: 'var(--blur)',
      padding: 'var(--space-6)', animation: 'fade var(--dur) var(--ease-out)',
    }}>
      {/* dither overlay — kills banding in the blurred glow behind the sheet */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, backgroundImage: 'var(--grain)',
        backgroundSize: '110px 110px', opacity: 0.16, mixBlendMode: 'overlay', pointerEvents: 'none', zIndex: 0,
      }} />
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'relative', zIndex: 1,
        width: 'min(420px, 100%)', padding: 'var(--space-10)', textAlign: 'center',
        background: 'var(--ink-700)', borderRadius: 'var(--radius-lg)',
        boxShadow: 'var(--ring-strong), var(--shadow-lg), var(--glow-halo)',
        display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', alignItems: 'center',
      }}>
        <Badge variant="dot">Cart</Badge>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--tr-tight)', fontSize: 'var(--fs-d3)' }}>Chonkify</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-d2)' }}>$39</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)', letterSpacing: 'var(--tr-mono)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>one-time</span>
        </div>
        <p style={{ margin: 0, color: 'var(--text-tertiary)', fontSize: 'var(--fs-sm)' }}>This is a demo storefront — no checkout is wired up.</p>
        <div style={{ display: 'flex', gap: 'var(--space-3)', width: '100%' }}>
          <Button variant="secondary" full onClick={onClose}>Close</Button>
          <Button variant="primary" full onClick={onClose}>Checkout</Button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [buying, setBuying] = React.useState(false);
  const buy = () => setBuying(true);
  return (
    <React.Fragment>
      <Nav onBuy={buy} />
      <main>
        <Hero onBuy={buy} />
        <Features />
        <Plans onBuy={buy} />
        <Faq />
      </main>
      <Footer />
      <BuySheet open={buying} onClose={() => setBuying(false)} />
    </React.Fragment>
  );
}

// Store App globally
window.App = App;

// Mark App as ready
window.__appReady.App = true;

// Render when all components are ready
(function() {
  function attemptRender() {
    try {
      const root = document.getElementById('root');
      if (!root) {
        setTimeout(attemptRender, 50);
        return;
      }
      
      // Check all dependencies
      if (!window.ReactDOM) {
        console.warn('ReactDOM not loaded yet');
        setTimeout(attemptRender, 50);
        return;
      }
      
      if (!window.Nav || !window.Hero || !window.Features || !window.Plans || !window.Faq || !window.Footer) {
        console.warn('Waiting for components...', {
          Nav: !!window.Nav,
          Hero: !!window.Hero,
          Features: !!window.Features,
          Plans: !!window.Plans,
          Faq: !!window.Faq,
          Footer: !!window.Footer
        });
        setTimeout(attemptRender, 50);
        return;
      }
      
      // All systems go
      console.log('Rendering React app');
      window.ReactDOM.createRoot(root).render(<App />);
      
    } catch (e) {
      console.error('Error rendering app:', e);
      setTimeout(attemptRender, 100);
    }
  }
  
  // Wait for DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', attemptRender);
  } else {
    // DOM already ready
    setTimeout(attemptRender, 100);
  }
})();