/* ── v4 Sections Part 1: Nav, Hero, SkillsBar, About, Dashboard, Experience ── */

/* ── Nav ── */
function Nav({ activeSection }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
  { label: 'Home', id: 'home' }, { label: 'About', id: 'about' },
  { label: 'Experience', id: 'experience' }, { label: 'Projects', id: 'projects' },
  { label: 'Contact', id: 'contact' }];


  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Close mobile menu on outside click
  React.useEffect(() => {
    if (!mobileOpen) return;
    const handler = (e) => {if (!e.target.closest('nav')) setMobileOpen(false);};
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [mobileOpen]);

  const go = (id) => {document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });setMobileOpen(false);};

  return (
    <nav aria-label="Main navigation" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(12,18,34,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? `1px solid ${C.border}` : '1px solid transparent',
      transition: 'all 0.35s'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <a href="#home" title="Raj Danej — Business Analyst & Operations Analytics Specialist" onClick={(e) => {e.preventDefault();go('home');}} style={{ textDecoration: 'none', fontSize: 20, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: C.white }}>Raj</span><span style={{ color: C.purple }}>Danej</span>
          <span style={{ fontSize: 10, color: C.teal, background: 'rgba(45,212,191,0.1)', padding: '2px 8px', borderRadius: 4, fontWeight: 600, letterSpacing: '0.04em' }}>BA</span>
        </a>
        <div className="nav-links-desktop" style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {links.map((l) =>
          <button key={l.id} onClick={() => go(l.id)} className={activeSection === l.id ? 'filter-btn filter-btn-active' : 'filter-btn'} style={{ fontSize: 13, padding: '6px 14px' }}>{l.label}</button>
          )}
          <div style={{ width: 1, height: 20, background: C.border, margin: '0 8px' }}></div>
          <Btn href="https://github.com/Rajdanej01" variant="ghost" size="icon" icon={Icons.github(18)} />
          <Btn href="https://www.linkedin.com/in/rajdanej" variant="ghost" size="icon" icon={Icons.linkedin(18)} />
        </div>
        <button className="nav-mobile-toggle" aria-expanded={mobileOpen} aria-label="Toggle menu" onClick={(e) => {e.stopPropagation();setMobileOpen(!mobileOpen);}} style={{ display: 'none', background: 'none', border: 'none', color: C.white, cursor: 'pointer', fontSize: 24, minWidth: 44, minHeight: 44, fontFamily: 'inherit' }}>{mobileOpen ? '✕' : '☰'}</button>
      </div>
      {mobileOpen &&
      <div style={{ background: 'rgba(12,18,34,0.96)', backdropFilter: 'blur(20px)', padding: '12px 24px 20px', borderTop: `1px solid ${C.border}` }}>
          {links.map((l) =>
        <button key={l.id} onClick={() => go(l.id)} style={{ display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', padding: '14px 0', color: activeSection === l.id ? C.purple : C.textMuted, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', minHeight: 44 }}>{l.label}</button>
        )}
          <div style={{ display: 'flex', gap: 12, paddingTop: 12, borderTop: `1px solid ${C.border}`, marginTop: 8 }}>
            <Btn href="https://github.com/Rajdanej01" variant="social" size="icon" icon={Icons.github(18)} />
            <Btn href="https://www.linkedin.com/in/rajdanej" variant="social" size="icon" icon={Icons.linkedin(18)} />
            <Btn href="mailto:raajdanej@gmail.com" variant="social" size="icon" icon={Icons.mail(18)} />
          </div>
        </div>
      }
    </nav>);

}
window.Nav = Nav;

/* ── Hero ── */
function Hero() {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {setTimeout(() => setVis(true), 200);}, []);
  const a = (d) => ({ opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(28px)', transition: `all 0.9s cubic-bezier(0.16,1,0.3,1) ${d}s` });

  return (
    <section id="home" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', background: C.bg, padding: '80px 24px 60px' }}>
      <NodeNetwork style={{ opacity: 0.7 }} />
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)`, backgroundSize: '80px 80px', opacity: 0.5 }}></div>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 50% at 50% 35%, rgba(124,58,237,0.1) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(45,212,191,0.05) 0%, transparent 50%)' }}></div>

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1200, margin: '0 auto', width: '100%' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 420px), 1fr))', gap: 48, alignItems: 'center' }}>
          <div>
            <div style={{ ...a(0.1), display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(124,58,237,0.1)', border: '1px solid rgba(124,58,237,0.2)', borderRadius: 20, padding: '6px 16px', marginBottom: 24 }}>
              <span className="pulse-dot" style={{ width: 8, height: 8, borderRadius: '50%', background: C.green, position: 'relative' }}>
                <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', background: C.green, animation: 'pulseRing 2s ease-in-out infinite', opacity: 0 }}></span>
              </span>
              <span style={{ color: C.purpleLight, fontSize: 13, fontWeight: 600 }}>Available for opportunities</span>
            </div>

            <h1 style={{ ...a(0.2), fontSize: 'clamp(32px, 4.5vw, 56px)', fontWeight: 800, color: C.white, margin: '0 0 8px', lineHeight: 1.1, letterSpacing: '-0.03em' }}>Raj Danej</h1>
            <h2 style={{ ...a(0.25), fontSize: 'clamp(20px, 3vw, 32px)', fontWeight: 700, margin: '0 0 20px', lineHeight: 1.2, background: `linear-gradient(135deg, ${C.purple}, ${C.teal})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Business Analyst &amp; Operations Analytics Specialist</h2>

            <p style={{ ...a(0.35), color: C.textMuted, fontSize: 16, lineHeight: 1.8, maxWidth: 520, marginBottom: 32 }}>
              I turn messy workflows, stakeholder requirements, and operational data into clear business decisions, automated reporting, and measurable process improvements.
            </p>

            <div style={{ ...a(0.4), display: 'grid', gridTemplateColumns: 'repeat(4, auto)', gap: 24, marginBottom: 32 }} className="hero-stats">
              {[
              { n: 34, suffix: '%', label: 'Faster Reporting' },
              { n: 21, suffix: '%', label: 'B2B Network Growth' },
              { n: 95, suffix: '%', label: 'Order Fulfillment' },
              { n: 22, suffix: '%', label: 'Stockout Reduction' }].
              map((s, i) =>
              <div key={i}>
                  <div style={{ fontSize: 24, fontWeight: 800, color: C.white, fontVariantNumeric: 'tabular-nums' }}>
                    <Counter end={s.n} suffix={s.suffix} duration={1800 + i * 300} />
                  </div>
                  <div style={{ fontSize: 11, color: C.textDim, marginTop: 2 }}>{s.label}</div>
                </div>
              )}
            </div>

            <div style={{ ...a(0.5), display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <Btn onClick={() => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' })}>View Business Impact</Btn>
              <a href="/Raj_Danej_Resume.pdf" download="Raj_Danej_Resume.pdf" className="btn-base btn-outline btn-md" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }} onClick={() => track('Resume Downloaded')}>{Icons.download(16)} Download Resume</a>
            </div>

            <div style={{ ...a(0.6), display: 'flex', gap: 10, marginTop: 24 }}>
              <Btn href="https://github.com/Rajdanej01" variant="social" size="icon" icon={Icons.github(20)} title="GitHub" />
              <Btn href="https://www.linkedin.com/in/rajdanej" variant="social" size="icon" icon={Icons.linkedin(20)} title="LinkedIn" />
              <Btn href="mailto:raajdanej@gmail.com" variant="social" size="icon" icon={Icons.mail(20)} title="Email" />
            </div>
          </div>

          <div className="hero-code-panel" style={{ ...a(0.4), display: 'flex', justifyContent: 'center' }}>
            <TypingCode />
          </div>
        </div>
      </div>
    </section>);

}
window.Hero = Hero;

/* ── Skills Ticker ── */
function SkillsBar() {
  return (
    <section id="skills" style={{ background: C.bgCard, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}`, padding: '18px 0', overflow: 'hidden' }}>
      <Ticker items={['Requirements Gathering', 'Stakeholder Management', 'Process Mapping', 'SQL', 'Python', 'Power BI', 'Tableau', 'Demand Forecasting', 'CRM Reporting', 'Workflow Automation', 'KPI Design', 'Snowflake', 'BigQuery', 'ETL Pipelines']} />
    </section>);

}
window.SkillsBar = SkillsBar;

/* ── About ── */
function About() {
  const tooltips = {
    'SQL': 'Querying, CTEs, window functions, and business reporting logic',
    'Python': 'Pandas, forecasting, automation, and analytical workflows',
    'Power BI': 'Interactive dashboards and stakeholder reporting',
    'Process Mapping': 'Turning messy workflows into clear operating models',
    'Demand Forecasting': 'Forecasting demand to support fulfillment and planning',
    'Stakeholder Management': 'Aligning analytics work to business priorities',
    'Requirements Gathering': 'Translating ambiguous asks into executable specs',
    'CRM Reporting': 'Account health, repeat-purchase and pipeline visibility',
    'Workflow Automation': 'Eliminating manual reporting and data wrangling steps',
    'Tableau': 'Dashboard storytelling and executive summaries',
    'KPI Design': 'Defining metrics leadership can act on',
    'ETL Pipelines': 'Pulling, cleaning, and modeling operational data'
  };

  const groups = [
    { title: 'Business Analysis', skills: ['Requirements Gathering', 'Stakeholder Management', 'Process Mapping', 'Change Management', 'SDLC', 'Jira', 'Confluence'] },
    { title: 'Operations Analytics', skills: ['Workflow Automation', 'Demand Forecasting', 'Fulfillment Analysis', 'CRM Reporting', 'KPI Design', 'Lean Process Thinking'] },
    { title: 'Data & BI', skills: ['SQL', 'Python', 'Excel VBA', 'Power Query', 'Power BI', 'Tableau', 'Looker', 'Dashboard Storytelling'] },
    { title: 'Data Platforms', skills: ['MySQL', 'PostgreSQL', 'Snowflake', 'BigQuery', 'AWS S3', 'ETL Pipelines', 'Git/GitHub'] }
  ];

  const whatIBring = [
    { title: 'Speed', icon: '⚡', body: 'Faster reporting cycles and cleaner workflows.' },
    { title: 'Rigor', icon: '◇', body: 'Validated analysis, forecasting, and error documentation.' },
    { title: 'Communication', icon: '◈', body: 'Stakeholder-ready dashboards and executive summaries.' }
  ];

  return (
    <section id="about" style={{ padding: '100px 24px', background: C.bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle label="About" highlight="Me" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 420px), 1fr))', gap: 56, alignItems: 'flex-start' }}>
          <div>
            <Reveal><p style={{ color: C.text, fontSize: 17, lineHeight: 1.8, marginBottom: 16 }}>
              I'm a Business Analyst and Operations Analytics Specialist with 3+ years of experience translating messy requirements, workflows, and operational data into clear decisions. My work sits where business execution meets analytics: process mapping, stakeholder communication, SQL/Python analysis, BI dashboards, CRM reporting, and workflow automation.
            </p></Reveal>
            <Reveal delay={0.1}><p style={{ color: C.textMuted, fontSize: 15, lineHeight: 1.8, marginBottom: 28 }}>
              I've helped reduce reporting cycles by 34%, support 95% order fulfillment, expand a 50+ account B2B network by 21%, and improve marketing ROI by 25% by turning fragmented data into practical action.
            </p></Reveal>
            <Reveal delay={0.2}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {[{ l: 'Education', v: 'M.S. Business Analytics' }, { l: 'University', v: 'Suffolk University' }, { l: 'Focus', v: 'Operations Analytics' }, { l: 'Location', v: 'Boston, MA' }].map((d) =>
                <div key={d.l} style={{ background: C.bgCard, borderRadius: 10, padding: '14px 16px', border: `1px solid ${C.border}` }}>
                    <div style={{ fontSize: 11, color: C.textDim, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>{d.l}</div>
                    <div style={{ fontSize: 14, color: C.text, fontWeight: 600 }}>{d.v}</div>
                  </div>
                )}
              </div>
            </Reveal>
          </div>

          <Reveal delay={0.2} direction="left">
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
              {/* Profile photo with gradient ring */}
              <div style={{ position: 'relative', width: 216, height: 216, borderRadius: '50%', padding: 4, background: `conic-gradient(from 140deg, ${C.purple}, ${C.teal}, ${C.purple})` }}>
                <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: C.bg, padding: 4 }}>
                  <div style={{ width: '100%', height: '100%', borderRadius: '50%', overflow: 'hidden', background: `linear-gradient(135deg, ${C.purple}, ${C.teal})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img
                      src="raj_profile.png"
                      alt="Raj Danej, Business Analyst & Operations Analytics Specialist"
                      onError={(e) => { e.target.style.display = 'none'; }}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    <span style={{ position: 'absolute', fontSize: 54, fontWeight: 800, color: C.white, letterSpacing: '-0.04em', zIndex: 0, pointerEvents: 'none' }}>RD</span>
                  </div>
                </div>
                {/* Availability dot */}
                <div style={{ position: 'absolute', bottom: 12, right: 12, width: 22, height: 22, borderRadius: '50%', background: C.green, border: `3px solid ${C.bg}`, boxShadow: `0 0 0 4px rgba(74,222,128,0.18)` }}></div>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 18, fontWeight: 700, color: C.white }}>Raj Danej</div>
                <div style={{ fontSize: 13, color: C.textMuted, marginTop: 2 }}>Business Analyst &amp; Operations Analytics Specialist</div>
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
                <span style={{ fontSize: 12, padding: '6px 12px', borderRadius: 999, background: 'rgba(45,212,191,0.10)', border: '1px solid rgba(45,212,191,0.25)', color: C.teal, fontWeight: 600 }}>📍 Boston, MA</span>
                <span style={{ fontSize: 12, padding: '6px 12px', borderRadius: 999, background: 'rgba(74,222,128,0.08)', border: '1px solid rgba(74,222,128,0.25)', color: C.green, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: C.green }}></span> Open to opportunities
                </span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* What I Bring */}
        <Reveal delay={0.25}>
          <div style={{ marginTop: 56 }}>
            <h3 style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', color: C.textDim, marginBottom: 16 }}>What I Bring</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 16 }}>
              {whatIBring.map((w) =>
                <div key={w.title} style={{ background: C.bgCard, borderRadius: 14, padding: '20px 22px', border: `1px solid ${C.border}`, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: 3, background: `linear-gradient(180deg, ${C.purple}, ${C.teal})` }}></div>
                  <div style={{ fontSize: 22, marginBottom: 8, color: C.teal }}>{w.icon}</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: C.white, marginBottom: 6 }}>{w.title}</div>
                  <div style={{ fontSize: 13, color: C.textMuted, lineHeight: 1.6 }}>{w.body}</div>
                </div>
              )}
            </div>
          </div>
        </Reveal>

        {/* Skills */}
        <Reveal delay={0.3}>
          <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 20 }}>
            {groups.map((g) =>
            <div key={g.title}>
                <h3 style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', color: C.textDim, marginBottom: 10 }}>{g.title}</h3>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {g.skills.map((s) => <span key={s} className="skill-tag" title={tooltips[s] || undefined}>{s}</span>)}
                </div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}
window.About = About;

/* ── Operations Intelligence Demo ── */
function DashboardSection() {
  React.useEffect(() => { track('Dashboard Demo Viewed'); }, []);
  return (
    <section style={{ padding: '80px 24px', background: C.bgSurface }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle
          label="Operations Intelligence"
          highlight="Demo"
          sub="A simulated business dashboard showing how I track fulfillment risk, reporting speed, account health, and revenue-impact decisions." />

        <div className="dashboard-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 20 }}>
          {/* Card 1: Reporting Cycle Time Trend */}
          <Reveal>
            <div style={{ background: '#131b2e', borderRadius: 14, padding: '22px 22px 24px', border: `1px solid ${C.border}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
                <div>
                  <div style={{ fontSize: 11, color: C.textDim, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>Reporting Cycle Time</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: C.white }}>Trend</div>
                </div>
                <span style={{ fontSize: 11, padding: '4px 9px', borderRadius: 6, background: 'rgba(45,212,191,0.12)', color: C.teal, fontWeight: 700 }}>−34%</span>
              </div>
              <div style={{ fontSize: 13, color: C.textMuted, marginBottom: 16, lineHeight: 1.5 }}>Time from raw data to stakeholder-ready report, week over week.</div>
              {/* Mini before/after bars */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 90, marginBottom: 14 }}>
                {[78, 82, 76, 80, 72, 68, 60, 58, 52, 48, 44, 42].map((v, i) => (
                  <div key={i} style={{ flex: 1, height: `${v}%`, background: i < 5 ? 'rgba(148,163,184,0.35)' : `linear-gradient(180deg, ${C.teal}, ${C.purple})`, borderRadius: 3 }}></div>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: C.textDim }}>
                <span>Before</span><span>After workflow rebuild</span>
              </div>
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${C.border}`, fontSize: 13, color: C.teal, fontWeight: 600 }}>34% faster reporting cycles</div>
            </div>
          </Reveal>

          {/* Card 2: B2B Account Health */}
          <Reveal delay={0.1}>
            <div style={{ background: '#131b2e', borderRadius: 14, padding: '22px 22px 24px', border: `1px solid ${C.border}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
                <div>
                  <div style={{ fontSize: 11, color: C.textDim, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>B2B Account</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: C.white }}>Health</div>
                </div>
                <span style={{ fontSize: 11, padding: '4px 9px', borderRadius: 6, background: 'rgba(124,58,237,0.15)', color: C.purpleLight, fontWeight: 700 }}>50+ accounts</span>
              </div>
              <div style={{ fontSize: 13, color: C.textMuted, marginBottom: 16, lineHeight: 1.5 }}>Distributor pipeline segmented by purchase recency and frequency.</div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { label: 'Healthy', count: 32, pct: 64, color: C.teal },
                  { label: 'Watch', count: 13, pct: 26, color: C.gold },
                  { label: 'At risk', count: 5, pct: 10, color: '#f87171' }
                ].map((r) => (
                  <div key={r.label}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: C.textMuted, marginBottom: 4 }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: r.color }}></span>{r.label}</span>
                      <span style={{ color: C.text, fontWeight: 600 }}>{r.count}</span>
                    </div>
                    <div style={{ height: 6, background: 'rgba(255,255,255,0.05)', borderRadius: 3, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${r.pct}%`, background: r.color, borderRadius: 3 }}></div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${C.border}`, fontSize: 13, color: C.purpleLight, fontWeight: 600 }}>37% repeat-business improvement</div>
            </div>
          </Reveal>

          {/* Card 3: Fulfillment & Stockout Risk */}
          <Reveal delay={0.2}>
            <div style={{ background: '#131b2e', borderRadius: 14, padding: '22px 22px 24px', border: `1px solid ${C.border}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
                <div>
                  <div style={{ fontSize: 11, color: C.textDim, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>Fulfillment &amp; Stockout</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: C.white }}>Risk</div>
                </div>
                <span style={{ fontSize: 11, padding: '4px 9px', borderRadius: 6, background: 'rgba(45,212,191,0.12)', color: C.teal, fontWeight: 700 }}>95% on-time</span>
              </div>
              <div style={{ fontSize: 13, color: C.textMuted, marginBottom: 16, lineHeight: 1.5 }}>Order fulfillment rate vs. stockout incidents across SKUs.</div>

              {/* Donut-ish: 95% fulfillment */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{ position: 'relative', width: 96, height: 96 }}>
                  <svg width="96" height="96" viewBox="0 0 96 96">
                    <circle cx="48" cy="48" r="40" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="10" />
                    <circle cx="48" cy="48" r="40" fill="none" stroke={C.teal} strokeWidth="10" strokeLinecap="round"
                      strokeDasharray={`${2 * Math.PI * 40 * 0.95} ${2 * Math.PI * 40}`} transform="rotate(-90 48 48)" />
                  </svg>
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ fontSize: 18, fontWeight: 800, color: C.white }}>95%</div>
                    <div style={{ fontSize: 10, color: C.textDim }}>fulfilled</div>
                  </div>
                </div>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div>
                    <div style={{ fontSize: 11, color: C.textDim, marginBottom: 4 }}>Stockouts vs. prior period</div>
                    <div style={{ fontSize: 16, fontWeight: 700, color: C.teal }}>−22%</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: C.textDim, marginBottom: 4 }}>Active SKUs monitored</div>
                    <div style={{ fontSize: 16, fontWeight: 700, color: C.text }}>120+</div>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${C.border}`, fontSize: 13, color: C.teal, fontWeight: 600 }}>95% fulfillment · 22% stockout reduction</div>
            </div>
          </Reveal>
        </div>

        <p style={{ textAlign: 'center', marginTop: 20, fontSize: 12, color: C.textDim, fontStyle: 'italic' }}>Simulated dashboard layout based on real resume outcomes.</p>
      </div>
    </section>);

}
window.DashboardSection = DashboardSection;

/* ── Experience Section ── */
function ExperienceSection() {
  const timeline = [
  { role: 'Graduate Research Analyst', company: 'Suffolk University', period: '2024–Present', type: 'Research', typeColor: C.teal,
    highlights: ['Translated ambiguous faculty/departmental requirements into executable Python and SQL analysis plans', 'Cut reporting cycles by 34% through workflow automation and templated dashboards', 'Improved stakeholder adoption of insights through interpretability reports and error analysis', 'Supported non-technical leadership decisions with 82%-accurate predictive outputs'],
    tags: ['Requirements Gathering', 'SQL', 'Python', 'Stakeholder Reporting'] },
  { role: 'Data Analytics Fellow', company: 'INSAID / Capstone Engagement', period: '2023–2024', type: 'Fellowship', typeColor: C.purple,
    highlights: ['Gathered client requirements and translated them into a sales prediction pipeline in Python', 'Achieved 90% forecast accuracy on validation set', 'Enabled $12K budget scenario planning through Power BI dashboards', 'Documented assumptions, edge cases, and rollback plans for stakeholders'],
    tags: ['Python', 'Power BI', 'Forecasting', 'Scenario Planning'] },
  { role: 'Market Analyst Intern', company: 'Digital Marketing Engagement', period: '2022–2023', type: 'Internship', typeColor: C.gold,
    highlights: ['Integrated GA4 and SEMrush datasets to map user journeys and channel performance', 'Improved marketing ROI by 25% through reallocation to higher-performing channels', 'Grew organic traffic 42% — from 15K to 21.3K visitors in 3 months', 'Diagnosed conversion friction and recommended budget reallocation'],
    tags: ['GA4', 'SEMrush', 'Cohort Analysis', 'Power BI'] },
  { role: 'Operations & Sales Lead (Founding Member)', company: 'B2B Distribution Venture', period: '2020–2022', type: 'Operations', typeColor: C.green,
    highlights: ['Transitioned 50+ B2B accounts from paper-based operations to a centralized CRM and demand forecasting system', 'Maintained 95% order fulfillment across the active distributor network', 'Reduced stockouts by 22% through demand forecasting and reorder logic', 'Expanded regional B2B network by 21% and improved repeat business by 37%'],
    tags: ['CRM Design', 'Demand Forecasting', 'Process Mapping', 'Excel VBA'] }];


  const certs = [
  { name: 'Google Data Analytics', org: 'Google / Coursera', year: '2026' },
  { name: 'Google Project Management', org: 'Google / Coursera', year: '2026' },
  { name: 'Operations Analytics', org: 'University of Pennsylvania (via Coursera)', year: '2026' },
  { name: 'Business Analytics', org: 'University of Pennsylvania (via Coursera)', year: '2026' }];


  const learning = ['Snowflake', 'dbt (data build tool)', 'Looker', 'Lean Six Sigma'];

  return (
    <section id="experience" style={{ padding: '100px 24px', background: C.bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle label="Experience &" highlight="Education" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 420px), 1fr))', gap: 48 }}>
          {/* Timeline */}
          <div>
            {timeline.map((t, i) =>
            <Reveal key={i} delay={i * 0.1}>
                <div className="timeline-item" style={{ position: 'relative', paddingLeft: 28, paddingBottom: i < timeline.length - 1 ? 32 : 0, borderLeft: `2px solid ${C.border}`, marginLeft: 8 }}>
                  <div style={{ position: 'absolute', left: -6, top: 4, width: 10, height: 10, borderRadius: '50%', background: t.typeColor, border: `2px solid ${C.bg}` }}></div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
                    <h3 style={{ fontSize: 16, fontWeight: 700, color: C.white, margin: 0 }}>{t.role}</h3>
                    <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 4, background: `${t.typeColor}22`, color: t.typeColor, fontWeight: 600 }}>{t.type}</span>
                  </div>
                  <div style={{ fontSize: 13, color: C.textMuted, marginBottom: 4 }}>{t.company}</div>
                  <div style={{ fontSize: 12, color: C.textDim, marginBottom: 12 }}>{t.period}</div>
                  <ul style={{ margin: '0 0 12px', padding: '0 0 0 16px', listStyle: 'none' }}>
                    {t.highlights.map((h, j) =>
                  <li key={j} style={{ color: C.textMuted, lineHeight: 1.7, marginBottom: 4, position: 'relative', paddingLeft: 12, fontSize: "13px" }}>
                        <span style={{ position: 'absolute', left: 0, color: C.teal }}>›</span>{h}
                      </li>
                  )}
                  </ul>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {t.tags.map((tag) => <span key={tag} className="skill-tag" style={{ fontSize: 11, padding: '3px 8px' }}>{tag}</span>)}
                  </div>
                </div>
              </Reveal>
            )}
          </div>

          {/* Certs + Learning */}
          <div>
            <Reveal>
              <h3 style={{ fontSize: 14, fontWeight: 700, color: C.white, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>{Icons.award(16, C.purple)} Certifications</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
                {certs.map((c, i) =>
                <div key={i} style={{ background: C.bgCard, borderRadius: 10, padding: '14px 16px', border: `1px solid ${C.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <div style={{ fontWeight: 600, color: C.text, fontSize: "15px" }}>{c.name}</div>
                      <div style={{ fontSize: 12, color: C.textDim }}>{c.org}</div>
                    </div>
                    <span style={{ fontSize: 12, color: C.textDim, fontWeight: 500 }}>{c.year}</span>
                  </div>
                )}
              </div>
            </Reveal>

            <Reveal delay={0.15}>
              <h3 style={{ fontSize: 14, fontWeight: 700, color: C.white, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>{Icons.book(16, C.teal)} Currently Learning</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {learning.map((l) =>
                <span key={l} style={{ fontSize: 13, padding: '6px 14px', borderRadius: 8, border: `1px dashed ${C.border}`, color: C.textMuted, background: 'transparent' }}>{l}</span>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}
window.ExperienceSection = ExperienceSection;