// cache-bust: 1779468723-8d9735
// =========================================================
// main.jsx -- production landing for reloadin5.com/build
// Renders the full Landing composite directly (no DesignCanvas wrapper).
// Section components are exposed on window by landing.jsx and landing-2.jsx,
// which are loaded before this script per index.html.
// =========================================================

const { useEffect: useEffectApp } = React;

const ACCENTS = {
  coral: ['#d96846', '#b8451f', '#f3c3ab', '#fae5d8', '#ff8b62'],
  amber: ['#c98a3a', '#9b6624', '#ecc99d', '#fbeed6', '#f0b35a'],
  sage:  ['#5d8a52', '#3d6a32', '#b9cda4', '#dde9d2', '#7fab73'],
  rose:  ['#c0507e', '#8e3458', '#e5a8bf', '#f6dde6', '#e07099'],
  ink:   ['#3a322a', '#1a1612', '#a59a89', '#d9d1c5', '#5a4f43'],
};

function applyAccent(name) {
  const [a, deep, soft, tint, glow] = ACCENTS[name] || ACCENTS.coral;
  const r = document.documentElement;
  r.style.setProperty('--accent', a);
  r.style.setProperty('--accent-deep', deep);
  r.style.setProperty('--accent-soft', soft);
  r.style.setProperty('--accent-tint', tint);
  r.style.setProperty('--accent-glow', glow);
}

function applyDensity(d) {
  document.body.dataset.density = d;
}

// Landing composite -- one stacked column of all marketing sections.
function Landing() {
  return (
    <div className="bl-board" style={{ width: '100%' }}>
      <LandingNav />
      <LandingHero />
      <LandingMetrics />
      <LandingStory />
      <LandingCurriculum />
      <LandingArch />
      <LandingLessonPreview />
      <LandingProjects />
      <LandingComparison />
      <LandingBuildLog />
      <LandingPricing />
      <LandingFAQ />
      <LandingEmailCapture />
      <LandingFooter />
    </div>
  );
}

function App() {
  const [hash, setHash] = React.useState(window.location.hash);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );

  React.useEffect(() => {
    const onHash = () => setHash(window.location.hash);
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('hashchange', onHash);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('hashchange', onHash);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  useEffectApp(() => {
    applyAccent('coral');
    applyDensity('comfortable');
  }, []);

  // Admin portal — works on every viewport
  if (hash.startsWith('#admin')) {
    return window.BuildLabAdmin ? <BuildLabAdmin /> : <div style={{padding:40,fontFamily:'monospace'}}>Loading admin...</div>;
  }

  // Mobile layout for phone-width viewports.
  // mobile.jsx exposes window.MobileLanding (loaded by index.html before main.jsx).
  if (isMobile && typeof window.MobileLanding === 'function') {
    return <MobileLanding />;
  }

  return <Landing />;
}

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