/* Main App — composition, HUD, hero, boot sequencing, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": 0.7,
  "speed": 0.85,
  "intensity": 0.75,
  "blur": 2.5,
  "veil": 0.55,
  "crt": false,
  "sound": false
}/*EDITMODE-END*/;

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

  // Push tweaks into the code-rain engine
  React.useEffect(() => {
    if (window.__matrixRain) {
      window.__matrixRain.density = t.density;
      window.__matrixRain.speed = t.speed;
      window.__matrixRain.intensity = t.intensity;
      if (window.__matrixRainResize) window.__matrixRainResize();
    }
  }, [t.density, t.speed, t.intensity]);

  // CRT overlay toggle
  React.useEffect(() => {
    const el = document.getElementById('crt-overlay');
    if (el) el.classList.toggle('active', !!t.crt);
  }, [t.crt]);

  // Rain blur — apply as CSS filter on the canvas
  React.useEffect(() => {
    const rain = document.getElementById('matrix-rain');
    if (rain) rain.style.filter = `blur(${t.blur}px) saturate(0.9)`;
  }, [t.blur]);

  // Soft-background veil opacity
  React.useEffect(() => {
    const veil = document.querySelector('.rain-veil');
    if (veil) veil.style.opacity = String(t.veil);
  }, [t.veil]);

  // Typing sound fx (optional, synthesized — no external asset)
  const audioCtxRef = React.useRef(null);
  const playBeep = React.useCallback((freq = 800, dur = 0.04) => {
    if (!t.sound) return;
    try {
      if (!audioCtxRef.current) audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
      const ctx = audioCtxRef.current;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'square';
      osc.frequency.value = freq + Math.random() * 200;
      gain.gain.value = 0.015;
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
      osc.connect(gain).connect(ctx.destination);
      osc.start();
      osc.stop(ctx.currentTime + dur);
    } catch(e) {}
  }, [t.sound]);

  React.useEffect(() => {
    if (!t.sound) return;
    const listener = () => playBeep(600 + Math.random() * 600, 0.03);
    document.addEventListener('keydown', listener);
    return () => document.removeEventListener('keydown', listener);
  }, [t.sound, playBeep]);

  // Re-scan reveals on mount
  React.useEffect(() => {
    if (window.__scanReveal) {
      setTimeout(() => window.__scanReveal(), 50);
    }
  }, []);

  return (
    <React.Fragment>
      {/* HUD — top bar */}
      <div className="hud">
        <div className="hud-left">
          <span className="dot"></span>
          <span>SYS://<span className="id">omar_bandial</span>.portfolio</span>
        </div>
        <div className="hud-mid">
          <a href="#home"       className="nav-link">home</a>
          <a href="#about"      className="nav-link">about</a>
          <a href="#experience" className="nav-link">experience</a>
          <a href="#projects"   className="nav-link">projects</a>
          <a href="#skills"     className="nav-link">skills</a>
          <a href="#education"  className="nav-link">education</a>
          <a href="#contact"    className="nav-link">contact</a>
        </div>
        <div className="hud-right">
          <span>NET: <span style={{color: 'var(--green-bright)'}}>ONLINE</span></span>
          <span id="hud-time">--:--:--</span>
        </div>
      </div>

      {/* Side rails */}
      <div className="rail left">
        <div className="vtext">// MATRIX.v2.6 — FRONTEND OPERATIVE</div>
        <div className="tick"></div>
        <div className="vtext">LHE · 31.5204°N 74.3587°E</div>
      </div>
      <div className="rail right">
        <div className="vtext">BUILD 2026.04 — REACT · CANVAS · WEB AUDIO</div>
        <div className="tick"></div>
        <div className="vtext">SCROLL TO DESCEND ↓</div>
      </div>

      <div className="app">
        {/* ─── Hero ─── */}
        <section id="home" className="portfolio-section hero" data-screen-label="01 Hero">
          <div className="hero-layout">
            <div className="hero-content hero-content--in">
                <div className="section-label" style={{marginBottom: 20}}>
                  <span className="bracket">//</span> 01 — <span>IDENTITY</span>
                </div>
                <h1 className="hero-name">
                  <span data-decrypt="MUHAMMAD">MUHAMMAD</span>{' '}
                  <span className="accent" data-decrypt="OMAR">OMAR</span>{' '}
                  <span data-decrypt="BANDIAL">BANDIAL</span>
                </h1>
                <p className="hero-tagline">
                  <span className="hl">Data Scientist</span> & <span className="hl">Frontend Engineer</span> —
                  building AI systems that actually ship. I work at the seam between
                  LLMs and interfaces, where <span className="hl">models become products</span> people use every day.
                </p>

                <div className="hero-meta">
                  <span className="item">LAHORE · PAKISTAN</span>
                  <span className="item">BS DATA SCIENCE · FAST NUCES</span>
                  <span className="item">DEAN'S LIST × 3</span>
                  <span className="item">AVAILABLE Q3 2026</span>
                </div>

                <div className="hero-ctas">
                  <a className="btn primary" href="#projects">
                    <span className="corner tl"></span><span className="corner tr"></span>
                    <span className="corner bl"></span><span className="corner br"></span>
                    ENTER THE MATRIX <span className="arrow">→</span>
                  </a>
                  <a className="btn" href="mailto:omar.bandial@gmail.com">
                    <span className="corner tl"></span><span className="corner tr"></span>
                    <span className="corner bl"></span><span className="corner br"></span>
                    ESTABLISH_CONTACT()
                  </a>
                  <a className="btn" href="Omar_Bandial_resume_2026.pdf" download>
                    <span className="corner tl"></span><span className="corner tr"></span>
                    <span className="corner bl"></span><span className="corner br"></span>
                    DOWNLOAD.pdf
                  </a>
                </div>
            </div>

            <div className="hero-avatar">
              <div className="terminal-card">
                <div className="terminal-hd">
                  <div className="dots"><span></span><span></span><span></span></div>
                  <div className="title">~/omar/identity.json</div>
                  <div className="ctrl">— □ ×</div>
                </div>
                <div className="terminal-body">
                  <div className="line"><span className="c">// decrypted user record</span></div>
                  <div className="line">&#123;</div>
                  <div className="line">  <span className="k">"handle"</span>: <span className="s">"omar_bandial"</span>,</div>
                  <div className="line">  <span className="k">"role"</span>: <span className="s">"data scientist / Ai-ML engineer"</span>,</div>
                  <div className="line">  <span className="k">"location"</span>: <span className="s">"Lahore, PK"</span>,</div>
                  <div className="line">  <span className="k">"years_active"</span>: <span className="n">4</span>,</div>
                  <div className="line">  <span className="k">"current_mission"</span>: [</div>
                  <div className="line">    <span className="s">"AI Interviewer (FYP)"</span>,</div>
                  <div className="line">    <span className="s">"Hunting new roles"</span></div>
                  <div className="line">  ],</div>
                  <div className="line">  <span className="k">"stack_bias"</span>: <span className="s">"React + FastAPI + LLMs"</span>,</div>
                  <div className="line">  <span className="k">"dean_honors"</span>: <span className="n">3</span>,</div>
                  <div className="line">  <span className="k">"coffee_per_sprint"</span>: <span className="n">∞</span></div>
                  <div className="line">&#125;</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <AboutSection />
        <ExperienceSection />
        <ProjectsSection />
        <SkillsSection />
        <EducationSection />
        <ContactSection />
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="TWEAKS">
        <TweakSection label="CODE RAIN" />
        <TweakSlider  label="Density"   value={t.density}   min={0.3} max={2.0} step={0.1}
                      onChange={(v) => setTweak('density', v)} />
        <TweakSlider  label="Speed"     value={t.speed}     min={0.3} max={2.5} step={0.1}
                      onChange={(v) => setTweak('speed', v)} />
        <TweakSlider  label="Intensity" value={t.intensity} min={0.3} max={1.5} step={0.05}
                      onChange={(v) => setTweak('intensity', v)} />
        <TweakSlider  label="Blur"      value={t.blur}      min={0} max={8} step={0.5} unit="px"
                      onChange={(v) => setTweak('blur', v)} />
        <TweakSlider  label="Soft BG"   value={t.veil}      min={0} max={1} step={0.05}
                      onChange={(v) => setTweak('veil', v)} />

        <TweakSection label="PRESENTATION" />
        <TweakToggle label="CRT scanlines"   value={t.crt}   onChange={(v) => setTweak('crt', v)} />
        <TweakToggle label="Keystroke audio" value={t.sound} onChange={(v) => setTweak('sound', v)} />

        <TweakSection label="PRESETS" />
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6}}>
          <TweakButton onClick={() => {
            setTweak('density', 0.5); setTweak('speed', 0.6); setTweak('intensity', 0.55);
            setTweak('blur', 4); setTweak('veil', 0.75); setTweak('crt', false);
          }}>SUBTLE</TweakButton>
          <TweakButton onClick={() => {
            setTweak('density', 0.7); setTweak('speed', 0.85); setTweak('intensity', 0.75);
            setTweak('blur', 2.5); setTweak('veil', 0.55); setTweak('crt', false);
          }}>DEFAULT</TweakButton>
          <TweakButton onClick={() => {
            setTweak('density', 1.6); setTweak('speed', 1.6); setTweak('intensity', 1.3);
            setTweak('blur', 0); setTweak('veil', 0.2); setTweak('crt', true);
          }}>FULL</TweakButton>
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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