const { SectionHeading } = window.NicolaiSafaiDesignSystem_dfb31c;
const Doodle = window.NicolaiSafaiDesignSystem_dfb31c.Doodle || (() => null);
const Reveal = window.NicolaiSafaiDesignSystem_dfb31c.Reveal || (({ children }) => children);

const CHAPTERS = [
  {
    accent: '#2B6484', tint: '#E1EDF1',
    doodle: { name: 'monitor', color: 'var(--spade-300)', rotate: -8 },
    card: {
      org: 'Make School', period: '2014 to 2019',
      logo: '/design-system/assets/logos/make-school-transparent.png', logoAlt: 'Make School logo',
      role: 'Marketing, Summer Academy, then Head of Product',
    },
    points: [
      { title: 'From $2K to $20M in ARR', body: 'As Head of Marketing, I built the company\u2019s first independent marketing and admissions team and helped grow annual recurring revenue from $2,000 to $20 million.' },
      { title: 'Then I moved into product', body: 'As Head of Product, I led seven engineers across the application, student information and learning systems, websites, and integrations. We reduced bounce rate from 68% to 6% and increased conversion by 20%.' },
      { title: 'Then I became a student', body: 'I enrolled in the school I had helped build so I could learn to build software myself. That move eventually led me to engineering at Twitch.' },
    ],
    note: 'I joined a summer coding program and left a college that had taught me how to code.',
  },
  {
    accent: '#7653A5', tint: '#E9E3F1',
    doodle: { name: 'controller', color: 'var(--joker-500)', rotate: 9 },
    card: {
      org: 'Twitch', period: '2019 to now',
      logo: '/design-system/assets/logos/twitch-glitch-purple.svg', logoAlt: 'Twitch logo',
      role: 'Software Engineering Intern to Senior Software Engineer',
    },
    points: [
      { title: 'Building one reporting experience across every platform', body: 'I led a six-engineer rebuild of Twitch\u2019s reporting experience across web, iOS, and Android. I proposed delivering the experience through web-powered surfaces inside the native mobile apps, allowing Twitch to improve it without waiting for users to install a new app version. We created a shared implementation for the interface and business logic across all three platforms. The new experience increased actionable reports by more than 5% by helping users provide the context needed for Twitch to respond effectively.' },
      { title: 'Turning repeated protections into a reusable platform', body: 'I designed and built a shared capability that allows Twitch to require additional verification or prevent an action when there are indications of abuse. It works consistently across Twitch-owned products and third-party clients. The work consolidated five bespoke implementations into one reusable platform capability. Instead of rebuilding protections for individual products, teams could integrate with a common layer that could evolve as Twitch\u2019s needs changed.' },
      { title: 'Bringing a production LLM system under engineering discipline', body: 'I led engineering for a production LLM initiative that became one of Twitch\u2019s most prominent examples of successful applied AI. I helped turn the initial concept into a production system in three weeks, then continued developing its architecture, evaluation, rollout, and operating model. I introduced optimizations that reduced cloud inference costs by roughly 90% and made the system four times faster. I also helped establish a data-driven approach to evaluating improvements, maintaining quality, and deciding where further investment would have the greatest impact.' },
    ],
    note: 'Across the work, I helped define the product problem, evaluate options, align teams, mentor engineers, and carry the result through production.',
  },
  {
    accent: '#A85562', tint: '#F1E2DE',
    doodle: {
      name: 'unicorn', color: 'var(--paper-000)', rotate: -6, size: 106,
      hornColors: ['#F016C7', '#4AB9FF', '#8B43E7', '#2639D8'],
    },
    card: {
      org: 'Scale Yourself', period: 'On the side of work',
      logo: '/design-system/assets/logos/scale-yourself-gradient.png', logoAlt: 'Scale Yourself logo', logoWide: true,
      role: 'Technology strategy, product and implementation',
    },
    points: [
      { title: 'Strategy through implementation', body: 'Alongside my work at Twitch, I\u2019m rebuilding ScaleYourself.com with founder and executive coach Amy Buechler. I created the technology strategy and am building the system itself.' },
      { title: 'Working backward from the people', body: 'I am also helping shape the product, information architecture, and user experience around the people the site serves and the journeys they should take.' },
    ],
  },
];

function CareerStory({ chapter, flip }) {
  const style = { '--story-accent': chapter.accent, '--story-tint': chapter.tint };
  return (
    <article className={`career-story ${flip ? 'flip' : ''}`} style={style}>
      <div className="career-visual" aria-hidden="true">
        <div className="career-shape">
          {chapter.card.logo
            ? <img className={`career-logo ${chapter.card.logoWide ? 'career-logo-wide' : ''}`} src={chapter.card.logo} alt="" />
            : <span className="career-emblem">{chapter.card.emblem}</span>}
          <div className="career-doodle">
            <Doodle name={chapter.doodle.name} size={chapter.doodle.size || 120}
              color={chapter.doodle.color} rotate={chapter.doodle.rotate}
              hornColors={chapter.doodle.hornColors} />
          </div>
        </div>
      </div>
      <div className="career-copy">
        <span className="career-kicker">{chapter.card.period}</span>
        <div>
          <h3 className="ds-display career-title">{chapter.card.org}</h3>
          <p className="career-role">{chapter.card.role}</p>
        </div>
        <div className="career-points">
          {chapter.points.map((point) => (
            <div className="career-point" key={point.title}>
              <strong>{point.title}</strong>
              <span>{point.body}</span>
            </div>
          ))}
        </div>
        {chapter.note && <p className="career-note">{chapter.note}</p>}
      </div>
    </article>
  );
}

function WorkDeck() {
  return (
    <section className="section" id="work">
      <SectionHeading suit="spade" label="The work" title="I work across the whole product"
        blurb="I started in marketing, moved into product, and then learned to build the software myself. The titles changed, but the through line did not: understand the people, find the right problem, and make the thing real." />
      <div className="chapters">
        {CHAPTERS.map((c, i) => (
          <Reveal key={c.card.org} from={i % 2 ? 'right' : 'left'}>
            <CareerStory chapter={c} flip={!!(i % 2)} />
          </Reveal>
        ))}
      </div>
      <Doodle name="quarter" size={82} color="var(--club-300)" rotate={128} className="deco" style={{ position: 'absolute', right: -64, top: '34%' }} />
      <Doodle name="tri" size={64} color="var(--spade-300)" rotate={-14} className="deco" style={{ position: 'absolute', left: -48, bottom: '12%' }} />
    </section>
  );
}

Object.assign(window, { WorkDeck, CHAPTERS });