// Section components for the portfolio
const { motion, useScroll, useTransform, useSpring, useInView } = window.FramerMotion || window.Motion || {};

// ============== HERO ==============
function Hero() {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const yPhoto = useTransform(scrollYProgress, [0, 1], [0, -120]);
  const yText = useTransform(scrollYProgress, [0, 1], [0, -60]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
  const scalePhoto = useTransform(scrollYProgress, [0, 1], [1, 1.08]);

  return (
    <section ref={ref} className="relative min-h-[100svh] pt-28 pb-20 overflow-hidden">
      <Aurora />

      {/* Top nav */}
      <nav className="absolute top-0 inset-x-0 z-40 px-6 md:px-10 py-6 flex items-center justify-between">
        <a href="#top" className="font-display italic text-2xl tracking-tight">Usama Baig</a>
        <ul className="hidden md:flex items-center gap-8 text-sm text-bone-300/80">
          {[
            ["About","about"], ["Education","education"], ["Experience","experience"],
            ["Skills","skills"], ["Research","research"], ["Contact","contact"],
          ].map(([l,h]) => (
            <li key={h}><a href={`#${h}`} className="link-u hover:text-bone-100 transition-colors">{l}</a></li>
          ))}
        </ul>
        <a href="assets/Usama_Baig_CV.pdf" download className="hidden md:inline-flex items-center gap-2 text-sm border border-bone-300/20 rounded-full px-4 py-2 hover:border-mint-400 hover:text-mint-300 transition">
          <Icon.Download className="w-4 h-4" /> CV
        </a>
      </nav>

      <div className="relative max-w-[1400px] mx-auto px-6 md:px-10 pt-10 md:pt-20">
        <motion.div style={{ y: yText, opacity }} className="grid grid-cols-12 gap-6 items-center">
          {/* Text column */}
          <div className="col-span-12 lg:col-span-8 order-2 lg:order-1">
            <div className="flex items-center gap-3 mb-8">
              <span className="relative flex h-2.5 w-2.5">
                <span className="absolute inline-flex h-full w-full rounded-full bg-mint-400 opacity-60 pulse-dot"></span>
                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-mint-500"></span>
              </span>
              <span className="chapter">Available for Residency · 2026</span>
            </div>

            <h1 className="display text-[clamp(3.6rem,11vw,11rem)] text-bone-100">
              <div className="overflow-hidden">
                <motion.div initial={IS_HIDDEN ? false : { y: "110%" }} animate={{ y: 0 }} transition={{ duration: 1, ease: [0.22,0.61,0.36,1] }}>
                  Dr. Usama
                </motion.div>
              </div>
              <div className="overflow-hidden">
                <motion.div initial={IS_HIDDEN ? false : { y: "110%" }} animate={{ y: 0 }} transition={{ duration: 1, delay: 0.12, ease: [0.22,0.61,0.36,1] }}>
                  <span className="italic-soft text-mint-300">Baig</span><span className="text-bone-300/60">.</span>
                </motion.div>
              </div>
            </h1>

            <motion.div
              initial={IS_HIDDEN ? false : { opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.7, duration: 0.9 }}
              className="mt-10 max-w-xl text-bone-300/85 text-lg leading-relaxed"
            >
              Physician · MBBS · Islamabad. Trained in clinical medicine with electives in psychiatry at Houston Behavioral Healthcare. Researching the intersection of <em className="italic-soft text-mint-300">mind &amp; medicine</em>.
            </motion.div>

            <motion.div
              initial={IS_HIDDEN ? false : { opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.85, duration: 0.9 }}
              className="mt-10 flex flex-wrap items-center gap-4"
            >
              <MagneticButton href="#contact" primary>
                Get in touch <Icon.Arrow className="w-4 h-4" />
              </MagneticButton>
              <MagneticButton href="assets/Usama_Baig_CV.pdf" >
                <Icon.Download className="w-4 h-4" /> Download CV
              </MagneticButton>
            </motion.div>

            <div className="mt-16 grid grid-cols-3 gap-6 max-w-md">
              {[
                ["6+", "years training"],
                ["2", "US electives"],
                ["2", "research studies"],
              ].map(([n, l], i) => (
                <Reveal key={i} delay={1 + i * 0.1}>
                  <div>
                    <div className="display text-4xl md:text-5xl text-bone-100">{n}</div>
                    <div className="mt-1 text-xs uppercase tracking-widest text-bone-300/60">{l}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>

          {/* Portrait column */}
          <div className="col-span-12 lg:col-span-4 order-1 lg:order-2 relative">
            <motion.div style={{ y: yPhoto, scale: scalePhoto }} className="relative mx-auto max-w-md">
              <div className="absolute -inset-6 rounded-[2rem] bg-gradient-to-br from-mint-400/15 via-transparent to-transparent blur-2xl" />
              <div className="relative aspect-[3/4] rounded-[1.6rem] overflow-hidden border border-bone-300/10 glass">
                <img
                  src="assets/profile.png"
                  alt="Portrait of Usama Baig"
                  className="absolute inset-0 w-full h-full object-cover"
                  style={{ filter: "saturate(0.85) contrast(1.05) brightness(0.95)" }}
                />
                {/* Color grade overlay */}
                <div className="absolute inset-0 mix-blend-color" style={{ background: "linear-gradient(180deg, oklch(0.5 0.08 200 / 0.4), oklch(0.3 0.04 180 / 0.5))" }} />
                <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, transparent 55%, rgba(7,8,10,0.9) 100%)" }} />
                {/* Corner labels */}
                <div className="absolute top-4 left-4 chapter text-bone-100/90">USB · MD</div>
                <div className="absolute top-4 right-4 chapter text-bone-100/90">N 33.6844°</div>
                <div className="absolute bottom-4 left-4 chapter text-bone-100/90">ISLAMABAD</div>
                <div className="absolute bottom-4 right-4 chapter text-bone-100/90">PK · 2026</div>
                {/* Crosshair */}
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
                  <svg width="120" height="120" viewBox="0 0 120 120" className="text-bone-100/30">
                    <circle cx="60" cy="60" r="40" fill="none" stroke="currentColor" strokeWidth="0.5"/>
                    <line x1="60" y1="10" x2="60" y2="30" stroke="currentColor" strokeWidth="0.5"/>
                    <line x1="60" y1="90" x2="60" y2="110" stroke="currentColor" strokeWidth="0.5"/>
                    <line x1="10" y1="60" x2="30" y2="60" stroke="currentColor" strokeWidth="0.5"/>
                    <line x1="90" y1="60" x2="110" y2="60" stroke="currentColor" strokeWidth="0.5"/>
                  </svg>
                </div>
              </div>

              {/* Floating credential tag */}
              <motion.div
                initial={IS_HIDDEN ? false : { opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1.1, duration: 0.8 }}
                className="absolute -left-6 md:-left-10 bottom-10 glass rounded-2xl px-5 py-4"
              >
                <div className="chapter text-mint-300">Specialty Focus</div>
                <div className="display text-2xl mt-1">Psychiatry</div>
              </motion.div>

              <motion.div
                initial={IS_HIDDEN ? false : { opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1.25, duration: 0.8 }}
                className="absolute -right-2 md:-right-6 top-12 glass rounded-2xl px-4 py-3 flex items-center gap-3"
              >
                <Icon.Stethoscope className="w-5 h-5 text-mint-300" />
                <div className="text-sm">MBBS · FMC</div>
              </motion.div>
            </motion.div>
          </div>
        </motion.div>

        {/* Scroll hint */}
        <motion.div
          initial={IS_HIDDEN ? false : { opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.5, duration: 1 }}
          className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-bone-300/60"
        >
          <span className="chapter">Scroll</span>
          <motion.div animate={{ y: [0, 6, 0] }} transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}>
            <Icon.ArrowDown className="w-4 h-4" />
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

// ============== MARQUEE BAND ==============
function PrinciplesMarquee() {
  return (
    <Marquee items={["Patient-centered care", "Evidence-based medicine", "Empathy in practice", "Lifelong learning", "Clinical excellence", "Mental health advocacy"]} />
  );
}

// ============== ABOUT ==============
function About() {
  return (
    <section id="about" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader
        chapter="01"
        eyebrow="About"
        title="A physician shaped by patients."
        lede="Six years of training at Fazaia Medical College, anchored in hands-on clinical rotations and a quiet conviction that medicine is, at its heart, a human craft."
      />

      <div className="grid grid-cols-12 gap-6 md:gap-10 mt-6">
        <Reveal className="col-span-12 md:col-span-7" delay={0.05}>
          <div className="space-y-6 text-bone-100/90 text-lg leading-relaxed">
            <p>
              I am a dedicated MBBS graduate with a strong foundation in clinical medicine and a deep interest in <span className="italic-soft text-mint-300">psychiatry and behavioral health</span>. My training has taught me to listen first — to read the chart, then re-read the person sitting across from me.
            </p>
            <p>
              I work best where rigor meets compassion: thorough histories, careful reasoning, and the discipline to keep learning long after the textbook closes. Outside clinic, I research how society shapes mental health, and how digital tools might bring care to those out of reach.
            </p>
          </div>
        </Reveal>

        <Reveal className="col-span-12 md:col-span-5" delay={0.15}>
          <div className="glass rounded-2xl p-7 space-y-6">
            <div>
              <div className="chapter text-mint-300">Currently</div>
              <div className="mt-2 text-bone-100">Preparing for US residency applications; refining clinical depth across psychiatry &amp; internal medicine.</div>
            </div>
            <div className="hairline" />
            <div className="grid grid-cols-2 gap-y-5 gap-x-4">
              <div>
                <div className="chapter">Based</div>
                <div className="mt-1.5 text-bone-100">Islamabad, PK</div>
              </div>
              <div>
                <div className="chapter">Specialty</div>
                <div className="mt-1.5 text-bone-100">Psychiatry</div>
              </div>
              <div>
                <div className="chapter">Languages</div>
                <div className="mt-1.5 text-bone-100">EN · UR · PA</div>
              </div>
              <div>
                <div className="chapter">Off duty</div>
                <div className="mt-1.5 text-bone-100">Film · Cricket</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============== EDUCATION ==============
function Education() {
  const items = [
    {
      year: "Dec 2019 — Feb 2026",
      degree: "Bachelor of Medicine and Bachelor of Surgery",
      short: "MBBS",
      school: "Fazaia Medical College",
      location: "Islamabad, Pakistan",
      note: "Five-year programme with one-year clinical house job. Rotations across internal medicine, surgery, pediatrics, OB-GYN, and psychiatry.",
    },
    {
      year: "Apr 2016 — Apr 2018",
      degree: "Higher Secondary School Certificate",
      short: "HSSC · Pre-Medical",
      school: "Punjab College",
      location: "Gujrāt, Pakistan",
      note: "Pre-medical track. Foundation in biology, chemistry, and physics.",
    },
  ];

  return (
    <section id="education" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader chapter="02" eyebrow="Education" title="Where the work began." />

      <div className="relative mt-4">
        {/* Spine */}
        <div className="absolute left-3 md:left-1/2 top-2 bottom-2 w-px bg-bone-300/15 md:-translate-x-1/2" aria-hidden="true" />
        <EducationSpine />

        <div className="space-y-16">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 0.08}>
              <div className={`relative grid grid-cols-12 gap-6 md:gap-10 ${i % 2 === 0 ? "" : "md:[direction:rtl]"}`}>
                {/* Node */}
                <div className="absolute left-3 md:left-1/2 top-2 -translate-x-1/2 z-10">
                  <div className="w-3 h-3 rounded-full bg-mint-400 ring-4 ring-ink-900" />
                </div>

                <div className="col-span-12 pl-10 md:pl-0 md:col-span-6 md:[direction:ltr]">
                  <div className="chapter mb-3">{it.year}</div>
                  <h3 className="display text-3xl md:text-4xl text-bone-100">{it.degree}</h3>
                  <div className="mt-2 text-mint-300 italic-soft text-xl">{it.short}</div>
                  <div className="mt-4 text-bone-300/80">{it.school} · <span className="text-bone-300/60">{it.location}</span></div>
                  <p className="mt-3 text-bone-300/70 max-w-md leading-relaxed">{it.note}</p>
                </div>

                <div className="hidden md:block md:col-span-6 md:[direction:ltr]" aria-hidden="true" />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== EXPERIENCE ==============
function Experience() {
  const items = [
    {
      period: "Aug 2025",
      title: "Clinical Elective · Psychiatry",
      preceptor: "Jordan Shull, M.D.",
      org: "Psychplus",
      location: "Houston, TX · USA",
      detail: "Inpatient psychiatry rotation. Patient interviewing, mental status examinations, psychopharmacology rounds, and treatment planning across mood, anxiety, and psychotic disorders.",
      tag: "Inpatient",
    },
    {
      period: "Jul 2025",
      title: "Clinical Elective · Psychiatry",
      preceptor: "Mustafa Tai, M.D.",
      org: "Houston Behavioral Healthcare Hospital",
      location: "Houston, TX · USA",
      detail: "Inpatient acute psychiatric care. Daily rounds, admissions, risk assessment, and multidisciplinary case discussions in an acute behavioral health setting.",
      tag: "Inpatient",
    },
    {
      period: "Dec 2019 — Feb 2026",
      title: "Clinical Rotations · MBBS",
      preceptor: "Faculty Preceptors",
      org: "Fazaia Medical College & PAF Hospital",
      location: "Islamabad, Pakistan",
      detail: "Comprehensive ward & OPD rotations across internal medicine, general surgery, pediatrics, OB-GYN, emergency medicine, and psychiatry. Routine procedures: IV cannulation, suturing, wound dressing, ECG interpretation.",
      tag: "Core training",
    },
  ];

  return (
    <section id="experience" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader
        chapter="03"
        eyebrow="Experience"
        title="At the bedside."
        lede="Hands-on training across inpatient and outpatient settings — from Islamabad wards to Houston behavioral health units."
      />

      <div className="grid grid-cols-1 gap-5 mt-4">
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 0.08}>
            <motion.div
              whileHover={{ y: -4 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
              className="group relative grid grid-cols-12 gap-4 md:gap-8 items-start p-7 md:p-9 rounded-2xl border border-bone-300/10 bg-gradient-to-br from-ink-800/60 to-ink-900/60 hover:border-mint-400/30 transition-colors"
            >
              <div className="col-span-12 md:col-span-3">
                <div className="chapter">{it.period}</div>
                <div className="mt-3 inline-flex items-center gap-2 text-xs uppercase tracking-widest text-mint-300 border border-mint-400/30 rounded-full px-3 py-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-mint-400" />
                  {it.tag}
                </div>
              </div>
              <div className="col-span-12 md:col-span-7">
                <h3 className="display text-3xl md:text-4xl text-bone-100">{it.title}</h3>
                <div className="mt-2 text-bone-100/80">{it.org} · <span className="text-bone-300/60">{it.location}</span></div>
                <div className="mt-1 text-bone-300/60 text-sm">Preceptor — {it.preceptor}</div>
                <p className="mt-4 text-bone-300/75 leading-relaxed max-w-2xl">{it.detail}</p>
              </div>
              <div className="hidden md:flex col-span-2 justify-end items-start text-bone-300/40 group-hover:text-mint-300 transition-colors">
                <Icon.Arrow className="w-6 h-6 -rotate-45 group-hover:rotate-0 transition-transform" />
              </div>
            </motion.div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============== SKILLS ==============
function Skills() {
  const groups = [
    {
      icon: Icon.Stethoscope,
      title: "Clinical",
      items: [
        ["History-taking & physical exam", 92],
        ["Diagnostic reasoning", 88],
        ["Procedural skills · IV, suturing, dressing", 84],
        ["Medical record documentation", 90],
      ],
    },
    {
      icon: Icon.Beaker,
      title: "Technical",
      items: [
        ["Patient management systems", 85],
        ["Laboratory diagnostics", 82],
        ["Imaging interpretation", 78],
        ["ECG interpretation", 80],
      ],
    },
    {
      icon: Icon.Brain,
      title: "Soft Skills",
      items: [
        ["Patient communication", 95],
        ["Multidisciplinary teamwork", 90],
        ["Time management", 86],
        ["Empathy & patient-centered care", 96],
      ],
    },
    {
      icon: Icon.Book,
      title: "Academic & Research",
      items: [
        ["Critical thinking", 90],
        ["Evidence-based medicine", 86],
        ["Literature review", 82],
        ["Public speaking", 84],
      ],
    },
  ];

  return (
    <section id="skills" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader chapter="04" eyebrow="Skills" title="A working vocabulary." />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4">
        {groups.map((g, gi) => (
          <Reveal key={gi} delay={gi * 0.08}>
            <div className="glass rounded-2xl p-7 h-full">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-full bg-mint-400/10 border border-mint-400/30 flex items-center justify-center text-mint-300">
                  <g.icon className="w-5 h-5" />
                </div>
                <h3 className="display text-2xl text-bone-100">{g.title}</h3>
              </div>
              <div className="space-y-5">
                {g.items.map(([label, val], i) => (
                  <SkillBar key={i} label={label} value={val} delay={gi * 0.05 + i * 0.05} />
                ))}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function EducationSpine() {
  const [ref, shown] = useScrollReveal();
  const startShown = React.useRef(shown).current;
  return (
    <div ref={ref} className="absolute left-3 md:left-1/2 top-2 bottom-2 w-px md:-translate-x-1/2" aria-hidden="true">
      <motion.div
        initial={startShown ? false : { scaleY: 0 }}
        animate={shown ? { scaleY: 1 } : { scaleY: 0 }}
        transition={{ duration: 1.6, ease: "easeOut" }}
        style={{ transformOrigin: "top" }}
        className="absolute inset-0 bg-gradient-to-b from-mint-400/80 via-mint-400/40 to-transparent"
      />
    </div>
  );
}

function SkillBar({ label, value, delay = 0 }) {
  const [ref, inView] = useScrollReveal();
  const startShown = React.useRef(inView).current;
  return (
    <div ref={ref}>
      <div className="flex items-baseline justify-between mb-2">
        <span className="text-sm text-bone-100/85">{label}</span>
        <span className="font-mono text-xs text-bone-300/60">{value}%</span>
      </div>
      <div className="relative h-[3px] bg-bone-300/10 rounded-full overflow-hidden">
        <motion.div
          initial={startShown ? false : { scaleX: 0 }}
          animate={inView ? { scaleX: value / 100 } : { scaleX: 0 }}
          transition={{ duration: 1.2, delay, ease: [0.22,0.61,0.36,1] }}
          style={{ transformOrigin: "left" }}
          className="h-full rounded-full bg-gradient-to-r from-mint-400 via-mint-300 to-mint-400/40"
        />
      </div>
    </div>
  );
}

// ============== CERTIFICATIONS ==============
function Certifications() {
  const certs = [
    { name: "Basic Life Support (BLS)", org: "Resuscitation Council", icon: Icon.Sparkle },
    { name: "First Aid Training", org: "Certified", icon: Icon.Sparkle },
    { name: "ECG Workshop in Cardiac Emergencies", org: "PAF Hospital, Islamabad", icon: Icon.Sparkle },
    { name: "Basic Surgical Skills · Suturing Workshop", org: "Hands-on Training", icon: Icon.Sparkle },
    { name: "Introduction to Public Health", org: "Certificate Course", icon: Icon.Book },
    { name: "Introduction to Systematic Review & Meta-Analysis", org: "Johns Hopkins University", icon: Icon.Book },
  ];

  const activities = [
    { role: "President · Department of Short Filmmaking", org: "Thespian Society, Air University Islamabad", period: "2020 — 2021" },
    { role: "General Member", org: "SYNCH Pakistan, Islamabad", period: "2023 — Present" },
    { role: "Institutional Ambassador", org: "Shaukat Khanum Memorial Cancer Hospital & Research Centre", period: "2024 — Present" },
    { role: "World Hepatitis Day · World Malaria Day", org: "World Health Organisation, Islamabad", period: "2024" },
    { role: "Cricket · Sports Fest 2025", org: "Fazaia Medical College, Islamabad", period: "2025" },
  ];

  return (
    <section id="certifications" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader chapter="05" eyebrow="Certifications · Activities" title="Beyond the curriculum." />

      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-12 lg:col-span-7">
          <div className="chapter mb-5 flex items-center gap-3">
            <Icon.Award className="w-4 h-4 text-mint-300" /> Certifications
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {certs.map((c, i) => (
              <Reveal key={i} delay={i * 0.05}>
                <motion.div whileHover={{ y: -3 }} className="group glass rounded-xl p-5 h-full">
                  <div className="flex items-start gap-3">
                    <div className="w-9 h-9 rounded-lg bg-mint-400/10 border border-mint-400/20 flex items-center justify-center text-mint-300 shrink-0">
                      <c.icon className="w-4 h-4" />
                    </div>
                    <div>
                      <div className="text-bone-100 leading-snug">{c.name}</div>
                      <div className="text-bone-300/60 text-sm mt-1">{c.org}</div>
                    </div>
                  </div>
                </motion.div>
              </Reveal>
            ))}
          </div>
        </div>

        <div className="col-span-12 lg:col-span-5">
          <div className="chapter mb-5 flex items-center gap-3">
            <Icon.Sparkle className="w-4 h-4 text-mint-300" /> Extra-curricular
          </div>
          <div className="space-y-3">
            {activities.map((a, i) => (
              <Reveal key={i} delay={i * 0.05}>
                <div className="group border border-bone-300/10 hover:border-mint-400/30 transition-colors rounded-xl p-5">
                  <div className="flex items-baseline justify-between gap-4">
                    <div className="text-bone-100 leading-snug">{a.role}</div>
                    <div className="font-mono text-[11px] text-bone-300/60 shrink-0">{a.period}</div>
                  </div>
                  <div className="text-bone-300/60 text-sm mt-1.5">{a.org}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== RESEARCH ==============
function Research() {
  const studies = [
    {
      status: "Completed",
      statusColor: "text-mint-300 border-mint-400/30",
      period: "Jan 2024 — Sept 2024",
      title: "Unveiling the Psychological Effects of Societal Behaviour on the Intersex Community of Pakistan",
      summary: "A mixed-methods study examining how social stigma, family rejection, and limited healthcare access shape mental health outcomes among Pakistan's intersex population — surfacing actionable directions for culturally-grounded support.",
      tags: ["Mental Health", "Stigma", "Pakistan", "Mixed-methods"],
    },
    {
      status: "In Progress",
      statusColor: "text-amber-200 border-amber-300/30",
      period: "Ongoing",
      title: "Evaluating an App-based Intervention for Mental Health Disorders in University Students of Islamabad",
      summary: "Pilot evaluation of a smartphone-delivered intervention for anxiety and depression among undergraduate students — measuring uptake, adherence, and symptom change over a structured trial period.",
      tags: ["Digital Health", "Anxiety", "Depression", "RCT-style pilot"],
    },
  ];

  return (
    <section id="research" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <SectionHeader
        chapter="06"
        eyebrow="Research"
        title="Questions worth asking."
        lede="Two projects exploring mental health at the edges — among populations under-served by traditional care and undergraduates burdened by quiet illness."
      />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
        {studies.map((s, i) => (
          <Reveal key={i} delay={i * 0.1}>
            <motion.article
              whileHover={{ y: -6 }}
              transition={{ duration: 0.5, ease: "easeOut" }}
              className="relative h-full rounded-2xl p-8 md:p-10 border border-bone-300/10 overflow-hidden group bg-gradient-to-br from-ink-800/70 to-ink-900/70"
            >
              {/* Spotlight */}
              <div className="absolute -top-24 -right-24 w-64 h-64 rounded-full bg-mint-400/15 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />

              <div className="flex items-center gap-3 flex-wrap mb-6">
                <span className={`text-[10px] uppercase tracking-widest border rounded-full px-3 py-1 ${s.statusColor}`}>{s.status}</span>
                <span className="chapter">{s.period}</span>
              </div>

              <h3 className="display text-2xl md:text-3xl text-bone-100 leading-tight">{s.title}</h3>
              <p className="mt-5 text-bone-300/75 leading-relaxed">{s.summary}</p>

              <div className="mt-6 flex flex-wrap gap-2">
                {s.tags.map(t => (
                  <span key={t} className="text-xs font-mono text-bone-300/70 border border-bone-300/15 rounded-full px-3 py-1">{t}</span>
                ))}
              </div>
            </motion.article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============== CONTACT ==============
function Contact() {
  const channels = [
    { icon: Icon.Mail, label: "Email", value: "usamabaigmed@gmail.com", href: "mailto:usamabaigmed@gmail.com" },
    { icon: Icon.Phone, label: "Phone", value: "+92 (323) 157 6234", href: "tel:+923231576234" },
    { icon: Icon.Pin, label: "Location", value: "Islamabad, Pakistan", href: "https://maps.google.com/?q=Islamabad" },
  ];

  return (
    <section id="contact" className="relative max-w-[1400px] mx-auto px-6 md:px-10 py-28 md:py-40">
      <div className="relative">
        <Reveal>
          <div className="chapter">07 — Contact</div>
        </Reveal>
        <Reveal delay={0.1}>
          <h2 className="display text-[clamp(3rem,9vw,8rem)] text-bone-100 mt-4 leading-[0.95]">
            Let's <span className="italic-soft text-mint-300">talk</span>.
          </h2>
        </Reveal>
        <Reveal delay={0.2}>
          <p className="max-w-xl mt-6 text-bone-300/80 text-lg leading-relaxed">
            Open to residency conversations, research collaboration, and any opportunity that brings clinical work closer to the people who need it most.
          </p>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-4">
          {channels.map((c, i) => (
            <Reveal key={i} delay={i * 0.08}>
              <a href={c.href} className="group block glass rounded-2xl p-6 h-full transition-colors">
                <div className="flex items-center justify-between">
                  <div className="w-10 h-10 rounded-full bg-mint-400/10 border border-mint-400/30 flex items-center justify-center text-mint-300">
                    <c.icon className="w-4 h-4" />
                  </div>
                  <Icon.Arrow className="w-4 h-4 text-bone-300/40 -rotate-45 group-hover:rotate-0 group-hover:text-mint-300 transition-all" />
                </div>
                <div className="chapter mt-5">{c.label}</div>
                <div className="mt-1.5 text-bone-100 text-lg break-all">{c.value}</div>
              </a>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.3}>
          <div className="mt-12 flex flex-wrap items-center gap-4">
            <MagneticButton href="mailto:usamabaigmed@gmail.com" primary>
              Email me <Icon.Arrow className="w-4 h-4" />
            </MagneticButton>
            <MagneticButton href="assets/Usama_Baig_CV.pdf">
              <Icon.Download className="w-4 h-4" /> Download CV
            </MagneticButton>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer className="relative border-t border-bone-300/10">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10 py-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
        <div>
          <div className="font-display italic text-2xl">Usama Baig</div>
          <div className="text-xs text-bone-300/50 mt-1 font-mono">© 2026 · Designed with intention.</div>
        </div>
        <div className="flex items-center gap-3 text-xs text-bone-300/50 font-mono">
          <span>ISB · PK</span>
          <span className="hairline w-12" />
          <span>33.6844° N</span>
          <span className="hairline w-12" />
          <span>73.0479° E</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, About, Education, Experience, Skills, Certifications, Research, Contact, Footer, PrinciplesMarquee });