const { useState: useS } = React;

/* ========== About ========== */
function SectionHeader({ num, kicker, title, sub }) {
  return (
    <div className="grid md:grid-cols-12 gap-6 mb-12 md:mb-20">
      <div className="md:col-span-5">
        <div className="flex items-center gap-4 mb-4">
          <span className="section-num text-sm">/ {num}</span>
          <span className="w-12 h-px bg-[var(--flame-500)]"></span>
          <span className="eyebrow text-[var(--flame-500)]">{kicker}</span>
        </div>
        <h2 className="headline text-4xl md:text-6xl lg:text-7xl text-[var(--neutral-0)]">{title}</h2>
      </div>
      {sub && (
        <div className="md:col-span-5 md:col-start-8 md:pt-4">
          <p className="text-base md:text-lg text-[var(--neutral-200)] leading-relaxed">{sub}</p>
        </div>
      )}
    </div>
  );
}

function About() {
  return (
    <section id="about" className="relative border-b border-[var(--neutral-800)] py-24 md:py-32">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <SectionHeader
          num="01"
          kicker="About"
          title={<>From <em className="not-italic text-[var(--flame-500)]">first principles</em><br/>to production.</>}
          /* sub="Research-to-production mindset built across three decades of compounding rigor — an IIT engineer, an IIM economist, an A* finance researcher, a UAE quant trainer, and now a founder shipping AI systems that move from notebook to revenue." */
          sub="Research-to-production mindset built across three decades of compounding rigor — an IIT engineer, an IIM economist, an A* finance researcher, and now a founder shipping AI systems that move from notebook to revenue."
        />

        {/* Portrait + bio panel */}
        <div className="grid lg:grid-cols-12 gap-px bg-[var(--neutral-800)] border border-[var(--neutral-800)] mb-px">
          <div className="lg:col-span-5 relative min-h-[420px] portrait-flame overflow-hidden bg-[var(--neutral-900)]">
            {/* Blurred, themed backdrop fills space around the zoomed-out photo */}
            <img
              src="assets/portrait-4.jpg"
              alt=""
              aria-hidden="true"
              className="absolute inset-0 w-full h-full object-cover scale-110 blur-2xl brightness-[0.35]"
            />
            {/* Foreground photo — zoomed out to ~80% so it fits uncropped */}
            <img
              src="assets/portrait-4.jpg"
              alt="Dr. Vipul Mathur"
              className="portrait absolute inset-0 w-full h-full object-contain object-center scale-[0.8]"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-[var(--neutral-950)]/40 via-transparent to-[var(--neutral-950)]/60"></div>
            <div className="absolute top-5 left-5 eyebrow text-[var(--neutral-0)]/80">// Frame 002</div>
            <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between">
              <div className="font-display text-xs font-bold text-[var(--neutral-0)] uppercase">Bangalore, 2025</div>
              <div className="font-mono-tab text-[10px] text-[var(--neutral-200)]">35mm · B/W</div>
            </div>
          </div>
          <div className="lg:col-span-7 bg-[var(--neutral-950)] p-8 md:p-12 flex flex-col justify-center">
            <div className="eyebrow text-[var(--flame-500)] mb-4">// Bio · the short version</div>
            <p className="text-lg md:text-xl text-[var(--neutral-100)] leading-relaxed mb-6">
              I spend my days at the seam between <span className="text-[var(--neutral-0)] font-semibold">quantitative research</span> and <span className="text-[var(--neutral-0)] font-semibold">production AI</span> — building options-trading sandboxes, voice-AI interviewers, and RAG agents for alternative data.
            </p>
            <p className="text-sm md:text-base text-[var(--neutral-200)] leading-relaxed">
              The same hands that wrote a <span className="text-[var(--flame-500)]">Journal of Corporate Finance</span> paper on debt misallocation now ship FastAPI services, fine-tune small models, and teach 1,000+ students how the machinery actually works under the hood.
            </p>
            <div className="mt-8 flex flex-wrap gap-x-8 gap-y-3 pt-6 border-t border-[var(--neutral-800)]">
              {/* <BioStat label="Based" value="Dubai · Bangalore" /> */}
              <BioStat label="Based" value="Bangalore" />
              {/* <BioStat label="Visa" value="UAE Eligible" /> */}
              <BioStat label="Languages" value="EN · HI" />
              <BioStat label="Currently" value="Founder, Ailadyn AI" />
            </div>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-px bg-[var(--neutral-800)] border border-[var(--neutral-800)] border-t-0">
          {[
            { icon:'solar:graph-up-linear', t:'Quant Finance', d:'Volatility surfaces, options pricing, alpha research, portfolio construction. Bloomberg, Alpaca, EODHD, Tastytrade.' },
            { icon:'solar:cpu-bolt-linear', t:'AI Engineering', d:'RAG, agents, voice AI. LangGraph, CrewAI, MCP. Whisper, ElevenLabs, Deepgram, LiveKit. Latency-aware, eval-driven.' },
            /* { icon:'solar:user-speak-linear', t:'Teaching & Comms', d:'500+ MBAs at IIM Calcutta, 1000+ undergrads at IIM Bangalore, 100+ UAE professionals via Ethraa Emiratization.' }, */
            { icon:'solar:user-speak-linear', t:'Teaching & Comms', d:'500+ MBAs at IIM Calcutta, 1000+ undergrads at IIM Bangalore.' },
          ].map((c,i)=>(
            <div key={i} className="bg-[var(--neutral-950)] p-8 md:p-10 group hover:bg-[var(--neutral-900)] transition-colors">
              <div className="text-[var(--flame-500)] mb-6">
                <iconify-icon icon={c.icon} width="40"></iconify-icon>
              </div>
              <h3 className="font-display text-base font-bold uppercase mb-3 text-[var(--neutral-0)]">{c.t}</h3>
              <p className="text-sm text-[var(--neutral-200)] leading-relaxed">{c.d}</p>
              <div className="mt-8 flex items-center gap-2 text-[var(--neutral-400)] group-hover:text-[var(--flame-500)] transition-colors">
                <span className="eyebrow">0{i+1}</span>
                <span className="flex-1 h-px bg-current opacity-30"></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========== Expertise ========== */
function BioStat({ label, value }) {
  return (
    <div>
      <div className="eyebrow text-[var(--neutral-400)] mb-1">{label}</div>
      <div className="text-sm text-[var(--neutral-0)] font-semibold">{value}</div>
    </div>
  );
}

function Expertise() {
  const stacks = [
    {
      label:'AI Engineering',
      groups:[
        { h:'LLM Systems',   items:['RAG pipelines','Context engineering','Tool calling','FAISS / vector search','Eval & hallucination control'] },
        { h:'Agentic',       items:['Claude Code','LangGraph','CrewAI','OpenClaw / MCP / ACP','Harness engineering'] },
        { h:'Voice AI',      items:['Whisper STT','Deepgram / ElevenLabs / Cartesia','LiveKit, Pipecat, WebRTC','Low-latency streaming'] },
        { h:'Backend',       items:['Python — FastAPI / Flask','Async + task queues','Docker, Firebase, Supabase','Postgres, MySQL, Redis'] },
      ]
    },
    {
      label:'Quantitative Finance',
      groups:[
        { h:'Options',        items:['Black-Scholes, Heston, Jump-diffusion','Vol surface · IV/RV edge · VRP','Greeks: delta-gamma, vanna, volga','Kelly sizing · pin risk · charm decay'] },
        { h:'Alpha Research', items:['Signal research · backtest','Walk-forward · OOS','Overfitting prevention','Statistical arbitrage'] },
        { h:'Portfolio',      items:['Fama-French multi-factor','Mean-Variance · Black-Litterman · HRP','VaR / CVaR · TCA','TWAP / VWAP execution'] },
        { h:'Econometrics',   items:['ARIMA · GARCH · VAR','IV · DiD · RDD','Panel: Fixed / Random Effects','Bayesian · Monte Carlo'] },
      ]
    }
  ];

  const [tab, setTab] = useS(0);
  const active = stacks[tab];

  return (
    <section id="expertise" className="relative border-b border-[var(--neutral-800)] py-24 md:py-32 bg-[var(--neutral-900)]">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <SectionHeader
          num="02"
          kicker="Expertise"
          title={<>Two disciplines.<br/><span className="text-[var(--flame-500)]">One operator.</span></>}
          sub="A deliberate stack — built so that quant models reach traders, and AI agents reach paying users. Tools below are working tools, not buzzwords."
        />

        {/* Tabs */}
        <div className="flex flex-wrap gap-2 mb-10 border-b border-[var(--neutral-800)]">
          {stacks.map((s,i)=>(
            <button
              key={i}
              onClick={()=>setTab(i)}
              className={`px-6 py-4 text-xs font-bold uppercase tracking-widest transition-all border-b-2 -mb-px ${
                tab===i
                  ? 'text-[var(--neutral-0)] border-[var(--flame-500)]'
                  : 'text-[var(--neutral-400)] border-transparent hover:text-[var(--neutral-100)]'
              }`}
            >
              <span className="text-[var(--flame-500)] mr-2">/{(i+1).toString().padStart(2,'0')}</span>
              {s.label}
            </button>
          ))}
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-[var(--neutral-800)] border border-[var(--neutral-800)]">
          {active.groups.map((g,i)=>(
            <div key={i} className="bg-[var(--neutral-950)] p-6 md:p-8 min-h-[280px]">
              <div className="flex items-baseline justify-between mb-5">
                <h4 className="font-display text-sm font-bold uppercase text-[var(--neutral-0)]">{g.h}</h4>
                <span className="section-num text-[10px]">0{i+1}</span>
              </div>
              <ul className="flex flex-col gap-2">
                {g.items.map(it=>(
                  <li key={it} className="text-sm text-[var(--neutral-200)] flex items-start gap-2">
                    <span className="text-[var(--flame-500)] mt-1.5 w-1 h-1 rounded-full bg-current shrink-0"></span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========== Experience ========== */
function Experience() {
  const roles = [
    { year:'2024 — Now', role:'Founder & Chief Engineer', org:'Ailadyn AI', loc:'AI Consulting & Products',
      points:[
        'Algorithmic Trading Sandbox — browser-based algo workshop for graduate commerce students. React, Vite, Node, Recharts, Firebase.',
        'Voice AI Interviewer — production-grade interviewer with real-time feedback, deployed for college admissions & sales hiring.',
        'Workshops: Build nano-GPT, Build OpenClaw from scratch — transformers, SFT, harness, memory, tools, gateways.'
      ] },
    { year:'2025 — Now', role:'Visiting Faculty, Economics & Finance', org:'IIM Bangalore', loc:'India',
      points:[
        'First-principles macroeconomics for 1000+ undergraduates.',
        'Designed an executive programme on macro-finance risk: FRED dashboards, Bayesian macro-to-hedging, AI-native simulation capstone.'
      ] },
    /* { year:'2023 — 2024', role:'Manager, Investments & Business Finance', org:'Emirates Institute of Finance', loc:'Dubai & Abu Dhabi',
      points:[
        'Closed Central Bank of the UAE CFA cohort; built AED 1.2–1.8M revenue pipeline across the UAE financial sector.',
        'Led Quantitative Finance pathway for 100+ Emirati professionals under Ethraa Emiratization — 700+ training hours.'
      ] }, */
    { year:'2016 — 2023', role:'Assistant Professor — Economics & Finance', org:'IIM Calcutta', loc:'India',
      points:[
        'Published ABDC A* research in Journal of Corporate Finance on debt misallocation; working paper for Review of Finance.',
        'Designed quantitative finance & derivatives courses for 500+ MBAs. Professor of the Year (2019).'
      ] },
    { year:'2016', role:'FX & Rates Quantitative Strategist', org:'Yes Bank — Treasury', loc:'India',
      points:[
        'Signal research for FX (USD/INR, EUR/INR) and rates (IRS, OIS, 2Y–10Y curve) on Bloomberg L2 data.',
        'Built risk framework: VaR models, stress testing.'
      ] },
    { year:'2010 — 2011', role:'Systematic Researcher & Independent Trader', org:'Self-directed', loc:'India',
      points:[
        'Nifty / BankNifty options alpha: delta-neutral vol arb, calendars, iron condors, Kelly sizing, dynamic stops.'
      ] },
    { year:'2009 — 2010', role:'Carbon Markets Project Assistant', org:'JP Morgan Chase & Co.', loc:'United Kingdom',
      points:[
        'CDM issuance pipelines, tCO₂e credit forecasting, secondary-market trade-support analytics.'
      ] },
    { year:'2007 — 2009', role:'Consulting Analyst', org:'ICF International', loc:'India & Fairfax, US',
      points:[
        'US wholesale power-market analytics & forecasting; built internal "Beacon" tool for utility / regulatory engagements.'
      ] },
  ];

  return (
    <section id="experience" className="relative border-b border-[var(--neutral-800)] py-24 md:py-32">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <SectionHeader
          num="03"
          kicker="Experience"
          title={<>Track record,<br/>not a timeline.</>}
          sub="Eight roles across two continents, three industries, and one through-line: turning hard ideas — derivatives, panel data, transformers, voice agents — into things people use and pay for."
        />

        <div className="border-t border-[var(--neutral-800)]">
          {roles.map((r,i)=>(
            <ExpRow key={i} {...r} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ExpRow({ year, role, org, loc, points, idx }) {
  const [open, setOpen] = useS(idx===0);
  return (
    <div className="border-b border-[var(--neutral-800)] group">
      <button
        onClick={()=>setOpen(o=>!o)}
        className="w-full text-left py-6 md:py-8 grid grid-cols-12 gap-4 items-center hover:bg-[var(--neutral-900)] transition-colors px-2 md:px-6"
      >
        <div className="col-span-12 md:col-span-2 eyebrow text-[var(--flame-500)]">{year}</div>
        <div className="col-span-12 md:col-span-5">
          <div className="font-display text-lg md:text-xl font-bold text-[var(--neutral-0)] uppercase tracking-tight">{role}</div>
        </div>
        <div className="col-span-10 md:col-span-4 text-sm text-[var(--neutral-200)]">
          <span className="text-[var(--neutral-0)]">{org}</span>
          <span className="text-[var(--neutral-400)]"> · {loc}</span>
        </div>
        <div className="col-span-2 md:col-span-1 flex justify-end text-[var(--neutral-400)] group-hover:text-[var(--flame-500)] transition-colors">
          <iconify-icon icon={open?'solar:minus-circle-linear':'solar:add-circle-linear'} width="28"></iconify-icon>
        </div>
      </button>
      {open && (
        <div className="pb-8 px-2 md:px-6 grid grid-cols-12 gap-4">
          <div className="col-span-12 md:col-span-7 md:col-start-3">
            <ul className="flex flex-col gap-3">
              {points.map((p,i)=>(
                <li key={i} className="flex gap-3 text-sm text-[var(--neutral-200)] leading-relaxed">
                  <span className="text-[var(--flame-500)] font-mono-tab text-xs mt-1">0{i+1}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </div>
  );
}

/* ========== Research ========== */
function Research() {
  const pubs = [
    { tag:'A*', cat:'JOURNAL', title:'Misallocation of Debt and Aggregate Productivity', venue:'Journal of Corporate Finance', year:'2023' },
    { tag:'A',  cat:'JOURNAL', title:'Financial Market Segmentation & Choice of Exchange Rate Regimes', venue:'Economics Letters', year:'2016' },
    { tag:'A*', cat:'WORKING', title:'Expectations, Credit Growth, and Equity Return', venue:'Prepared for Review of Finance', year:'2026' },
    { tag:'',   cat:'POLICY',  title:'Bias in Banking', venue:'World Bank', year:'2021' },
    { tag:'',   cat:'OP-ED',   title:'Towards Solving the Lockdown Conundrum', venue:'Forbes', year:'2020' },
    { tag:'',   cat:'BOOK',    title:'Algorithmic Trading for Retail Traders', venue:'In Progress', year:'—' },
    { tag:'',   cat:'BOOK',    title:'Intuitive Option Theory for Retail Traders', venue:'In Progress', year:'—' },
  ];

  const honors = [
    'ABDC A* Publication — top field journal',
    'Best Paper Award · Reserve Bank of India Conference',
    'Professor of the Year · IIM Calcutta (2019, voted by 500+ MBAs)',
    'Australia Economics Society Scholarship · UKIERI',
    'IIT Delhi Merit Scholarship — Top 20 in batch (<1% acceptance)',
    '99%ile+ across JEE, AIEEE, DCE, CAT',
  ];

  return (
    <section id="research" className="relative border-b border-[var(--neutral-800)] py-24 md:py-32 bg-[var(--neutral-900)]">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <SectionHeader
          num="04"
          kicker="Research & Honors"
          title={<>Published.<br/><span className="text-[var(--flame-500)]">Peer-reviewed.</span></>}
          sub="A* on the top of the ABDC ranking. Working papers in motion. Two books in progress translating institutional-grade derivatives thinking for retail."
        />

        <div className="grid lg:grid-cols-12 gap-8">
          {/* Publications */}
          <div className="lg:col-span-8">
            <div className="flex items-center gap-3 mb-6">
              <span className="eyebrow text-[var(--neutral-400)]">Publications</span>
              <span className="flex-1 h-px bg-[var(--neutral-800)]"></span>
            </div>
            <div className="flex flex-col gap-px bg-[var(--neutral-800)] border border-[var(--neutral-800)]">
              {pubs.map((p,i)=>(
                <div key={i} className="bg-[var(--neutral-950)] p-6 md:p-7 grid grid-cols-12 gap-4 items-start hover:bg-[var(--neutral-850)] transition-colors group">
                  <div className="col-span-2 md:col-span-1">
                    {p.tag ? (
                      <span className={`inline-flex items-center justify-center w-9 h-9 text-xs font-bold ${p.tag==='A*' ? 'bg-[var(--flame-500)] text-[var(--neutral-0)]' : 'bg-[var(--neutral-0)] text-[var(--neutral-950)]'}`}>
                        {p.tag}
                      </span>
                    ) : (
                      <span className="inline-flex items-center justify-center w-9 h-9 text-[10px] font-bold text-[var(--neutral-400)] border border-[var(--neutral-700)]">
                        ◆
                      </span>
                    )}
                  </div>
                  <div className="col-span-7 md:col-span-8">
                    <div className="eyebrow text-[var(--flame-500)] mb-1">{p.cat}</div>
                    <h4 className="text-base md:text-lg text-[var(--neutral-0)] font-semibold leading-snug">{p.title}</h4>
                    <p className="text-sm text-[var(--neutral-400)] mt-1">{p.venue}</p>
                  </div>
                  <div className="col-span-3 text-right">
                    <span className="font-mono-tab text-sm text-[var(--neutral-200)]">{p.year}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Honors */}
          <div className="lg:col-span-4">
            <div className="flex items-center gap-3 mb-6">
              <span className="eyebrow text-[var(--neutral-400)]">Honors</span>
              <span className="flex-1 h-px bg-[var(--neutral-800)]"></span>
            </div>
            <div className="border border-[var(--neutral-800)] p-6 bg-[var(--neutral-950)] flex flex-col gap-5">
              {honors.map((h,i)=>(
                <div key={i} className="flex gap-3">
                  <span className="font-display text-xs text-[var(--flame-500)] pt-1 shrink-0">0{i+1}</span>
                  <span className="text-sm text-[var(--neutral-100)] leading-relaxed">{h}</span>
                </div>
              ))}
            </div>

            {/* Education card */}
            <div className="mt-8 border border-[var(--neutral-800)] bg-[var(--neutral-950)] p-6">
              <div className="eyebrow text-[var(--neutral-400)] mb-4">Education</div>
              <div className="flex flex-col gap-5">
                <div>
                  <div className="font-display text-sm font-bold text-[var(--neutral-0)] uppercase">Ph.D. Economics</div>
                  <div className="text-sm text-[var(--neutral-200)] mt-1">IIM Bangalore · 2011–2016</div>
                  <div className="text-xs text-[var(--neutral-400)] mt-1">Monetary Policy & Financial Market Frictions</div>
                </div>
                <div className="h-px bg-[var(--neutral-800)]"></div>
                <div>
                  <div className="font-display text-sm font-bold text-[var(--neutral-0)] uppercase">B.Tech, Mech. Eng.</div>
                  <div className="text-sm text-[var(--neutral-200)] mt-1">IIT Delhi · 2003–2007</div>
                  <div className="text-xs text-[var(--neutral-400)] mt-1">Math & Computing minor · Merit Scholar · Top 25/350+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ========== Projects ========== */
function Projects() {
  const projects = [
    {
      num:'01', tag:'Production', live:'vueflow.ailadyn.ai',
      title:'AI-Powered Recruitment Intelligence',
      blurb:'End-to-end AI platform for MBA interview prep serving 1,000+ users with 100% success rate. Resume parsing, skill extraction, panel-wise interview, granular feedback.',
      stack:['Python','TypeScript','FastAPI','React','Firebase','LiveKit','Deepgram','ElevenLabs','Whisper'],
      image:'assets/project-1.png',
      tone:'flame',
    },
    {
      num:'02', tag:'OSS', live:'GitHub',
      title:'Voice AI Options Trading Simulator',
      blurb:'Interactive dashboard for options trading through voice. Whisper + Claude for financial queries, real-time P&L viz of straddles, strangles, spreads.',
      stack:['Python','Claude API','Whisper','Plotly Dash','WebSocket'],
      image:'assets/project-2.png',
      tone:'dark',
    },
    {
      num:'03', tag:'OSS', live:'GitHub',
      title:'Research Agent — Alt. Financial Data',
      blurb:'High-throughput RAG pipeline. 500+ 10-Ks, sub-100ms retrieval, 92% signal accuracy. FAISS vector index, hybrid search, cross-encoder reranking.',
      stack:['Python','FastAPI','FAISS','sentence-transformers','BeautifulSoup'],
      image:'assets/project-3.png',
      tone:'dark',
    },
    {
      num:'04', tag:'Curriculum', live:'Bespoke',
      title:'Macro-to-Hedging Sandbox · IIM Bangalore',
      blurb:'Executive programme on macro-finance risk: FRED-API dashboard, sequential Bayesian macro-to-hedging framework, AI-native simulation capstone.',
      stack:['Python','FRED API','Bayesian','Streamlit'],
      image:'assets/project-4.png',
      tone:'dark',
    },
  ];

  return (
    <section id="projects" className="relative border-b border-[var(--neutral-800)] py-24 md:py-32">
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <SectionHeader
          num="05"
          kicker="Projects"
          title={<>Shipped to <span className="text-[var(--flame-500)]">production.</span></>}
          sub="Selected work where research becomes revenue. Code, infra, and pedagogy bundled into things humans use every day."
        />

        <div className="grid md:grid-cols-2 gap-px bg-[var(--neutral-800)] border border-[var(--neutral-800)]">
          {projects.map((p,i)=>(
            <ProjectCard key={i} {...p} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ num, tag, live, title, blurb, stack, image, tone }) {
  const isFlame = tone === 'flame';
  return (
    <article className={`relative overflow-hidden p-8 md:p-10 ${isFlame ? 'bg-[var(--flame-500)] text-[var(--neutral-0)]' : 'bg-[var(--neutral-950)]'} group min-h-[460px] flex flex-col`}>
      {/* image area */}
      <div className={`ph aspect-[16/9] mb-8 relative overflow-hidden ${isFlame ? 'border-[rgba(255,255,255,0.15)]' : ''}`}>
        {image ? (
          <img
            src={image}
            alt={title}
            className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <>
            <div className={`absolute inset-0 flex items-center justify-center ${isFlame ? 'text-[var(--neutral-0)]/40' : 'text-[var(--neutral-700)]'}`}>
              <iconify-icon icon={isFlame ? 'solar:gallery-wide-linear' : 'solar:graph-linear'} width="64"></iconify-icon>
            </div>
            <span className={`absolute top-3 left-3 eyebrow ${isFlame ? 'text-[var(--neutral-0)]/70' : 'text-[var(--neutral-400)]'}`}>[ placeholder · 16:9 ]</span>
          </>
        )}
      </div>

      <div className="flex items-center justify-between mb-3">
        <span className={`section-num text-xs ${isFlame ? 'text-[var(--neutral-0)]' : ''}`}>/ {num}</span>
        <div className="flex items-center gap-3">
          <span className={`eyebrow ${isFlame ? 'text-[var(--neutral-0)]/80' : 'text-[var(--neutral-400)]'}`}>{tag}</span>
          <span className={`eyebrow ${isFlame ? 'text-[var(--neutral-0)]' : 'text-[var(--flame-500)]'}`}>· {live}</span>
        </div>
      </div>

      <h3 className={`font-display text-2xl md:text-3xl font-bold uppercase leading-tight mb-4 ${isFlame ? 'text-[var(--neutral-0)]' : 'text-[var(--neutral-0)]'}`}>{title}</h3>
      <p className={`text-sm md:text-base leading-relaxed mb-6 ${isFlame ? 'text-[var(--neutral-0)]/90' : 'text-[var(--neutral-200)]'}`}>{blurb}</p>

      <div className="mt-auto flex flex-wrap gap-2">
        {stack.map(s=>(
          <span
            key={s}
            className={`text-[10px] uppercase tracking-widest font-semibold px-2.5 py-1 border ${
              isFlame
                ? 'border-[var(--neutral-0)]/30 text-[var(--neutral-0)]'
                : 'border-[var(--neutral-700)] text-[var(--neutral-200)]'
            }`}
          >{s}</span>
        ))}
      </div>
    </article>
  );
}

/* ========== Footer / Contact ========== */
function Footer() {
  return (
    <footer id="contact" className="relative bg-[var(--neutral-950)] pt-24 md:pt-32 pb-10 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-30 pointer-events-none"></div>

      {/* Background portrait on left/center, faded */}
      <div className="absolute left-0 top-0 bottom-0 w-full lg:w-1/2 pointer-events-none opacity-40 lg:opacity-50">
        <img
          src="assets/portrait-2.png"
          alt=""
          aria-hidden="true"
          className="portrait absolute inset-0 w-full h-full object-cover object-[30%_20%]"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[var(--neutral-950)]/40 to-[var(--neutral-950)]"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-[var(--neutral-950)] via-transparent to-[var(--neutral-950)]/80"></div>
      </div>

      <div className="relative max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20">
        <div className="grid lg:grid-cols-12 gap-8 mb-20">
          <div className="lg:col-span-7">
            <div className="flex items-center gap-3 mb-6">
              <span className="w-2 h-2 rounded-full bg-[var(--flame-500)]"></span>
              <span className="eyebrow text-[var(--flame-500)]">/ 06 — Contact</span>
            </div>
            <h2 className="headline text-5xl md:text-7xl lg:text-8xl text-[var(--neutral-0)] text-shadow-sm">
              Let's<br />
              <span className="italic font-light font-display normal-case tracking-tight text-[0.85em]">build something</span><br />
              <span className="text-[var(--flame-500)]">that ships.</span>
            </h2>
          </div>
          <div className="lg:col-span-4 lg:col-start-9 flex flex-col gap-6 pt-4">
            <ContactRow icon="solar:letter-linear"  label="Email"    value="vipul.gamma@gmail.com"     href="mailto:vipul.gamma@gmail.com" />
            {/* <ContactRow icon="solar:phone-linear"   label="WhatsApp" value="+971 50 590 8743"          href="https://wa.me/971505908743" /> */}
            {/* <ContactRow icon="solar:phone-linear"   label="Call"     value="+91 93198 22907"           href="tel:+919319822907" /> */}
            <ContactRow icon="solar:global-linear"  label="Website"  value="ailadyn.ai"               href="https://ailadyn.ai" />
            <ContactRow icon="solar:global-linear"  label="Website"  value="vueflow"             href="https://vueflow.ailadyn.ai" />
            <ContactRow icon="solar:global-linear"  label="Website"  value="call-put.com"             href="https://call-put.com" />
            <ContactRow icon="mdi:github"           label="GitHub"   value="github.com/v-quant-lab"    href="https://github.com/v-quant-lab" />
            <ContactRow icon="mdi:linkedin"         label="LinkedIn" value="linkedin.com/in/vm-ai"     href="https://linkedin.com/in/vm-ai" />
          </div>
        </div>

        <div className="border-t border-[var(--neutral-800)] pt-8 flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div className="flex items-center gap-3">
            <span className="text-xl font-black tracking-tighter text-[var(--neutral-0)]">MATHUR</span>
            <span className="w-2 h-2 rounded-full bg-[var(--flame-500)] inline-block"></span>
            <span className="eyebrow text-[var(--neutral-400)] ml-2">QUANT × AI</span>
          </div>
          <div className="flex flex-wrap gap-6 text-[11px] uppercase tracking-widest text-[var(--neutral-400)]">
            {/* <span>Dubai · Bangalore</span> */}
            <span>Bangalore</span>
            {/* <span>UAE Visa Eligible</span> */}
            <span>© 2026 V. Mathur — All rights reserved</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function ContactRow({ icon, label, value, href }) {
  return (
    <a href={href} target="_blank" rel="noreferrer" className="group flex items-center gap-4 border-b border-[var(--neutral-800)] pb-4 hover:border-[var(--flame-500)] transition-colors">
      <span className="text-[var(--flame-500)]"><iconify-icon icon={icon} width="22"></iconify-icon></span>
      <span className="flex-1">
        <div className="eyebrow text-[var(--neutral-400)] mb-1">{label}</div>
        <div className="text-sm text-[var(--neutral-100)] group-hover:text-[var(--flame-500)] transition-colors">{value}</div>
      </span>
      <iconify-icon icon="solar:arrow-right-up-linear" width="18" className="text-[var(--neutral-400)] group-hover:text-[var(--flame-500)] transition-colors"></iconify-icon>
    </a>
  );
}

window.About = About;
window.Expertise = Expertise;
window.Experience = Experience;
window.Research = Research;
window.Projects = Projects;
window.PortfolioFooter = Footer;