/* global React, ReactDOM, SellerLanding, SellerWizard, SellerResults, BookingFlow, BuyerLanding, BuyerMandate, BuyerDashboard, BuyerSignIn, OurStoryPage, TeamPage, ContactPage, DataHandlingPage, VerificationPage, PrivacyPage, TermsPage, WhoBuysPage, MarketReportsPage, IndustryMultiplesPage, CaseStudiesPage, GlossaryPage, MobileStatusBar, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect */
const { useState, useEffect } = React;

const SCREENS = [
  { id: 'seller-landing', label: 'Seller landing', kind: 'seller' },
  { id: 'who-buys',       label: 'Who buys',       kind: 'marketing' },
  { id: 'insights-reports',   label: 'Reports',    kind: 'insights' },
  { id: 'insights-multiples', label: 'Multiples',  kind: 'insights' },
  { id: 'insights-cases',     label: 'Cases',      kind: 'insights' },
  { id: 'insights-glossary',  label: 'Glossary',   kind: 'insights' },
  { id: 'about-story', label: 'Our Story', kind: 'trust' },
  { id: 'about-team', label: 'Team', kind: 'trust' },
  { id: 'about-contact', label: 'Contact', kind: 'trust' },
  { id: 'data-handling', label: 'What happens next', kind: 'trust' },
  { id: 'verification', label: 'Buyer verification', kind: 'trust' },
  { id: 'privacy',      label: 'Privacy',            kind: 'trust' },
  { id: 'terms',        label: 'Terms',              kind: 'trust' },
  { id: 'seller-wizard',  label: 'Match wizard',  kind: 'seller' },
  { id: 'seller-results', label: 'Match results', kind: 'seller' },
  { id: 'booking',        label: 'Book call',     kind: 'seller' },
  { id: 'buyer-landing',  label: 'Buyer landing', kind: 'buyer' },
  { id: 'buyer-mandate',  label: 'Mandate intake',kind: 'buyer' },
  { id: 'buyer-signin',   label: 'Sign in',        kind: 'buyer' },
  { id: 'buyer-dashboard',label: 'Buyer dashboard',kind:'buyer' },
];

const getBreakpoint = () => {
  const w = window.innerWidth;
  if (w < 640) return 'mobile';
  if (w < 1024) return 'tablet';
  return 'desktop';
};

const App = () => {
  const [bp, setBp] = useState(getBreakpoint);
  const [screen, setScreen] = useState('seller-landing');
  const [answers, setAnswers] = useState({});
  const [matchResults, setMatchResults] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    const onResize = () => setBp(getBreakpoint());
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const accent = '#1f5f4a';

  // Auto-scroll viewport to top on screen change
  useEffect(() => {
    const el = document.querySelector('.viewport-frame .viewport-scroll');
    if (el) el.scrollTop = 0;
  }, [screen]);

  const navigate = (s) => setScreen(s);

  const screenProps = { bp, navigate, answers, setAnswers, accent, reveal: 'cinematic', density: 'airy', matchResults, setMatchResults, submitting, setSubmitting };

  const renderScreen = () => {
    switch (screen) {
      case 'seller-landing':  return <SellerLanding {...screenProps} />;
      case 'seller-wizard':   return <SellerWizard  {...screenProps} />;
      case 'seller-results':  return <SellerResults {...screenProps} />;
      case 'booking':         return <BookingFlow   {...screenProps} />;
      case 'buyer-landing':   return <BuyerLanding  {...screenProps} />;
      case 'buyer-mandate':   return <BuyerMandate  {...screenProps} />;
      case 'buyer-signin':    return <BuyerSignIn     {...screenProps} />;
      case 'buyer-dashboard': return <BuyerDashboard {...screenProps} />;
      case 'about-story':     return <OurStoryPage   {...screenProps} />;
      case 'about-team':      return <TeamPage       {...screenProps} />;
      case 'about-contact':   return <ContactPage    {...screenProps} />;
      case 'data-handling':   return <DataHandlingPage {...screenProps} />;
      case 'verification':    return <VerificationPage {...screenProps} />;
      case 'privacy':         return <PrivacyPage        {...screenProps} />;
      case 'terms':           return <TermsPage          {...screenProps} />;
      case 'who-buys':        return <WhoBuysPage      {...screenProps} />;
      case 'insights-reports':   return <MarketReportsPage    {...screenProps} />;
      case 'insights-multiples': return <IndustryMultiplesPage {...screenProps} />;
      case 'insights-cases':     return <CaseStudiesPage      {...screenProps} />;
      case 'insights-glossary':  return <GlossaryPage         {...screenProps} />;
      default: return null;
    }
  };

  const sellerScreens = SCREENS.filter(s => s.kind === 'seller');
  const buyerScreens = SCREENS.filter(s => s.kind === 'buyer');
  const trustScreens = SCREENS.filter(s => s.kind === 'trust');
  const marketingScreens = SCREENS.filter(s => s.kind === 'marketing' || s.kind === 'insights');

  return (
    <div className="app-chrome fullscreen" data-screen-label={SCREENS.find(s => s.id === screen)?.label}>
      {/* Stage */}
      <div className="viewport-stage fullscreen">
        <div className={`viewport-frame ${bp}`}>
          {bp === 'mobile' && <MobileStatusBar />}
          {renderScreen()}
        </div>
      </div>

    </div>
  );
};

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