// App shell — theme, layout glue, mount point.
// Components live in js/{core,layout,sections,dashboard}/.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  accentTheme: 'cyan',
  showScanlines: true,
}/*EDITMODE-END*/;

const H_ACCENT_MAP = {
  cyan: {
    accent: '#00e8ff', hover: '#66f3ff',
    dim: 'rgba(0,232,255,0.05)', border: 'rgba(0,232,255,0.18)',
    borderSubtle: 'rgba(0,232,255,0.06)', borderLight: 'rgba(0,232,255,0.12)',
    glow: 'rgba(0,232,255,0.35)',
  },
  matrix: {
    accent: '#00ff41', hover: '#33ff6b',
    dim: 'rgba(0,255,65,0.05)', border: 'rgba(0,255,65,0.18)',
    borderSubtle: 'rgba(0,255,65,0.06)', borderLight: 'rgba(0,255,65,0.12)',
    glow: 'rgba(0,255,65,0.3)',
  },
  amber: {
    accent: '#ffb000', hover: '#ffc940',
    dim: 'rgba(255,176,0,0.05)', border: 'rgba(255,176,0,0.18)',
    borderSubtle: 'rgba(255,176,0,0.06)', borderLight: 'rgba(255,176,0,0.12)',
    glow: 'rgba(255,176,0,0.3)',
  },
  red: {
    accent: '#ff3333', hover: '#ff6666',
    dim: 'rgba(255,51,51,0.05)', border: 'rgba(255,51,51,0.18)',
    borderSubtle: 'rgba(255,51,51,0.06)', borderLight: 'rgba(255,51,51,0.12)',
    glow: 'rgba(255,51,51,0.3)',
  },
};

function applyHackerTheme(accentTheme, showScanlines) {
  const a = H_ACCENT_MAP[accentTheme] || H_ACCENT_MAP.cyan;
  const r = document.documentElement.style;
  r.setProperty('--accent', a.accent);
  r.setProperty('--accent-hover', a.hover);
  r.setProperty('--accent-dim', a.dim);
  r.setProperty('--accent-border', a.border);
  r.setProperty('--accent-glow', a.glow);
  r.setProperty('--border', a.borderSubtle);
  r.setProperty('--border-light', a.borderLight);
  document.body.style.setProperty('--scanline-opacity', showScanlines ? '1' : '0');
}

function HackerCTA() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (email) setSubmitted(true); };

  return (
    <section id="waitlist" className="section section-surface">
      <div className="container">
        <h2 style={{
          fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 700,
          color: 'var(--text-bright)', marginBottom: 16,
          animation: 'glitch 6s infinite',
        }}>
          {'>'} your next LLM incident is preventable.
        </h2>
        <p style={{ fontSize: 14, color: 'var(--text-secondary)', marginBottom: 32, fontFamily: 'var(--font-mono)' }}>
          join the waitlist. get early access. lock founding pricing.
        </p>

        {submitted ? (
          <div style={{
            display: 'inline-block', padding: '10px 20px', border: '1px solid var(--accent-border)',
            fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)',
          }}>
            [OK] queued. we'll be in touch.
          </div>
        ) : (
          <form onSubmit={submit} style={{ display: 'flex', gap: 8, maxWidth: 440 }}>
            <input type="email" required placeholder="user@company.com" value={email}
              onChange={e => setEmail(e.target.value)}
              style={{
                flex: 1, padding: '10px 14px', background: 'var(--bg-code)',
                border: '1px solid var(--border-light)',
                color: 'var(--text-primary)', fontFamily: 'var(--font-mono)', fontSize: 13,
                outline: 'none',
              }}
            />
            <button type="submit" className="btn btn-primary">submit</button>
          </form>
        )}

        <div style={{
          marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)',
        }}>
          <span className="sp">$</span> pip install {SITE_CONFIG.pipPackage}{' '}
          <a href={SITE_CONFIG.pypiUrl} target="_blank" rel="noopener noreferrer"
            style={{ color: 'var(--text-secondary)', textDecoration: 'none' }}>
            ← free SDK v{SITE_CONFIG.sdkVersion}
          </a>
        </div>
      </div>
    </section>
  );
}

function HackerFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 12,
        }}>
          <span style={{ color: 'var(--text-muted)' }}>© 2026 unplug · apache 2.0 (sdk)</span>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href={SITE_CONFIG.docsUrl} target="_blank" rel="noopener noreferrer">docs</a>
            <a href={SITE_CONFIG.githubUrl} target="_blank" rel="noopener noreferrer">github</a>
            <a href={`mailto:${SITE_CONFIG.contactEmail}`}>contact</a>
          </div>
          <span style={{ color: 'var(--text-muted)' }}>built for devs who ship AI</span>
        </div>
      </div>
    </footer>
  );
}

function HackerApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyHackerTheme(t.accentTheme, t.showScanlines);
  }, [t.accentTheme, t.showScanlines]);

  React.useEffect(() => {
    const style = document.createElement('style');
    style.id = 'scanline-toggle';
    style.textContent = `body::after { opacity: ${t.showScanlines ? 1 : 0} !important; }`;
    const old = document.getElementById('scanline-toggle');
    if (old) old.remove();
    document.head.appendChild(style);
  }, [t.showScanlines]);

  return (
    <>
      <GlitchBackground />
      {/* Hook */}
      <HackerNav />
      <HackerHero />
      <HackerBeforeAfter />
      <HackerBeforeAfterPanels />

      {/* Problem — live scanner archived in live-scanner-archived.jsx until API is live */}
      <HackerProblem />

      {/* Product story */}
      <HackerArch />
      <HackerFeatures />
      <MultiLangSDK />
      <HackerDeploy />

      {/* API reference */}
      <APIPlayground />
      <ThreatGallery />

      {/* Platform preview (mock — real dashboard is a separate app) */}
      <HackerInteractiveDashboard />
      <AgentMonitoring />

      {/* Conversion */}
      <HackerMarquee />
      <HackerRoadmap />
      <HackerPricingTable />
      <HackerCTA />
      <HackerFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Terminal">
          <TweakRadio label="Color" value={t.accentTheme}
            options={['cyan', 'matrix', 'amber', 'red']}
            onChange={v => setTweak('accentTheme', v)} />
          <TweakToggle label="CRT scanlines" value={t.showScanlines}
            onChange={v => setTweak('showScanlines', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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