// App.jsx · top-level shell. Header w/ tabs, routed content, footer, tweaks.

const { useState: useAppState, useEffect } = React;

const TABS = [
  { id: 'overview', label: 'Overview' },
  { id: 'report',   label: 'Inside the report' },
  { id: 'book',     label: 'Book your slot' },
];

function Header({ activeTab, onTab }) {
  return (
    <header className="pb-header">
      <div className="pb-container pb-header-inner">
        <div className="pb-brand-row">
          <ProjectBaselineLogo size={44}/>
        </div>
        <nav className="pb-tabs" role="tablist" aria-label="Sections">
          {TABS.map(t => (
            <button key={t.id} className={`pb-tab ${activeTab === t.id ? 'is-active' : ''}`}
              role="tab" aria-selected={activeTab === t.id} onClick={() => onTab(t.id)}>
              {t.label}
            </button>
          ))}
        </nav>
        <button className="pb-btn pb-btn-primary pb-btn-sm" onClick={() => onTab('book')} style={{ display: 'inline-flex' }}>
          Book a slot
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="pb-footer">
      <div className="pb-container">
        <div className="pb-footer-inner">
          <div>
            <ProjectBaselineLogo size={56} layout="stacked"/>
            <p style={{ marginTop: 24 }}>
              Project Baseline is a 2026 initiative to help leading South African primary schools understand Grade 6 and 7 learner readiness for high school mathematics. Free of charge, no obligation.
            </p>
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
              <NumerateLogo height={26}/>
              <span style={{ opacity: 0.4 }}>·</span>
              <ReflectiveWordmark height={18}/>
            </div>
          </div>
          <div>
            <h5>Programme</h5>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.__pbGoTab('overview');}}>Why fractions</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.__pbGoTab('overview');}}>What you receive</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.__pbGoTab('report');}}>Inside the report</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.__pbGoTab('book');}}>Book your slot</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:hello@reflective.global">hello@reflective.global</a></li>
              <li><a href="https://reflective.global/sa/numerate-for-schools/" target="_blank" rel="noreferrer">About Numerate</a></li>
              <li><a href="https://reflective.global" target="_blank" rel="noreferrer">reflective.global</a></li>
            </ul>
          </div>
        </div>
        <div className="pb-footer-base">
          <span>© 2026 Reflective. Project Baseline is a Numerate diagnostic programme.</span>
          <span>Cape Town · Johannesburg · Durban · Pretoria · Kimberley</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Tweaks (pitch angle exploration) ----------
const PB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pitch": "stem",
  "showSubBrandTag": true
}/*EDITMODE-END*/;

function PbTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero pitch angle"/>
      <TweakSelect
        label="Headline framing"
        value={t.pitch}
        options={[
          { value: 'stem',      label: 'STEM pipeline · Build the STEM pipeline' },
          { value: 'bridge',    label: 'The Bridge · Fractions is the bridge' },
          { value: 'invisible', label: 'Precision · Every learner, every concept' },
        ]}
        onChange={v => setTweak('pitch', v)}
      />
      <TweakSection label="Header"/>
      <TweakToggle
        label="Show sub-brand tag"
        value={t.showSubBrandTag}
        onChange={v => setTweak('showSubBrandTag', v)}
      />
    </TweaksPanel>
  );
}

// ---------- Root ----------
function App() {
  const [t, setTweak] = useTweaks(PB_TWEAK_DEFAULTS);
  const initialTab = (window.location.hash || '').replace('#','') || 'overview';
  const [activeTab, setActiveTab] = useAppState(TABS.find(x => x.id === initialTab) ? initialTab : 'overview');

  function goTab(id) {
    setActiveTab(id);
    window.location.hash = id === 'overview' ? '' : id;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
  useEffect(() => { window.__pbGoTab = goTab; }, []);
  useEffect(() => {
    const handler = () => {
      const h = (window.location.hash || '').replace('#','');
      if (TABS.find(x => x.id === h)) setActiveTab(h);
      else if (!h) setActiveTab('overview');
    };
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);

  return (
    <div>
      <Header activeTab={activeTab} onTab={goTab}/>
      {activeTab === 'overview' && (
        <Overview pitch={t.pitch} onBook={() => goTab('book')} onSeeReport={() => goTab('report')}/>
      )}
      {activeTab === 'report' && <ReportTab/>}
      {activeTab === 'book'   && <Booking/>}
      <Footer/>
      <PbTweaks t={t} setTweak={setTweak}/>
    </div>
  );
}

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