/* Top-level App, route state, localStorage persistence, accent intensity */
const initialRoute = () => {
  try {
    const raw = localStorage.getItem('kestrel.route');
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return { page: 'home' };
};

const LoadingShell = ({ error }) => (
  <div style={{
    minHeight:'80vh',display:'flex',alignItems:'center',justifyContent:'center',
    flexDirection:'column',gap:14,fontFamily:'var(--font-sans)',color:'var(--ink-2)',
  }}>
    <div style={{fontSize:12,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--ink-3)'}}>
      {error ? 'Data load failed' : 'Loading Kestrel dataset'}
    </div>
    <div style={{fontSize:14,maxWidth:480,textAlign:'center',color:error?'#A44':'var(--ink-2)'}}>
      {error
        ? <>Could not load <code>data/kestrel_summary.json</code> or <code>data/kestrel_passages.json</code>. Start a local server in the <code>Design</code> folder (e.g. <code>python3 -m http.server 5173</code>) and reload.</>
        : <>Reading 43,141 passages across 13 companies and 6 reporting years…</>}
    </div>
    {!error && (
      <div style={{width:120,height:3,background:'#E5E2D8',borderRadius:2,overflow:'hidden',marginTop:10}}>
        <div style={{width:'40%',height:'100%',background:'var(--moss)',animation:'kestrel-loading-bar 1.2s ease-in-out infinite'}}/>
      </div>
    )}
  </div>
);

const App = () => {
  const [route, setRouteState] = React.useState(initialRoute);
  const [disclosureId, setDisclosureId] = React.useState(null);
  const t = useTweaks();
  const data = useKestrelData();

  const setRoute = (r) => {
    setRouteState(r);
    try { localStorage.setItem('kestrel.route', JSON.stringify(r)); } catch(e){}
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const openDisclosure = (id) => setDisclosureId(id);
  const closeDisclosure = () => setDisclosureId(null);

  // Apply accent intensity — subtle sage tint bg on sections when "more-green"
  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accentIntensity === 'more-green') {
      root.style.setProperty('--canvas',   '#F6F7F1');
      root.style.setProperty('--canvas-2', '#EDF1E6');
    } else {
      root.style.removeProperty('--canvas');
      root.style.removeProperty('--canvas-2');
    }
  }, [t.accentIntensity]);

  if (!data.ready) {
    return (
      <div data-screen-label="Kestrel site">
        <Header route={route} setRoute={setRoute}/>
        <LoadingShell error={data.error}/>
      </div>
    );
  }

  return (
    <div data-screen-label="Kestrel site">
      <Header route={route} setRoute={setRoute}/>
      {route.page === 'home' && (
        <>
          <Hero setRoute={setRoute}/>
          <Coverage setRoute={setRoute}/>
          <WhyCSV setRoute={setRoute}/>
          <KeyInsight setRoute={setRoute}/>
          <Methodology/>
          <section className="section">
            <div className="site-wrap">
              <EyebrowRow label="Explore"/>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:24,marginBottom:32}}>
                <h2 style={{maxWidth:640}}>Filter, sort, drill in. Every row is a passage.</h2>
                <button className="btn btn-text" style={{fontSize:13}} onClick={()=>setRoute({page:'explore'})}>
                  Open full explorer <Icon name="arrow-right" size={12} style={{marginLeft:2}} className="arrow"/>
                </button>
              </div>
              <Explore embedded setRoute={setRoute} openDisclosure={openDisclosure} limit={50}/>
            </div>
          </section>
          <WhyItMatters/>
        </>
      )}
      {route.page === 'method'   && <Methodology/>}
      {route.page === 'explore'  && <section className="section first"><Explore embedded setRoute={setRoute} openDisclosure={openDisclosure}/></section>}
      {route.page === 'compare'  && <Compare setRoute={setRoute}/>}
      {route.page === 'company'  && <Scorecard id={route.id} setRoute={setRoute} openDisclosure={openDisclosure}/>}

      <Footer setRoute={setRoute}/>
      <DisclosurePanel id={disclosureId} onClose={closeDisclosure} setRoute={setRoute}/>
      <TweaksPanel/>
    </div>
  );
};

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