/* global React */
const { useState: useStateF, useEffect: useEffectF } = React;

function FinalSite() {
  const d = window.SITE_DATA;
  const [time, setTime] = useStateF(new Date());
  useEffectF(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const tStr = time.toLocaleTimeString("en-US", { timeZone: "America/Los_Angeles", hour12: true });

  return (
    <div className="dirB">
      <style>{dirBStyles}</style>

      <header className="B-nav">
        <div className="B-nav-left">
          <span className="B-mark">BC<sup>°</sup></span>
          <span className="B-status"><i /> OPEN TO FULL-TIME · {d.location}</span>
        </div>
        <nav className="B-nav-links">
          <a href="#B-work">Work</a>
          <a href="#B-about">About</a>
          <a href="#B-resume">Résumé</a>
          <a href="#B-contact">Contact</a>
        </nav>
        <div className="B-nav-time">{tStr} PT</div>
      </header>

      {/* Hero */}
      <section className="B-hero">
        <div className="B-hero-grid">
          <div className="B-hero-data">
            <div className="B-data-row"><span>NAME</span><b>BRIAN CHINN</b></div>
            <div className="B-data-row"><span>ROLE</span><b>PRODUCT MANAGER · OPERATOR</b></div>
            <div className="B-data-row"><span>EXP</span><b>15 YEARS · ADTECH → AI</b></div>
            <div className="B-data-row"><span>SHIPPED</span><b>3 PRODUCTS · LIVE</b></div>
            <div className="B-data-row"><span>BASE</span><b>REDONDO BEACH, CA</b></div>
            <div className="B-data-row"><span>STATUS</span><b className="B-yellow">OPEN TO FULL-TIME</b></div>
          </div>

          <div className="B-hero-main">
            <div className="B-hero-tag">
              <span className="B-tag-num">N°01</span>
              <span>PRODUCT MANAGER · BUILDER · SHIPPER</span>
            </div>
            <h1 className="B-hero-title">
              I direct<br />
              <span className="B-yellow">products</span><br />
              <em>that ship.</em>
            </h1>
            <p className="B-hero-blurb">
              Fifteen years in adtech taught me how to turn fuzzy customer pain into a working roadmap. I scope, prioritize, and ship products
              customers actually use — most recently, three of my own, end-to-end.
              <strong> Open to full-time PM roles</strong> where the work matters and the team builds with intent.
            </p>
            <div className="B-hero-ctas">
              <a className="B-btn-primary" href="#B-work">See the work →</a>
              <a className="B-btn-ghost" href={`mailto:${d.email}?subject=Full-time%20opportunity`}>Hire me full-time ↗</a>
            </div>
          </div>

          <div className="B-hero-side">
            <div className="B-tile B-tile-yellow">
              <span className="B-tile-label">★ AVAILABLE FOR</span>
              <span className="B-tile-big-sm">Full or part-time PM roles</span>
              <span className="B-tile-sub">Remote · LA-based</span>
            </div>
            <div className="B-tile">
              <span className="B-tile-label">CURRENTLY</span>
              <span className="B-tile-big">3 live</span>
              <span className="B-tile-sub">products I run end-to-end</span>
            </div>
            <div className="B-tile">
              <span className="B-tile-label">PREVIOUSLY</span>
              <span className="B-tile-big">$25M+</span>
              <span className="B-tile-sub">annual ad spend supported as PM</span>
            </div>
          </div>
        </div>

        <div className="B-ticker">
          <div className="B-ticker-track">
            {Array(2).fill(0).map((_, i) => (
              <span key={i}>
                ★ Product Management ★ Roadmaps that ship ★ AdTech → AI ★ Customer-driven specs ★ Cross-functional leadership ★ Operator's instincts ★ 
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* About */}
      <section className="B-about" id="B-about">
        <div className="B-section-head">
          <span className="B-section-num">02</span>
          <span className="B-section-name">— ABOUT</span>
        </div>
        <div className="B-about-grid">
          <div className="B-about-card">
            <img src="assets/headshot-electric.png" alt="Brian Chinn" />
            <div className="B-about-card-foot">
              <span>BRIAN CHINN</span>
              <span>PM · OPERATOR · BUILDER</span>
            </div>
          </div>
          <div>
            <h2 className="B-h2">
              I direct the products <span className="B-yellow">I wish existed</span> — then ship them.
            </h2>
            <p className="B-body">{d.about.long}</p>
            <div className="B-howiwork">
              <div className="B-howiwork-label">HOW I WORK</div>
              <p className="B-body" style={{margin: 0}}>
                I'm not a hand-coder. I went through a dev bootcamp and have years of
                close work with engineering teams, so I'm fluent enough to spec and review.
                For my own products I direct the build with AI-assisted development —
                writing the specs, scoping the work, prompting and reviewing, doing
                design/QA, and owning the customer feedback loop. When I'm building, I reach
                for <strong>Next.js, Supabase, and Vercel</strong> — fast to spin up, easy to scale,
                and I know the tradeoffs cold. I write and review in VSCode and stay close
                enough to the implementation to catch problems before they ship. The role I hold is
                <strong> Product Manager</strong>; the work is <strong>shipping things people use</strong>.
              </p>
            </div>
            <div className="B-pill-row">
              {d.about.interests.map((i) => <span key={i} className="B-pill">{i}</span>)}
            </div>
          </div>
        </div>
      </section>

      {/* Work */}
      <section className="B-work" id="B-work">
        <div className="B-section-head">
          <span className="B-section-num">03</span>
          <span className="B-section-name">— SELECTED WORK</span>
        </div>
        <h2 className="B-h2 B-h2-big">Three products. <span className="B-yellow">One PM, end-to-end.</span></h2>

        <div className="B-work-grid">
          {d.projects.map((p, idx) => (
            <a key={p.id} href={p.url} target="_blank" rel="noreferrer" className="B-card">
              <div className="B-card-head">
                <span className="B-card-num">N°0{idx + 1}</span>
                <span className="B-card-tag">{p.tag} · {p.year}</span>
              </div>
              <h3 className="B-card-name">{p.name}</h3>
              <p className="B-card-tagline">{p.tagline}</p>
              <p className="B-card-blurb">{p.blurb}</p>
              <div className="B-card-stats">
                {p.stats.map((s) => (
                  <div key={s.k}>
                    <b>{s.k}</b>
                    <span>{s.v}</span>
                  </div>
                ))}
              </div>
              <div className="B-card-foot">
                <span>{p.url.replace(/https?:\/\/(www\.)?/, "").replace(/\/$/, "")}</span>
                <span className="B-card-arrow">→</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Resume */}
      <section className="B-resume" id="B-resume">
        <div className="B-section-head">
          <span className="B-section-num">04</span>
          <span className="B-section-name">— RÉSUMÉ</span>
        </div>
        <h2 className="B-h2 B-h2-big">The path here. <span className="B-yellow">Filter by skill.</span></h2>
        <window.ResumeBlock theme="electric" />
        <div className="B-edu">
          <div className="B-edu-label">EDUCATION & CREDENTIALS</div>
          <div className="B-edu-list">
            {d.education.map((e) => (
              <div key={e.school} className="B-edu-item">
                <b>{e.school}</b>
                <span>{e.degree}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="B-contact" id="B-contact">
        <div className="B-section-head">
          <span className="B-section-num">05</span>
          <span className="B-section-name">— CONTACT</span>
        </div>
        <h2 className="B-contact-title">
          Hiring a product manager?<br /><span className="B-yellow">Let's talk.</span>
        </h2>
        <p className="B-contact-sub">
          Open to full-time PM roles. Also happy to chat about consulting, fractional product work, or partnerships.
        </p>
        <a className="B-contact-cta" href={`mailto:${d.email}?subject=Full-time%20opportunity`}>
          <span>{d.email}</span>
          <span className="B-contact-arrow">↗</span>
        </a>
        <div className="B-contact-links">
          <a href={d.socials.linkedin} target="_blank" rel="noreferrer">LinkedIn</a>
          <a href={d.socials.x} target="_blank" rel="noreferrer">X / Twitter</a>
          <a href="https://www.llmcosttracker.com/" target="_blank" rel="noreferrer">LLM Cost Tracker</a>
          <a href="https://www.contractclues.com/" target="_blank" rel="noreferrer">Contract Clues</a>
          <a href="https://apexf1.app/" target="_blank" rel="noreferrer">ApexF1</a>
        </div>
      </section>
    </div>
  );
}

const dirBStyles = `
.dirB {
  --bg: #0E1140;
  --bg2: #161A52;
  --paper: #F5F2E8;
  --yellow: #FFD400;
  --ink: #0A0C30;
  --soft: rgba(245,242,232,0.55);
  --line: rgba(245,242,232,0.12);
  --r-bg: var(--bg); --r-fg: var(--paper); --r-muted: var(--soft);
  --r-accent: var(--yellow); --r-line: var(--line);
  --r-chip: rgba(245,242,232,0.05); --r-chip-on: var(--yellow); --r-chip-on-fg: var(--ink);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg); color: var(--paper);
  font-family: var(--font-sans);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
.dirB::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none; opacity: 0.3;
}
.dirB > * { position: relative; }

.B-yellow { color: var(--yellow); }
.B-strike { text-decoration: line-through; text-decoration-thickness: 4px; opacity: 0.5; }

.B-nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  padding: 20px 40px;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.B-nav-left { display: flex; align-items: center; gap: 24px; }
.B-mark { font: 800 28px/1 var(--font-display); letter-spacing: -0.04em; color: var(--yellow); }
.B-mark sup { font-size: 14px; }
.B-status {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft);
  display: flex; align-items: center; gap: 8px;
}
.B-status i {
  width: 7px; height: 7px; background: var(--yellow); border-radius: 50%;
  animation: B-blink 1.4s ease-in-out infinite;
}
@keyframes B-blink { 50% { opacity: 0.3; } }
.B-nav-links { display: flex; gap: 28px; justify-content: center; }
.B-nav-links a {
  color: var(--paper); text-decoration: none;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.B-nav-links a:hover { color: var(--yellow); }
.B-nav-time {
  font: 600 13px/1 var(--font-mono); color: var(--paper);
  letter-spacing: 0.04em; text-align: right;
  font-variant-numeric: tabular-nums;
}

.B-hero { padding: 64px 40px 0; }
.B-hero-grid {
  display: grid; grid-template-columns: 240px 1fr 280px;
  gap: 48px; align-items: start;
}
.B-hero-data {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--yellow);
  padding-top: 16px;
}
.B-data-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.B-data-row span {
  font: 500 10px var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft);
}
.B-data-row b {
  font: 700 13px var(--font-mono); letter-spacing: 0.02em; color: var(--paper);
}

.B-hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px; border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 12px var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper);
  margin-bottom: 32px;
}
.B-tag-num { color: var(--yellow); font-weight: 700; }
.B-hero-title {
  font: 700 clamp(64px, 11vw, 168px)/0.88 var(--font-display);
  letter-spacing: -0.04em; margin: 0 0 32px;
  text-transform: uppercase;
}
.B-hero-title em { font-style: italic; font-weight: 500; color: var(--yellow); }
.B-hero-blurb {
  font: 400 19px/1.45 var(--font-sans); color: var(--paper);
  max-width: 540px; margin: 0 0 32px; text-wrap: pretty;
}
.B-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.B-btn-primary {
  background: var(--yellow); color: var(--ink);
  padding: 14px 22px; border-radius: 999px;
  text-decoration: none; font: 600 14px var(--font-sans);
  letter-spacing: 0.02em;
}
.B-btn-primary:hover { transform: translateY(-2px); }
.B-btn-ghost {
  border: 1px solid var(--line); color: var(--paper);
  padding: 14px 22px; border-radius: 999px;
  text-decoration: none; font: 500 14px var(--font-mono);
}

.B-hero-side { display: flex; flex-direction: column; gap: 16px; }
.B-tile {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.B-tile-yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.B-tile-yellow .B-tile-label, .B-tile-yellow .B-tile-sub { color: var(--ink); opacity: 0.7; }
.B-tile-label {
  font: 500 10px var(--font-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--soft);
}
.B-tile-big {
  font: 700 38px/1 var(--font-display); letter-spacing: -0.02em;
  color: var(--paper); margin-top: 8px;
}
.B-tile-yellow .B-tile-big { color: var(--ink); }
.B-tile-big-sm {
  font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin-top: 8px;
}
.B-tile-sub { font: 400 12px var(--font-mono); color: var(--soft); margin-top: 4px; }

.B-ticker {
  margin: 80px 0 0;
  background: var(--yellow); color: var(--ink);
  padding: 18px 0; overflow: hidden;
  transform: rotate(-1.5deg);
}
.B-ticker-track {
  display: flex; white-space: nowrap;
  animation: B-tick 14s linear infinite;
  font: 700 22px/1 var(--font-display); letter-spacing: -0.02em;
  text-transform: uppercase;
}
.B-ticker-track > span { flex: 0 0 auto; padding-right: 32px; }
@keyframes B-tick { to { transform: translateX(-50%); } }

.B-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 32px;
}
.B-section-num {
  font: 700 14px var(--font-mono); color: var(--yellow); letter-spacing: 0.04em;
}
.B-section-name {
  font: 500 12px var(--font-mono); color: var(--soft);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.B-h2 {
  font: 700 clamp(40px, 5vw, 64px)/1.05 var(--font-display);
  letter-spacing: -0.03em; margin: 0 0 32px; text-wrap: balance;
}
.B-h2-big { font-size: clamp(48px, 7vw, 88px); margin-bottom: 56px; }

.B-about { padding: 140px 40px; }
.B-about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.B-about-card {
  border: 1px solid var(--yellow);
  background: var(--bg2);
  border-radius: 16px; overflow: hidden;
}
.B-about-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-bottom: 1px solid var(--yellow);
}
.B-about-card-foot {
  display: flex; justify-content: space-between;
  padding: 14px 18px;
  font: 600 11px var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper);
}
.B-body { font: 400 17px/1.55 var(--font-sans); max-width: 620px; text-wrap: pretty; margin: 0 0 24px; }
.B-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.B-pill {
  font: 500 12px var(--font-mono); letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--paper);
}

.B-work { padding: 0 40px 140px; }
.B-work-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.B-card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: var(--paper);
  transition: all 0.25s ease;
}
.B-card:hover {
  border-color: var(--yellow); transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(255, 212, 0, 0.3);
}
.B-card-head { display: flex; justify-content: space-between; align-items: center; }
.B-card-num { font: 700 12px var(--font-mono); color: var(--yellow); letter-spacing: 0.06em; }
.B-card-tag {
  font: 500 10px var(--font-mono); color: var(--soft);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.B-card-name {
  font: 700 30px/1 var(--font-display); letter-spacing: -0.02em;
  margin: 8px 0 0; color: var(--paper);
}
.B-card-tagline {
  font: 500 16px/1.3 var(--font-sans); color: var(--yellow);
  margin: 0; text-wrap: pretty;
}
.B-card-blurb {
  font: 400 14px/1.5 var(--font-sans); color: var(--paper);
  margin: 0; flex: 1; text-wrap: pretty;
}
.B-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.B-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.B-card-stats b {
  font: 700 18px/1 var(--font-display); color: var(--yellow);
  letter-spacing: -0.01em;
}
.B-card-stats span {
  font: 400 10px var(--font-mono); color: var(--soft); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3;
}
.B-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 12px var(--font-mono); color: var(--soft); letter-spacing: 0.04em;
}
.B-card-arrow { color: var(--yellow); font-size: 18px; }
.B-card:hover .B-card-arrow { transform: translateX(4px); }

.B-resume { padding: 0 40px 140px; }
.B-edu { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.B-edu-label {
  font: 600 11px var(--font-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 16px;
}
.B-edu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.B-edu-item { display: flex; flex-direction: column; gap: 2px; }
.B-edu-item b { font: 600 15px var(--font-sans); color: var(--paper); }
.B-edu-item span { font: 400 13px var(--font-mono); color: var(--soft); }

.B-contact {
  background: var(--yellow); color: var(--ink);
  padding: 120px 40px 56px;
  margin: 0;
  --r-fg: var(--ink); --r-muted: rgba(10,12,48,0.55);
  --r-line: rgba(10,12,48,0.15);
  --r-chip: rgba(10,12,48,0.06); --r-chip-on: var(--ink); --r-chip-on-fg: var(--yellow);
}
.B-contact .B-section-num { color: var(--ink); }
.B-contact .B-section-name { color: rgba(10,12,48,0.6); }
.B-contact-title {
  font: 700 clamp(48px, 8vw, 112px)/0.95 var(--font-display);
  letter-spacing: -0.04em; margin: 0 0 56px;
  text-transform: uppercase; text-wrap: balance;
}
.B-contact-title .B-yellow { color: var(--bg); }
.B-contact-cta {
  display: inline-flex; align-items: baseline; gap: 16px;
  background: var(--ink); color: var(--yellow);
  padding: 22px 32px; border-radius: 999px;
  text-decoration: none; font: 600 clamp(16px, 4vw, 28px) var(--font-display);
  letter-spacing: -0.01em;
  transition: transform 0.2s ease;
  max-width: 100%; word-break: break-all;
}
.B-contact-cta:hover { transform: translateY(-2px); }
.B-contact-arrow { font-size: 22px; }
.B-contact-links {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid rgba(10,12,48,0.15);
}
.B-contact-links a {
  color: var(--ink); text-decoration: none;
  font: 600 14px var(--font-mono); letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.B-contact-links a:hover { border-color: var(--ink); }
.B-foot {
  display: flex; justify-content: space-between;
  margin-top: 80px; padding-top: 32px;
  border-top: 1px solid rgba(10,12,48,0.15);
  font: 600 11px var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(10,12,48,0.6);
}

@media (max-width: 1100px) {
  .B-hero-grid { grid-template-columns: 1fr; }
  .B-hero-data { order: -1; }
  .B-work-grid { grid-template-columns: 1fr; }
  .B-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .B-nav { padding: 16px 20px; grid-template-columns: 1fr auto; }
  .B-nav-links, .B-nav-time { display: none; }
  .B-hero, .B-about, .B-work, .B-resume { padding-left: 20px; padding-right: 20px; }
  .B-ticker { margin-left: 0; margin-right: 0; }
  .B-contact { padding: 80px 20px 40px; }
  .B-edu-list { grid-template-columns: 1fr; }
}
`;

/* additions for the final site */
const _extra = `
.dirB .B-howiwork {
  margin: 24px 0; padding: 20px 22px;
  border: 1px solid var(--yellow);
  border-left-width: 4px;
  background: rgba(255,212,0,0.04);
  border-radius: 8px;
}
.dirB .B-howiwork-label {
  font: 700 11px var(--font-mono); color: var(--yellow);
  letter-spacing: 0.12em; margin-bottom: 8px;
}
.dirB .B-howiwork strong { color: var(--yellow); font-weight: 600; }
.dirB .B-hero-blurb strong { color: var(--yellow); font-weight: 600; }
.dirB .B-contact-sub {
  font: 400 19px/1.45 var(--font-sans); color: var(--ink); opacity: 0.75;
  max-width: 640px; margin: -32px 0 40px; text-wrap: pretty;
}
`;
// inject extra styles
if (typeof document !== 'undefined' && !document.getElementById('final-extra-css')) {
  const s = document.createElement('style'); s.id = 'final-extra-css'; s.textContent = _extra; document.head.appendChild(s);
}
window.FinalSite = FinalSite;