/* Main app — single full-bleed landing + tweaks panel */

function HostNav({ lockup }) {
  return (
    <div className="topnav host-nav">
      <a href="pertel.html" style={{display:'flex', alignItems:'center'}}>
        <img src="assets/pertel-logo.png" alt="Pertel · Intelligence by Schedii"
             style={{height: 40, width: 'auto', display: 'block'}} />
      </a>
      <div className="topnav-spacer" />
      <a href="pertel.html" className="topnav-btn">
        <span className="sig">[</span>
        <span>Pertel</span>
      </a>
      <a href="theory.html" className="topnav-btn">
        <span className="sig">§</span>
        <span>Theory</span>
      </a>
      <a href="why.html" className="topnav-btn">
        <span className="sig">?</span>
        <span>Why</span>
      </a>
    </div>
  );
}

function App() {
  const [tweak, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "lockup":  "by",
    "density": "comfortable",
    "theme":   "dark",
    "palette": "cyan"
  }/*EDITMODE-END*/);

  return (
    <>
      {/* Hide the in-direction topnavs — host nav comes from here */}
      <style>{`
        .dirA .topnav, .dirB .topnav { display: none !important; }
        .host-nav { position: relative !important; top: 0; z-index: 30; }
      `}</style>

      <div
        data-theme={tweak.theme}
        data-palette={tweak.palette}
        className={tweak.density === 'compact' ? 'compact' : ''}
        style={{
          minHeight: '100vh',
          background: 'var(--color-background)',
          color: 'var(--color-foreground)',
          position: 'relative',
          overflowX: 'hidden',
        }}
      >
        <div className="orb-bg"><span /></div>
        <div style={{position:'relative', zIndex: 1}}>
          <HostNav lockup={tweak.lockup} />
          <DirectionB />
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Lockup" />
        <TweakRadio
          label="Pertel name"
          value={tweak.lockup}
          options={[
            { value: 'by',    label: 'by Schedii' },
            { value: 'dot',   label: '· Schedii' },
            { value: 'plain', label: 'Pertel' },
          ]}
          onChange={v => setTweak('lockup', v)}
        />

        <TweakSection label="Surface" />
        <TweakRadio
          label="Density"
          value={tweak.density}
          options={[
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'compact',     label: 'Compact' },
          ]}
          onChange={v => setTweak('density', v)}
        />
        <TweakRadio
          label="Theme"
          value={tweak.theme}
          options={[
            { value: 'dark',  label: 'Dark' },
            { value: 'light', label: 'Light' },
          ]}
          onChange={v => setTweak('theme', v)}
        />

        <TweakSection label="Palette" />
        <TweakRadio
          label="Accent"
          value={tweak.palette}
          options={[
            { value: 'cyan', label: 'Cyan only' },
            { value: 'cv',   label: 'Cyan + violet' },
          ]}
          onChange={v => setTweak('palette', v)}
        />
      </TweaksPanel>
    </>
  );
}

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