/* ============ chethan — section components ============ */

/* --- brand mark: italic 'c' under a rotating wordmark seal --- */
function Mark({ spinning = false }) {
  return (
    <span className={"mark " + (spinning ? "spinning" : "")}>
      <svg viewBox="0 0 36 36" aria-hidden="true">
        <defs>
          <path id="markRingPath" d="M 18 18 m -14 0 a 14 14 0 1 1 28 0 a 14 14 0 1 1 -28 0" />
        </defs>
        {/* outer + inner rings */}
        <circle className="ring ring--outer" cx="18" cy="18" r="17" />
        <circle className="ring ring--inner" cx="18" cy="18" r="11.5" />
        {/* rotating wordmark along ring */}
        <g className="mark__rotor">
          {spinning && (
            <animateTransform attributeName="transform" type="rotate"
              from="0 18 18" to="360 18 18" dur="16s" repeatCount="indefinite" />
          )}
          <text className="mark__rotor-text" fontSize="3.3" letterSpacing="1.4">
            <textPath href="#markRingPath" startOffset="0">CHETHAN · KRISHNA · CHETHAN · KRISHNA · </textPath>
          </text>
        </g>
        {/* tiny orbital dot — counter-spins */}
        <g className="mark__dot">
          {spinning && (
            <animateTransform attributeName="transform" type="rotate"
              from="360 18 18" to="0 18 18" dur="8s" repeatCount="indefinite" />
          )}
          <circle cx="18" cy="3" r="1.2" fill="currentColor" />
        </g>
        {/* center italic c — stays still */}
        <text className="mark__c" x="18" y="23.6" textAnchor="middle">c</text>
      </svg>
    </span>
  );
}

/* --- LOADER --- */
function Loader({ onDone }) {
  const [pct, setPct] = React.useState(0);
  const [out, setOut] = React.useState(false);
  React.useEffect(() => {
    let p = 0;
    const id = setInterval(() => {
      p += Math.random() * 12 + 4;
      if (p >= 100) { p = 100; clearInterval(id); setTimeout(() => { setOut(true); setTimeout(onDone, 700); }, 350); }
      setPct(Math.round(p));
    }, 110);
    return () => clearInterval(id);
  }, [onDone]);
  const letters = "chethan";
  return (
    <div className={"loader " + (out ? "is-out" : "")}>
      <div className="loader__count">
        <b>{String(pct).padStart(3, "0")}</b> / 100
      </div>
      <div className="loader__hint">LOADING<span className="dot-blink" style={{marginLeft:8}}></span></div>
      <div className="loader__mark">
        {letters.split("").map((ch, i) => (
          <span key={i} style={{animationDelay: (i * 60) + "ms"}}>{ch}</span>
        ))}
        <span className="dot" />
      </div>
      <div className="loader__bar" style={{ width: pct + "%" }} />
    </div>
  );
}

/* --- TOPBAR --- */
function Topbar({ time, spinning = true, onMenuToggle, menuOpen, inverted, onThemeToggle }) {
  const burgerRef = useMagnetic(0.3);
  return (
    <header className="topbar">
      <div className="topbar__left">
        <span><span className="dot-blink"></span><b>OPEN TO WORK</b></span>
        <span className="topbar__hide-mob">VELLORE · <b>{time}</b></span>
      </div>
      <a className="topbar__brand" href="#top" data-cursor="link">
        <Mark spinning={spinning} />
        chethan<span style={{color: "var(--mute)", fontFamily: "var(--font-mono)", fontSize: 13, marginLeft: 6}}>.dev</span>
      </a>
      <div className="topbar__right">
        <a className="topbar__hide-mob" href="#works"><Scramble>WORK</Scramble></a>
        <a className="topbar__hide-mob" href="#stack"><Scramble>STACK</Scramble></a>
        <a className="topbar__hide-mob" href="#github"><Scramble>GITHUB</Scramble></a>
        <a className="topbar__hide-mob" href="#about"><Scramble>ABOUT</Scramble></a>
        <button className={"theme-btn " + (inverted ? "is-on" : "")} onClick={onThemeToggle}
                data-cursor="link" aria-label="Toggle black & white" title="Invert theme">
          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
            <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.4"/>
            <path d="M12 3 A 9 9 0 0 1 12 21 Z" fill="currentColor"/>
          </svg>
        </button>
        <button ref={burgerRef}
          className={"burger " + (menuOpen ? "is-open" : "")}
          aria-label="menu"
          onClick={onMenuToggle}
          data-cursor="link">
          <span></span><span></span>
        </button>
        <span className="topbar__hide-mob" style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".18em", color:"var(--mute)", marginLeft:4}}>MENU</span>
      </div>
    </header>
  );
}

/* --- FULLSCREEN MENU --- */
function MenuOverlay({ open, onClose, onJump }) {
  const items = [
    { id: "top",      label: "Home",     n: "00" },
    { id: "works",    label: "Work",     n: "01" },
    { id: "more",     label: "Archive",  n: "02" },
    { id: "aosp",     label: "AOSP",     n: "·" },
    { id: "stack",    label: "Stack",    n: "03" },
    { id: "about",    label: "About",    n: "04" },
    { id: "github",   label: "GitHub",   n: "05" },
    { id: "research", label: "Research", n: "06" },
    { id: "contact",  label: "Contact",  n: "07" },
  ];
  const socials = [
    { l: "GitHub",   h: "https://github.com/Chethan616" },
    { l: "LinkedIn", h: "https://www.linkedin.com/in/chethan-krishna-manikonda-33561628a/" },
    { l: "Discord",  h: "https://discord.com/users/937907665504469093" },
    { l: "Play",     h: "https://play.google.com/store/apps/details?id=com.noxquill.rewordium" },
    { l: "Email",    h: "mailto:chethankrishnamanikonda@gmail.com" },
  ];
  return (
    <div className={"menu " + (open ? "is-open" : "")} aria-hidden={!open}>
      <div className="menu__bg" />
      <div className="menu__inner shell">
        <div className="menu__head">
          <div className="menu__index">INDEX / NAVIGATION</div>
          <div className="menu__loc">VELLORE · IN</div>
        </div>
        <ul className="menu__list">
          {items.map((it, i) => (
            <li key={it.id} style={{transitionDelay: open ? (120 + i*70) + "ms" : "0ms"}}>
              <button onClick={() => { onClose(); setTimeout(() => onJump(it.id), 280); }} data-cursor="view">
                <span className="menu__n">{it.n}</span>
                <span className="menu__label">{it.label}</span>
                <span className="menu__arr">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg>
                </span>
              </button>
            </li>
          ))}
        </ul>
        <div className="menu__foot">
          <div>
            <div className="menu__k">ELSEWHERE</div>
            <div className="menu__socials">
              {socials.map((s, i) => (
                <a key={s.l} href={s.h} target="_blank" rel="noreferrer" data-cursor="link"
                   style={{transitionDelay: open ? (320 + i*40) + "ms" : "0ms"}}>
                  <Scramble>{s.l}</Scramble>
                </a>
              ))}
            </div>
          </div>
          <div>
            <div className="menu__k">EMAIL</div>
            <a className="menu__email" href="mailto:chethankrishnamanikonda@gmail.com" data-cursor="link">
              chethankrishnamanikonda<br/>@gmail.com
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- SIDENAV --- */
function SideNav({ active, onJump }) {
  const items = [
    { id: "works",    label: "01 — WORK" },
    { id: "more",     label: "02 — MORE" },
    { id: "aosp",     label: "—  AOSP" },
    { id: "stack",    label: "03 — STACK" },
    { id: "about",    label: "04 — ABOUT" },
    { id: "github",   label: "05 — GITHUB" },
    { id: "research", label: "06 — RESEARCH" },
    { id: "contact",  label: "07 — CONTACT" },
  ];
  return (
    <nav className="sidenav">
      {items.map(it => (
        <button key={it.id}
          className={active === it.id ? "active" : ""}
          onClick={() => onJump(it.id)}
          data-cursor="link"
        >{it.label}</button>
      ))}
    </nav>
  );
}

/* --- HERO --- */
function Hero({ titleVariant }) {
  const ctaRef = useMagnetic(0.4);
  const titles = {
    classic: ["Hi,", "I'm", <em key="e">Chethan</em>, "—", "I", "build", "things", "that", "feel", "native."],
    bold:    ["Bold", "builds.", <em key="e">Quiet</em>, "shipping."],
    studio:  ["Software", <em key="e">developer</em>, "&", "tech", "explorer."],
  };
  const words = titles[titleVariant] || titles.classic;
  return (
    <section id="top" className="hero">
      <div className="shell hero__inner">
        <div className="hero__eyebrow">
          <span className="line" />
          <span>INDEX · 2022—2026</span>
          <span style={{marginLeft: "auto"}}>VIT VELLORE · CSE / AI · ML</span>
        </div>
        <h1 className="hero__title">
          {words.map((w, i) => (
            <React.Fragment key={i}>
              <span className="word"><span style={{animationDelay: (80 + i*60) + "ms"}}>{w}</span></span>
              {i < words.length - 1 ? " " : null}
            </React.Fragment>
          ))}
        </h1>
        <div className="hero__row">
          <p className="hero__bio">
            <b>Chethan Krishna Manikonda</b> — software engineer working
            across <b>AI / ML</b>, <b>computer vision</b>, <b>reinforcement
            learning</b> and <b>cross-platform applications</b>. I build
            production systems where models, infra and interface meet.
            <br/><br/>
            Currently extending <b>Rewordium</b> & shipping
            an explainable-decision-intelligence service.
          </p>
          <a className="hero__cta" href="#works" ref={ctaRef} data-cursor="explore">
            <span className="cta">
              <span className="cta__rotor">
                <svg viewBox="0 0 168 168">
                  <defs>
                    <path id="rotor-path" d="M 84,84 m -64,0 a 64,64 0 1,1 128,0 a 64,64 0 1,1 -128,0" />
                  </defs>
                  <text fontFamily="var(--font-mono)" fontSize="10.5" fill="currentColor" letterSpacing="3">
                    <textPath href="#rotor-path">SELECTED WORK · 2022—2026 · SELECTED WORK · 2022—2026 ·</textPath>
                  </text>
                </svg>
              </span>
              <span className="cta__inner">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </span>
            </span>
          </a>
          <div className="hero__meta">
            <div>SHIPPED · <b>8+ PROJECTS</b></div>
            <div>PUBLISHED · <b>IEEE 2024</b></div>
            <div>USERS · <b>20K+ ON PLAY</b></div>
            <div>FOCUS · <b>ML / VISION / RL</b></div>
          </div>
        </div>
      </div>

      {/* refined floating tags — gentler rotation, slower bob */}
      <div className="stickers" aria-hidden="false">
        <span className="sticker s1" style={{transform:"rotate(-2deg)"}}>AI / ML</span>
        <span className="sticker s2" style={{transform:"rotate(2deg)"}}>Computer Vision</span>
        <span className="sticker s3" style={{transform:"rotate(-1.5deg)"}}>Gen-AI</span>
        <span className="sticker s4 sticker--dark" style={{transform:"rotate(2.5deg)"}}>
          <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" style={{marginRight:6, display:"inline-block", verticalAlign:"-1px"}}><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.5l7.1-.6L12 2z"/></svg>
          Published · IEEE 2024
        </span>
        <span className="sticker s5" style={{transform:"rotate(-3deg)"}}>VIT · CSE</span>
        <a className="sticker s7"
           href="#aosp" data-cursor="link"
           style={{transform:"rotate(-1deg)"}}>
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{marginRight:6, display:"inline-block", verticalAlign:"-1px"}}>
            <path d="M5 8l2 3M19 8l-2 3M4 11h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z"/>
            <circle cx="9" cy="14" r=".8" fill="currentColor"/>
            <circle cx="15" cy="14" r=".8" fill="currentColor"/>
          </svg>
          AOSP · Android
        </a>
        <a className="sticker s6 sticker--link"
           href="https://github.com/Chethan616/pflo/raw/main/chethans_resume.pdf"
           target="_blank" rel="noreferrer" data-cursor="view"
           style={{transform:"rotate(1.5deg)"}}>
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.5" style={{marginRight:6, display:"inline-block", verticalAlign:"-1px"}}>
            <path d="M12 4v12M6 12l6 6 6-6M5 20h14"/>
          </svg>
          Résumé · PDF
        </a>
      </div>
    </section>
  );
}

/* --- MARQUEE --- */
function Star() {
  return (
    <svg className="star" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0 L13.5 10.5 L24 12 L13.5 13.5 L12 24 L10.5 13.5 L0 12 L10.5 10.5 Z"/>
    </svg>
  );
}
function Marquee() {
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const dragRef = React.useRef({ active: false, startX: 0, startOffset: 0, offset: 0 });
  const items = [
    "Flutter", <em key="e1">dart</em>, "Firebase", <em key="e2">gen-ai</em>,
    "Qwen 3", <em key="e3">react</em>, "Next.js", <em key="e4">python</em>, "Go", <em key="e5">android</em>,
  ];
  const onPointerDown = (e) => {
    if (e.pointerType === "mouse" && e.button !== 0) return;
    const wrap = e.currentTarget;
    wrap.setPointerCapture(e.pointerId);
    dragRef.current.active = true;
    dragRef.current.startX = e.clientX;
    dragRef.current.startOffset = dragRef.current.offset;
    wrap.classList.add("is-dragging");
  };
  const onPointerMove = (e) => {
    if (!dragRef.current.active) return;
    const dx = e.clientX - dragRef.current.startX;
    const next = dragRef.current.startOffset + dx;
    dragRef.current.offset = next;
    if (trackRef.current) {
      trackRef.current.style.setProperty("--drag-offset", `${next}px`);
    }
  };
  const onPointerUp = (e) => {
    if (!dragRef.current.active) return;
    dragRef.current.active = false;
    e.currentTarget.classList.remove("is-dragging");
    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* noop */ }
  };
  const renderGroup = (k) => (
    <span key={k}>
      {items.map((it, i) => (
        <React.Fragment key={i}>{it}<Star /></React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" ref={wrapRef} data-cursor="drag"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         onPointerCancel={onPointerUp}
         onPointerLeave={onPointerUp}>
      <div className="marquee__track" ref={trackRef}>
        {renderGroup("a")}
        {renderGroup("b")}
      </div>
    </div>
  );
}

/* --- PROJECT GLYPHS (animated SVG signatures per project) --- */
function ProjectGlyph({ code }) {
  if (code === "EDI") return (
    /* Explainable Decision Intelligence — decision tree + SHAP bars */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      {/* tree */}
      <circle cx="160" cy="40" r="6" fill="currentColor"/>
      <line x1="160" y1="46" x2="100" y2="86"/>
      <line x1="160" y1="46" x2="220" y2="86"/>
      <circle cx="100" cy="92" r="5"/>
      <circle cx="220" cy="92" r="5"/>
      <line x1="100" y1="98" x2="68" y2="138"/>
      <line x1="100" y1="98" x2="132" y2="138"/>
      <line x1="220" y1="98" x2="188" y2="138"/>
      <line x1="220" y1="98" x2="252" y2="138"/>
      {[68,132,188,252].map((cx, i) => (
        <circle key={i} cx={cx} cy="142" r="4" fill="currentColor" opacity={i===2 ? 1 : .35}>
          <animate attributeName="opacity" values={i===2 ? "1;.4;1" : ".35;.7;.35"} dur="2.4s" begin={(i*.2)+"s"} repeatCount="indefinite"/>
        </circle>
      ))}
      {/* SHAP bars */}
      <g transform="translate(40, 170)">
        <line x1="0" y1="0" x2="240" y2="0" opacity=".25"/>
        <rect x="0" y="-12" width="120" height="6" fill="currentColor">
          <animate attributeName="width" values="120;180;120" dur="3s" repeatCount="indefinite"/>
        </rect>
        <rect x="0" y="-2" width="60" height="6">
          <animate attributeName="width" values="60;100;60" dur="3s" begin=".3s" repeatCount="indefinite"/>
        </rect>
        <rect x="0" y="8" width="180" height="6" opacity=".5">
          <animate attributeName="width" values="180;140;180" dur="3s" begin=".6s" repeatCount="indefinite"/>
        </rect>
      </g>
      <text x="40" y="200" fontFamily="var(--font-mono)" fontSize="8" fill="currentColor" opacity=".5" letterSpacing="2">SHAP · EXPLAINABILITY · 0.87</text>
    </svg>
  );
  if (code === "PXL") return (
    /* PixelDNA — pixel grid morphing into DNA helix */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      <g opacity=".4">
        {Array.from({length: 6}).map((_, r) =>
          Array.from({length: 6}).map((_, c) => (
            <rect key={r+"-"+c} x={30 + c*14} y={50 + r*14} width="10" height="10"
                  fill={(r+c) % 3 === 0 ? "currentColor" : "none"}>
              <animate attributeName="opacity" values="1;.3;1"
                dur="2.4s" begin={((r+c) * 0.08).toFixed(2) + "s"} repeatCount="indefinite"/>
            </rect>
          ))
        )}
      </g>
      {/* DNA helix */}
      <g transform="translate(190, 30)">
        {Array.from({length: 9}).map((_, i) => {
          const y = i * 18;
          const phase = i * 0.6;
          return (
            <g key={i}>
              <circle cx={50 + Math.sin(phase)*30} cy={y+10} r="3" fill="currentColor"/>
              <circle cx={50 - Math.sin(phase)*30} cy={y+10} r="3" fill="currentColor" opacity=".5"/>
              <line x1={50 + Math.sin(phase)*30} y1={y+10} x2={50 - Math.sin(phase)*30} y2={y+10} opacity=".4"/>
            </g>
          );
        })}
      </g>
      <text x="30" y="200" fontFamily="var(--font-mono)" fontSize="8" fill="currentColor" opacity=".5" letterSpacing="2">PHASH · ORB · 0.94 MATCH</text>
    </svg>
  );
  if (code === "CPD") return (
    /* ChatWithPDF — PDF + chat bubble */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      {/* PDF */}
      <g transform="translate(50, 30)">
        <path d="M0 0 H70 L90 20 V160 H0 Z" />
        <path d="M70 0 V20 H90"/>
        <line x1="14" y1="38" x2="74" y2="38" opacity=".6"/>
        <line x1="14" y1="50" x2="80" y2="50" opacity=".4"/>
        <line x1="14" y1="62" x2="68" y2="62" opacity=".4"/>
        <line x1="14" y1="80" x2="80" y2="80" opacity=".4"/>
        <line x1="14" y1="92" x2="60" y2="92" opacity=".4"/>
        <line x1="14" y1="110" x2="80" y2="110" opacity=".4"/>
        <line x1="14" y1="122" x2="70" y2="122" opacity=".4"/>
        <text x="45" y="148" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="currentColor" letterSpacing="2">PDF</text>
      </g>
      {/* chat bubbles */}
      <g transform="translate(170, 50)">
        <rect x="0" y="0" width="120" height="30" rx="15"/>
        <line x1="14" y1="15" x2="100" y2="15" opacity=".5"/>
      </g>
      <g transform="translate(160, 92)">
        <rect x="0" y="0" width="100" height="28" rx="14" fill="currentColor"/>
        <line x1="14" y1="14" x2="86" y2="14" stroke="var(--bg)" opacity=".7"/>
      </g>
      <g transform="translate(180, 132)">
        <circle cx="6" cy="0" r="3" fill="currentColor"><animate attributeName="opacity" values="1;.2;1" dur=".8s" repeatCount="indefinite"/></circle>
        <circle cx="20" cy="0" r="3" fill="currentColor"><animate attributeName="opacity" values=".2;1;.2" dur=".8s" repeatCount="indefinite"/></circle>
        <circle cx="34" cy="0" r="3" fill="currentColor"><animate attributeName="opacity" values="1;.2;1" dur=".8s" begin=".4s" repeatCount="indefinite"/></circle>
      </g>
      <text x="30" y="200" fontFamily="var(--font-mono)" fontSize="8" fill="currentColor" opacity=".5" letterSpacing="2">FAISS · GEMINI · LANGCHAIN</text>
    </svg>
  );
  if (code === "CLR") return (
    /* ClearPDF — liquid glass blur stack */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      <defs>
        <filter id="clr-blur"><feGaussianBlur stdDeviation="1.2"/></filter>
      </defs>
      <g transform="translate(60, 30)" filter="url(#clr-blur)" opacity=".5">
        <rect x="0" y="0" width="180" height="40" rx="10"/>
        <rect x="20" y="50" width="180" height="40" rx="10"/>
        <rect x="0" y="100" width="180" height="40" rx="10"/>
      </g>
      <g transform="translate(60, 30)">
        <rect x="0" y="0" width="180" height="40" rx="10"/>
        <rect x="20" y="50" width="180" height="40" rx="10" fill="currentColor" opacity=".08"/>
        <rect x="20" y="50" width="180" height="40" rx="10"/>
        <rect x="0" y="100" width="180" height="40" rx="10"/>
      </g>
      <line x1="20" y1="14" x2="160" y2="14" opacity=".5"/>
      <line x1="40" y1="64" x2="160" y2="64" opacity=".5"/>
      <line x1="20" y1="114" x2="120" y2="114" opacity=".5"/>
      <text x="30" y="200" fontFamily="var(--font-mono)" fontSize="8" fill="currentColor" opacity=".5" letterSpacing="2">JETPACK · COMPOSE · GLASS</text>
      <circle cx="280" cy="190" r="6" fill="currentColor">
        <animate attributeName="r" values="4;8;4" dur="1.6s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
  if (code === "PPT") return (
    /* ECG pulse line */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      <line x1="20" y1="110" x2="300" y2="110" opacity=".18"/>
      <path d="M20 110 L70 110 L85 110 L92 90 L100 130 L108 70 L116 150 L124 110 L160 110 L300 110"
            fill="none" strokeWidth="1.6">
        <animate attributeName="stroke-dasharray" values="0 600;600 0" dur="2.4s" repeatCount="indefinite"/>
      </path>
      <g transform="translate(230, 70)">
        <path d="M0 8 C0 0 -10 -4 -14 4 C-18 -4 -28 0 -28 8 C-28 18 -14 26 -14 26 C-14 26 0 18 0 8 Z"
              fill="currentColor">
          <animate attributeName="opacity" values="1;.4;1" dur="1.2s" repeatCount="indefinite"/>
        </path>
      </g>
      <text x="20" y="180" fontFamily="var(--font-mono)" fontSize="9" fill="currentColor" opacity=".5" letterSpacing="2">BLOOD · MATCH · LIVE</text>
    </svg>
  );
  if (code === "RWD") return (
    /* AI rewriting text — bars morphing */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      <rect x="40" y="40" width="240" height="140" rx="2" opacity=".5"/>
      <g>
        <rect x="56" y="60" width="100" height="6">
          <animate attributeName="width" values="100;180;120;200" dur="3s" repeatCount="indefinite"/>
        </rect>
        <rect x="56" y="78" width="200" height="6">
          <animate attributeName="width" values="200;140;220;160" dur="3s" repeatCount="indefinite"/>
        </rect>
        <rect x="56" y="96" width="160" height="6">
          <animate attributeName="width" values="160;200;120;180" dur="3s" repeatCount="indefinite"/>
        </rect>
        <rect x="56" y="114" width="120" height="6">
          <animate attributeName="width" values="120;180;160;100" dur="3s" repeatCount="indefinite"/>
        </rect>
      </g>
      <g transform="translate(56, 144)">
        <rect width="32" height="14" rx="2" fill="currentColor"/>
        <text x="16" y="10" fontFamily="var(--font-mono)" fontSize="7" fill="var(--bg)" textAnchor="middle" letterSpacing="1">AI</text>
      </g>
      <circle cx="240" cy="151" r="3" fill="currentColor"><animate attributeName="opacity" values="1;.2;1" dur=".8s" repeatCount="indefinite"/></circle>
      <circle cx="252" cy="151" r="3" fill="currentColor"><animate attributeName="opacity" values=".2;1;.2" dur=".8s" repeatCount="indefinite"/></circle>
      <circle cx="264" cy="151" r="3" fill="currentColor"><animate attributeName="opacity" values="1;.2;1" dur=".8s" begin=".4s" repeatCount="indefinite"/></circle>
    </svg>
  );
  if (code === "QWX") return (
    /* upvote stack — reddit-style */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      {[0,1,2,3].map(i => (
        <g key={i} transform={"translate(" + (60 + i*55) + ", 50)"} opacity={1 - i*0.15}>
          <rect x="0" y="0" width="40" height="120" rx="3"/>
          <path d={"M20 " + (90 - i*8) + " L8 " + (100 - i*8) + " L32 " + (100 - i*8) + " Z"} fill="currentColor">
            <animate attributeName="transform" values={"translate(0,0);translate(0,-8);translate(0,0)"} dur="1.8s" begin={(i*.2) + "s"} repeatCount="indefinite"/>
          </path>
          <line x1="8" y1="50" x2="32" y2="50" opacity=".4"/>
          <line x1="8" y1="40" x2="28" y2="40" opacity=".4"/>
          <text x="20" y="110" fontFamily="var(--font-mono)" fontSize="8" fill="currentColor" textAnchor="middle">{12 + i*4}k</text>
        </g>
      ))}
    </svg>
  );
  if (code === "FLR") return (
    /* speech bubbles trail */
    <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.1">
      <g>
        <rect x="40" y="60" width="120" height="34" rx="17"/>
        <line x1="60" y1="77" x2="140" y2="77" opacity=".5"/>
      </g>
      <g transform="translate(0, 8)">
        <rect x="170" y="100" width="110" height="34" rx="17" fill="currentColor"/>
        <line x1="190" y1="117" x2="260" y2="117" stroke="var(--bg)" opacity=".7"/>
      </g>
      <g>
        <rect x="60" y="142" width="90" height="30" rx="15"/>
        <line x1="78" y1="157" x2="135" y2="157" opacity=".5"/>
      </g>
      <circle cx="290" cy="60" r="6">
        <animate attributeName="r" values="4;8;4" dur="1.4s" repeatCount="indefinite"/>
      </circle>
      <circle cx="290" cy="60" r="2" fill="currentColor"/>
    </svg>
  );
  return null;
}
const WORKS = [
  {
    id: "01", code: "EDI", title: ["Explainable ", <em key="x">Decision</em>, " Intelligence"],
    tag: "FASTAPI · SHAP · SCIKIT-LEARN", year: "2026",
    note: "Production-ready ML explainability service",
    link: "https://github.com/Chethan616/explainable-decision-intelligence",
    status: "BUILDING",
  },
  {
    id: "02", code: "PXL", title: "PixelDNA",
    tag: "FLUTTER · GO · PYTHON · AWS", year: "2025",
    note: "Image similarity — perceptual hashing + ORB matching",
    link: "https://github.com/Chethan616/PixelDNA",
    status: "SHIPPED",
  },
  {
    id: "03", code: "CPD", title: ["Chat with ", <em key="x">PDF</em>],
    tag: "STREAMLIT · GEMINI · LANGCHAIN · FAISS", year: "2025",
    note: "Retrieval-augmented chat over PDFs · live demo",
    link: "https://github.com/Chethan616/ChatWithPDF",
    status: "LIVE",
  },
  {
    id: "04", code: "RWD",
    title: [<span className="cursive" key="c">Re</span>, "wordium"],
    tag: "FLUTTER · GROQ · QWEN 3", year: "2024 — 26",
    note: "AI writing keyboard · 20k+ Play Store users",
    link: "https://github.com/Chethan616/Rewordium",
    status: "IN PROGRESS",
  },
];

const MORE_WORKS = [
  { code: "CLR", title: "ClearPDF",       tag: "KOTLIN · JETPACK COMPOSE",   note: "Android PDF toolkit · liquid glass UI",   stars: 6,  link: "https://github.com/Chethan616/ClearPDF" },
  { code: "PPT", title: "PulsePoint",     tag: "FLUTTER · FIREBASE · AI",    note: "Real-time blood donation platform",        link: "https://github.com/Chethan616/PulsePoint" },
  { code: "QWX", title: "Qwix",           tag: "REACT · NODE · FIREBASE",    note: "Reddit-style social platform",             link: "https://github.com/Chethan616/Qwix" },
  { code: "FLR", title: "Flare Chat",     tag: "FLUTTER · FIREBASE",         note: "1:1 + group chat with media",              link: "https://github.com/Chethan616/FlareChat" },
];
function Works({ variant, onOpen }) {
  return (
    <div id="works" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">01 — SELECTED WORK</div>
          <h2 className="section__title">Things I've <em>built</em></h2>
        </div>
        <p className="section__caption">
          Four current focuses across ML, computer vision and applied AI.
          Tap any project to read more — or jump straight to source.
        </p>
      </div>
      <ul className={"works " + (variant === "tiles" ? "is-tiles" : "")}>
        {WORKS.map((w, i) => (
          <li key={w.id} className="work reveal"
              onClick={() => onOpen ? onOpen(w.code) : window.open(w.link, "_blank")}
              data-cursor="view"
              style={{transitionDelay: (i*40) + "ms"}}>
            <span className="work__num">{w.id} / {w.code}</span>
            <span className="work__title">{Array.isArray(w.title) ? w.title : w.title}</span>
            <span className="work__tag">{w.tag}</span>
            <span className="work__year">{w.year} · {w.status}</span>
            <span className="work__arrow">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </span>
            <span className="work__glyph">
              <ProjectGlyph code={w.code} />
            </span>
            <span className="work__note">{w.note}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* --- MORE PROJECTS --- */
function MoreProjects() {
  return (
    <div id="more" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">02 — MORE WORK</div>
          <h2 className="section__title">From the <em>archive</em></h2>
        </div>
        <p className="section__caption">
          Older shipped products and side experiments. Mobile, web, native Android.
        </p>
      </div>
      <div className="more-grid">
        {MORE_WORKS.map((w, i) => (
          <a key={w.code} href={w.link} target="_blank" rel="noreferrer"
             className="more-card reveal" data-cursor="view"
             style={{transitionDelay: (i*60) + "ms"}}>
            <div className="more-card__glyph">
              <ProjectGlyph code={w.code} />
            </div>
            <div className="more-card__body">
              <div className="more-card__head">
                <span className="more-card__code">{w.code}</span>
                {typeof w.stars === "number" && (
                  <span className="more-card__stars" title="GitHub stars">
                    <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.5l7.1-.6L12 2z"/></svg>
                    {w.stars}
                  </span>
                )}
              </div>
              <h3 className="more-card__title">{Array.isArray(w.title) ? w.title : w.title}</h3>
              <div className="more-card__tag">{w.tag}</div>
              <div className="more-card__note">{w.note}</div>
              <div className="more-card__arrow">
                <span>OPEN ON GITHUB</span>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

/* --- STACK (replaces services) --- */
function ServiceIcon({ k }) {
  if (k === "mobile") return (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.2">
      <rect x="18" y="6" width="20" height="44" rx="3"/>
      <line x1="18" y1="14" x2="38" y2="14"/>
      <line x1="18" y1="42" x2="38" y2="42"/>
      <circle cx="28" cy="46" r="1.5" fill="currentColor"/>
      <circle cx="28" cy="26" r="6">
        <animate attributeName="r" values="4;7;4" dur="2.4s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
  if (k === "ai") return (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="28" cy="28" r="14"/>
      <circle cx="14" cy="28" r="3" fill="currentColor"/>
      <circle cx="42" cy="28" r="3" fill="currentColor"/>
      <circle cx="28" cy="14" r="3" fill="currentColor"/>
      <circle cx="28" cy="42" r="3" fill="currentColor"/>
      <line x1="17" y1="28" x2="39" y2="28"/>
      <line x1="28" y1="17" x2="28" y2="39"/>
      <circle cx="28" cy="28" r="3">
        <animate attributeName="r" values="2;4;2" dur="1.8s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
  if (k === "web") return (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.2">
      <rect x="6" y="10" width="44" height="32" rx="2"/>
      <line x1="6" y1="18" x2="50" y2="18"/>
      <circle cx="11" cy="14" r="1" fill="currentColor"/><circle cx="15" cy="14" r="1" fill="currentColor"/><circle cx="19" cy="14" r="1" fill="currentColor"/>
      <line x1="14" y1="26" x2="42" y2="26" strokeDasharray="2 3">
        <animate attributeName="stroke-dashoffset" from="0" to="10" dur="2s" repeatCount="indefinite"/>
      </line>
      <line x1="14" y1="32" x2="34" y2="32"/>
    </svg>
  );
  if (k === "cloud") return (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M14 38c-5 0-8-4-8-8s4-7 8-7c1-5 6-9 12-9 7 0 12 5 12 12 0 0 8 0 8 8s-7 8-12 8H14z"/>
      <line x1="20" y1="32" x2="36" y2="32">
        <animate attributeName="stroke-dasharray" values="0 20;20 0;0 20" dur="2.4s" repeatCount="indefinite"/>
      </line>
    </svg>
  );
  return null;
}
function Stack() {
  const items = [
    { k: "ai",     n: "01", name: ["AI / ML ", <em key="e">core</em>],   desc: "Applied ML, explainability, evals. Tooling that lives in production.", list: ["scikit-learn / SHAP", "PyTorch / TensorFlow", "Gen AI · LLaMA · Gemini", "FastAPI · Python"] },
    { k: "mobile", n: "02", name: "Computer vision",                       desc: "Image similarity, perceptual hashing, document understanding.", list: ["OpenCV · ORB", "Perceptual hashing", "DCT / Wavelet", "Block matching"] },
    { k: "web",    n: "03", name: ["Cross ", <em key="e">platform</em>], desc: "Flutter, Jetpack Compose, React. One brain, many surfaces.", list: ["Flutter · Dart", "Kotlin · Compose", "React / Next.js", "Firebase · Cloud"] },
    { k: "cloud",  n: "04", name: "Foundations",                          desc: "Comfortable across the stack — pick the right tool, not the favourite.", list: ["Python · Go · C++", "AWS · ECS · S3", "Docker · Terraform", "REST · gRPC · WS"] },
  ];
  return (
    <div id="stack" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">03 — STACK</div>
          <h2 className="section__title">What I <em>work with</em></h2>
        </div>
        <p className="section__caption">
          Four lanes, one engineer. I move between them depending on what the problem actually needs — not what's on my résumé.
        </p>
      </div>
      <div className="services">
        {items.map((s, i) => (
          <div className="service reveal" key={s.n} style={{transitionDelay: (i*80) + "ms"}}>
            <span className="service__num">[ {s.n} ]</span>
            <div className="service__icon"><ServiceIcon k={s.k} /></div>
            <div>
              <h3 className="service__name">{Array.isArray(s.name) ? s.name : s.name}</h3>
              <p className="service__desc">{s.desc}</p>
              <ul className="service__list">
                {s.list.map((it,i) => <li key={i}>— {it}</li>)}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- COUNTER --- */
function Counter({ to, suffix = "" }) {
  const ref = React.useRef(null);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    const io = new IntersectionObserver((e) => {
      if (e[0].isIntersecting) {
        let start = performance.now();
        const dur = 1400;
        const tick = (t) => {
          const p = Math.min(1, (t - start) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: .4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{n}{suffix}</span>;
}

/* --- ABOUT --- */
function About() {
  return (
    <div className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">04 — ABOUT</div>
          <h2 className="section__title">A bit <em>about me</em></h2>
        </div>
        <p className="section__caption">
          Based in Vellore, India. Software engineer focused on intelligent systems — applied ML, vision, RL and the apps they live inside.
        </p>
      </div>
      <div id="about" className="about">
        <div>
          <div className="reveal" style={{display:"flex", alignItems:"center", gap:24, marginBottom:32}}>
            <div style={{width:88, height:88, borderRadius:"50%", overflow:"hidden", border:"1px solid var(--line-2)", flex:"none"}}>
              <img src="https://avatars.githubusercontent.com/u/106482422?v=4" alt="Chethan Krishna" style={{width:"100%", height:"100%", objectFit:"cover", filter:"grayscale(1) contrast(1.05)"}}/>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".2em", color:"var(--mute)"}}>HELLO ·</div>
              <div style={{fontSize:22, fontWeight:500, letterSpacing:"-0.02em", marginTop:4}}>Chethan Krishna Manikonda</div>
            </div>
          </div>
          <p className="about__lead reveal">
            I'm a <b>software engineer</b> focused on the intersection of
            <em> AI / ML</em>, <em>computer vision</em>, <em>reinforcement
            learning</em> and <b>cross-platform applications</b> — currently
            reading <b>CSE (AI &amp; ML)</b> at VIT Vellore.
          </p>
          <p className="about__lead reveal" style={{fontSize:"clamp(18px, 1.6vw, 22px)", color:"var(--mute)", marginTop:24}}>
            I build end-to-end systems — from <em>SHAP-driven explainability</em>
            services to <em>perceptual image-matching</em> pipelines and
            production mobile apps. My published research sits at the
            AI + IoT layer of smart-grid infrastructure.
          </p>
        </div>
        <div className="about__side">
          <div className="kv reveal"><span className="kv__k">EDUCATION</span><span className="kv__v"><b>VIT VELLORE</b> · CSE / AI · ML</span></div>
          <div className="kv reveal"><span className="kv__k">LOCATION</span><span className="kv__v">VELLORE · INDIA</span></div>
          <div className="kv reveal"><span className="kv__k">FOCUS</span><span className="kv__v">AI / ML · VISION · RL · X-PLATFORM</span></div>
          <div className="kv reveal"><span className="kv__k">CURRENTLY</span><span className="kv__v"><b>REWORDIUM - AI WRITING AGENT</b> · EDI SERVICE</span></div>
          <div className="kv reveal"><span className="kv__k">PUBLISHED</span><span className="kv__v">IEEE · 2024</span></div>
          <div className="stats reveal">
            <div className="stat"><div className="stat__n"><Counter to={8} suffix="+" /></div><div className="stat__l">Projects</div></div>
            <div className="stat"><div className="stat__n"><Counter to={500} suffix="+" /></div><div className="stat__l">Play users</div></div>
            <div className="stat"><div className="stat__n"><Counter to={1} suffix="×" /></div><div className="stat__l">IEEE paper</div></div>
          </div>
          <a href="https://github.com/Chethan616/pflo/raw/main/chethans_resume.pdf" target="_blank" rel="noreferrer"
             className="reveal" data-cursor="link"
             style={{display:"inline-flex", alignItems:"center", gap:10, padding:"14px 22px", border:"1px solid var(--fg)", borderRadius:"999px", fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".15em", alignSelf:"flex-start"}}>
            <Scramble>DOWNLOAD RÉSUMÉ · PDF</Scramble>
            <span className="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg></span>
          </a>
        </div>
      </div>

      <div className="clock">
        {[
          { n: "01", t: "Research", d: "Sit with the problem — papers, datasets, prior art. Ask sharper questions, not faster ones." },
          { n: "02", t: "Prototype", d: "Twenty rough directions, two survive. Notebooks, sketches, throwaway code." },
          { n: "03", t: "Engineer", d: "Production-grade — typed APIs, evals, monitoring. Models live inside real systems." },
          { n: "04", t: "Ship",   d: "Instrument, learn, iterate. The work isn't done when the demo loads." },
        ].map((p,i) => (
          <div className="clock__node reveal" key={p.n} style={{transitionDelay: (i*60)+"ms"}}>
            <div className="n">{p.n} · PHASE</div>
            <div className="t">{p.t}</div>
            <div className="d">{p.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- GITHUB STATS --- */
function GitHubStats() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const [user, repos] = await Promise.all([
          fetch("https://api.github.com/users/Chethan616").then(r => r.ok ? r.json() : Promise.reject()),
          fetch("https://api.github.com/users/Chethan616/repos?per_page=100&sort=updated").then(r => r.ok ? r.json() : Promise.reject()),
        ]);
        if (cancelled) return;
        const stars = Array.isArray(repos) ? repos.reduce((s, r) => s + (r.stargazers_count || 0), 0) : 0;
        const top = Array.isArray(repos)
          ? [...repos].sort((a, b) => (b.stargazers_count || 0) - (a.stargazers_count || 0)).slice(0, 4)
          : [];
        const langCount = {};
        if (Array.isArray(repos)) repos.forEach(r => { if (r.language) langCount[r.language] = (langCount[r.language] || 0) + 1; });
        const langs = Object.entries(langCount).sort((a, b) => b[1] - a[1]).slice(0, 5);
        setData({ user, stars, top, langs, repoCount: Array.isArray(repos) ? repos.length : (user.public_repos || 0) });
      } catch (e) {
        if (!cancelled) setError(true);
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const fallback = {
    repoCount: 24,
    stars: 12,
    top: [
      { name: "ClearPDF", stargazers_count: 6, description: "Liquid glass Android PDF toolkit", html_url: "https://github.com/Chethan616/ClearPDF" },
      { name: "PixelDNA", stargazers_count: 2, description: "Image similarity engine", html_url: "https://github.com/Chethan616/PixelDNA" },
      { name: "Rewordium", stargazers_count: 2, description: "AI writing keyboard", html_url: "https://github.com/Chethan616/Rewordium" },
      { name: "PulsePoint", stargazers_count: 1, description: "Blood-donation platform", html_url: "https://github.com/Chethan616/PulsePoint" },
    ],
    langs: [["Dart", 8], ["Python", 6], ["Kotlin", 3], ["TypeScript", 3], ["Go", 2]],
    user: { login: "Chethan616", followers: 14, following: 22 },
  };
  const d = data || (error ? fallback : null);

  return (
    <div id="github" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">05 — GITHUB</div>
          <h2 className="section__title">Live <em>activity</em></h2>
        </div>
        <p className="section__caption">
          Pulled from GitHub in real-time. Source for every project linked above lives at <b>@Chethan616</b>.
        </p>
      </div>
      <div className="gh">
        <div className="gh__bignums reveal">
          <a className="gh__num" href="https://github.com/Chethan616" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="gh__n">{d ? d.repoCount : "—"}</div>
            <div className="gh__l">PUBLIC REPOS</div>
          </a>
          <a className="gh__num" href="https://github.com/Chethan616" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="gh__n">★ {d ? d.stars : "—"}</div>
            <div className="gh__l">TOTAL STARS</div>
          </a>
          <a className="gh__num" href="https://github.com/Chethan616?tab=followers" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="gh__n">{d ? (d.user.followers || 0) : "—"}</div>
            <div className="gh__l">FOLLOWERS</div>
          </a>
          <a className="gh__num" href="https://github.com/Chethan616?tab=repositories" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="gh__n">{d ? (d.user.following || 0) : "—"}</div>
            <div className="gh__l">FOLLOWING</div>
          </a>
        </div>

        <div className="gh__split">
          <div className="gh__col reveal">
            <div className="gh__hd">TOP REPOSITORIES</div>
            <ul className="gh__repos">
              {(d ? d.top : [0,1,2,3]).map((r, i) => (
                <li key={i}>
                  {d ? (
                    <a href={r.html_url} target="_blank" rel="noreferrer" data-cursor="link">
                      <span className="gh__rname">{r.name}</span>
                      <span className="gh__rstars">★ {r.stargazers_count || 0}</span>
                      <span className="gh__rdesc">{r.description || "—"}</span>
                    </a>
                  ) : <span className="gh__skel"></span>}
                </li>
              ))}
            </ul>
          </div>
          <div className="gh__col reveal">
            <div className="gh__hd">LANGUAGES</div>
            <ul className="gh__langs">
              {(d ? d.langs : [0,1,2,3,4]).map((lang, i) => {
                if (!d) return <li key={i}><span className="gh__skel"></span></li>;
                const [name, count] = lang;
                const max = d.langs[0] ? d.langs[0][1] : 1;
                const pct = (count / max) * 100;
                return (
                  <li key={name}>
                    <div className="gh__lname">{name}<span>{count}</span></div>
                    <div className="gh__bar"><div className="gh__barfill" style={{width: pct + "%", transitionDelay: (i*80) + "ms"}}/></div>
                  </li>
                );
              })}
            </ul>
            <div className="gh__contrib">
              <div className="gh__hd" style={{marginTop:20}}>CONTRIBUTION RHYTHM</div>
              <div className="gh__grid">
                {Array.from({length: 7 * 16}).map((_, i) => {
                  const seed = (i * 9301 + 49297) % 233280;
                  const v = (seed / 233280);
                  const level = v > .75 ? 4 : v > .55 ? 3 : v > .35 ? 2 : v > .15 ? 1 : 0;
                  return <span key={i} className={"gh__cell gh__cell-" + level} style={{animationDelay: (i * 12) + "ms"}}/>;
                })}
              </div>
              <div className="gh__legend"><span>less</span><span className="gh__cell gh__cell-0"/><span className="gh__cell gh__cell-1"/><span className="gh__cell gh__cell-2"/><span className="gh__cell gh__cell-3"/><span className="gh__cell gh__cell-4"/><span>more</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- AOSP / ANDROID FEATURE SECTION --- */
function AOSPSection() {
  const commitMessage = `Add unit test for Preconditions

Added a new test class PreconditionsTest.java to test the behavior
of the Preconditions utility class. Currently covers the
checkArgumentNonnegative method to verify custom error messages.

This improves code coverage for core framework utilities.

Test: atest FrameworksCoreTests:com.android.internal.util.PreconditionsTest

Change-Id: I7ac64f946d71eb385e757a5578cbf53b5b3fee69
Signed-off-by: Chethan616 <chethankrishna2022@gmail.com>`;

  return (
    <div id="aosp" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">— OPEN SOURCE · PLATFORM</div>
          <h2 className="section__title">Contributing to <em>AOSP</em></h2>
        </div>
        <p className="section__caption">
          I work in the Android Open Source Project — improving test coverage
          and platform internals. My current change is pending review on Gerrit.
        </p>
      </div>

      <div className="aosp">
        {/* huge bugdroid lockup */}
        <div className="aosp__droid reveal" data-cursor="view">
          <span className="aosp__corner aosp__corner--tl">CL · 3899814</span>
          <span className="aosp__corner aosp__corner--tr">platform / frameworks / base</span>
          <span className="aosp__corner aosp__corner--bl">ANDROID OPEN SOURCE PROJECT</span>
          <span className="aosp__corner aosp__corner--br">PENDING REVIEW</span>

          <svg className="aosp__droid-svg" viewBox="0 0 240 360" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <line x1="80" y1="22" x2="94" y2="56" />
            <line x1="160" y1="22" x2="146" y2="56" />
            <path d="M 50 132 A 70 70 0 0 1 190 132 L 50 132 Z" />
            <g className="aosp__eyes" fill="currentColor" stroke="none">
              <circle cx="90" cy="102" r="6">
                <animate attributeName="r" values="6;6;6;6;6;6;6;6;6;0.5;6" dur="4.5s" repeatCount="indefinite"/>
              </circle>
              <circle cx="150" cy="102" r="6">
                <animate attributeName="r" values="6;6;6;6;6;6;6;6;6;0.5;6" dur="4.5s" repeatCount="indefinite"/>
              </circle>
            </g>
            <rect x="50" y="146" width="140" height="138" rx="10" />
            <line x1="70" y1="180" x2="170" y2="180" opacity=".3"/>
            <line x1="70" y1="200" x2="170" y2="200" opacity=".3"/>
            <line x1="70" y1="220" x2="170" y2="220" opacity=".3"/>
            <line x1="70" y1="240" x2="170" y2="240" opacity=".3"/>
            <line x1="70" y1="260" x2="170" y2="260" opacity=".3"/>
            <rect x="18" y="150" width="22" height="116" rx="11" />
            <rect x="200" y="150" width="22" height="116" rx="11" />
            <rect x="78" y="290" width="22" height="60" rx="11" />
            <rect x="140" y="290" width="22" height="60" rx="11" />
            <path d="M 35 95 A 95 95 0 0 1 205 95" opacity=".18" strokeDasharray="2 5" />
          </svg>
        </div>

        {/* gerrit-style change panel */}
        <div className="aosp__panel reveal">
          <div className="aosp__head">
            <span className="aosp__status aosp__status--pending">
              <span className="aosp__dot"></span>
              PENDING REVIEW
            </span>
            <span className="aosp__cl">CHANGE 3899814</span>
          </div>

          <h3 className="aosp__h3">
            Add unit test for <em>Preconditions</em>
            <span className="aosp__path">com.android.internal.util</span>
          </h3>
          <p className="aosp__lead">
            A contribution to <b>frameworks/base</b> improving test coverage for
            the <b>Preconditions</b> utility — specifically validating the
            <code> checkArgumentNonnegative</code> custom error-message path.
          </p>

          <dl className="aosp__meta">
            <div><dt>CHANGE-ID</dt><dd>I7ac64f946d71eb385e757a5578cbf53b5b3fee69</dd></div>
            <div><dt>PROJECT</dt><dd>platform/frameworks/base</dd></div>
            <div><dt>OWNER</dt><dd>Chethan616 &lt;chethankrishna2022&#64;gmail.com&gt;</dd></div>
            <div><dt>TEST</dt><dd>atest FrameworksCoreTests:PreconditionsTest</dd></div>
            <div><dt>NEW FILE</dt><dd>PreconditionsTest.java</dd></div>
            <div><dt>STATUS</dt><dd>● PENDING ON GERRIT</dd></div>
          </dl>

          <div className="aosp__commit">
            <div className="aosp__commit-bar">
              <span>COMMIT MESSAGE</span>
              <span className="aosp__commit-sha">I7ac64f9 · signed-off</span>
            </div>
            <pre><code>{commitMessage}</code></pre>
          </div>

          <div className="aosp__cta-row">
            <a className="aosp__cta" target="_blank" rel="noreferrer" data-cursor="link"
               href="https://android-review.googlesource.com/c/platform/frameworks/base/+/3899814">
              VIEW ON GERRIT
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </a>
            <a className="aosp__cta aosp__cta--ghost" target="_blank" rel="noreferrer" data-cursor="link"
               href="https://android.googlesource.com/platform/frameworks/base/">
              FRAMEWORKS / BASE
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </a>
          </div>
        </div>
      </div>

      {/* footer rail with tech badges */}
      <div className="aosp__rail reveal">
        <span>AOSP</span>
        <span>·</span>
        <span>JAVA</span>
        <span>·</span>
        <span>FRAMEWORKS/BASE</span>
        <span>·</span>
        <span>UNIT TESTS</span>
        <span>·</span>
        <span>ATEST</span>
        <span>·</span>
        <span>GERRIT</span>
        <span>·</span>
        <span>INTERNAL.UTIL</span>
      </div>
    </div>
  );
}
function Research() {
  return (
    <div id="research" className="shell">
      <div className="section__head reveal">
        <div>
          <div className="section__num">06 — RESEARCH</div>
          <h2 className="section__title">Published <em>papers</em></h2>
        </div>
        <p className="section__caption">
          Co-authored research on AI in critical infrastructure. Open to collaboration on applied ML.
        </p>
      </div>
      <div className="research">
        <a className="paper reveal" target="_blank" rel="noreferrer"
           href="https://ieeexplore.ieee.org/document/10574687"
           data-cursor="view">
          <div className="paper__meta">
            <span>IEEE XPLORE · 2024</span>
            <span>SMART GRID · AI · IOT</span>
          </div>
          <h3 className="paper__title">
            Grid Power 2.0 — Artificial Intelligence (AI) and
            Internet of Things (IoT) Optimizations in <em>Smart Power Grids</em>
          </h3>
          <div className="paper__row">
            <span>READ ON IEEE XPLORE</span>
            <span className="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg></span>
          </div>
        </a>
        <div className="paper__side">
          <a className="paper paper--mini reveal" href="https://ieeexplore.ieee.org/author/929271328145579" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="paper__meta"><span>PROFILE</span></div>
            <div className="paper__name">IEEE Xplore</div>
            <div className="paper__sub">Author page →</div>
          </a>
          <a className="paper paper--mini reveal" href="https://orcid.org/0009-0007-5136-2916" target="_blank" rel="noreferrer" data-cursor="link">
            <div className="paper__meta"><span>ORCID</span></div>
            <div className="paper__name">0009-0007-5136-2916</div>
            <div className="paper__sub">Verified ID →</div>
          </a>
        </div>
      </div>
    </div>
  );
}

/* --- WAVY TEXT (letters lift on hover) --- */
function Wavy({ text, className = "" }) {
  const parts = [];
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    parts.push(
      <span key={i} className="wavy__ch" style={{transitionDelay: (i * 18) + "ms"}}>
        {ch === " " ? "\u00A0" : ch}
      </span>
    );
  }
  return <span className={"wavy " + className}>{parts}</span>;
}

/* --- FOOTER --- */
function Foot() {
  const ctaRef = useMagnetic(0.35);
  const year = new Date().getFullYear();
  return (
    <footer className="foot">
      <div className="shell">
        <div id="contact" className="foot__big reveal">
          <div className="wavy-line">Got a&nbsp;<em><Wavy text="quiet" /></em>&nbsp;idea?</div>
          <div className="wavy-line">Let's make it&nbsp;<em><Wavy text="loud" /></em>.</div>
        </div>

        <a href="mailto:chethankrishnamanikonda@gmail.com" ref={ctaRef} data-cursor="link" className="foot__cta">
          <Scramble>SAY HI ON EMAIL</Scramble>
          <span className="arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 17L17 7M9 7h8v8"/></svg></span>
        </a>

        {/* quick action cards */}
        <div className="foot__cards reveal">
          <a className="foot__card" href="mailto:chethankrishnamanikonda@gmail.com" data-cursor="view">
            <div className="foot__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <path d="M3 7l9 6 9-6"/>
              </svg>
            </div>
            <div className="foot__card-k">EMAIL</div>
            <div className="foot__card-v">chethankrishnamanikonda<wbr/>@gmail.com</div>
            <div className="foot__card-sub">Reply in &lt; 24h</div>
          </a>
          <a className="foot__card" href="https://github.com/Chethan616/pflo/raw/main/chethans_resume.pdf" target="_blank" rel="noreferrer" data-cursor="view">
            <div className="foot__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>
                <path d="M14 3v5h5"/>
                <path d="M12 12v6M9 15l3 3 3-3"/>
              </svg>
            </div>
            <div className="foot__card-k">RÉSUMÉ</div>
            <div className="foot__card-v">Download · PDF</div>
            <div className="foot__card-sub">1 page · 180 kb</div>
          </a>
          <a className="foot__card" href="https://github.com/Chethan616" target="_blank" rel="noreferrer" data-cursor="view">
            <div className="foot__card-icon">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.8.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.7-2.8 5.6-5.5 6 .4.3.8 1 .8 2v3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
            </div>
            <div className="foot__card-k">GITHUB</div>
            <div className="foot__card-v">@Chethan616</div>
            <div className="foot__card-sub">8+ active repos</div>
          </a>
          <a className="foot__card" href="https://www.linkedin.com/in/chethan-krishna-manikonda-33561628a/" target="_blank" rel="noreferrer" data-cursor="view">
            <div className="foot__card-icon">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8 17V10H5.5v7H8zM6.75 8.7a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9zM18.5 17v-3.85c0-2.06-1.1-3.02-2.57-3.02a2.22 2.22 0 0 0-2 1.1V10h-2.5v7h2.5v-3.7c0-1 .19-1.97 1.42-1.97 1.22 0 1.24 1.13 1.24 2.03V17h1.91z"/></svg>
            </div>
            <div className="foot__card-k">LINKEDIN</div>
            <div className="foot__card-v">Chethan Krishna</div>
            <div className="foot__card-sub">Open to roles · Q3</div>
          </a>
        </div>

        {/* columns */}
        <div className="foot__row">
          <div className="foot__col">
            <h5>Native</h5>
            <a href="#"><Scramble>Vellore · IN</Scramble></a>
            <a href="#"><Scramble>VIT University</Scramble></a>
            <a href="#"><Scramble>CSE · AI &amp; ML</Scramble></a>
            <a href="mailto:chethankrishnamanikonda@gmail.com"><Scramble>Email</Scramble></a>
          </div>
          <div className="foot__col">
            <h5>Intelligence</h5>
            <a href="https://github.com/Chethan616" target="_blank" rel="noreferrer"><Scramble>GitHub</Scramble></a>
            <a href="https://www.linkedin.com/in/chethan-krishna-manikonda-33561628a/" target="_blank" rel="noreferrer"><Scramble>LinkedIn</Scramble></a>
            <a href="https://discord.com/users/937907665504469093" target="_blank" rel="noreferrer"><Scramble>Discord</Scramble></a>
            <a href="https://play.google.com/store/apps/details?id=com.noxquill.rewordium" target="_blank" rel="noreferrer"><Scramble>Play Store</Scramble></a>
            <a href="https://orcid.org/0009-0007-5136-2916" target="_blank" rel="noreferrer"><Scramble>ORCID</Scramble></a>
            <a href="https://github.com/Chethan616/pflo/raw/main/chethans_resume.pdf" target="_blank" rel="noreferrer"><Scramble>Résumé · PDF</Scramble></a>
          </div>
          <div className="foot__col">
            <h5>Fluid</h5>
            <a href="#works"><Scramble>Work</Scramble></a>
            <a href="#more"><Scramble>Archive</Scramble></a>
            <a href="#aosp"><Scramble>AOSP</Scramble></a>
            <a href="#stack"><Scramble>Stack</Scramble></a>
            <a href="#about"><Scramble>About</Scramble></a>
            <a href="#github"><Scramble>GitHub</Scramble></a>
            <a href="#research"><Scramble>Research</Scramble></a>
          </div>
          <div className="foot__col foot__col--mono">
            <h5>NOW</h5>
            <div className="foot__now">
              <div className="foot__now-row">
                <span className="foot__now-k">BUILDING</span>
                <span className="foot__now-v">Rewordium - Ai writing agent</span>
              </div>
              <div className="foot__now-row">
                <span className="foot__now-k">READING</span>
                <span className="foot__now-v">SHAP &amp; Beyond</span>
              </div>
              <div className="foot__now-row">
                <span className="foot__now-k">LEARNING</span>
                <span className="foot__now-v">Reinforcement&nbsp;Learning</span>
              </div>
              <div className="foot__now-row">
                <span className="foot__now-k">STATE</span>
                <span className="foot__now-v"><span className="dot-blink" style={{marginRight:6}} />Open to work</span>
              </div>
            </div>
          </div>
        </div>

        {/* bottom bar */}
        <div className="foot__bottom">
          <span>© CHETHAN KRISHNA · MMXXII—MMXX{["VI","VII","VIII","IX","X"][year - 2026] || "VI"}</span>
          <span>NO COOKIES · NO TRACKING · STATIC HTML</span>
          <button className="foot__top" onClick={() => window.scrollTo({top:0, behavior:"smooth"})} data-cursor="link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
            BACK TO TOP
          </button>
        </div>

        {/* massive name watermark */}
        <div className="foot__watermark" aria-hidden="true">
          <span>chethan</span>
        </div>
      </div>
    </footer>
  );
}

/* --- STATUS PILL --- */
function StatusPill({ time }) {
  return (
    <div className="status">
      <span className="pulse"></span>
      <span><b>Open to work</b> · {time}</span>
    </div>
  );
}

Object.assign(window, { Mark, Loader, Topbar, SideNav, MenuOverlay, Hero, Marquee, Works, MoreProjects, ProjectGlyph, Stack, About, GitHubStats, AOSPSection, Research, Foot, StatusPill, Wavy });