/* global React, VerticalCutReveal, Reveal, CountUp, ArrowRight, ArrowUpRight */

/**
 * sections.jsx
 *
 * All visible sections of the portfolio, exported as named window globals
 * so app.jsx can compose them into the page.
 *
 * Section map:
 *  01 · Navbar       — fixed top bar with live clock, dark-mode toggle, mobile menu
 *  02 · Hero         — full-height intro with VerticalCutReveal title + CTA
 *  03 · Marquee      — scrolling ticker strip
 *  04 · About        — bio, interactive Globe, F1Car, 3-column stat strip
 *  05 · Experience   — work history (LiveBest Services, UMass Boston)
 *  06 · Projects     — project cards with DocModal PDF viewer for RAG chatbot
 *  07 · Skills       — tabbed panel (Languages, Frontend, Backend, Databases,
 *                      AI/ML, Cloud & DevOps, Coursework)
 *  08 · Contact      — electric-blue full-width block with icon link rows
 *  09 · Footer       — minimal bottom bar
 *
 * Shared components defined here:
 *  SectionLabel  — "/01 Section name ——————" header row
 *  BigHeading    — animated display heading via VerticalCutReveal
 *  DocModal      — full-screen PDF viewer (Escape / click-outside to close)
 *
 * Data arrays (edit these to update content):
 *  EXPERIENCE    — work history entries
 *  PROJECTS      — project cards
 *  SKILL_GROUPS  — skills organized by category
 *  COURSEWORK    — graduate course list
 *  CONTACTS      — contact link rows
 *
 * Exports (via window.*):
 *  Navbar, Hero, Marquee, About, Experience, Projects, Skills, Contact, Footer
 */

const { useState, useEffect, useRef } = React;

function SectionLabel({ index, children }) {
  return (
    <div className="flex items-center gap-3 mb-10 font-mono text-[11px] tracking-[0.25em] uppercase text-ink/60 dark:text-cream/60">
      <span className="text-electric">/{index}</span>
      <span>{children}</span>
      <span className="flex-1 h-px bg-ink/15 dark:bg-cream/15" />
    </div>
  );
}

function BigHeading({ children, className = "" }) {
  return (
    <h2
      className={`font-sans font-bold tracking-tighter uppercase leading-[0.92] text-[clamp(2.75rem,9vw,8rem)] ${className}`}
    >
      <VerticalCutReveal
        splitBy="characters"
        staggerDuration={0.025}
        staggerFrom="first"
        triggerOnView
        duration={0.95}
      >
        {children}
      </VerticalCutReveal>
    </h2>
  );
}

// ─── NAVBAR ───────────────────────────────────────────────────────────────────

const NAV_LINKS = [
  { label: "About", href: "#about", num: "01" },
  { label: "Experience", href: "#experience", num: "02" },
  { label: "Projects", href: "#projects", num: "03" },
  { label: "Skills", href: "#skills", num: "04" },
  { label: "Contact", href: "#contact", num: "05" },
];

function SunIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
    </svg>
  );
}
function MoonIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
  );
}
function MenuIcon({ open }) {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {open ? (
        <>
          <path d="M18 6 6 18" />
          <path d="m6 6 12 12" />
        </>
      ) : (
        <>
          <path d="M4 7h16" />
          <path d="M4 17h16" />
        </>
      )}
    </svg>
  );
}

function useClock() {
  const [time, setTime] = useState(() =>
    new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", timeZone: "America/New_York" })
  );
  useEffect(() => {
    const id = setInterval(() => {
      setTime(
        new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", timeZone: "America/New_York" })
      );
    }, 30000);
    return () => clearInterval(id);
  }, []);
  return time;
}

function Navbar({ dark, setDark }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const time = useClock();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
  }, [mobileOpen]);

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
          scrolled
            ? "bg-cream/85 dark:bg-ink/85 backdrop-blur-xl border-b border-ink/10 dark:border-cream/10"
            : "bg-transparent"
        }`}
      >
        <nav className="max-w-[1400px] mx-auto px-5 md:px-10 h-16 flex items-center justify-between gap-6">
          <div className="w-10" aria-hidden="true" />

          <ul className="hidden md:flex items-center gap-7">
            {NAV_LINKS.map((l, i) => (
              <li key={l.label}>
                <a
                  href={l.href}
                  className="nav-link group inline-flex items-center gap-1.5 text-[11px] tracking-[0.2em] uppercase font-mono text-ink/70 dark:text-cream/70 hover:text-electric dark:hover:text-electric transition-colors duration-300"
                  style={{ animation: `fade-up 0.7s ${0.3 + i * 0.05}s both` }}
                >
                  <span className="text-electric/60 group-hover:text-electric">{l.num}</span>
                  <span>{l.label}</span>
                </a>
              </li>
            ))}
          </ul>

          <div className="flex items-center gap-2">
            <span className="hidden sm:inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.2em] uppercase text-ink/50 dark:text-cream/50 mr-2">
              <span className="w-1.5 h-1.5 rounded-full bg-electric inline-block" />
              {time} EST
            </span>
            <button
              onClick={() => setDark((d) => !d)}
              aria-label="Toggle theme"
              className="w-9 h-9 border border-ink/15 dark:border-cream/15 flex items-center justify-center text-ink/70 dark:text-cream/70 hover:bg-electric hover:text-cream hover:border-electric transition-all duration-300"
            >
              {dark ? <SunIcon /> : <MoonIcon />}
            </button>
            <button
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Menu"
              className="md:hidden w-9 h-9 border border-ink/15 dark:border-cream/15 flex items-center justify-center text-ink/70 dark:text-cream/70"
            >
              <MenuIcon open={mobileOpen} />
            </button>
          </div>
        </nav>
      </header>

      <div
        className={`fixed inset-0 z-40 md:hidden bg-cream dark:bg-ink transition-opacity duration-500 ${
          mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
        }`}
      >
        <div className="relative h-full flex flex-col justify-center px-8 gap-2">
          {NAV_LINKS.map((l, i) => (
            <a
              key={l.label}
              href={l.href}
              onClick={() => setMobileOpen(false)}
              className={`group block ${mobileOpen ? "mobile-link in" : "mobile-link"}`}
              style={{ animationDelay: `${0.1 + i * 0.08}s` }}
            >
              <div className="flex items-baseline gap-4 border-b border-ink/10 dark:border-cream/10 py-4">
                <span className="font-mono text-xs text-electric">{l.num}</span>
                <span className="font-sans font-bold tracking-tighter uppercase text-5xl group-hover:text-electric transition-colors">
                  {l.label}
                </span>
                <span className="ml-auto text-electric"><ArrowUpRight size={20} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </>
  );
}

// ─── HERO ─────────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section id="top" className="relative min-h-screen flex flex-col overflow-hidden pt-28 pb-24">
      <div className="absolute inset-0 hero-grid pointer-events-none" />

      <div className="relative z-10 flex-1 flex flex-col justify-between max-w-[1400px] w-full mx-auto px-5 md:px-10">
        <div
          className="font-mono text-[10px] md:text-[11px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50"
          style={{ animation: "fade-up 0.8s 0.05s both" }}
        >
          Saketh Tadepalli ©
        </div>

        <div className="my-10 md:my-0">
          <h1 className="font-sans font-bold tracking-tighter uppercase leading-[0.88] text-electric text-[clamp(2.5rem,11vw,10rem)]">
            <div>
              <VerticalCutReveal splitBy="characters" staggerDuration={0.025} staggerFrom="first" duration={0.95} delay={0.2}>
                HI → I'M SAKETH
              </VerticalCutReveal>
            </div>
            <div>
              <VerticalCutReveal splitBy="characters" staggerDuration={0.025} staggerFrom="last" reverse duration={0.95} delay={0.6}>
                TADEPALLI ↗
              </VerticalCutReveal>
            </div>
          </h1>

          <p
            className="mt-6 md:mt-8 font-mono text-sm md:text-base tracking-[0.3em] uppercase text-ink/60 dark:text-cream/60"
            style={{ animation: "fade-up 0.8s 1.4s both" }}
          >
            Full-Stack Software Engineer
          </p>
        </div>

        <div
          className="flex flex-col gap-10 md:flex-row md:items-end md:justify-between"
          style={{ animation: "fade-up 0.9s 2s both" }}
        >
          <div className="max-w-md">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 border border-ink/15 dark:border-cream/15 font-mono text-[10px] tracking-[0.22em] uppercase">
              <span className="relative flex h-2 w-2 items-center justify-center">
                <span className="absolute inline-flex h-full w-full rounded-full bg-electric ping-soft" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-electric" />
              </span>
              <span>Open to New Roles</span>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-3">
            <a href="/resume.pdf" download className="btn-outline group">
              Download Resume
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="arrow">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7 10 12 15 17 10" />
                <line x1="12" y1="15" x2="12" y2="3" />
              </svg>
            </a>
          </div>
        </div>
      </div>

      <a
        href="#about"
        aria-label="Scroll down"
        className="absolute bottom-4 left-1/2 -translate-x-1/2 text-ink/40 dark:text-cream/40 chevron-bounce"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </a>
    </section>
  );
}

// ─── MARQUEE ──────────────────────────────────────────────────────────────────

function Marquee() {
  const items = [
    "Open to New Roles",
    "★",
    "Full-Stack & Backend Opportunities",
    "★",
    "React · TypeScript · Spring Boot · FastAPI",
    "★",
    "Boston ↔ Remote",
    "★",
    "Currently @ LiveBest Services",
    "★",
  ];
  const loop = [...items, ...items, ...items, ...items];
  return (
    <section className="relative border-y border-ink/10 dark:border-cream/10 bg-electric text-cream overflow-hidden py-5">
      <div className="flex whitespace-nowrap marquee will-change-transform">
        {loop.map((s, i) => (
          <span key={i} className="font-sans font-medium tracking-[0.18em] uppercase text-base md:text-lg mx-6 inline-flex items-center">
            {s}
          </span>
        ))}
      </div>
    </section>
  );
}

// ─── ABOUT ────────────────────────────────────────────────────────────────────

function About() {
  return (
    <section id="about" className="relative py-24 md:py-36">
      <div className="max-w-[1100px] mx-auto px-5 md:px-10">
        <SectionLabel index="01">About</SectionLabel>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-7 space-y-5 text-lg md:text-xl leading-relaxed text-ink/75 dark:text-cream/75 text-justify">
            <Reveal delay={0.1}>
              I'm a software engineer who likes building things end to end — from the database
              schema all the way up to the button you click. I'm most at home with problems where
              the answer isn't obvious, and where getting it right means thinking carefully about
              how the pieces fit together.
            </Reveal>
            <Reveal delay={0.2}>
              I work comfortably across the stack:{" "}
              <span className="text-electric font-medium">React</span> and{" "}
              <span className="text-electric font-medium">TypeScript</span> on the frontend,{" "}
              <span className="text-electric font-medium">Spring Boot</span>,{" "}
              <span className="text-electric font-medium">FastAPI</span>, and Node on the backend,
              with PostgreSQL or MongoDB underneath. Lately I've been deep in{" "}
              <span className="text-electric font-medium">RAG pipelines</span> — LangChain,
              ChromaDB, vector search — figuring out how to make language models actually useful
              in production.
            </Reveal>
            <Reveal delay={0.3}>
              I care about clean code, real-world performance, and writing the kind of software
              you don't have to think about because it just works. If something's worth building,
              I'd rather take the time to build it well.
            </Reveal>
          </div>

          <div className="md:col-span-5 md:pl-8 md:border-l border-ink/15 dark:border-cream/15">
            <Reveal delay={0.2}>
              <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.22em] uppercase text-electric mb-4">
                <span>↳ I want to travel the world</span>
              </div>
              <div className="flex justify-center">
                <Globe size={260} />
              </div>
              <p className="mt-6 font-mono text-[10px] tracking-[0.18em] uppercase text-ink/40 dark:text-cream/40 text-center">
                Hover a dot to see the city
              </p>
            </Reveal>

            <Reveal delay={0.35} className="mt-10 pt-6 border-t border-ink/10 dark:border-cream/10">
              <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.22em] uppercase text-electric mb-4">
                <span>↳ Off-hours</span>
                <span className="text-ink/40 dark:text-cream/40">/ Forza Ferrari</span>
              </div>
              <div className="flex justify-center">
                <F1Car width={280} />
              </div>
              <p className="mt-4 font-mono text-[10px] tracking-[0.18em] uppercase text-ink/40 dark:text-cream/40 text-center">
                Tifosi · Sunday afternoons watching the lights go out
              </p>
            </Reveal>
          </div>
        </div>

        <div className="mt-16 md:mt-20 grid grid-cols-1 md:grid-cols-3 border-t border-ink/15 dark:border-cream/15">
          <Reveal delay={0.1} className="py-8 px-3 md:px-6 md:border-r border-ink/15 dark:border-cream/15">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50 mb-2">
              Role
            </div>
            <div className="font-sans font-bold tracking-tight text-electric text-2xl md:text-3xl leading-tight">
              Full-Stack
              <br />Software Engineer
            </div>
          </Reveal>
          <Reveal delay={0.2} className="py-8 px-3 md:px-6 md:border-r border-ink/15 dark:border-cream/15">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50 mb-2">
              Years Experience
            </div>
            <div className="font-sans font-bold tracking-tighter text-electric text-5xl md:text-6xl leading-none">
              <CountUp end={2} />+
            </div>
          </Reveal>
          <Reveal delay={0.3} className="py-8 px-3 md:px-6">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50 mb-2">
              Education
            </div>
            <div className="font-sans font-bold tracking-tight text-electric text-2xl md:text-3xl leading-tight">
              M.S. Computer Science
            </div>
            <div className="mt-1 font-mono text-[11px] tracking-[0.2em] uppercase text-ink/55 dark:text-cream/55">
              UMass Boston
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── EXPERIENCE ───────────────────────────────────────────────────────────────

/**
 * Work history entries — rendered in order by ExperienceItem.
 * Add new roles at the top; num is display-only, not used for ordering.
 */
const EXPERIENCE = [
  {
    num: "01",
    company: "LiveBest Services",
    location: "Remote",
    role: "Full-Stack Software Engineer",
    period: "Jun 2025 — Present",
    stack: ["React Native Web", "GraphQL", "Apollo", "TypeScript"],
    bullets: [
      "End-to-end onboarding flows in React Native Web: multi-stage forms, OTP verification, role-based gating, save-draft/resume, review & submit.",
      "GraphQL/Apollo: typed queries and mutations for complex nested payloads, cache management, and consistent error/loading state handling.",
      "Payments and billing UI: connected to billing APIs, fee computation, state management, and backend sync for accurate reporting.",
    ],
  },
  {
    num: "02",
    company: "UMass Boston",
    location: "Boston, MA",
    role: "ScreenWithPeak — NLP / RAG Engineer",
    period: "Sep 2024 — Mar 2025",
    stack: ["Python", "LangChain", "ChromaDB", "FastAPI", "Pytest"],
    bullets: [
      "Built NLP chatbot using LangChain and ChromaDB with an end-to-end RAG pipeline for grounded Q&A over internal documents.",
      "Ingestion pipeline: document parsing, chunking, embedding generation, ChromaDB storage; tuned chunking and embeddings for retrieval relevance.",
      "Pytest evaluation harness with fixed Q&A sets to measure retrieval accuracy and regression-test quality across chunking/embedding/prompt changes.",
    ],
  },
];

function ExperienceItem({ item, idx }) {
  return (
    <Reveal variant="slide-up" delay={idx * 0.1} className="group border-t border-ink/15 dark:border-cream/15">
      <div className="grid grid-cols-12 gap-4 md:gap-8 py-10 md:py-14">
        <div className="col-span-12 md:col-span-1 font-mono text-xs tracking-[0.22em] text-electric">
          {item.num}
        </div>

        <div className="col-span-12 md:col-span-7">
          <h3 className="font-sans font-bold tracking-tighter uppercase text-3xl md:text-5xl leading-[0.95]">
            <VerticalCutReveal splitBy="characters" staggerDuration={0.015} triggerOnView duration={0.85}>
              {item.company}
            </VerticalCutReveal>
          </h3>
          <p className="mt-3 font-serif italic text-xl md:text-2xl text-ink/70 dark:text-cream/70">
            {item.role}
          </p>
          <div className="mt-4 flex flex-wrap gap-1.5">
            {item.stack.map((s) => (
              <span key={s} className="font-mono text-[10px] tracking-wide uppercase px-2 py-1 border border-ink/15 dark:border-cream/15 text-ink/70 dark:text-cream/70">
                {s}
              </span>
            ))}
          </div>
        </div>

        <div className="col-span-12 md:col-span-4 md:text-right">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-ink/60 dark:text-cream/60 mb-1">
            {item.period}
          </div>
          <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink/40 dark:text-cream/40">
            {item.location}
          </div>
        </div>

        <div className="col-span-12 md:col-start-2 md:col-span-11 md:pt-4">
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-4 text-[14px] md:text-[15px] leading-relaxed text-ink/75 dark:text-cream/75 text-justify">
            {item.bullets.map((b, i) => (
              <li key={i} className="flex gap-3">
                <span className="text-electric shrink-0 mt-0.5">→</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Reveal>
  );
}

function Experience() {
  return (
    <section id="experience" className="relative py-24 md:py-36">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <SectionLabel index="02">Experience</SectionLabel>
        <div className="mb-14 md:mb-20">
          <BigHeading>Experience.</BigHeading>
        </div>
        <div className="border-b border-ink/15 dark:border-cream/15">
          {EXPERIENCE.map((item, i) => (
            <ExperienceItem key={item.num} item={item} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROJECTS ─────────────────────────────────────────────────────────────────

/**
 * Project cards.
 *
 * linkKind controls the click behavior in ProjectRow:
 *  "github"   — opens href in a new tab
 *  "document" — opens DocModal with the PDF from href (no browser download UI)
 */
const PROJECTS = [
  {
    num: "01",
    title: "Stock Portfolio Rebalancer",
    year: "2025",
    desc: "Full-stack fintech app for real-time portfolio rebalancing based on risk tolerance and market volatility. Integrates a Python/scikit-learn volatility prediction service.",
    stack: ["Java", "Spring Boot", "PostgreSQL", "Python", "Kafka", "Docker", "AWS"],
    href: "https://github.com/sakethtadepalli/portfolio-rebalncer.git",
    linkLabel: "View on GitHub",
    linkKind: "github",
  },
  {
    num: "02",
    title: "RAG Chatbot — ScreenWithPeak",
    year: "2024",
    desc: "End-to-end Retrieval-Augmented Generation pipeline for grounded Q&A over internal documents. Built with LangChain, ChromaDB, and a FastAPI backend.",
    stack: ["Python", "LangChain", "ChromaDB", "FastAPI", "Pytest"],
    href: "/screenwithpeek-report.pdf",
    linkLabel: "Show the Document",
    linkKind: "document",
  },
];

function ProjectCardInner({ p }) {
  return (
    <div className="grid grid-cols-12 gap-4 md:gap-6 items-start">
      <div className="col-span-2 md:col-span-1 font-mono text-xs tracking-[0.22em]">
        {p.num}
      </div>
      <div className="col-span-10 md:col-span-7">
        <h3 className="font-sans font-bold tracking-tighter uppercase text-2xl md:text-4xl lg:text-5xl leading-[0.95]">
          <VerticalCutReveal splitBy="characters" staggerDuration={0.012} triggerOnView duration={0.8}>
            {p.title}
          </VerticalCutReveal>
        </h3>
        <p className="mt-4 muted text-sm md:text-base leading-relaxed text-ink/70 dark:text-cream/70 max-w-2xl text-justify">
          {p.desc}
        </p>
        <div className="mt-5 flex flex-wrap gap-1.5">
          {p.stack.map((s) => (
            <span key={s} className="pill font-mono text-[10px] tracking-wide uppercase px-2 py-1 border border-ink/15 dark:border-cream/15 text-ink/70 dark:text-cream/70">
              {s}
            </span>
          ))}
        </div>
      </div>
      <div className="col-span-12 md:col-span-4 md:text-right flex md:flex-col md:items-end justify-between md:justify-start gap-4 md:gap-12 mt-4 md:mt-0">
        <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-ink/60 dark:text-cream/60">
          [{p.year}]
        </div>
        <div className="flex items-center gap-2 font-mono text-[11px] tracking-[0.22em] uppercase">
          <span>{p.linkLabel || "View on GitHub"}</span>
          <span className="inline-block transition-transform duration-300 group-hover:translate-x-1.5">
            <ArrowUpRight size={14} />
          </span>
        </div>
      </div>
    </div>
  );
}

function ProjectRow({ p, idx, onShowDoc }) {
  const isDoc = p.linkKind === "document";
  const cardClass = "project-card group block border border-ink/15 dark:border-cream/15 p-6 md:p-10 bg-cream/40 dark:bg-ink/40";
  return (
    <Reveal variant="slide-up" delay={idx * 0.1}>
      {isDoc ? (
        <div onClick={onShowDoc} className={cardClass + " cursor-pointer"}>
          <ProjectCardInner p={p} />
        </div>
      ) : (
        <a href={p.href} target="_blank" rel="noopener noreferrer" className={cardClass}>
          <ProjectCardInner p={p} />
        </a>
      )}
    </Reveal>
  );
}

function MoreOnGitHub() {
  return (
    <Reveal variant="slide-up" delay={PROJECTS.length * 0.1}>
      <a
        href="https://github.com/sakethtadepalli"
        target="_blank"
        rel="noopener noreferrer"
        className="project-card group block border border-dashed border-ink/30 dark:border-cream/30 p-10 md:p-16 text-center bg-transparent"
      >
        <div className="font-mono text-[10px] tracking-[0.22em] uppercase muted text-ink/60 dark:text-cream/60 mb-4">
          [More]
        </div>
        <div className="font-sans font-bold tracking-tighter uppercase text-3xl md:text-5xl leading-tight">
          More on GitHub
          <span className="inline-block ml-3 transition-transform duration-300 group-hover:translate-x-2">
            ↗
          </span>
        </div>
        <p className="mt-4 muted text-sm text-ink/60 dark:text-cream/60">
          Side experiments, infra spikes, one-night builds.
        </p>
      </a>
    </Reveal>
  );
}

/**
 * DocModal — full-screen PDF viewer overlay.
 *
 * Opens the RAG chatbot project report in an iframe. The PDF URL fragment
 * appends viewer params that suppress Chrome's built-in download/print bar,
 * satisfying the requirement to show the document without a download option.
 *
 * Closes on: Escape key, click on the backdrop.
 */
function DocModal({ onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-ink/80 backdrop-blur-sm p-4 md:p-8"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="relative w-full max-w-5xl flex flex-col bg-cream dark:bg-ink border border-ink/20 dark:border-cream/20"
        style={{ height: "90vh" }}
      >
        {/* Modal header */}
        <div className="flex items-center justify-between px-5 py-3 border-b border-ink/15 dark:border-cream/15 shrink-0">
          <div className="flex items-center gap-3">
            <span className="text-electric font-mono text-[10px] tracking-[0.22em] uppercase">/doc</span>
            <span className="font-mono text-[11px] tracking-[0.18em] uppercase text-ink/70 dark:text-cream/70">
              ScreenWithPeak — RAG Chatbot Report
            </span>
          </div>
          <button
            onClick={onClose}
            aria-label="Close"
            className="w-8 h-8 flex items-center justify-center border border-ink/20 dark:border-cream/20 text-ink/60 dark:text-cream/60 hover:bg-electric hover:text-cream hover:border-electric transition-all duration-200"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
          </button>
        </div>

        {/* PDF viewer — toolbar=0 hides Chrome's download/print bar */}
        <div className="flex-1 overflow-hidden">
          <iframe
            src="/screenwithpeek-report.pdf#toolbar=0&navpanes=0&view=FitH"
            title="ScreenWithPeak RAG Chatbot Report"
            className="w-full h-full border-0"
            style={{ display: "block" }}
          />
        </div>
      </div>
    </div>
  );
}

function Projects() {
  const [showDoc, setShowDoc] = useState(false);

  return (
    <section id="projects" className="relative py-24 md:py-36">
      {showDoc && <DocModal onClose={() => setShowDoc(false)} />}

      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <SectionLabel index="03">Selected Work</SectionLabel>
        <div className="mb-14 md:mb-20 flex flex-wrap items-end justify-between gap-6">
          <BigHeading>Projects.</BigHeading>
          <p className="font-mono text-xs tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50">
            [{PROJECTS.length.toString().padStart(2, "0")} of many]
          </p>
        </div>

        <div className="space-y-5">
          {PROJECTS.map((p, i) => (
            <ProjectRow key={p.num} p={p} idx={i} onShowDoc={p.linkKind === "document" ? () => setShowDoc(true) : undefined} />
          ))}
          <MoreOnGitHub />
        </div>
      </div>
    </section>
  );
}

// ─── SKILLS ───────────────────────────────────────────────────────────────────

/**
 * Skill categories — each renders as a tab in the Skills section.
 * items[] entries have a `name` (pill label) and `note` (hover tooltip text).
 */
const SKILL_GROUPS = [
  {
    key: "languages",
    label: "Languages",
    blurb: "Core languages I reach for daily — strongly-typed for production, scripting when speed matters.",
    items: [
      { name: "Java", note: "Backend services & data pipelines" },
      { name: "Python", note: "ML, RAG pipelines, scripting" },
      { name: "TypeScript", note: "Frontend & Node services" },
      { name: "JavaScript", note: "Browser, React Native Web" },
      { name: "SQL", note: "Postgres & MySQL — joins, indexes, EXPLAIN" },
      { name: "C", note: "Systems coursework" },
      { name: "C++", note: "Algorithms & data structures" },
    ],
  },
  {
    key: "frontend",
    label: "Frontend",
    blurb: "Production-grade UI for web and React Native Web — typed, accessible, fast.",
    items: [
      { name: "React.js", note: "Hooks, suspense, server components" },
      { name: "Next.js", note: "App Router, RSC, route handlers" },
      { name: "React Native", note: "Cross-platform, RN Web" },
      { name: "Redux", note: "Toolkit, RTK Query" },
      { name: "Tailwind CSS", note: "Design tokens & utility-first" },
      { name: "HTML5", note: "Semantic + a11y" },
    ],
  },
  {
    key: "backend",
    label: "Backend",
    blurb: "Spring Boot and FastAPI for clean APIs, with GraphQL where the domain needs it.",
    items: [
      { name: "Spring Boot", note: "REST APIs, JPA, security" },
      { name: "FastAPI", note: "Async Python, pydantic" },
      { name: "Node.js", note: "Express, NestJS" },
      { name: "GraphQL", note: "Apollo, schema-first design" },
      { name: "REST APIs", note: "OpenAPI, versioned contracts" },
    ],
  },
  {
    key: "data",
    label: "Databases",
    blurb: "Relational, document, key-value, and embeddings — picked to match the access pattern.",
    items: [
      { name: "PostgreSQL", note: "Primary OLTP store" },
      { name: "MySQL", note: "Legacy + multi-tenant" },
      { name: "MongoDB", note: "Document workloads" },
      { name: "DynamoDB", note: "Single-digit ms reads" },
      { name: "Redis", note: "Cache, pub/sub, sessions" },
    ],
  },
  {
    key: "ai",
    label: "AI / ML",
    blurb: "Built end-to-end RAG and ML inference services — chunking, embeddings, eval harnesses.",
    items: [
      { name: "LangChain", note: "RAG orchestration" },
      { name: "ChromaDB", note: "Vector store for embeddings" },
      { name: "RAG", note: "Retrieval-augmented generation" },
      { name: "Vector Search", note: "Cosine + hybrid retrieval" },
      { name: "scikit-learn", note: "Volatility prediction service" },
      { name: "Pandas", note: "ETL + analysis" },
    ],
  },
  {
    key: "cloud",
    label: "Cloud & DevOps",
    blurb: "Containers, IaC, and CI/CD that move code from laptop to prod without surprises.",
    items: [
      { name: "AWS", note: "ECS, RDS, S3, Lambda" },
      { name: "Docker", note: "Multi-stage builds, compose" },
      { name: "Terraform", note: "IaC for AWS resources" },
      { name: "GitLab CI/CD", note: "Pipelines & runners" },
      { name: "Jenkins", note: "Legacy build orchestration" },
      { name: "Kafka", note: "Event streaming" },
    ],
  },
];

const COURSEWORK = {
  key: "courses",
  label: "Coursework",
  blurb: "Selected graduate coursework, M.S. Computer Science — UMass Boston.",
  courses: [
    { code: "CS 624", title: "Analysis of Algorithms", term: "Fall '23", grade: "A", note: "Asymptotic analysis, DP, graph algorithms, NP-completeness." },
    { code: "CS 634", title: "Database Management Systems", term: "Fall '23", grade: "A", note: "Relational theory, indexes, transactions, query optimization." },
    { code: "CS 644", title: "Distributed Systems", term: "Spring '24", grade: "A", note: "Consensus, replication, MapReduce, fault tolerance." },
    { code: "CS 670", title: "Artificial Intelligence", term: "Spring '24", grade: "A", note: "Search, knowledge representation, planning, reasoning under uncertainty." },
    { code: "CS 671", title: "Machine Learning", term: "Fall '24", grade: "A", note: "Supervised, unsupervised, model evaluation, regularization." },
    { code: "CS 672", title: "Natural Language Processing", term: "Fall '24", grade: "A", note: "Tokenization, embeddings, transformers, retrieval-augmented generation." },
    { code: "CS 680", title: "Software Engineering", term: "Spring '25", grade: "A", note: "Architecture, testing strategies, agile delivery, code review." },
    { code: "CS 682", title: "Cloud Computing", term: "Spring '25", grade: "A-", note: "Container orchestration, serverless, IaC, multi-region patterns." },
  ],
};

function SkillTab({ tab, active, onClick, index }) {
  return (
    <button
      onClick={onClick}
      className={`group w-full text-left flex items-center gap-3 px-4 py-4 border-l-2 transition-all duration-300 ${
        active
          ? "border-electric bg-electric/[0.06]"
          : "border-transparent hover:border-electric/40 hover:bg-electric/[0.03]"
      }`}
    >
      <span className={`font-mono text-[10px] tracking-[0.2em] ${active ? "text-electric" : "text-ink/40 dark:text-cream/40"}`}>
        {String(index + 1).padStart(2, "0")}
      </span>
      <span
        className={`flex-1 font-sans font-bold tracking-tight uppercase text-lg md:text-xl transition-colors ${
          active ? "text-electric" : "text-ink/80 dark:text-cream/80 group-hover:text-ink dark:group-hover:text-cream"
        }`}
      >
        {tab.label}
      </span>
      <span className={`font-mono text-[10px] tracking-wider ${active ? "text-electric" : "text-ink/40 dark:text-cream/40"}`}>
        [{tab.kind === "courses" ? tab.courses.length : tab.items.length}]
      </span>
    </button>
  );
}

function SkillsPanel({ tab, hoveredNote, onHover }) {
  return (
    <div key={tab.key} className="min-h-[360px]">
      <p
        className="font-serif italic text-xl md:text-2xl leading-snug text-ink/75 dark:text-cream/75 mb-8 max-w-2xl"
        style={{ animation: "fade-up 0.5s 0.05s both" }}
      >
        {tab.blurb}
      </p>

      <div className="flex flex-wrap gap-2.5">
        {tab.items.map((item, i) => (
          <button
            key={item.name}
            onMouseEnter={() => onHover(item)}
            onMouseLeave={() => onHover(null)}
            onFocus={() => onHover(item)}
            onBlur={() => onHover(null)}
            className="skill-pill font-mono text-xs md:text-sm tracking-tight px-4 py-2.5 border border-ink/15 dark:border-cream/15 bg-cream/60 dark:bg-ink/60 text-ink/85 dark:text-cream/85 cursor-default"
            style={{ animation: `fade-up 0.5s ${0.1 + i * 0.04}s both` }}
          >
            {item.name}
          </button>
        ))}
      </div>

      <div className="mt-10 min-h-[3.5rem] border-t border-ink/10 dark:border-cream/10 pt-5 flex items-center gap-4">
        <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-electric shrink-0">
          {hoveredNote ? "// usage" : "// hover"}
        </span>
        <div className="flex-1 font-mono text-sm text-ink/70 dark:text-cream/70 transition-opacity duration-300">
          {hoveredNote ? (
            <span>
              <span className="text-ink dark:text-cream font-medium">{hoveredNote.name}</span>
              <span className="mx-2 text-electric">→</span>
              {hoveredNote.note}
            </span>
          ) : (
            <span className="text-ink/35 dark:text-cream/35">
              Hover any tag for what I use it for. <span className="blink text-electric">▌</span>
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

function CoursesPanel({ tab }) {
  return (
    <div key={tab.key} className="min-h-[360px]">
      <p
        className="font-serif italic text-xl md:text-2xl leading-snug text-ink/75 dark:text-cream/75 mb-8 max-w-2xl"
        style={{ animation: "fade-up 0.5s 0.05s both" }}
      >
        {tab.blurb}
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {tab.courses.map((c, i) => (
          <div
            key={c.code}
            className="group relative border border-ink/15 dark:border-cream/15 bg-cream/60 dark:bg-ink/60 p-5 hover:border-electric hover:bg-electric/[0.04] transition-colors duration-300"
            style={{ animation: `fade-up 0.5s ${0.08 + i * 0.05}s both` }}
          >
            <div className="flex items-baseline justify-between gap-3 mb-2">
              <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-electric">
                {c.code}
              </span>
              <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50">
                {c.term}
              </span>
            </div>
            <h4 className="font-sans font-bold tracking-tight text-base md:text-lg leading-snug">
              {c.title}
            </h4>
            <p className="mt-2 text-xs md:text-[13px] leading-relaxed text-ink/65 dark:text-cream/65">
              {c.note}
            </p>
            <div className="mt-3 inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.22em] uppercase text-ink/55 dark:text-cream/55">
              <span>Grade</span>
              <span className="text-electric font-medium">{c.grade}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Skills() {
  const tabs = [
    ...SKILL_GROUPS.map((g) => ({ ...g, kind: "skills" })),
    { ...COURSEWORK, kind: "courses" },
  ];
  const [activeIdx, setActiveIdx] = useState(0);
  const [hovered, setHovered] = useState(null);
  const active = tabs[activeIdx];

  useEffect(() => {
    setHovered(null);
  }, [activeIdx]);

  return (
    <section id="skills" className="relative py-24 md:py-36 bg-ink/[0.02] dark:bg-cream/[0.02] border-y border-ink/10 dark:border-cream/10">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <SectionLabel index="04">Toolkit</SectionLabel>
        <div className="mb-12 md:mb-16 flex flex-wrap items-end justify-between gap-6">
          <BigHeading>Skills.</BigHeading>
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50">
            [{tabs.length} categories · explore →]
          </div>
        </div>

        <div className="md:hidden -mx-5 px-5 mb-6 overflow-x-auto">
          <div className="flex gap-2 min-w-max pb-2">
            {tabs.map((t, i) => (
              <button
                key={t.key}
                onClick={() => setActiveIdx(i)}
                className={`shrink-0 font-mono text-[11px] tracking-[0.2em] uppercase px-4 py-2.5 border transition-all duration-200 ${
                  activeIdx === i
                    ? "bg-electric text-cream border-electric"
                    : "border-ink/20 dark:border-cream/20 text-ink/70 dark:text-cream/70"
                }`}
              >
                <span className="opacity-60 mr-2">{String(i + 1).padStart(2, "0")}</span>
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12">
          <div className="hidden md:block md:col-span-4 lg:col-span-3">
            <div className="border-y border-ink/10 dark:border-cream/10 divide-y divide-ink/5 dark:divide-cream/5">
              {tabs.map((t, i) => (
                <SkillTab
                  key={t.key}
                  tab={t}
                  index={i}
                  active={activeIdx === i}
                  onClick={() => setActiveIdx(i)}
                />
              ))}
            </div>
            <div className="mt-6 font-mono text-[10px] tracking-[0.22em] uppercase text-ink/40 dark:text-cream/40 leading-relaxed">
              <div className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 rounded-full bg-electric inline-block" />
                Active: {active.label}
              </div>
              <div className="mt-1">[Tip: hover items for context]</div>
            </div>
          </div>

          <div className="md:col-span-8 lg:col-span-9 md:border-l md:border-ink/10 md:dark:border-cream/10 md:pl-10">
            <div className="flex items-center gap-3 mb-6">
              <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-electric">
                /{String(activeIdx + 1).padStart(2, "0")}
              </span>
              <h3 className="font-sans font-bold tracking-tighter uppercase text-2xl md:text-3xl">
                {active.label}
              </h3>
            </div>

            {active.kind === "courses" ? (
              <CoursesPanel tab={active} />
            ) : (
              <SkillsPanel tab={active} hoveredNote={hovered} onHover={setHovered} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ──────────────────────────────────────────────────────────────────

/**
 * Contact link rows — rendered inside the electric-blue Contact section.
 * href starting with "http" gets target="_blank"; mailto/tel links open natively.
 */

function MailIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="0" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  );
}
function PhoneIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  );
}
function LinkInIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 8a6 6 0 0 1 6 6v6h-4v-6a2 2 0 0 0-4 0v6h-4v-6a6 6 0 0 1 6-6z" />
      <rect x="2" y="9" width="4" height="11" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}
function GHIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.55 0-.27-.01-1.16-.02-2.1-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.67 1.24 3.32.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.23 2.75.12 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.35.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .31.21.66.8.55A11.52 11.52 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z" />
    </svg>
  );
}

const CONTACTS = [
  { tag: "Email", icon: MailIcon, label: "tadepalli.saketh@gmail.com", href: "mailto:tadepalli.saketh@gmail.com" },
  { tag: "Phone", icon: PhoneIcon, label: "+1 (602) 577-2933", href: "tel:+16025772933" },
  { tag: "LinkedIn", icon: LinkInIcon, label: "linkedin.com/in/sakethtadepalli", href: "https://www.linkedin.com/in/sakethtadepalli/" },
  { tag: "GitHub", icon: GHIcon, label: "github.com/sakethtadepalli", href: "https://github.com/sakethtadepalli" },
];

function Contact() {
  return (
    <section id="contact" className="relative bg-electric text-cream overflow-hidden">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-28 md:py-44">
        <div className="flex items-center gap-3 mb-12 font-mono text-[11px] tracking-[0.25em] uppercase text-cream/60">
          <span>/05</span>
          <span>Contact</span>
          <span className="flex-1 h-px bg-cream/25" />
        </div>

        <h2 className="font-sans font-bold tracking-tighter uppercase leading-[0.9] text-[clamp(2.75rem,11vw,10rem)]">
          <div>
            <VerticalCutReveal splitBy="characters" staggerDuration={0.02} staggerFrom="first" triggerOnView duration={0.95}>
              LET'S BUILD
            </VerticalCutReveal>
          </div>
          <div className="font-serif italic font-normal tracking-tight normal-case">
            <VerticalCutReveal splitBy="characters" staggerDuration={0.02} staggerFrom="center" reverse triggerOnView duration={0.95} delay={0.4}>
              something together.
            </VerticalCutReveal>
          </div>
        </h2>

        <Reveal delay={1.3} className="mt-10 font-mono text-sm tracking-[0.18em] uppercase text-cream/70 max-w-xl">
          Open to full-stack and backend roles.<br />Get in touch.
        </Reveal>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-3">
          {CONTACTS.map((c, i) => {
            const Icon = c.icon;
            return (
              <Reveal key={c.tag} delay={0.1 + i * 0.08}>
                <a
                  href={c.href}
                  target={c.href.startsWith("http") ? "_blank" : undefined}
                  rel="noopener noreferrer"
                  className="contact-row group flex items-center gap-5 border border-cream/30 px-5 py-5 bg-electric"
                >
                  <span className="w-10 h-10 border border-cream/40 flex items-center justify-center shrink-0">
                    <Icon />
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="font-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-0.5">
                      {c.tag}
                    </div>
                    <div className="font-mono text-sm md:text-base truncate">{c.label}</div>
                  </div>
                  <span className="arrow inline-block shrink-0 transition-transform duration-300">
                    <ArrowUpRight size={18} />
                  </span>
                </a>
              </Reveal>
            );
          })}
        </div>

        <div className="mt-24 pt-8 border-t border-cream/25 flex flex-col md:flex-row gap-3 md:items-end md:justify-between font-mono text-[11px] tracking-[0.22em] uppercase text-cream/60">
          <div>© 2025 Saketh Tadepalli — All rights reserved.</div>
          <div className="flex gap-6">
            <a href="#top" className="hover:text-cream nav-link">Back to Top ↑</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ───────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="py-8 border-t border-ink/10 dark:border-cream/10">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 flex flex-col md:flex-row gap-3 md:items-center md:justify-between font-mono text-[10px] tracking-[0.22em] uppercase text-ink/50 dark:text-cream/50">
        <div>Designed &amp; built with React, Tailwind &amp; Space Grotesk.</div>
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-electric inline-block" />
          <span>Saketh Tadepalli — Boston, MA</span>
        </div>
      </div>
    </footer>
  );
}

// Expose all section components globally so app.jsx can compose them
Object.assign(window, { Navbar, Hero, Marquee, About, Experience, Projects, Skills, Contact, Footer });