// Shared portfolio components — Jason Yu (classes from styles.css)
// Design tokens still exported as JS for cases where styles need to be
// computed at runtime (e.g. dynamic gradients in long-scroll variation).

const TOKENS = {
  ink: '#05081C',
  navy: '#0F1E57',
  sapphire: '#2667FF',
  graphite: '#353642',
  platinum: '#F0EDEE',
  orange: '#FFA600',
};

const CASE_STUDY_URLS = {
  'ai-ssc': 'ai-secure-smart-card.html',
  'mobile-service': 'mobile-service.html',
  'enterprise-data': 'enterprise-data.html',
  'ahr': 'americas-health-rankings.html',
};

const CASE_STUDIES = [
  {
    id: 'ai-ssc',
    index: '01',
    title: 'AI Secure Smart Card',
    subtitle: 'AI-SSC — Credit Card Fraud Prevention',
    summary:
      'A self-initiated concept that kept going after completing the Stanford Online UX for AI Products program — a proactive payment security system designed to protect consumers at the point of contact, before fraud has a chance to occur.',
    tags: ['AI', 'User Research', 'Product Design', '0 > 1', 'Threat Modeling', 'Risk Management'],
    metrics: [{ k: '6 flows', v: '28 screens' }, { k: '15+', v: 'component threat model' }],
    image: 'assets/case-ai-ssc.png',
    accent: 'sapphire',
  },
  {
    id: 'mobile-service',
    index: '02',
    title: 'Mobile Service',
    subtitle: 'Fleet Operations & On-Site Service Coordination',
    summary:
      'Seven dealerships. One consistent finding: scheduling a single mobile service call meant touching three systems that had never met each other. The research defined the problem. The design eliminated it.',
    tags: ['User Research', 'Product Design', 'Design Lead', 'Process Change'],
    metrics: [{ k: '3.95/5', v: 'client score' }, { k: 'Patent', v: '+ award nominated' }],
    image: 'assets/case-mobile-service.png',
    accent: 'orange',
  },
  {
    id: 'enterprise-data',
    index: '03',
    title: 'Enterprise Data',
    subtitle: 'Internal Data Marketplace for Analytics & Engineering',
    summary:
      'Three product teams. Two competing leadership agendas. One design system nobody was following. The data platform worked. The organization building it didn’t.',
    tags: ['User Research', 'Product Design', 'Organizational Change', 'Data Governance'],
    metrics: [{ k: '1M+', v: 'records indexed' }, { k: '12 teams', v: 'onboarded' }],
    image: 'assets/case-enterprise-data.png',
    accent: 'sapphire',
  },
  {
    id: 'ahr',
    index: '04',
    title: "America's Health Rankings",
    subtitle: 'Homepage & Information Architecture Optimization',
    summary:
      'Restructured a dense public-health reference into an IA the average citizen could navigate — without losing the depth researchers rely on.',
    tags: ['Product Design', 'Risk Management'],
    metrics: [{ k: '−40%', v: 'time-to-report' }, { k: '7', v: 'audiences served' }],
    image: 'assets/case-ahr.png',
    accent: 'platinum',
  },
];

const NAV_ITEMS = ['Home', 'Work', 'About'];

// —————————————————————————————————————————————
// Long-form case study content (Hook → Competence → Close → CTA)
// —————————————————————————————————————————————
const CASE_STUDY_CONTENT = {
  'ai-ssc': {
    locked: false,
    role: 'Lead Product Designer',
    timeframe: 'Mar 2025 — Present',
    clientLabel: 'Project',
    client:
      'Stanford Online UI/UX for AI Products Capstone Project + Practical DevSecOps CTMP/CAISP Training',
    hook:
      'A self-initiated concept that kept going after completing the Stanford Online UX for AI Products program — a proactive payment security system designed to protect consumers at the point of contact, before fraud has a chance to occur.',
    problem:
      'Every fraud prevention tool available to consumers reacts after the transaction. The card is already compromised by the time an alert fires. The question was whether protection could move earlier — onto the card itself, before payment information is released — and what it would take to design that system rigorously enough to be credible.',
    competence: [
      'Threat-modeled the full system across card, device, and cloud using STRIDE, OWASP Top 10 for LLM, MITRE ATLAS, and MITRE EMB3D — turning security constraints into design requirements',
      'Designed 6 user flows across 28 screens covering onboarding, terminal scanning, risk decisioning, reporting, card management, and security education',
      'Applied each phase of security training directly back to the work — the design changed because the threat model said it had to',
    ],
    close: '6 flows · 28 screens · 15+ components threat-modeled · Security constraints designed as inputs, not afterthoughts',
    outcomes: [
      { stat: '6', label: 'User flows', detail: 'Enrollment through edge-case recovery.' },
      { stat: '28', label: 'Screens designed', detail: 'End-to-end coverage across card, app, and cloud touchpoints.' },
      { stat: '15+', label: 'Components threat-modeled', detail: 'Security constraints treated as design inputs, not afterthoughts.' },
    ],
    deckUrl: 'https://pitch.com/v/ai-secure-smart-card-xibhvt',
    deckLabel: 'View the full AI-SSC case study deck',
  },
  'mobile-service': {
    locked: true,
    role: 'Design Lead + SME',
    timeframe: 'Mar 2023 — Dec 2024',
    client: 'Ford',
    hook:
      'Seven dealerships. One consistent finding: each had built its own workaround from whiteboards, spreadsheets, and disconnected tools. The research defined the actual problem. The design gave them a single place to run it.',
    problem:
      'Technicians, dispatchers, and fleet operators each had different tools, different workflows, and different definitions of done. Coordinating a single service appointment required touching three to five systems that had never been designed to work together. The fix wasn\u2019t a new feature on an existing platform — it required a workflow built from the ground up around how Mobile Service operations actually run.',
    competence: [
      'Challenged the established research approach and led on-site collaborative discovery across seven dealerships, then facilitated a cross-functional synthesis workshop of 25 stakeholders to turn raw findings into grounded user stories',
      'Designed and directed 19 iterations of a Mobile Service-specific scheduling system covering 10 screen types, 5 interaction flows, and 9 user stories derived directly from research',
      'Advocated against launching without validation, documenting the risk and its predicted consequences in writing before leadership proceeded',
    ],
    close: '3.95/5 client score · Patent + award nominated · Process change documented and shipped',
    outcomes: [
      { stat: '3.95', suffix: '/ 5', label: 'Client readout score', detail: 'Exceeding standard project benchmarks across the portfolio review.' },
      { stat: 'Patent', label: '+ award nominated', detail: 'Patent-pending workflow; nominated for internal innovation award.' },
      { stat: '19 → 1', label: 'Iterations into a single flow', detail: 'Five flows refined across ten screen types, grounded in nine user stories.' },
    ],
    deckUrl: null,
    deckLabel: 'View the full Mobile Service case study deck',
  },
  'enterprise-data': {
    locked: true,
    role: 'Senior Product Designer',
    timeframe: 'Nov 2020 — Dec 2022',
    client: 'Ford',
    hook:
      'Three product teams. Two competing leadership agendas. One design system nobody was following. The data platform worked. The organization building it didn’t.',
    problem:
      'The platform consolidated three independent products serving data scientists, analysts, and engineers across a major automotive OEM. Each team operated under different leadership, competing design systems, and no shared research infrastructure — just three teams building toward different visions of the same product.',
    competence: [
      'Designed universal platform systems — unified navigation, notifications, user preferences, and dataset quality reporting — adopted as the shared UX standard across three product teams',
      'Built the platform\u2019s first automated feedback infrastructure, creating a continuous user signal that redirected assumed UX problems toward their actual root causes',
      'Reframed organizational fragmentation as a design problem — advocated for shared design leadership and built the cross-functional relationships that got three competing teams aligned',
    ],
    close: '1M+ records indexed · 12 teams onboarded · Governance, lineage, and trust shipped as first-class UI',
    outcomes: [
      { stat: '<10 → 1,259', label: 'Registered users', detail: 'Platform grew from a limited pilot to over 1,200 users across 358 departments within two years.' },
      { stat: "People’s Choice", label: 'Enterprise Technology Award', detail: 'Recognized by OEM executive leadership as the only product design team singled out as the organizational standard.' },
      { stat: '3 → 1', label: 'Products consolidated', detail: 'Three competing surfaces unified under shared governance and a consistent experience.' },
    ],
    deckUrl: null,
    deckLabel: 'View the full Enterprise Data case study deck',
  },
  ahr: {
    locked: false,
    role: 'Design Lead',
    timeframe: 'Aug 2025 — Oct 2025',
    client: "America's Health Rankings",
    hook:
      'A homepage redesign and information architecture overhaul for a national public health data platform. Scope expanded mid-project, budget didn\u2019t, and feedback arrived through unconventional channels. The redesign shipped anyway, and it held.',
    problem:
      'The platform served public health researchers and policy audiences simultaneously \u2014 two groups with fundamentally different mental models for the same data. Navigation had grown to 60+ items. Nobody agreed on what to cut or why.',
    competence: [
      'Identified AI chatbot hallucination risk on a data-accuracy platform before it was scoped \u2014 flagged it as a trust problem, not a feature problem.',
      'Analytics-driven FAQ removal: 3.25% reach meant 96.75% of users never needed those pages. Redistributed contextually instead of cutting blindly.',
      'Reduced navigation from 60+ to 13 by building a defensible IA argument, not just trimming.',
    ],
    close: '120 of 200 hours used · Full scope delivered · 0 features built on unvalidated requirements',
    outcomes: [
      { stat: '120', suffix: '/ 200 hrs', label: 'Hours used', detail: 'Delivered under budget on a fixed-fee engagement.' },
      { stat: '100%', label: 'Scope delivered', detail: 'IA, homepage, and navigation shipped despite mid-project expansion.' },
      { stat: '0', label: 'Unvalidated features', detail: 'Every shipped change tied to research or analytics.' },
    ],
    deckUrl: 'https://pitch.com/v/americas-health-rankings-bjgbti',
    deckLabel: "View the full America's Health Rankings case study deck",
  },
};

// —————————————————————————————————————————————
function Logo({ height = 28 }) {
  return <img src="assets/logo.svg" alt="jbirdux" style={{ height, width: 'auto', display: 'block' }} />;
}

// —————————————————————————————————————————————
function TopNav({ active = 'Home', variant = 'long' }) {
  const hrefMap = { Home: 'index.html', Work: 'work.html', About: 'about.html' };
  return (
    <nav className={`topnav${variant === 'compact' ? ' topnav--compact' : ''}`}>
      <Logo height={variant === 'compact' ? 42 : 48} />
      <ul className="topnav__list">
        {NAV_ITEMS.map((item) => (
          <li key={item}>
            <a
              href={hrefMap[item] || `#${item.toLowerCase()}`}
              className={`topnav__link${item === active ? ' is-active' : ''}`}
            >
              {item}
            </a>
          </li>
        ))}
      </ul>
      <a href="about.html" className="btn-pill-upper topnav__cta">Let's talk</a>
    </nav>
  );
}

// —————————————————————————————————————————————
function Tag({ children, accent = false }) {
  return <span className={`tag${accent ? ' tag--accent' : ''}`}>{children}</span>;
}

// —————————————————————————————————————————————
function Eyebrow({ children, color = 'sapphire' }) {
  // color can be 'sapphire' (default) or 'orange'
  const isOrange = color === 'orange' || color === TOKENS.orange;
  return (
    <div className={`eyebrow${isOrange ? ' eyebrow--orange' : ''}`}>
      <span className="eyebrow__rule" />
      {children}
    </div>
  );
}

// —————————————————————————————————————————————
function SiteFooter() {
  return (
    <footer className="site-footer">
      <span style={{ whiteSpace: 'nowrap' }}>© 2026 Jason Yu · jbirdux</span>
      <span className="site-footer__credit">
        Designed and Deployed with{' '}
        <strong>Claude Design</strong>
        <span className="site-footer__sep">·</span>
        <strong>Vercel</strong>
      </span>
    </footer>
  );
}

Object.assign(window, { TOKENS, CASE_STUDIES, CASE_STUDY_CONTENT, CASE_STUDY_URLS, NAV_ITEMS, Logo, TopNav, Tag, Eyebrow, SiteFooter });