const { PlayingCard, CardFan, SuitPip, SUITS, Button } = window.NicolaiSafaiDesignSystem_dfb31c;
const Doodle = window.NicolaiSafaiDesignSystem_dfb31c.Doodle || (() => null);
const StackCtx = window.NicolaiSafaiDesignSystem_dfb31c.CardStackContext || React.createContext(false);

const HAND = [
  { suit: 'club', rank: 'J', title: 'Play', line: 'DJing, games, magic, recipes, and side quests.', href: '#play' },
  { suit: 'diamond', rank: 'Q', title: 'Finds', line: 'Gear and other things I researched far too thoroughly.', href: '#finds' },
  { suit: 'heart', rank: 'K', title: 'Life', line: 'People, animals, travel, and life beyond work.', href: '#life' },
  { suit: 'spade', rank: 'A', title: 'Work', line: 'Products, systems, career chapters, and things I have built.', href: '#work' },
];

function HandCard({ item }) {
  const stacked = React.useContext(StackCtx);
  const suit = SUITS[item.suit] || SUITS.spade;
  return (
    <PlayingCard suit={item.suit} rank={item.rank} size="var(--hand-card-w)" interactive href={item.href}
      ariaLabel={`${item.title}: ${item.line}`}
      style={{
        minHeight: stacked ? 310 : undefined,
        background: `radial-gradient(circle at 50% 40%, ${suit.tint} 0 31%, var(--surface-card) 31.5%)`,
      }}>
      <div className="hand-card-pip">
        <SuitPip suit={item.suit} size="3.8em" />
      </div>
      <div className="hand-card-copy">
        <span className="ds-display hand-card-title">{item.title}</span>
        <span className="hand-card-line">{item.line}</span>
      </div>
    </PlayingCard>
  );
}

function Hero() {
  return (
    <React.Fragment>
      <section id="top" className="hero">
        <div className="hero-copy">
          <h1 className="ds-display hero-h1">Hi, I&rsquo;m Nicolai.</h1>
          <p className="hero-lede">
            I&rsquo;ve never been especially interested in staying in one lane. I&rsquo;ve led marketing,
            product, and engineering work, and I&rsquo;m happiest when I get to connect them.
          </p>
          <p className="hero-lede hero-lede-2">
            Today I&rsquo;m a Senior Software Engineer at Twitch, where I&rsquo;ve spent seven years working
            on cross-platform products, shared platform capabilities, and production AI.
          </p>
          <p className="hero-lede hero-lede-3">
            I took an unusual path to engineering. I helped turn a summer coding program into a college,
            led its marketing and product teams, then enrolled as a student so I could learn to build software myself.
          </p>
          <div className="hero-actions">
            <Button tone="spade" size="lg" href="#work">See the work</Button>
            <Button variant="ghost" href="#hello">Or just say hello</Button>
          </div>
        </div>

        <div className="hero-figure" aria-label="Illustrated portrait of Nicolai Safai">
          <Doodle name="chart" size={92} color="var(--club-300)" rotate={-7}
            style={{ position: 'absolute', left: -8, top: -20, zIndex: 6 }} />
          <div className="portrait-stage" aria-hidden="true">
            <div className="portrait-watermark-clip">
              <span className="portrait-watermark"><span>N</span><span>S</span></span>
            </div>
            <img src="/design-system/assets/portrait/nicolai-illustration-clean-square.png" alt="" />
          </div>
          <span className="hero-figure-note" aria-hidden="true">San Francisco</span>
        </div>
      </section>

      <section className="hero-deck" aria-label="Sections of the deck">
        <CardFan spread={10} pivot={175} raise={76} outerDrop={28} stackBelow={760}
          style={{ '--fan-bite': 'clamp(86px,8.2vw,126px)', maxWidth: '100%' }}>
          {HAND.map((h) => <HandCard key={h.title} item={h} />)}
        </CardFan>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { Hero, HandCard, HAND });