// Page sections
const { useState, useEffect } = React;

/* ============== HERO ============== */
function Hero() {
  return (
    <section id="home" className="relative pt-28 md:pt-32 pb-10 md:pb-16">
      <div className="max-w-6xl mx-auto px-5 md:px-8">
        <div className="win overflow-hidden">
          <div className="win-titlebar flex items-center gap-3 px-4 py-3">
            <div className="flex items-center gap-1.5">
              <span className="dot lav" />
              <span className="dot pnk" />
              <span className="dot pch" />
            </div>
            <div className="flex-1 text-center font-round font-semibold text-[15px] text-lav-600">
              ~/zarrah/workstation
            </div>
            <div className="flex items-center gap-2">
              <span className="pulse-dot" />
              <span className="mono-label" style={{color:'#16A34A'}}>online &amp; building things</span>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-6 md:gap-4 items-center px-6 md:px-12 py-8 md:py-10 relative overflow-hidden">
            {/* decorative floating glyphs */}
            <div className="float-spark" style={{ left:'40%', top:'8%' }}>✦</div>
            <div className="float-spark" style={{ left:'58%', top:'85%', animationDelay:'2s' }}>♡</div>

            <div className="relative z-10">
              <div className="flex items-center gap-3 mb-4">
                <span className="relative inline-block">
                  <img
                    src="Me1.png"
                    alt="Zarrah Exekiel Cinco Valles"
                    loading="lazy"
                    decoding="async"
                    className="w-14 h-14 md:w-16 md:h-16 rounded-full object-cover"
                    style={{border:'2px solid rgba(255,255,255,0.9)', boxShadow:'0 8px 22px -8px rgba(167,139,250,0.55)', objectPosition:'center 20%'}}
                  />
                  <span className="pulse-dot" style={{position:'absolute', right:3, bottom:3}} />
                </span>
                <div className="lower-label">hi, i'm zarrah ✿</div>
              </div>
              <h1 className="font-display text-plum leading-[1.04] text-[40px] md:text-[64px] tracking-tight" style={{fontWeight:500}}>
                Zarrah Exekiel<br/>
                <span style={{
                  background: 'linear-gradient(120deg, #A78BFA 0%, #EC4899 50%, #F97316 100%)',
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
                }}>Cinco Valles</span>
              </h1>
              <p className="mt-5 text-[17px] md:text-[19px] text-plum/80 leading-relaxed max-w-[520px]">
                IT Student · Web3 &amp; dApp Builder · Community Builder <span aria-hidden>🚀</span>
              </p>

              <div className="mt-6 flex flex-wrap items-center gap-3">
                <span className="pill pill-ghost" style={{padding:'8px 14px', fontSize:14}}>
                  <span aria-hidden>📍</span> Pasig City, Philippines
                </span>
                <span className="pill pill-ghost" style={{padding:'8px 14px', fontSize:14, fontFamily:'JetBrains Mono', textTransform:'uppercase', letterSpacing:'0.1em'}}>
                  <span style={{color:'#16A34A'}}>●</span> available · summer 2026
                </span>
              </div>

              <div className="mt-7 flex flex-wrap gap-3">
                <Pill variant="primary" href="#projects">see my work ♡</Pill>
                <Pill href="#contact">say hi ✉</Pill>
              </div>
            </div>

            <div className="relative flex items-center justify-center min-h-[320px]">
              <Companion size={Math.min(420, window.innerWidth - 80)} />
            </div>
          </div>

          {/* status strip */}
          <div className="border-t px-5 py-3 flex items-center justify-between text-xs flex-wrap gap-2" style={{borderColor:'#E9D5FF', background:'rgba(243,232,255,0.4)'}}>
            <div className="mono-label">workstation_OS v1.0 · all systems nominal ✦</div>
            <div className="mono-label">tip: try clicking the friend →</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== ABOUT ============== */
function About() {
  return (
    <Section id="about" label="mission briefing ✦" title="about me">
      <div className="grid md:grid-cols-3 gap-6 items-stretch">
        {/* LEFT — bio + stats/motto fill the wide column */}
        <div className="md:col-span-2 flex flex-col gap-6">
          <Win title="readme.txt" idLabel="01" className="hover-sparkle">
            <span className="sparkle">✨</span>
            <p className="text-plum/85 text-[17px] leading-[1.75]">
              BS Information Technology student at <strong>Pamantasan ng Lungsod ng Pasig</strong>
              <span className="mono-label ml-2 text-xs">GWA 1.75</span>, previously a Dean's Lister at
              <strong> Our Lady of Fatima University</strong>
              <span className="mono-label ml-2 text-xs">GWA 1.34</span>.
            </p>
            <p className="text-plum/85 text-[17px] leading-[1.75] mt-4">
              I spend my time building things — lately <strong>on-chain dApps and Web3 experiences</strong> — helping run programs, and showing up for tech communities across the Philippines.
              Currently <strong>VP for External Affairs</strong> of the PLP Computer Society and <strong>Programs Operations / Mission Specialist</strong> at KadaKareer,
              volunteer at <strong>DevCon Philippines (Manila Chapter)</strong>, and member of the <strong>AWS Cloud Club / Student Builders</strong> and the <strong>Celestia Community</strong>.
            </p>
            <p className="text-plum/85 text-[17px] leading-[1.75] mt-4">
              Still early in my journey, but very intentional about it <span aria-hidden>♡</span>
            </p>
          </Win>

          <div className="grid sm:grid-cols-2 gap-5 flex-1">
            <div className="win p-6 hover-sparkle h-full">
              <span className="sparkle">✨</span>
              <div className="flex items-center gap-3 mb-3">
                <div className="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl" style={{background:'linear-gradient(140deg,#C4B5FD,#FBCFE8)'}}>
                  <span aria-hidden>👩‍🚀</span>
                </div>
                <div>
                  <div className="font-round font-bold text-plum">cadet log</div>
                  <div className="mono-label text-[10px]">mission_year_02</div>
                </div>
              </div>
              <div className="space-y-2.5 text-sm">
                <Row k="role" v="IT Student"/>
                <Row k="orbit" v="Pasig City, PH"/>
                <Row k="pronouns" v="she/her"/>
                <Row k="fuel" v="iced matcha + lo-fi"/>
              </div>
            </div>

            <div className="win p-6 text-center flex flex-col items-center justify-center h-full" style={{background:'linear-gradient(140deg, rgba(253,232,201,0.7), rgba(251,207,232,0.5))'}}>
              <div className="text-3xl mb-1" aria-hidden>♡</div>
              <div className="font-display text-2xl text-plum" style={{fontWeight:500}}>"intentional, not in a hurry."</div>
              <div className="mono-label mt-2">— current motto</div>
            </div>
          </div>
        </div>

        {/* RIGHT — photo stretches to fill the full column height */}
        <div className="md:col-span-1">
          <div className="win overflow-hidden hover-sparkle flex flex-col h-full">
            <span className="sparkle">✨</span>
            <div className="win-titlebar flex items-center gap-3 px-4 py-3">
              <div className="flex items-center gap-1.5">
                <span className="dot lav" /><span className="dot pnk" /><span className="dot pch" />
              </div>
              <div className="flex-1 text-center font-round font-semibold text-[14px] text-lav-600">me.png</div>
              <div className="mono-label opacity-70">IMG</div>
            </div>
            <div className="relative flex-1" style={{background:'linear-gradient(140deg,#E9D5FF,#FBCFE8)', minHeight:360}}>
              <img
                src="Me1.png"
                alt="Zarrah Exekiel Cinco Valles"
                loading="lazy"
                decoding="async"
                className="absolute inset-0 w-full h-full object-cover"
                style={{objectPosition:'center 20%'}}
              />
              <div className="absolute top-3 left-4 mono-label" style={{color:'rgba(59,7,100,0.6)'}}>// hi, it's me ✿</div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Row({ k, v }) {
  return (
    <div className="flex items-center justify-between gap-3 px-3 py-2 rounded-xl" style={{background:'rgba(243,232,255,0.55)'}}>
      <span className="mono-label">{k}</span>
      <span className="font-semibold text-plum">{v}</span>
    </div>
  );
}

/* ============== SKILLS ============== */
function Skills() {
  const groups = [
    { tone: 'lav',   label: 'programming',          icon: '⌘',  items: ['Java', 'Python', 'C++', 'Rust'] },
    { tone: 'pink',  label: 'web development',       icon: '✦',  items: ['HTML', 'CSS', 'JavaScript', 'ReactJS', 'Tailwind CSS', 'Node.js', 'REST APIs'] },
    { tone: 'mint',  label: 'blockchain & web3',     icon: '◈',  items: ['Soroban (Rust) Smart Contracts', 'Stellar', 'Freighter Wallet', 'dApp Development', 'Non-custodial Web3'] },
    { tone: 'peach', label: 'databases',            icon: '◇',  items: ['MySQL', 'SQL', 'Firebase', 'PostgreSQL (Vercel Postgres)'] },
    { tone: 'cream', label: 'ai integration',       icon: '✶',  items: ['Google Gemini API (Vision & Text)', 'OCR', 'LLM API Integration', 'Prompt Engineering'] },
    { tone: 'lav',   label: 'ai-assisted dev',      icon: '✷',  items: ['Claude', 'ChatGPT', 'Cursor', 'GitHub Copilot'] },
    { tone: 'pink',  label: 'core concepts',        icon: '✿',  items: ['Object-Oriented Programming', 'Data Structures & Algorithms', 'CI/CD', 'Responsive Web Design'] },
    { tone: 'peach', label: 'tools & technologies', icon: '⚙',  items: ['Git', 'GitHub', 'GitHub Actions', 'Vite', 'Express', 'VS Code', 'Vercel', 'Postman'] },
    { tone: 'cream', label: 'data & design',        icon: '♢',  items: ['Microsoft Excel (data analysis, reporting)', 'Canva', 'Adobe Photoshop'] },
  ];
  // pre-set tiny rotations for asymmetric playful grid
  const rotations = [-2, 1, -1, 2, -2, 1, -1, 2, 0, -1, 1, -2, 0, 1, -1, 2];
  return (
    <Section id="skills" label="things i can do ✿" title="skills & tooling">
      <div className="grid md:grid-cols-3 gap-5">
        {groups.map((g, gi) => (
          <Win key={g.label} title={g.label} idLabel={String(gi+1).padStart(2,'0')} className="hover-sparkle">
            <span className="sparkle">✨</span>
            <div className="flex flex-wrap gap-3">
              {g.items.map((it, i) => (
                <Sticker key={it} tone={g.tone} icon={g.icon} rotate={rotations[(gi*4 + i) % rotations.length]}>
                  {it}
                </Sticker>
              ))}
            </div>
          </Win>
        ))}
      </div>
    </Section>
  );
}

/* ============== PROJECTS ============== */
function Projects() {
  const projects = [
    {
      name: 'Hearth',
      icon: '🔥',
      featured: true,
      tagline: 'on-chain group support dApp',
      date: 'Apr 2026',
      gradient: 'linear-gradient(140deg, #E9D5FF 0%, #FBCFE8 55%, #FED7AA 100%)',
      desc: 'A non-custodial dApp on Stellar Testnet that automates rotating group contributions through a Soroban smart contract written in Rust — putting trust in code rather than a person.',
      points: [
        'Authored the on-chain contract logic (initialize, join, contribute, release, state reads) that holds funds, runs the member rotation, and releases payouts automatically.',
        'Integrated the Freighter wallet for in-browser transaction signing — private keys stay client-side.',
        'Built a React + Vite + Zustand frontend with an Express API, with CI/CD via GitHub Actions.',
      ],
      tags: ['Soroban (Rust)', 'Stellar', 'React', 'Vite', 'Freighter'],
      illustration: 'hearth',
      demo: 'https://hearth-z.vercel.app/',
    },
    {
      name: 'ShelfSense',
      icon: '🥫',
      tagline: 'smart pantry · ai-powered',
      date: 'Apr 2026',
      gradient: 'linear-gradient(140deg, #BBF7D0 0%, #FEF3C7 55%, #FED7AA 100%)',
      desc: 'A smart pantry app that automates inventory tracking through QR code scanning, instantly adding items to user stocks.',
      points: [
        'Integrated Google Gemini Vision API to extract expiration dates from product photos via OCR, eliminating manual entry.',
        'Built an AI assistant chef powered by Gemini that answers stock queries and suggests recipes from available ingredients.',
        'Backed by Firebase and Vercel Postgres.',
      ],
      tags: ['React', 'Firebase', 'Vercel Postgres', 'Gemini API'],
      illustration: 'shelf',
      demo: 'https://shelf-sense-mu.vercel.app/',
    },
    {
      name: 'TaraCommute',
      icon: '🚌',
      tagline: 'commuting assistance · routes & rides',
      date: 'Jan 2026 – Present',
      gradient: 'linear-gradient(140deg, #E9D5FF 0%, #FBCFE8 60%, #FED7AA 100%)',
      desc: 'A route-planning platform that helps Filipino commuters navigate public transportation options efficiently.',
      points: [
        'Designed an intuitive, mobile-friendly UI with reusable React components for scalable feature expansion.',
      ],
      tags: ['HTML', 'CSS3', 'JavaScript', 'ReactJS'],
      illustration: 'bus',
      demo: 'https://taracommute.vercel.app/',
    },
    {
      name: 'LUNASync',
      icon: '🌙',
      tagline: 'healthcare coordination · real-time',
      date: 'Jan 2026 – Present',
      gradient: 'linear-gradient(140deg, #BBF7D0 0%, #E9D5FF 55%, #FBCFE8 100%)',
      desc: 'A real-time platform connecting patients, medical professionals, volunteers, and donors.',
      points: [
        'Implemented role-based interfaces for four distinct user types to streamline healthcare communication.',
      ],
      tags: ['HTML5', 'CSS3', 'JavaScript', 'ReactJS'],
      illustration: 'moon',
      demo: 'https://lunasync-ph.vercel.app/',
    },
  ];
  return (
    <Section id="projects" label="things i've built ♡" title="selected projects">
      <div className="grid md:grid-cols-2 gap-6">
        {projects.map((p) => (
          <div key={p.name} className="win overflow-hidden hover-sparkle">
            <span className="sparkle">✨</span>
            <div className="win-titlebar flex items-center gap-3 px-4 py-3">
              <div className="flex items-center gap-1.5">
                <span className="dot lav" />
                <span className="dot pnk" />
                <span className="dot pch" />
              </div>
              <div className="flex-1 text-center font-round font-semibold text-[14px] text-lav-600">
                {p.name.toLowerCase()}.app
              </div>
              <div className="mono-label opacity-70" style={{whiteSpace:'nowrap'}}>{p.date}</div>
            </div>

            {/* "screen" area with illustration placeholder */}
            <div className="relative h-44 md:h-52" style={{background: p.gradient}}>
              <div className="absolute inset-0 stripes opacity-40" />
              {p.illustration === 'bus' ? <BusArt/> : p.illustration === 'moon' ? <MoonArt/> : p.illustration === 'hearth' ? <HearthArt/> : <ShelfArt/>}
              <div className="absolute top-3 left-4 mono-label" style={{color:'rgba(59,7,100,0.6)'}}>// screen capture</div>
              {p.featured && (
                <div className="absolute top-3 right-4">
                  <Sticker tone="cream" icon="★" rotate={2}>featured</Sticker>
                </div>
              )}
            </div>

            <div className="px-6 md:px-7 py-6">
              <div className="flex items-center gap-3 mb-1">
                <span className="text-3xl" aria-hidden>{p.icon}</span>
                <h3 className="font-display text-2xl text-plum" style={{fontWeight:500}}>{p.name}</h3>
              </div>
              <div className="mono-label mb-3">{p.tagline}</div>
              <p className="text-plum/80 leading-relaxed">{p.desc}</p>
              {p.points && (
                <ul className="mt-3 space-y-2">
                  {p.points.map((pt, pi) => (
                    <li key={pi} className="flex gap-2 text-plum/75 text-[14px] leading-relaxed">
                      <span aria-hidden style={{color:'#A78BFA'}}>✦</span>
                      <span>{pt}</span>
                    </li>
                  ))}
                </ul>
              )}
              <div className="mt-4 flex flex-wrap gap-2">
                {p.tags.map(t => (
                  <span key={t} className="text-[12px] font-semibold px-3 py-1.5 rounded-full" style={{background:'rgba(233,213,255,0.7)', color:'#6D28D9', border:'1px solid rgba(216,180,254,0.8)'}}>{t}</span>
                ))}
              </div>
              <div className="mt-5">
                {p.demo ? (
                  <Pill variant="primary" href={p.demo} target="_blank" rel="noopener noreferrer">live demo ↗</Pill>
                ) : (
                  <Pill onClick={() => window.__toast('repo coming soon ♡')}>view project →</Pill>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function BusArt() {
  return (
    <svg viewBox="0 0 320 180" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid meet">
      {/* road */}
      <rect x="0" y="135" width="320" height="40" fill="rgba(255,255,255,0.5)" />
      <line x1="0" y1="155" x2="320" y2="155" stroke="#fff" strokeWidth="2" strokeDasharray="14 12" opacity="0.8"/>
      {/* bus body */}
      <g transform="translate(70,55)">
        <rect x="0" y="0" width="180" height="80" rx="22" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2.5" />
        <rect x="14" y="14" width="48" height="32" rx="10" fill="#C4B5FD" />
        <rect x="72" y="14" width="48" height="32" rx="10" fill="#C4B5FD" />
        <rect x="130" y="14" width="36" height="32" rx="10" fill="#FBCFE8" />
        <circle cx="40" cy="80" r="11" fill="#3B0764"/>
        <circle cx="40" cy="80" r="5" fill="#FED7AA"/>
        <circle cx="140" cy="80" r="11" fill="#3B0764"/>
        <circle cx="140" cy="80" r="5" fill="#FED7AA"/>
        <text x="90" y="68" textAnchor="middle" fontFamily="Quicksand" fontWeight="700" fontSize="12" fill="#6D28D9">TARA →</text>
      </g>
      {/* tiny clouds */}
      <ellipse cx="40" cy="40" rx="22" ry="9" fill="rgba(255,255,255,0.85)"/>
      <ellipse cx="280" cy="30" rx="28" ry="10" fill="rgba(255,255,255,0.85)"/>
    </svg>
  );
}

function MoonArt() {
  return (
    <svg viewBox="0 0 320 180" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid meet">
      {/* stars */}
      {[[30,30],[60,90],[280,40],[260,120],[120,25],[200,140]].map(([x,y],i)=> (
        <text key={i} x={x} y={y} fill="#A78BFA" fontSize="14" opacity="0.7">✦</text>
      ))}
      {/* heartbeat line */}
      <polyline points="20,110 60,110 75,90 92,130 108,110 320,110" fill="none" stroke="rgba(255,255,255,0.85)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round"/>
      {/* moon */}
      <g transform="translate(155,40)">
        <circle cx="50" cy="50" r="44" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2.5"/>
        <circle cx="38" cy="55" r="3" fill="#3B0764"/>
        <circle cx="62" cy="55" r="3" fill="#3B0764"/>
        <path d="M40 68 Q50 76 60 68" stroke="#3B0764" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <circle cx="30" cy="60" r="4" fill="#FBCFE8" opacity="0.8"/>
        <circle cx="70" cy="60" r="4" fill="#FBCFE8" opacity="0.8"/>
        {/* z's */}
        <text x="95" y="20" fill="#6D28D9" fontFamily="Fraunces" fontStyle="italic" fontSize="22">z</text>
        <text x="108" y="35" fill="#A78BFA" fontFamily="Fraunces" fontStyle="italic" fontSize="16">z</text>
      </g>
    </svg>
  );
}

function HearthArt() {
  return (
    <svg viewBox="0 0 320 180" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid meet">
      {/* sparkles */}
      {[[40,34],[280,40],[260,130],[44,128]].map(([x,y],i)=> (
        <text key={i} x={x} y={y} fill="#A78BFA" fontSize="14" opacity="0.7">✦</text>
      ))}
      {/* rotation orbit */}
      <ellipse cx="160" cy="92" rx="96" ry="46" fill="none" stroke="rgba(255,255,255,0.85)" strokeWidth="2.5" strokeDasharray="6 8"/>
      {/* coins riding the rotation */}
      <g>
        <circle cx="64" cy="92" r="13" fill="#FED7AA" stroke="#A78BFA" strokeWidth="2"/>
        <text x="64" y="97" textAnchor="middle" fontFamily="Quicksand" fontWeight="700" fontSize="12" fill="#6D28D9">✦</text>
        <circle cx="256" cy="92" r="13" fill="#FBCFE8" stroke="#A78BFA" strokeWidth="2"/>
        <text x="256" y="97" textAnchor="middle" fontFamily="Quicksand" fontWeight="700" fontSize="12" fill="#6D28D9">✦</text>
      </g>
      {/* central heart */}
      <g transform="translate(160,86)">
        <path d="M0 26 C -28 4 -24 -22 -6 -22 C 2 -22 0 -14 0 -10 C 0 -14 -2 -22 6 -22 C 24 -22 28 4 0 26 Z"
              fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2.5"/>
        <circle cx="-7" cy="-6" r="2.6" fill="#3B0764"/>
        <circle cx="7" cy="-6" r="2.6" fill="#3B0764"/>
        <path d="M-6 2 Q0 7 6 2" stroke="#3B0764" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <circle cx="-13" cy="0" r="3" fill="#FBCFE8" opacity="0.8"/>
        <circle cx="13" cy="0" r="3" fill="#FBCFE8" opacity="0.8"/>
      </g>
    </svg>
  );
}

function ShelfArt() {
  return (
    <svg viewBox="0 0 320 180" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid meet">
      {/* sparkles */}
      {[[40,30],[280,36]].map(([x,y],i)=> (
        <text key={i} x={x} y={y} fill="#A78BFA" fontSize="14" opacity="0.7">✦</text>
      ))}
      {/* shelves */}
      <rect x="36" y="86" width="160" height="5" rx="2.5" fill="rgba(255,255,255,0.9)"/>
      <rect x="36" y="140" width="160" height="5" rx="2.5" fill="rgba(255,255,255,0.9)"/>
      {/* jars / cans on top shelf */}
      <g>
        <rect x="50" y="52" width="26" height="34" rx="6" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2"/>
        <rect x="50" y="60" width="26" height="14" fill="#FBCFE8" opacity="0.7"/>
        <rect x="86" y="46" width="26" height="40" rx="6" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2"/>
        <rect x="86" y="58" width="26" height="16" fill="#BBF7D0" opacity="0.8"/>
        <rect x="122" y="54" width="26" height="32" rx="6" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2"/>
        <rect x="122" y="62" width="26" height="12" fill="#FED7AA" opacity="0.85"/>
        <circle cx="172" cy="74" r="12" fill="#C4B5FD" stroke="#A78BFA" strokeWidth="2"/>
      </g>
      {/* jars on bottom shelf */}
      <g>
        <rect x="56" y="106" width="26" height="34" rx="6" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2"/>
        <rect x="56" y="116" width="26" height="14" fill="#FEF3C7" opacity="0.9"/>
        <rect x="92" y="110" width="26" height="30" rx="6" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2"/>
        <rect x="92" y="120" width="26" height="10" fill="#FBCFE8" opacity="0.7"/>
      </g>
      {/* QR scan tag */}
      <g transform="translate(214,96)">
        <rect x="0" y="0" width="64" height="64" rx="12" fill="#FFFFFF" stroke="#A78BFA" strokeWidth="2.5"/>
        {[[10,10],[28,10],[10,28],[40,28],[10,46],[28,46],[46,46],[40,10]].map(([x,y],i)=>(
          <rect key={i} x={x} y={y} width="8" height="8" rx="1.5" fill="#3B0764"/>
        ))}
        <text x="32" y="-6" textAnchor="middle" fontFamily="Quicksand" fontWeight="700" fontSize="11" fill="#6D28D9">scan ✦</text>
      </g>
    </svg>
  );
}

/* ============== TIMELINE (shared) ============== */
function TimelineCard({ title, items }) {
  return (
    <Win title={title} idLabel="∞" className="">
      <div className="relative pl-2 md:pl-6">
        {/* dotted spine */}
        <div className="absolute top-2 bottom-2 timeline-line" style={{ left: 20, width: 4 }} />
        <ul className="space-y-5">
          {items.map((it, i) => (
            <li key={i} className="relative pl-14 hover-sparkle group" style={{paddingLeft: 56}}>
              <span className="sparkle" style={{top:6, right:10}}>✨</span>
              {/* dot */}
              <span
                className="absolute"
                style={{
                  left: 8, top: 12, width: 24, height: 24, borderRadius: 999,
                  background: it.color,
                  boxShadow: `0 0 0 5px rgba(255,255,255,0.85), 0 8px 18px -6px ${it.color}cc`,
                }}
              />
              <div className="rounded-2xl px-5 py-4 transition" style={{background:'rgba(255,255,255,0.7)', border:'1px solid rgba(233,213,255,0.9)'}}>
                <div className="flex items-baseline justify-between gap-3 flex-wrap">
                  <div className="font-round font-bold text-plum text-[17px]">{it.role}</div>
                  <div className="mono-label">{it.when}</div>
                </div>
                <div className="text-plum/75 mt-1 text-[15px]">{it.org}</div>
                {it.desc && <p className="text-plum/65 mt-2 text-[14px] leading-relaxed">{it.desc}</p>}
                {it.points && (
                  <ul className="mt-2 space-y-1.5">
                    {it.points.map((pt, pi) => (
                      <li key={pi} className="flex gap-2 text-plum/65 text-[14px] leading-relaxed">
                        <span aria-hidden style={{color:'#A78BFA'}}>✦</span>
                        <span>{pt}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </Win>
  );
}

/* ============== WORK EXPERIENCE ============== */
function Experience() {
  const items = [
    { color: '#FED7AA', org: 'KadaKareer',                                role: 'Programs Operations / Mission Specialist',                    when: 'Jan 2026 – Present',
      desc: 'Coordinated career development programs and supported community outreach initiatives.' },
    { color: '#FDE68A', org: 'Blessed888Collections Online Shop · Pasig City', role: 'Online Store Administrator / Social Media Administrator / Finance Assistant', when: 'Jul 2022 – Dec 2024',
      points: [
        'Managed product listings, inventory, and order fulfillment to keep the online storefront accurate and running smoothly.',
        'Handled social media accounts, customer inquiries, and consistent branding across platforms.',
        'Maintained financial records, processed invoices, and prepared reports including balance sheets and summaries.',
      ] },
  ];
  return (
    <Section id="experience" label="where i've worked ✦" title="work experience">
      <TimelineCard title="work.log" items={items} />
    </Section>
  );
}

/* ============== ORGANIZATIONS ============== */
function Organizations() {
  const items = [
    { color: '#C4B5FD', org: 'Computer Society',                          role: 'Vice President – External Affairs',                            when: 'May 2026 – Present',
      desc: 'Led external partnerships and represented the organization in inter-org initiatives.' },
    { color: '#FBCFE8', org: 'PLP Supreme Student Council',               role: 'Marketing Officer',                                           when: 'Dec 2025 – May 2026',
      desc: 'Created event promotional materials and collaborated with teams on campaign visuals.' },
    { color: '#F9A8D4', org: 'Fatima Computing & Multimedia Society',     role: 'Committee Member / Marshall / Secretary',                     when: 'Aug 2024 – Aug 2025',
      desc: 'Organized academic and technical events; handled documentation and on-site coordination.' },
    { color: '#BBF7D0', org: 'AWS Cloud Club / Student Builders',         role: 'Member',                                                      when: 'present' },
    { color: '#D8B4FE', org: 'Celestia Community',                        role: 'Member',                                                      when: 'present' },
    { color: '#FEF3C7', org: 'DevCon Philippines (Manila Chapter)',       role: 'Volunteer',                                                   when: 'present' },
    { color: '#FDBA74', org: 'OLFU · Office of the Co-Curricular Affairs', role: 'Graphic Designer',                                          when: 'Aug 2024 – Aug 2025' },
  ];
  return (
    <Section id="organizations" label="where i show up ♡" title="organizations">
      <TimelineCard title="orgs.log" items={items} />
    </Section>
  );
}

/* ============== EDUCATION ============== */
function Education() {
  const cards = [
    {
      emoji: '🎓',
      tone: 'lav',
      school: 'Pamantasan ng Lungsod ng Pasig',
      degree: 'BS Information Technology',
      when: 'Aug 2024 – Present',
      gwa: '1.75',
      pill: 'currently enrolled',
      pillColor: 'mint',
    },
    {
      emoji: '🌸',
      tone: 'pink',
      school: 'Our Lady of Fatima University',
      degree: 'BS Information Technology',
      when: 'Aug 2024 – Aug 2025',
      gwa: '1.34',
      pill: "dean's lister",
      pillColor: 'peach',
    },
  ];
  const toneBg = { lav: 'linear-gradient(140deg,#E9D5FF,#F3E8FF)', pink: 'linear-gradient(140deg,#FBCFE8,#FCE7F3)' };
  return (
    <Section id="education" label="where i'm learning ♡" title="education">
      <div className="grid md:grid-cols-2 gap-6">
        {cards.map((c, i) => (
          <div key={i} className="win overflow-hidden hover-sparkle">
            <span className="sparkle">✨</span>
            <div className="win-titlebar flex items-center gap-3 px-4 py-3">
              <div className="flex items-center gap-1.5"><span className="dot lav" /><span className="dot pnk" /><span className="dot pch" /></div>
              <div className="flex-1 text-center font-round font-semibold text-[14px] text-lav-600">enrollment_record_{i+1}</div>
              <div className="mono-label opacity-70">EDU</div>
            </div>
            <div className="p-7 relative" style={{background: toneBg[c.tone]}}>
              <div className="absolute -top-1 -right-1 w-24 h-24 rounded-full" style={{background:'rgba(255,255,255,0.5)', filter:'blur(20px)'}} />
              <div className="relative">
                <div className="text-5xl mb-3" aria-hidden>{c.emoji}</div>
                <div className="font-display text-[26px] leading-tight text-plum" style={{fontWeight:500}}>{c.degree}</div>
                <div className="mt-1 text-plum/85 font-medium">{c.school}</div>
                <div className="mono-label mt-3">{c.when}</div>
                <div className="mt-5 flex items-center gap-3 flex-wrap">
                  <div className="rounded-2xl px-4 py-3" style={{background:'rgba(255,255,255,0.75)', border:'1px solid rgba(255,255,255,0.9)'}}>
                    <div className="mono-label text-[10px]">general weighted avg</div>
                    <div className="font-display text-3xl text-plum" style={{fontWeight:500}}>{c.gwa}</div>
                  </div>
                  <Sticker tone={c.pillColor} icon="✦">{c.pill}</Sticker>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* ============== CONTACT ============== */
function Contact() {
  const items = [
    { icon: '📮', label: 'email',    value: 'zarrahexekiel@gmail.com',                          copy: 'zarrahexekiel@gmail.com',                       href: 'mailto:zarrahexekiel@gmail.com',                             tone: 'lav' },
    { icon: '📞', label: 'phone',    value: '0915-386-8047',                                    copy: '09153868047',                                   href: 'tel:+639153868047',                                          tone: 'pink' },
    { icon: '💼', label: 'linkedin', value: 'linkedin.com/in/zarrah-exekiel-valles-596837388',  copy: 'https://www.linkedin.com/in/zarrah-exekiel-valles-596837388/', href: 'https://www.linkedin.com/in/zarrah-exekiel-valles-596837388/', tone: 'peach' },
    { icon: '🌱', label: 'github',   value: 'github.com/zazazzz-exe',                           copy: 'https://github.com/zazazzz-exe',                href: 'https://github.com/zazazzz-exe',                             tone: 'mint' },
  ];
  const [text, setText] = useState('hi zarrah! i saw your portfolio and ');
  return (
    <Section id="contact" label="let's talk ✉" title="say hi">
      <div className="grid md:grid-cols-5 gap-6">
        <div className="md:col-span-3">
          <Win title="new_message.draft" idLabel="✉">
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <div className="mono-label" style={{minWidth:50}}>to</div>
                <div className="flex-1 rounded-xl px-4 py-2.5 flex items-center gap-2" style={{background:'rgba(243,232,255,0.5)', border:'1px solid #E9D5FF'}}>
                  <span className="w-7 h-7 rounded-full flex items-center justify-center" style={{background:'linear-gradient(135deg,#C4B5FD,#FBCFE8)', color:'#3B0764', fontWeight:700, fontSize:12}}>Z</span>
                  <span className="font-medium text-plum">zarrah ✿</span>
                  <span className="mono-label ml-auto">verified</span>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="mono-label" style={{minWidth:50}}>subj</div>
                <input className="flex-1 rounded-xl px-4 py-2.5 text-plum bg-white/70 outline-none focus:bg-white" style={{border:'1px solid #E9D5FF'}} defaultValue="hello from your future collaborator ♡" />
              </div>
              <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
                rows={7}
                className="w-full rounded-2xl px-4 py-3 text-plum bg-white/70 outline-none focus:bg-white resize-none leading-relaxed"
                style={{border:'1px solid #E9D5FF', fontFamily:'inherit'}}
              />
              <div className="flex items-center justify-between flex-wrap gap-3 pt-1">
                <div className="mono-label">⌘ enter to send · this is a demo composer</div>
                <div className="flex gap-2">
                  <Pill onClick={() => setText('hi zarrah! i saw your portfolio and ')}>clear</Pill>
                  <Pill variant="primary" onClick={() => window.__toast('queued ✿ — please email me directly!')}>send ✉</Pill>
                </div>
              </div>
            </div>
          </Win>
        </div>

        <div className="md:col-span-2 space-y-3">
          {items.map((it) => (
            <button
              key={it.label}
              onClick={() => copyToClipboard(it.copy, it.label)}
              className="w-full text-left win px-4 py-3.5 flex items-center gap-3 hover-sparkle"
              style={{borderRadius: 22}}
            >
              <span className="sparkle">✨</span>
              <span className="w-11 h-11 rounded-2xl flex items-center justify-center text-xl" style={{
                background: { lav:'#E9D5FF', pink:'#FBCFE8', peach:'#FED7AA', mint:'#BBF7D0' }[it.tone],
              }} aria-hidden>{it.icon}</span>
              <span className="flex-1 min-w-0">
                <span className="mono-label block">{it.label}</span>
                <span className="text-plum font-medium truncate block">{it.value}</span>
              </span>
              <span className="mono-label" style={{color:'#16A34A'}}>copy</span>
            </button>
          ))}
          <a
            href="mailto:zarrahexekiel@gmail.com"
            className="block win px-4 py-4 text-center font-round font-semibold text-plum hover-sparkle"
            style={{borderRadius: 22, background:'linear-gradient(135deg,#C4B5FD,#FBCFE8,#FED7AA)'}}
          >
            <span className="sparkle">✨</span>
            ↪ open email client
          </a>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Hero, About, Skills, Projects, Experience, Organizations, Education, Contact });