function Hero() {
  return (
    <section id="top" className="relative min-h-[calc(100vh-5rem)] overflow-hidden border-b border-[var(--neutral-800)]">
      {/* Grid background */}
      <div className="absolute inset-0 grid-bg opacity-30"></div>
      {/* Radial flame glow */}
      <div
        className="absolute -right-40 -top-40 w-[700px] h-[700px] rounded-full pointer-events-none"
        style={{ background: 'radial-gradient(circle, rgba(232,66,10,0.18) 0%, transparent 60%)' }}
      ></div>

      {/* Vertical side label */}
      <div className="hidden lg:flex absolute left-6 top-1/2 -translate-y-1/2 flex-col items-center gap-4 text-[var(--neutral-400)] z-10">
        <span className="v-text eyebrow">QUANT × AI × RESEARCH / EST. 2007</span>
        <span className="w-px h-24 bg-[var(--neutral-700)]"></span>
        <span className="font-display text-xs text-[var(--neutral-200)]">VM</span>
      </div>

      <div className="relative max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20 pt-12 md:pt-16 pb-20">
        <div className="flex items-center gap-3 mb-8">
          <span className="w-2 h-2 rounded-full bg-[var(--flame-500)] inline-block animate-pulse"></span>
          {/* <span className="eyebrow text-[var(--neutral-200)]">Available · Dubai / Bangalore · UAE Visa Eligible</span> */}
          <span className="eyebrow text-[var(--neutral-200)]">Available · Bangalore</span>
        </div>

        {/* Headline + portrait grid */}
        <div className="grid grid-cols-12 gap-6 md:gap-8 items-start">
          <div className="col-span-12 lg:col-span-8">
            <h1 className="headline text-[52px] sm:text-[72px] md:text-[92px] lg:text-[112px] xl:text-[124px] text-[var(--neutral-0)]">
              AI <span className="text-[var(--flame-500)]">/</span> Venture
              <br />
              Built for <span className="italic font-light tracking-tight normal-case font-display text-[0.62em]">production.</span>
            </h1>

            <div className="mt-10 max-w-xl">
              <div className="flex items-center gap-4 mb-5">
                <span className="w-12 h-px bg-[var(--flame-500)]"></span>
                <span className="eyebrow text-[var(--flame-500)]">// The bridge</span>
              </div>
              <p className="text-base md:text-lg text-[var(--neutral-200)] leading-relaxed">
                I build the rare bridge between <span className="text-[var(--neutral-0)] font-semibold">research</span> and <span className="text-[var(--neutral-0)] font-semibold">production AI</span> — models that reach traders, agents that reach users, and systems that actually ship.
              </p>
              <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-[var(--neutral-400)]">
                <span className="eyebrow">Ph.D. Economics · IIM Bangalore</span>
                <span className="w-1 h-1 rounded-full bg-[var(--flame-500)]"></span>
                <span className="eyebrow">B.Tech · IIT Delhi</span>
              </div>
            </div>
          </div>

          {/* Portrait — hero feature */}
          <div className="col-span-12 lg:col-span-4 relative">
            <div className="portrait-frame portrait-flame aspect-[3/4] lg:aspect-[3/4.4] w-full">
              {/* Blurred, themed backdrop fills empty space around the contained photo */}
              <img
                src="assets/portrait-3.png"
                alt=""
                aria-hidden="true"
                className="absolute inset-0 w-full h-full object-cover scale-110 blur-2xl brightness-[0.35]"
              />
              <div
                className="absolute inset-0"
                style={{ background: 'radial-gradient(circle at 50% 35%, rgba(232,66,10,0.18) 0%, transparent 60%), linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.55) 100%)' }}
              ></div>
              {/* Foreground photo — full impact, uncropped */}
              <img
                src="assets/portrait-3.png"
                alt="Dr. Vipul Mathur"
                className="portrait absolute inset-0 w-full h-full object-contain object-center"
              />
              <div className="portrait-tint"></div>
              {/* Caption overlay */}
              <div className="absolute bottom-0 left-0 right-0 p-5 flex items-end justify-between">
                <div>
                  <div className="eyebrow text-[var(--flame-500)]">// Subject</div>
                  <div className="font-display text-sm font-bold text-[var(--neutral-0)] uppercase tracking-tight">V. Mathur</div>
                </div>
                <div className="text-right">
                  <div className="eyebrow text-[var(--neutral-400)]">Frame</div>
                  <div className="font-mono-tab text-xs text-[var(--neutral-100)]">001 / 003</div>
                </div>
              </div>
              {/* Corner ticks */}
              <div className="absolute top-3 left-3 eyebrow text-[10px] text-[var(--neutral-0)]/70">REC ●</div>
              <div className="absolute top-3 right-3 eyebrow text-[10px] text-[var(--neutral-0)]/70 font-mono-tab">B/W · ISO 800</div>
            </div>
          </div>
        </div>

        <div className="grid md:grid-cols-12 gap-8 mt-12 md:mt-16">
          <div className="md:col-span-5">
            <div className="border-l-2 border-[var(--flame-500)] pl-6">
              <p className="eyebrow text-[var(--flame-500)] mb-3">/ 01 — Who</p>
              <p className="text-lg md:text-xl text-[var(--neutral-100)] leading-relaxed">
                <span className="font-bold text-[var(--neutral-0)]">Dr. Vipul Mathur.</span> AI Entrepreneur, quantitative researcher with A* publications in finance, faculty at India's top B-school, and founder of an AI engineering studio.
                Ph.D. Economics, <span className="text-[var(--neutral-400)]">IIM Bangalore</span>. B.Tech, <span className="text-[var(--neutral-400)]">IIT Delhi</span>.
              </p>
            </div>
          </div>
          <div className="md:col-span-4 md:col-start-8">
            <p className="eyebrow text-[var(--neutral-400)] mb-3">/ 02 — What</p>
            <p className="text-sm md:text-base text-[var(--neutral-200)] leading-relaxed">
              Volatility modeling. Options strategy. Alpha generation. LLM systems, RAG pipelines, agentic workflows, voice AI — shipped to production, taught to thousands.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#projects" className="bg-[var(--flame-500)] text-[var(--neutral-0)] px-6 py-3 text-xs font-bold uppercase tracking-widest hover:bg-[var(--flame-400)] transition-all">
                See Projects →
              </a>
              <a href="#experience" className="border border-[var(--neutral-700)] text-[var(--neutral-100)] px-6 py-3 text-xs font-bold uppercase tracking-widest hover:border-[var(--neutral-0)] transition-all">
                Track Record
              </a>
            </div>
          </div>
        </div>

        {/* Stat bar */}
        <div className="mt-24 grid grid-cols-2 md:grid-cols-4 border-t border-[var(--neutral-800)] pt-8 gap-y-8">
          {[
            { k: '15+',    v: 'Years across academia, banking & AI' },
            { k: 'A*',     v: 'ABDC top-tier publication' },
            { k: '1500+',  v: 'Students & professionals taught' },
            /* { k: 'AED 1.8M', v: 'UAE training pipeline closed' }, */
            { k: '4+',     v: 'AI systems shipped to production' },
          ].map((s,i)=>(
            <div key={i} className="px-2 md:px-6 border-r last:border-r-0 border-[var(--neutral-800)]">
              <div className="font-display font-bold text-3xl md:text-5xl text-[var(--neutral-0)]">{s.k}</div>
              <div className="text-[11px] uppercase tracking-widest text-[var(--neutral-400)] mt-2 leading-snug">{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom marquee */}
      <div className="relative border-t border-[var(--neutral-800)] bg-[var(--neutral-900)] py-5 overflow-hidden">
        <div className="marquee-track text-[var(--neutral-200)]">
          {Array.from({length:2}).map((_,i)=>(
            <span key={i} className="inline-flex items-center gap-12">
              {['Volatility Modeling','Options Trading','Alpha Generation','LLM Systems','RAG Pipelines','Agentic AI','Voice AI','Econometrics','Portfolio Optimization','TradingAgents'].map(t=>(
                <span key={t} className="inline-flex items-center gap-12 eyebrow text-base tracking-[0.3em]">
                  <span>{t}</span>
                  <span className="w-2 h-2 rounded-full bg-[var(--flame-500)]"></span>
                </span>
              ))}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;