/* ============================================================
   SECTIONS — all six notebook pages + variants
   Exports section components + helpers to window.
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- shared data — REAL CONTENT ---------- */
const PHOTO = "assets/tarun-id.jpeg";

const PROJECTS = [
  { no:"001", title:"Vector Erasure", tag:"AI RESEARCH", role:"Equal Contributor", stack:"SD3 · FLUX · LaTeX", year:"2026",
    blurb:"\"Vector Erasure: Concept Unlearning via Steering Vectors in Diffusion Transformers\" — an ICML 2026 submission, under peer review on OpenReview. Ran timestep/guidance sweeps to isolate style components; authored Methods & Related Works.",
    status:"UNDER REVIEW", metric:["ICML", "2026 submission"], link:"https://openreview.net/forum?id=FTMiBR5WNO", img:"assets/proj-vectorerasure.png", imgFit:"banner" },
  { no:"002", title:"Pulse", tag:"GENERATIVE AI", role:"Solo — Shipped", stack:"Llama 3.3 · Groq · Next.js · Supabase", year:"2025",
    blurb:"A production, long-running generative AI agent: NLP narrative threading across evolving news, self-graded 7-day predictions, and reliability patterns for fully autonomous 24/7 operation.",
    status:"LIVE", metric:["24/7", "autonomous agent"], link:"https://getpulse.world", img:"assets/proj-pulse.png" },
  { no:"003", title:"Clue_0", tag:"AGENTIC AI", role:"Solo @ NemoClaw", stack:"Nemotron 3 · OpenCV · FastAPI", year:"2026",
    blurb:"An autonomous home-security agent built on NVIDIA Nemotron. It sees every frame, reasons about intent, and alerts you only when something actually matters — the difference between a bug and a burglar.",
    status:"HACKATHON", metric:["208", "participants"], link:"https://devpost.com/software/clue_zero", img:"assets/proj-clue.gif" },
  { no:"004", title:"NoteBird", tag:"PRODUCT", role:"Lead Builder", stack:"LLM · React · Supabase", year:"2025",
    blurb:"Your magical study buddy — organizes notes, auto-creates quizzes, and simplifies tough texts in a flash. Owned UI/UX, API integration, and the data layer end-to-end.",
    status:"AWARD WINNER", metric:["Best", "UI/UX · CruzHacks"], link:"https://devpost.com/software/notebird", img:"assets/proj-notebird.png" },
  { no:"005", title:"QaBot", tag:"AGENTIC AI", role:"Co-Builder", stack:"Playwright · GPT-4o · FastAPI", year:"2025",
    blurb:"Testing your own site sucks. QaBot explores it for you — clicks through pages, submits forms, finds breakage, and hands back a clean bug report. One click, zero hassle.",
    status:"BUILT", metric:["E2E", "QA automation"], link:"https://devpost.com/software/qabot-gn2yto", img:"assets/proj-qabot.png" },
  { no:"006", title:"ACL-Smith", tag:"SECURITY", role:"Solo", stack:"Claude Opus · Networking", year:"2025",
    blurb:"A narrow demo of LLM reasoning for network security. Drop in a Cisco ACL — Claude Opus hypothesizes, traces packets through the rules, and finds the doors left open.",
    status:"DEMO", metric:["LLM", "reasoning + netsec"], link:"https://devpost.com/software/acl-smith", img:"assets/proj-aclsmith.png" },
  { no:"007", title:"CanvasCal", tag:"PRODUCT", role:"Team Build", stack:"AI Agent · Calendar APIs", year:"2025",
    blurb:"Turns Canvas assignments and syllabi into a ready-to-use calendar — and lets students manage it just by talking to an AI agent instead of wiring up Google Calendar by hand.",
    status:"TEAM", metric:["Agent", "schedule sync"], link:"https://devpost.com/software/canvascal", img:"assets/proj-canvascal.png" },
  { no:"008", title:"Roost", tag:"FINTECH", role:"Team Build", stack:"React · Gamification", year:"2025",
    blurb:"A budgeting app that tracks receipts, manages spending, and gamifies saving by feeding a virtual dragon when users make smart financial decisions.",
    status:"TEAM", metric:["Gamified", "savings"], link:"https://devpost.com/software/roost-xfma0q", img:"assets/proj-roost.png", imgFit:"contain" },
  { no:"009", title:"Clientsight", tag:"HCI", role:"Team Build", stack:"Eye-tracking · Voice UI", year:"2025",
    blurb:"Edit your website just by looking at it. Glance at any UI element, speak or type a command, and see instant changes — your eyes and words become the design toolkit.",
    status:"TEAM", metric:["Voice", "+ gaze UI"], link:"https://devpost.com/software/clientsight", img:"assets/proj-clientsight.png" },
  { no:"010", title:"MediLink", tag:"HEALTHCARE", role:"Team Build", stack:"Full-stack · Web", year:"2025",
    blurb:"A patient-provider platform with one mission: make healthcare clear, connected, and easy for both sides of the conversation.",
    status:"TEAM", metric:["Patient", "↔ provider"], link:"https://devpost.com/software/medilink-r0b347", img:"assets/proj-medilink.png" },
];

/* photography — real frames */
const PHOTOS = [
  { id:"F-01", src:"assets/photo-02.jpeg", cap:"Last light, Pacific", r:"3/4" },
  { id:"F-02", src:"assets/photo-11.jpeg", cap:"Blue hour, Washington DC", r:"665/1182" },
  { id:"F-03", src:"assets/photo-07.jpeg", cap:"Redwoods after dark", r:"3/4" },
  { id:"F-04", src:"assets/photo-03.jpeg", cap:"Cloudfire", r:"360/410" },
  { id:"F-05", src:"assets/photo-01.jpeg", cap:"Dawn over the river", r:"3/4" },
  { id:"F-06", src:"assets/photo-08.jpeg", cap:"Kresge Bridge after rain", r:"3/4" },
  { id:"F-07", src:"assets/photo-05.jpeg", cap:"Looking up, Downtown Atlanta (GT)", r:"3/4" },
  { id:"F-08", src:"assets/photo-04.jpeg", cap:"Crescent & the range", r:"3/4" },
  { id:"F-09", src:"assets/photo-06.jpeg", cap:"Floodlight", r:"787/998" },
  { id:"F-10", src:"assets/photo-09.jpeg", cap:"Last bus", r:"4/3" },
  { id:"F-11", src:"assets/photo-10.jpeg", cap:"Season's lights", r:"3/4" },
];

/* Service Record — experience + leadership */
const EXPERIENCE = [
  { d:"2026", org:"Algoverse AI Research", role:"Undergraduate Researcher (Equal Contributor)", loc:"Remote",
    note:"Co-authoring an ICML 2026 submission on steering vectors for style unlearning in diffusion models (SD3, FLUX) — under peer review on OpenReview." },
  { d:"2026", org:"GetVirtual", role:"Technical Project Manager / Business Assistance Intern", loc:"Santa Cruz, CA",
    note:"Scrum lead on end-to-end client engagements; drove an HCI-based Agile workflow producing 3 wireframes & 6 Figma mockups, then architected a legacy → CMS (Sanity/Wix) migration." },
  { d:"2025", org:"Zipcar", role:"Campus Brand Ambassador", loc:"UC Santa Cruz",
    note:"Selected for the Fall 2025 program; ran a real campus go-to-market workflow with monthly content quotas, driving 10 tracked new sign-ups." },
  { d:"2025", org:"Laiqa AI", role:"Front-End Dev & Marketing Integration Intern", loc:"Remote",
    note:"Women's-health startup: shipped accessible, responsive interfaces and ran user research on UI components adopted into production." },
];

const LEADERSHIP = [
  { d:"2026", org:"PM Club @ UC Santa Cruz", role:"Founder",
    note:"Founded UCSC's first dedicated Product Management org (sister chapter of PMC @ SJSU) — built the brand, a 9-seat board, and a live recruitment site with an 8-minute application flow." },
  { d:"2025", org:"SlugAI", role:"Director",
    note:"Direct one of UCSC's most selective student AI orgs, running weekly programming for a community of student builders shipping AI products and research." },
  { d:"2025", org:"Santa Cruz Tech Ideathon", role:"Co-Organizer & Founder",
    note:"Co-founded UCSC's first Tech Research Ideathon — 35–45 attendees, ~10 teams pitching to faculty; winners earned research placements at Baskin Engineering." },
  { d:"2025", org:"Pie Fi Startup Accelerator", role:"Lead Project Developer & Venture Scout",
    note:"Supported ~15 student startups across user discovery, prioritization, and go-to-market; scouted founder talent and validated product direction." },
  { d:"2022", org:"FHS Drone Club", role:"Founder",
    note:"Built and programmed a fleet of DJI Tello drones for student cinema and CS education; the club was acquired by Girls Who Code." },
];

const SOCIALS = [
  ["GH","GitHub","github.com/riptide-06","https://github.com/riptide-06"],
  ["IN","LinkedIn","in/tarun-chandra1","https://www.linkedin.com/in/tarun-chandra1/"],
  ["DP","Devpost","devpost.com/n-tarun2022","https://devpost.com/n-tarun2022"],
  ["@","Email","n.tarun2022@gmail.com","mailto:n.tarun2022@gmail.com"],
  ["TEL","Phone","(612) 961-5539","tel:+16129615539"],
  ["SJ","Based","San Jose, California",null],
];

/* ---------- helpers ---------- */
function Imgph({ label, style, cls }) {
  return <div className={"imgph "+(cls||"")} style={style}><span className="tag">{label}</span></div>;
}
function Photo({ style, cls }) {
  return <div className={"realphoto "+(cls||"")} style={{...style, backgroundImage:`url("${PHOTO}")`}}></div>;
}

function SecHead({ kicker, title, meta }) {
  return (
    <div className="sec-head">
      <div className="lead">
        <div className="kicker">{kicker}</div>
        <h2>{title}</h2>
      </div>
      <div className="meta" dangerouslySetInnerHTML={{__html: meta}} />
    </div>
  );
}

function TitleBlock({ sheet, title, rev="C", scale="1:1", extra }) {
  return (
    <div className="titleblock">
      <div className="tb-cell"><div className="k">Project / Drawing Title</div><div className="v">{title}</div></div>
      <div className="tb-cell"><div className="k">Drawn By</div><div className="v">T. CHANDRA</div></div>
      <div className="tb-cell"><div className="k">Sheet</div><div className="v">{sheet} / 06</div></div>
      <div className="tb-cell"><div className="k">Rev</div><div className="v accent">{rev}</div></div>
      <div className="tb-cell"><div className="k">Status</div><div className="v accent">{extra||"ACTIVE"}</div></div>
    </div>
  );
}

/* ============================================================
   HOME — three hero variants
   ============================================================ */
function HeroDossier() {
  const facts = [
    ["Role","Builder · Researcher · PM"], ["Focus","Applied AI / Agents"],
    ["Education","B.S. TIM — UCSC '27"], ["Based","San Jose, CA"],
  ];
  return (
    <div style={{display:"grid",gridTemplateColumns:"1.45fr 1fr",gap:48,alignItems:"start"}}>
      <div>
        <div className="mono" style={{fontSize:11,letterSpacing:".2em",color:"var(--accent-bright)",marginBottom:18}}>
          PERSONNEL DOSSIER — CLEARANCE: PUBLIC
        </div>
        <h1 className="disp" style={{fontSize:"clamp(48px,8vw,104px)",lineHeight:.86,margin:"0 0 6px"}}>TARUN<br/>CHANDRA</h1>
        <div className="disp" style={{fontSize:"clamp(15px,1.6vw,20px)",color:"var(--accent-bright)",letterSpacing:".18em",marginBottom:26}}>
          BUILDER / RESEARCHER / PRODUCT FOUNDER
        </div>
        <p style={{fontSize:15.5,lineHeight:1.75,maxWidth:"48ch",color:"var(--ink-dim)",margin:"0 0 28px"}}>
          Technology &amp; Information Management student at UC Santa Cruz (graduating a year early),
          working across applied AI research, full-stack engineering, and product. I ship autonomous
          agents, co-author research under review at ICML, and found the orgs I wish existed.
        </p>
        <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
          <button className="btn primary" data-go="projects">View Projects <span className="arr">→</span></button>
          <button className="btn" data-go="contact">Open Comms</button>
          <a className="btn" href="assets/Tarun-Chandra-Resume.pdf" target="_blank" rel="noopener">⤓ Résumé</a>
        </div>
        <div className="panel" style={{marginTop:34,display:"grid",gridTemplateColumns:"1fr 1fr"}}>
          {facts.map((f,i)=>(
            <div key={i} style={{padding:"13px 16px",borderRight:i%2===0?"1px solid var(--line)":"none",borderBottom:i<2?"1px solid var(--line)":"none"}}>
              <div className="mono" style={{fontSize:9,letterSpacing:".16em",color:"var(--muted)",textTransform:"uppercase"}}>{f[0]}</div>
              <div style={{fontSize:13.5,marginTop:4,fontWeight:600}}>{f[1]}</div>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div style={{position:"relative"}}>
          <Photo style={{aspectRatio:"4/5"}} />
          <span className="reg tl"></span><span className="reg tr"></span><span className="reg bl"></span><span className="reg br"></span>
          <div className="mono" style={{position:"absolute",top:10,left:"50%",transform:"translateX(-50%)",fontSize:9,letterSpacing:".2em",color:"#fff",mixBlendMode:"difference"}}>SUBJECT 2027</div>
        </div>
        <div className="panel" style={{marginTop:16,padding:16}}>
          <div className="mono" style={{fontSize:9.5,letterSpacing:".16em",color:"var(--accent-bright)"}}>● CURRENT OPERATION</div>
          <div className="disp" style={{fontSize:20,marginTop:8}}>VECTOR ERASURE</div>
          <p style={{fontSize:12.5,lineHeight:1.6,color:"var(--ink-dim)",margin:"6px 0 0"}}>
            Concept unlearning via steering vectors in diffusion transformers — ICML 2026 submission, under peer review.
          </p>
        </div>
      </div>
    </div>
  );
}

function ProjectsBoot({ onDone }) {
  const lines = [
    "> access /var/log/projects.db",
    "  authenticating ......... OK",
    "> query: SELECT * FROM projects",
    "  10 records retrieved",
    "> build index --layout grid",
    "  compiling sheets ....... DONE",
    "> open PROJECTS",
  ];
  const [shown, setShown] = useState([]);
  const [pct, setPct] = useState(0);
  const [filling, setFilling] = useState(false);
  useEffect(() => {
    let i = 0, alive = true;
    const tick = () => {
      if (!alive) return;
      if (i < lines.length) { const line = lines[i]; setShown(s => [...s, line]); i++; setTimeout(tick, 150); }
      else {
        setFilling(true);
        let p = 0;
        const pf = setInterval(() => {
          if (!alive) { clearInterval(pf); return; }
          p += 7; setPct(Math.min(100, p));
          if (p >= 100) { clearInterval(pf); setTimeout(() => { if (alive && onDone) onDone(); }, 380); }
        }, 38);
      }
    };
    const t0 = setTimeout(tick, 140);
    return () => { alive = false; clearTimeout(t0); };
  }, []);
  const blocks = Math.round(pct / 5);
  return (
    <div style={{ minHeight: 440, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div className="panel" style={{ width: "min(620px,100%)", background: "var(--bg-2)", padding: "20px 24px" }}>
        <div style={{ display: "flex", gap: 7, alignItems: "center", marginBottom: 18 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)" }}></span>
          <span style={{ width: 10, height: 10, borderRadius: "50%", border: "1px solid var(--line-bright)" }}></span>
          <span style={{ width: 10, height: 10, borderRadius: "50%", border: "1px solid var(--line-bright)" }}></span>
          <span className="mono" style={{ marginLeft: 8, fontSize: 9.5, color: "var(--muted)", letterSpacing: ".14em" }}>projects-console — booting</span>
        </div>
        <div className="mono" style={{ fontSize: 13, lineHeight: 2 }}>
          {shown.map((l, i) => (
            <div key={i} style={{ color: String(l).startsWith(">") ? "var(--accent-bright)" : "var(--ink-dim)", whiteSpace: "pre" }}>{l}</div>
          ))}
          {filling && (
            <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ color: "var(--accent)", letterSpacing: "1px" }}>{"█".repeat(blocks)}<span style={{ opacity: .2 }}>{"░".repeat(20 - blocks)}</span></span>
              <span style={{ color: "var(--muted)", fontSize: 11 }}>{pct}%</span>
            </div>
          )}
          {!filling && <span style={{ display: "inline-block", width: 8, height: 15, background: "var(--accent)", animation: "blink 1s steps(1) infinite", verticalAlign: "-2px" }}></span>}
        </div>
      </div>
    </div>
  );
}

function Home() {
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 01 — COVER" title="Overview" meta={`<b>TARUN CHANDRA</b><br/>DWG&nbsp;TC-2026<br/>DOSSIER LAYOUT`} />
      <div className="page-body"><HeroDossier/></div>
      <TitleBlock sheet="01" title="Portfolio — Cover Sheet" extra="OPEN TO ROLES" />
    </div>
  );
}

/* ============================================================
   PROJECTS — grid vs case-study
   ============================================================ */
function ProjGrid() {
  return (
    <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
      {PROJECTS.map(p=>(
        <a key={p.no} href={p.link||undefined} target={p.link?"_blank":undefined} rel="noopener"
          className={"panel projcard"+(p.link?"":" nolink")}
          style={{display:"flex",flexDirection:"column",overflow:"hidden",textDecoration:"none",color:"inherit"}}>
          {p.img
            ? (p.imgFit==="contain" || p.imgFit==="banner"
                ? <div className={"projthumb "+p.imgFit} style={{aspectRatio:"16/10",borderBottom:"1px solid var(--line)"}}><img src={p.img} alt={p.title} /></div>
                : <div className="projthumb" style={{aspectRatio:"16/10",borderBottom:"1px solid var(--line)",backgroundImage:`url("${p.img}")`}}></div>)
            : <Imgph label={"PROJ "+p.no} style={{aspectRatio:"16/10",borderRadius:0,border:"none",borderBottom:"1px solid var(--line)"}} />}
          <div style={{padding:"13px 15px 15px",flex:1,display:"flex",flexDirection:"column"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
              <span className="chip">{p.tag}</span>
              <span className="mono" style={{fontSize:9.5,color:"var(--muted)"}}>{p.no}</span>
            </div>
            <div className="disp" style={{fontSize:23,margin:"11px 0 5px"}}>{p.title}</div>
            <p style={{fontSize:12.5,lineHeight:1.55,color:"var(--ink-dim)",margin:"0 0 12px",flex:1}}>{p.blurb}</p>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"6px 10px",borderTop:"1px solid var(--line)",paddingTop:11}}>
              <div><div className="mono" style={{fontSize:8,letterSpacing:".14em",color:"var(--muted)"}}>ROLE</div><div className="mono" style={{fontSize:11,marginTop:2}}>{p.role}</div></div>
              <div><div className="mono" style={{fontSize:8,letterSpacing:".14em",color:"var(--muted)"}}>STACK</div><div className="mono" style={{fontSize:11,marginTop:2}}>{p.stack}</div></div>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:11}}>
              <span className="chip live">● {p.status}</span>
              {p.link && <span className="mono openlbl" style={{fontSize:10,color:"var(--accent-bright)"}}>OPEN →</span>}
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

function Projects({ leaf, ready }) {
  const showGrid = ready || !!leaf;
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 02 — INDEX" title="Projects"
        meta={`<b>${PROJECTS.length} FILES</b><br/>SPEC-SHEET VIEW<br/>2024 — 2026`} />
      <div className="page-body">
        {showGrid ? <ProjGrid/> : <ProjectsBoot/>}
      </div>
      <TitleBlock sheet="02" title="Project Index" extra={`${PROJECTS.length} ENTRIES`} />
    </div>
  );
}

/* ============================================================
   PHOTOS — contact sheet
   ============================================================ */
function Photos() {
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 03 — FIELD" title="Photography" meta={`<b>${PHOTOS.length} FRAMES</b>`} />
      <div className="page-body">
        <div className="mono" style={{fontSize:11,color:"var(--ink-dim)",marginBottom:18,paddingBottom:14,borderBottom:"1px dashed var(--line-bright)"}}>
          ◆ Shot on iPhone.
        </div>
        <div style={{columns:3,columnGap:16}}>
          {PHOTOS.map(p=>(
            <a key={p.id} href={p.src} target="_blank" rel="noopener" className="photoframe" style={{breakInside:"avoid",marginBottom:16,display:"block",textDecoration:"none"}}>
              <div style={{position:"relative"}}>
                <div className="realphoto" style={{aspectRatio:p.r,backgroundImage:`url("${p.src}")`,backgroundPosition:"center"}}></div>
                <span className="reg tl"></span><span className="reg br"></span>
              </div>
              <div style={{display:"flex",justifyContent:"space-between",marginTop:6}}>
                <span className="mono" style={{fontSize:9.5,color:"var(--muted)"}}>{p.id}</span>
                <span className="mono" style={{fontSize:9.5,color:"var(--ink-dim)"}}>{p.cap}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
      <TitleBlock sheet="03" title="Field Photography" extra="ARCHIVE" />
    </div>
  );
}

/* ============================================================
   ABOUT — briefing
   ============================================================ */
function SkillGroup({ label, items }) {
  return (
    <div style={{marginBottom:16}}>
      <div className="mono" style={{fontSize:9,letterSpacing:".16em",color:"var(--muted)",marginBottom:8,textTransform:"uppercase"}}>{label}</div>
      <div style={{display:"flex",flexWrap:"wrap",gap:6}}>{items.map(s=><span key={s} className="chip">{s}</span>)}</div>
    </div>
  );
}

function About() {
  const honors = [
    "Best UI/UX — CruzHacks 2025",
    "Man Utd Jersey — Google × Qualcomm LiteRT",
    "NSLC Scholarship — 2023",
    "Best Delegate — CCC MUN 2022",
  ];
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 04 — BRIEFING" title="About" meta={`<b>UC SANTA CRUZ</b><br/>B.S. TIM — '27<br/>CS-HEAVY CONCENTRATION`} />
      <div className="page-body">
        <div style={{display:"grid",gridTemplateColumns:"300px 1fr",gap:40,alignItems:"start"}}>
          <div>
            <div style={{position:"relative"}}>
              <Photo style={{aspectRatio:"4/5"}} />
              <span className="reg tl"></span><span className="reg tr"></span><span className="reg bl"></span><span className="reg br"></span>
            </div>
            <div style={{marginTop:20}}>
              <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:11}}>LANGUAGES</div>
              <div style={{display:"flex",flexWrap:"wrap",gap:7}}>
                {["English","Telugu","Kannada","Hindi","French*"].map(h=><span key={h} className="chip">{h}</span>)}
              </div>
              <div className="mono" style={{fontSize:8.5,color:"var(--muted)",marginTop:8}}>* intermediate · others fluent</div>
            </div>
            <div style={{marginTop:22}}>
              <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:11}}>INSTRUMENTS</div>
              <div style={{display:"flex",flexWrap:"wrap",gap:7}}>
                {["Guitar ★","Drums","Piano","Marimba","+ anything"].map(h=><span key={h} className="chip">{h}</span>)}
              </div>
              <div className="mono" style={{fontSize:8.5,color:"var(--muted)",marginTop:8}}>★ primary · always learning more</div>
            </div>
            <div style={{marginTop:22}}>
              <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:11}}>HONORS</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {honors.map(h=>(
                  <div key={h} style={{display:"flex",gap:9,alignItems:"baseline"}}>
                    <span style={{color:"var(--accent)",fontSize:11}}>◆</span>
                    <span className="mono" style={{fontSize:11,lineHeight:1.4,color:"var(--ink-dim)"}}>{h}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div>
            <p style={{fontSize:16.5,lineHeight:1.8,color:"var(--ink)",margin:"0 0 16px"}}>
              I'm Tarun — a builder, researcher, and product founder studying Technology &amp; Information
              Management at UC Santa Cruz, on track to graduate a year early in 2027 with a CS-heavy concentration.
            </p>
            <p style={{fontSize:14.5,lineHeight:1.8,color:"var(--ink-dim)",margin:"0 0 16px"}}>
              I live between three worlds: I co-author AI research (currently under review at ICML), I ship
              autonomous agents and full-stack products solo and on teams, and I found the organizations I wish
              had existed — UCSC's first PM Club, a tech research ideathon, and a drone club that got acquired
              by Girls Who Code. Most of what I build starts as a hackathon and refuses to die quietly.
            </p>
            <p style={{fontSize:14.5,lineHeight:1.8,color:"var(--ink-dim)",margin:"0 0 16px"}}>
              I'm also an avid musician. Guitar is my home base — years deep — but I'll pick up and learn
              anything with strings, keys, or skins: I've taught myself drums, piano, and marimba, and I'm
              always hunting for the next instrument to figure out.
            </p>
            <p style={{fontSize:14.5,lineHeight:1.8,color:"var(--ink-dim)",margin:"0 0 26px"}}>
              Off the clock: photography along the California coast, MUN logistics, and community CS teaching.
            </p>
            <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:14}}>CAPABILITY READOUT</div>
            <SkillGroup label="Languages" items={["Python","SQL","TypeScript","JavaScript","Java","C / C++","Kotlin","Swift"]} />
            <SkillGroup label="AI / ML / LLM" items={["LLM integration","Agentic frameworks","Prompt engineering","RAG","Steering vectors","Mech. interp.","PCG"]} />
            <SkillGroup label="Stack" items={["FastAPI","Next.js","React","Node.js","Playwright","OpenCV","Supabase","Vercel","AWS","Groq","WebSocket"]} />
            <SkillGroup label="Workflow" items={["LaTeX","OpenReview","Git","Jira","ClickUp","Figma","Lucidchart","Agile / Scrum"]} />
            <div style={{display:"flex",gap:12,marginTop:24}}>
              <a className="btn primary" href="assets/Tarun-Chandra-Resume.pdf" target="_blank" rel="noopener">⤓ Download Résumé</a>
              <button className="btn" data-go="contact">Contact</button>
            </div>
          </div>
        </div>
      </div>
      <TitleBlock sheet="04" title="Personnel Briefing" extra="VERIFIED" />
    </div>
  );
}

/* ============================================================
   RECORD — experience + leadership
   ============================================================ */
function RecordTimeline({ rows }) {
  return (
    <div style={{display:"flex",flexDirection:"column"}}>
      {rows.map((r,i)=>(
        <div key={i} style={{display:"grid",gridTemplateColumns:"58px 1fr",gap:18,padding:"16px 0",
          borderBottom:i<rows.length-1?"1px solid var(--line)":"none"}}>
          <span className="disp" style={{fontSize:15,color:"var(--accent-bright)",paddingTop:2}}>{r.d}</span>
          <div>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",gap:12,flexWrap:"wrap"}}>
              <span className="disp" style={{fontSize:19}}>{r.org}</span>
              {r.loc && <span className="mono" style={{fontSize:9.5,color:"var(--muted)"}}>{r.loc}</span>}
            </div>
            <div className="mono" style={{fontSize:11,color:"var(--accent-bright)",margin:"4px 0 7px",letterSpacing:".04em"}}>{r.role}</div>
            <p style={{fontSize:13,lineHeight:1.6,color:"var(--ink-dim)",margin:0,maxWidth:"66ch"}}>{r.note}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function Record() {
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 05 — SERVICE RECORD" title="Record" meta={`<b>EXPERIENCE</b><br/>+ LEADERSHIP<br/>2022 — PRESENT`} />
      <div className="page-body">
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:42,alignItems:"start"}}>
          <div>
            <div className="mono" style={{fontSize:10,letterSpacing:".18em",color:"var(--accent-bright)",marginBottom:6,paddingBottom:10,borderBottom:"1px dashed var(--line-bright)"}}>◆ PROFESSIONAL &amp; RESEARCH</div>
            <RecordTimeline rows={EXPERIENCE} />
          </div>
          <div>
            <div className="mono" style={{fontSize:10,letterSpacing:".18em",color:"var(--accent-bright)",marginBottom:6,paddingBottom:10,borderBottom:"1px dashed var(--line-bright)"}}>◆ FOUNDED &amp; LED</div>
            <RecordTimeline rows={LEADERSHIP} />
          </div>
        </div>
      </div>
      <TitleBlock sheet="05" title="Service Record" extra="ACTIVE" />
    </div>
  );
}

/* ============================================================
   CONTACT — comms
   ============================================================ */
/* Web3Forms — free, unlimited, no account needed.
   Get your key at https://web3forms.com (enter your email, they email you an access key),
   then paste it below to start receiving messages at n.tarun2022@gmail.com. */
const WEB3FORMS_KEY = "01ac8bf7-b5d7-4c16-a953-6a7c80888673";

function ContactForm() {
  const [data, setData] = useState({ name:"", email:"", message:"" });
  const [state, setState] = useState("idle"); // idle | sending | sent | error
  const configured = WEB3FORMS_KEY && !WEB3FORMS_KEY.startsWith("REPLACE");
  const set = (k) => (e) => setData(d => ({ ...d, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (state === "sending") return;
    if (!configured) { setState("error"); return; }
    setState("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `Portfolio transmission from ${data.name || "someone"}`,
          from_name: data.name || "Portfolio visitor",
          name: data.name, email: data.email, message: data.message,
        }),
      });
      const json = await res.json();
      if (json.success) { setState("sent"); setData({ name:"", email:"", message:"" }); }
      else setState("error");
    } catch (err) { setState("error"); }
  };

  if (state === "sent") {
    return (
      <div className="panel" style={{padding:"40px 24px",textAlign:"center"}}>
        <div className="disp" style={{fontSize:34,color:"var(--accent-bright)",marginBottom:10}}>✓ SENT</div>
        <div className="mono" style={{fontSize:12,color:"var(--ink-dim)",lineHeight:1.7}}>Transmission received.<br/>I'll get back to you within 48 hours.</div>
        <button className="btn" style={{marginTop:22}} onClick={() => setState("idle")}>Send another</button>
      </div>
    );
  }

  const fieldStyle = {
    width:"100%", border:"1px solid var(--line)", background:"var(--bg)",
    color:"var(--ink)", fontFamily:"var(--mono)", fontSize:13, padding:"11px 12px",
    borderRadius:"var(--radius)", outline:"none",
  };

  return (
    <form className="panel" style={{padding:22}} onSubmit={submit}>
      <div style={{marginBottom:15}}>
        <div className="mono" style={{fontSize:9,letterSpacing:".14em",color:"var(--muted)",marginBottom:6}}>IDENTIFIER</div>
        <input className="field" style={fieldStyle} value={data.name} onChange={set("name")} placeholder="your name" required />
      </div>
      <div style={{marginBottom:15}}>
        <div className="mono" style={{fontSize:9,letterSpacing:".14em",color:"var(--muted)",marginBottom:6}}>RETURN CHANNEL</div>
        <input className="field" type="email" style={fieldStyle} value={data.email} onChange={set("email")} placeholder="your email" required />
      </div>
      <div className="mono" style={{fontSize:9,letterSpacing:".14em",color:"var(--muted)",marginBottom:6}}>MESSAGE</div>
      <textarea className="field" style={{...fieldStyle, minHeight:110, resize:"vertical"}} value={data.message} onChange={set("message")} placeholder="type your message…" required />
      {state === "error" && (
        <div className="mono" style={{fontSize:10.5,color:"var(--accent-bright)",marginTop:12,lineHeight:1.6}}>
          {configured ? "⚠ Transmission failed — check your connection and retry."
            : "⚠ Form not wired up yet. Add your free Web3Forms access key to start receiving messages."}
        </div>
      )}
      <button className="btn primary" type="submit" disabled={state==="sending"}
        style={{marginTop:16,width:"100%",justifyContent:"center",opacity:state==="sending"?.7:1}}>
        {state==="sending" ? "Transmitting…" : <span>Transmit <span className="arr">→</span></span>}
      </button>
    </form>
  );
}

function Contact() {
  return (
    <div className="page sheet-grid">
      <SecHead kicker="SHEET 06 — COMMS" title="Contact" meta={`<b>CHANNELS OPEN</b><br/>RESPONSE < 48H<br/>PACIFIC TIME`} />
      <div className="page-body">
        <div style={{display:"grid",gridTemplateColumns:"1fr 1.1fr",gap:40,alignItems:"start"}}>
          <div>
            <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:16}}>SECURE CHANNELS</div>
            <div className="panel">
              {SOCIALS.map((s,i)=>(
                <a key={i} href={s[3]||undefined} target={s[3]&&s[3].startsWith("http")?"_blank":undefined} rel="noopener"
                  className="socrow"
                  style={{display:"flex",alignItems:"center",gap:15,padding:"14px 16px",
                  borderBottom:i<SOCIALS.length-1?"1px solid var(--line)":"none",textDecoration:"none",color:"var(--ink)",
                  cursor:s[3]?"pointer":"default"}}>
                  <span className="disp" style={{width:38,height:34,display:"flex",alignItems:"center",justifyContent:"center",
                    border:"1px solid var(--line-bright)",borderRadius:2,fontSize:11,color:"var(--accent-bright)",flex:"0 0 auto"}}>{s[0]}</span>
                  <span style={{flex:1}}><span className="disp" style={{fontSize:16,display:"block"}}>{s[1]}</span>
                    <span className="mono" style={{fontSize:10.5,color:"var(--muted)"}}>{s[2]}</span></span>
                  {s[3] && <span className="mono" style={{fontSize:13,color:"var(--muted)"}}>→</span>}
                </a>
              ))}
            </div>
          </div>
          <div>
            <div className="mono" style={{fontSize:10,letterSpacing:".16em",color:"var(--accent-bright)",marginBottom:16}}>SEND TRANSMISSION</div>
            <ContactForm />
          </div>
        </div>
      </div>
      <TitleBlock sheet="06" title="Communications" extra="CHANNELS OPEN" />
    </div>
  );
}

/* ---------- registry ---------- */
const SECTIONS = [
  { id:"home", label:"Cover", idx:"00", Comp:Home },
  { id:"projects", label:"Projects", idx:"01", Comp:Projects },
  { id:"photos", label:"Photos", idx:"02", Comp:Photos },
  { id:"about", label:"About", idx:"03", Comp:About },
  { id:"record", label:"Record", idx:"04", Comp:Record },
  { id:"contact", label:"Contact", idx:"05", Comp:Contact },
];

Object.assign(window, { SECTIONS, Home, Projects, Photos, About, Record, Contact });
