/* Bruno Nardi — single-page story.
   Hero (logic & feel) → Experience (expandable timeline) → Education →
   Contact → Dev Demo finale.  Composes the shared chrome from site.jsx. */

const { Button, Badge, Card } = window.BrunoDevDesignSystem_8422e8;
const { Icon } = window.BDIcons;
const { Backdrop, Header, Footer, ContactSection, LogoSlot, LINKS } = window;

/* single-page nav — anchors scroll within the story */
const STORY_NAV = [
  { label: 'Education', href: '#education', key: 'education' },
  { label: 'Experience', href: '#experience', key: 'experience' },
  { label: 'Stack', href: '#stack', key: 'stack' },
  { label: 'Contact', href: '#contact', key: 'contact' },
  { label: 'Dev Demo', href: '#demo', key: 'demo' },
  { label: 'Bot Arena', href: '#arena', key: 'arena' },
];

/* ---- Data (carried over from the experience page) --------------------- */
const ROLES = [
  {
    id: 'logo-viewture', type: 'role', accent: true, logo: 'https://www.google.com/s2/favicons?domain=viewture.com&sz=128',
    company: 'Viewture', url: 'https://www.viewture.com/', role: 'Senior Full-Stack Engineer',
    period: 'Nov 2024 — Dec 2025', year: '2024', yearEnd: '2025', location: 'Pulborough, UK',
    summary: 'Led an automated finance platform end to end — cutting multi-day manual processing to under ten minutes.',
    highlights: [
      'Architected modular microservices on .NET & Azure message queues with third-party integrations (DocuSign, YouTube, Trolley, SumSub).',
      'Modelled the relational schema and built Azure Data Factory pipelines, plus Power BI models for executive reporting.',
      'Shipped a React portal that let creators build and manage their own custom deals over the backend APIs.',
    ],
    tags: ['.NET', 'SQL Server', 'CosmosDB', 'Azure', 'React', 'Power BI'],
  },
  {
    id: 'break', type: 'interlude', icon: 'disc',
    company: 'Career break', role: 'Family, machine learning & music',
    period: 'Mar 2023 — Oct 2024', year: '2023', yearEnd: '2024', location: 'Worldwide',
    summary: 'A deliberate pause: reconnected with family, went hands-on with AI, produced original music and travelled.',
    highlights: [
      'Built personal machine-learning projects to understand AI from first principles.',
      'Wrote and produced original music — the other half of how I think about systems.',
    ],
    tags: ['Machine learning', 'Python', 'Music production'],
  },
  {
    id: 'logo-titian', type: 'role', logo: 'https://www.google.com/s2/favicons?domain=cenevo.com&sz=128',
    company: 'Cenevo', url: 'https://www.cenevo.com/', role: 'Software Engineer',
    period: 'May 2021 — Feb 2023', year: '2021', yearEnd: '2023', location: 'London, UK',
    summary: 'Hardened a scientific-software platform with rigorous testing and real-time configurability.',
    highlights: [
      'Built .NET test integrations reaching 100% coverage on new features with Moq & XUnit.',
      'Added SignalR-driven dynamic config — loading and unloading features in real time.',
      'Maintained Jenkins CI/CD and built streamlined WPF installers that eliminated deployment errors.',
    ],
    tags: ['.NET', 'Oracle PL/SQL', 'SignalR', 'XUnit / Moq', 'Jenkins', 'WPF'],
  },
  {
    id: 'logo-foxtons', type: 'role', logo: 'https://www.google.com/s2/favicons?domain=foxtons.co.uk&sz=128',
    company: 'Foxtons', url: 'https://www.foxtons.co.uk/', role: 'Full-Stack Engineer',
    period: 'Sep 2019 — Jan 2021', year: '2019', yearEnd: '2021', location: 'London, UK',
    summary: 'Built and maintained the internal estate-agency systems Foxtons ran on day to day — the platforms behind their property, finance and operations teams.',
    highlights: [
      'Refactored legacy code into Docker microservices with RabbitMQ & MongoDB.',
      'Built SQL Server financial pipelines (EF, T-SQL) for monthly finance reporting.',
      'Built responsive frontends in ASP.NET MVC (Razor Pages) with JavaScript, jQuery & Bootstrap.',
      'Migrated an IE-bound system to modern browsers; delivered 3rd-line support at a 100% resolution rate.',
    ],
    tags: ['.NET', 'SQL Server', 'ASP.NET MVC', 'Docker'],
  },
  {
    id: 'logo-vista', type: 'role', logo: 'https://www.google.com/s2/favicons?domain=vista.co&sz=128',
    company: 'Vista Group', url: 'https://vista.co/', role: 'Software Engineer',
    period: 'Feb 2017 — Sep 2019', year: '2017', yearEnd: '2019', location: 'London, UK',
    summary: 'Connected point-of-sale to payments and built fiscal-compliance for EMEA cinema operations.',
    highlights: [
      'Delivered POS / web-sales payment integrations across devices and services in .NET.',
      'Built EMEA fiscal-compliance solutions — HSM integration and modular fiscal-printer support.',
      'Kept legacy VB.NET applications running for operational continuity.',
    ],
    tags: ['.NET', 'SQL Server', 'Payments', 'Fiscal / EMEA', 'VB.NET'],
  },
  {
    id: 'logo-midas', type: 'role', logo: 'https://www.google.com/s2/favicons?domain=midassolutions.com.br&sz=128',
    company: 'Midas', url: 'https://midassolutions.com.br/', role: 'Full-Stack Engineer',
    period: 'Feb 2013 — Jul 2016', year: '2013', yearEnd: '2016', location: 'Ribeirão Preto, Brazil',
    summary: 'Where it started — building a core ERP/TMS/WMS for a major transport company, analysis to production.',
    highlights: [
      'Built the platform in .NET, Oracle, WinForms & DevExpress across the full lifecycle.',
      'Developed a real-time pricing service and a multi-threaded billing engine.',
      'Did heavy SQL tuning and integrated legacy COBOL systems via files & sockets.',
    ],
    tags: ['.NET', 'Oracle PL/SQL', 'WinForms', 'DevExpress'],
  },
];

const EDU_MUSIC = { id: 'logo-usp', mono: 'SP', src: 'https://www.google.com/s2/favicons?domain=usp.br&sz=128', degree: 'BA, Music', school: 'Universidade de São Paulo (USP), Brazil', when: '2006 — 2010' };
const EDU_CS = { id: 'logo-unaerp', mono: 'UN', src: 'https://www.google.com/s2/favicons?domain=unaerp.br&sz=128', degree: 'BSc, Computer Information Systems', school: 'Universidade de Ribeirão Preto, Brazil', when: '2012 — 2016' };
const LANGUAGES = [
  { lang: 'English', level: 'Full professional proficiency' },
  { lang: 'Portuguese', level: 'Native' },
  { lang: 'Italian', level: 'Elementary' },
];

/* ---- Hero ------------------------------------------------------------- */
function Hero() {
  return (
    <section className="st-hero" id="top">
      <div className="st-hero__spot" aria-hidden="true"></div>
      <div className="bd-page st-hero__inner">
        <div className="st-hero__kicker">
          <span className="eyebrow bd-eyebrow-rule">Senior full-stack engineer — London</span>
          <Badge tone="success" dot>Open to work</Badge>
        </div>
        <h1>
          I build enterprise systems with <span className="hero-tech">logic</span> &amp; <span className="accent-italic">feel</span>
        </h1>
        <p className="st-hero__dek">
          The <span className="st-dek-blue">logic</span> of clean code, the <span className="st-dek-amber">feel</span> of
          a good mix — rigorous under the hood, effortless on the surface.
        </p>
        <div className="st-herocta">
          <span className="st-herocta__kick">Now playing — two things I built</span>
          <div className="st-rail">
            <a className="st-rail__link" href="#demo">
              <span className="st-rail__ico"><Icon name="box" size={16} /></span>
              <span className="st-rail__txt">
                <span className="st-rail__lbl">Architecture</span>
                <span className="st-rail__name">Dev Demo</span>
              </span>
              <Icon name="arrow-up-right" size={15} className="st-rail__go" />
            </a>
            <a className="st-rail__link" href="#arena">
              <span className="st-rail__ico"><Icon name="cpu" size={16} /></span>
              <span className="st-rail__txt">
                <span className="st-rail__lbl">Machine learning</span>
                <span className="st-rail__name">Bot Arena</span>
              </span>
              <Icon name="arrow-up-right" size={15} className="st-rail__go" />
            </a>
          </div>
          <a className="st-herocta__more" href="#education">or read the full story <Icon name="arrow-down" size={13} /></a>
        </div>
      </div>
    </section>
  );
}

/* ---- Experience: expandable timeline ---------------------------------- */
function CompanyName({ r }) {
  if (!r.url) return r.company;
  return (
    <a className="bd-co-link" href={r.url} target="_blank" rel="noopener noreferrer" title={`Visit ${r.company}`}
       onClick={(e) => e.stopPropagation()}>
      {r.company}<Icon name="arrow-up-right" size={14} />
    </a>
  );
}

function RoleLogo({ r, size }) {
  if (r.type === 'interlude') return <span className="bd-role__ico"><Icon name={r.icon} size={Math.round(size * 0.42)} /></span>;
  return <LogoSlot id={r.id} src={r.logo} label={r.company} size={size} />;
}

function ExpRole({ r, open, onToggle }) {
  return (
    <div className={'bd-role st-role' + (r.accent ? ' bd-role--accent' : '') + (r.type === 'interlude' ? ' bd-role--break' : '') + (open ? ' is-open' : '')}>
      <button className="st-role__bar" onClick={onToggle} aria-expanded={open}>
        <RoleLogo r={r} size={52} />
        <div className="bd-role__id">
          <div className="bd-role__co"><CompanyName r={r} /></div>
          <div className="bd-role__role">{r.role}</div>
        </div>
        <div className="bd-role__when">
          <div className="bd-role__period">{r.period}</div>
          <div className="bd-role__loc">{r.location}</div>
        </div>
        <span className="st-role__toggle" aria-hidden="true"><Icon name="chevron-down" size={18} /></span>
      </button>

      <p className="st-role__summary">{r.summary}</p>

      <div className="st-role__detail">
        <div className="st-role__detailclip">
          <div className="st-role__detailinner">
            <ul className="st-role__hl">
              {r.highlights.map((h, i) => <li key={i}><Icon name="chevron-right" size={16} />{h}</li>)}
            </ul>
          </div>
        </div>
      </div>

      <div className="st-role__tags">
        {r.tags.map((t) => <span key={t} className="st-role__tag">{t}</span>)}
      </div>
    </div>
  );
}

function ExperienceSection() {
  /* roles run oldest → newest so the story stays chronological as you scroll;
     the current (accent) role opens by default, the rest invite a click */
  const CHRONO = React.useMemo(() => [...ROLES].reverse(), []);
  const accentId = (ROLES.find((r) => r.accent) || ROLES[0]).id;
  const [openIds, setOpenIds] = React.useState(() => new Set([accentId]));
  const allOpen = openIds.size === ROLES.length;
  const toggle = (id) => setOpenIds((prev) => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });
  const toggleAll = () => setOpenIds(allOpen ? new Set() : new Set(ROLES.map((r) => r.id)));

  return (
    <section id="experience" className="bd-section st-exp bd-reveal">
      <div className="bd-page">
        <div className="bd-sec-head">
          <div className="bd-sec-head__copy">
            <span className="eyebrow">02 — The work</span>
            <h2>Twelve years, five teams, one throughline</h2>
            <p className="bd-lead" style={{ marginTop: 16, maxWidth: 540 }}>
              From a Brazilian ERP floor to British fintech — modernising legacy systems,
              designing scalable services, shipping end to end. Expand any role for the detail.
            </p>
          </div>
          <button className="st-expandall" onClick={toggleAll}>
            <Icon name="chevron-down" size={15} style={{ transition: 'transform .2s', transform: allOpen ? 'rotate(180deg)' : 'none' }} />
            {allOpen ? 'Collapse all' : 'Expand all'}
          </button>
        </div>

        <div className="tl">
          {CHRONO.map((r) => (
            <div className="tl__row" key={r.id}>
              <div className="tl__rail">
                <span className={'tl__node' + (r.accent ? ' is-accent' : '')} />
                <div className="tl__year">{r.yearEnd}<span>{r.year}</span></div>
              </div>
              <ExpRole r={r} open={openIds.has(r.id)} onToggle={() => toggle(r.id)} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Education -------------------------------------------------------- */
function EduCard({ e, tone }) {
  return (
    <div className={'edu-card' + (tone ? ' edu-card--' + tone : '')}>
      <LogoSlot id={e.id} src={e.src} label={e.mono} size={52} />
      <div>
        <div className="edu-card__deg">{e.degree}</div>
        <div className="edu-card__school">{e.school}</div>
        <div className="edu-card__when"><Icon name="calendar" size={13} />{e.when}</div>
      </div>
    </div>
  );
}

function EduBridge() {
  return (
    <div className="edu-bridge">
      <div className="edu-bridge__switch" aria-hidden="true">
        <span className="edu-bridge__chip edu-bridge__chip--music"><Icon name="music" size={19} /></span>
        <span className="edu-bridge__arrow"><Icon name="arrow-right" size={16} /></span>
        <span className="edu-bridge__chip edu-bridge__chip--code"><Icon name="terminal" size={19} /></span>
      </div>
      <div className="edu-bridge__body">
        <span className="eyebrow edu-bridge__kicker">2010 — 2012 · Self-taught</span>
        <h3 className="edu-bridge__title">Making the switch from <em>musical</em> to <span className="hero-tech">computer</span> keys.</h3>
        <p className="edu-bridge__copy">Between the two degrees I taught myself to program — nights of docs, side projects and broken builds, trading the piano for the keyboard until the new instrument finally clicked.</p>
      </div>
    </div>
  );
}

function EducationSection() {
  return (
    <section id="education" className="bd-section st-edu bd-reveal" style={{ background: 'var(--surface-sunken)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="bd-page">
        <div className="bd-sec-head">
          <div className="bd-sec-head__copy">
            <span className="eyebrow">01 — Foundations</span>
            <h2>Education &amp; languages</h2>
          </div>
        </div>
        <div className="edu-flow">
          <EduCard e={EDU_MUSIC} tone="music" />
          <EduBridge />
          <EduCard e={EDU_CS} tone="code" />
        </div>
        <div className="edu-langs">
          {LANGUAGES.map((l) => (
            <span className="edu-lang" key={l.lang}><b>{l.lang}</b> · {l.level}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Stack ------------------------------------------------------------ */
const STACK_POINTS = [
  { icon: 'terminal', t: '.NET on the backend', s: 'C# is my default and where I move fastest — but the engineering judgement travels to any language.' },
  { icon: 'database', t: 'SQL Server for data', s: 'Relational-first, and just as comfortable reaching for NoSQL (Cosmos, Mongo) when it fits.' },
  { icon: 'globe', t: 'React on the frontend', s: 'My default for UI — and at home in legacy ASP.NET MVC and WinForms / WPF when a codebase needs it.' },
  { icon: 'cloud', t: 'Azure as home cloud', s: 'Deepest on Azure — and the cloud fundamentals carry straight over to GCP or AWS.' },
  { icon: 'code', t: 'Architecture & patterns', s: 'Microservices, RESTful APIs, event-driven design, DDD, TDD and CI/CD — the throughline across every role.' },
  { icon: 'sparkles', t: 'Always learning', s: 'Happy to pick up the new languages and platforms a team standardises on.' },
];

function StackSection() {
  return (
    <section id="stack" className="bd-section bd-reveal" style={{ borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="bd-page">
        <div className="bd-sec-head">
          <div className="bd-sec-head__copy">
            <span className="eyebrow">03 — The stack</span>
            <h2>Tools I reach for, and how I use them</h2>
          </div>
        </div>
        <div className="bd-ai">
          <div>
            <span className="eyebrow bd-eyebrow-rule">Strong defaults, not dogma</span>
            <h3>A stack I know cold — open to the right tool</h3>
            <p>
              I have a default stack I reach for and move fast in. But I pick what fits the
              problem, and I pick up new languages and platforms quickly when a team needs it.
            </p>
          </div>
          <div className="bd-ai__list">
            {STACK_POINTS.map((p) => (
              <div key={p.t} className="bd-ai__item">
                <span className="bd-ai__check"><Icon name={p.icon} size={15} /></span>
                <span className="bd-ai__itemt">{p.t}<span>{p.s}</span></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Dev Demo finale -------------------------------------------------- */
function DevDemoSection() {
  return (
    <section id="demo" className="bd-section st-demo bd-reveal">
      <div className="bd-page st-demo__inner">
        <div className="st-demo__copy">
          <span className="eyebrow">04 — See it in action</span>
          <h2>Don&rsquo;t take my word for it — <em>explore</em> a system I built.</h2>
          <p className="bd-lead st-demo__body">
            The Dev Demo is an interactive walkthrough of a production platform I architected
            in a previous role — a <em>simplified</em> version of the real work. It isn&rsquo;t the
            full system, but a faithful map of the general architecture: the services, data flows
            and the dev and cloud infrastructure behind them — to <em>show</em> how I approach
            software architecture, not just describe it on a CV.
          </p>
          <div className="st-demo__signin">
            <span className="ic"><Icon name="shield-check" size={15} /></span>
            Sign in to explore the live app — all data is fictional, for demo purposes only.
          </div>
          <div className="st-demo__cta">
            <Button size="lg" variant="primary" href={LINKS.demo} target="_blank" rel="noopener"
                    iconRight={<Icon name="arrow-up-right" size={18} />}>
              Open the Dev Demo
            </Button>
            <Button size="lg" variant="secondary" href="#contact" iconLeft={<Icon name="mail" size={18} />}>
              Get in touch
            </Button>
          </div>
        </div>

        <div className="st-arch">
          <div className="st-arch__bar">
            <i></i><i></i><i></i>
            <span className="st-arch__file">creator-revenue · architecture</span>
            <span className="st-arch__live">Live</span>
          </div>
          <div className="st-arch__body">
            {/* frontend */}
            <div className="st-tier">
              <span className="st-node st-node--wide"><span className="ic"><Icon name="globe" size={15} /></span>Modern frontend</span>
            </div>
            <div className="st-apptags">
              <span className="st-tagchip"><Icon name="flame" size={12} />Firebase auth</span>
              <span className="st-tagchip"><Icon name="rss" size={12} />SignalR live</span>
            </div>
            <div className="st-wire"></div>
            {/* microservices — each owns its data */}
            <div className="st-archgroup">
              <span className="st-archgroup__lbl"><Icon name="box" size={12} />Microservices</span>
              <div className="st-svcgrid">
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="activity" size={14} /></span>revenue</span><Icon name="database" size={12} className="st-svc__db" /></span>
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="file-text" size={14} /></span>contracts</span><Icon name="database" size={12} className="st-svc__db" /></span>
                <span className="st-svc st-svc--accent"><span className="st-svc__lead"><span className="ic"><Icon name="calculator" size={14} /></span>calculator</span><Icon name="database" size={12} className="st-svc__db" /></span>
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="credit-card" size={14} /></span>payments</span><Icon name="database" size={12} className="st-svc__db" /></span>
              </div>
              <span className="st-archnote"><Icon name="database" size={11} /> each service owns its data</span>
            </div>
            <div className="st-wire"></div>
            {/* cloud infrastructure layer */}
            <div className="st-archgroup">
              <span className="st-archgroup__lbl"><Icon name="cloud" size={12} />Cloud infrastructure · Azure</span>
              <div className="st-infragrid">
                <span className="st-infra"><span className="ic"><Icon name="share-2" size={14} /></span><span className="st-infra__txt"><b>Events</b><i>Service Bus</i></span></span>
                <span className="st-infra"><span className="ic"><Icon name="gauge" size={14} /></span><span className="st-infra__txt"><b>Observability</b><i>App Insights</i></span></span>
                <span className="st-infra"><span className="ic"><Icon name="key" size={14} /></span><span className="st-infra__txt"><b>Secrets</b><i>Key Vault</i></span></span>
                <span className="st-infra"><span className="ic"><Icon name="shield-check" size={14} /></span><span className="st-infra__txt"><b>Identity</b><i>Entra ID · RBAC</i></span></span>
              </div>
              <span className="st-archnote"><Icon name="code" size={11} /> provisioned with Bicep — infra as code</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Bot Arena finale ------------------------------------------------- */
function BotArenaSection() {
  return (
    <section id="arena" className="bd-section st-demo st-lab bd-reveal">
      <div className="bd-page st-lab__inner">
        {/* ML training schematic — mirrors the Dev Demo card, flipped left */}
        <div className="st-arch st-lab__card">
          <div className="st-arch__bar">
            <i></i><i></i><i></i>
            <span className="st-arch__file">ppo_policy · self-play</span>
            <span className="st-arch__live">Training</span>
          </div>
          <div className="st-arch__body">
            {/* the reinforcement-learning self-play loop */}
            <div className="st-archgroup">
              <span className="st-archgroup__lbl"><Icon name="disc" size={12} />Self-play loop</span>
              <div className="st-svcgrid">
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="cpu" size={14} /></span>agent A</span></span>
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="cpu" size={14} /></span>agent B</span></span>
              </div>
              <div className="st-wire"></div>
              <div className="st-tier"><span className="st-node st-node--wide"><span className="ic"><Icon name="star" size={15} /></span>Reward signal<em>win +1 · loss &minus;1</em></span></div>
              <div className="st-wire"></div>
              <div className="st-tier"><span className="st-node st-node--wide st-node--accent"><span className="ic"><Icon name="activity" size={15} /></span>PPO update<em>policy gradient</em></span></div>
              <span className="st-archnote st-loopnote"><Icon name="zap" size={11} /> &#8635; repeated over thousands of games</span>
            </div>
            <div className="st-wire"></div>
            {/* the learned policy */}
            <div className="st-archgroup">
              <span className="st-archgroup__lbl"><Icon name="cpu" size={12} />Policy network</span>
              <div className="st-svcgrid">
                <span className="st-svc st-svc--accent"><span className="st-svc__lead"><span className="ic"><Icon name="hexagon" size={14} /></span>&pi; policy</span></span>
                <span className="st-svc"><span className="st-svc__lead"><span className="ic"><Icon name="layers" size={14} /></span>value head</span></span>
              </div>
              <span className="st-archnote"><Icon name="box" size={11} /> PyTorch &rarr; ONNX</span>
            </div>
            <div className="st-wire"></div>
            {/* deployed to the browser */}
            <div className="st-tier"><span className="st-node st-node--wide"><span className="ic"><Icon name="globe" size={15} /></span>Plays you live, in the browser</span></div>
          </div>
          <div className="st-lab__foot">
            <div className="st-elobot">
              <span className="st-elobot__nm">Greedy <em>heuristic</em></span>
              <span className="st-elobar"><span style={{ width: '42%' }}></span></span>
              <span className="st-elobot__elo">1180<small>elo</small></span>
            </div>
            <div className="st-elobot st-elobot--top">
              <span className="st-elobot__nm">PPO <em>neural net</em></span>
              <span className="st-elobar st-elobar--accent"><span style={{ width: '92%' }}></span></span>
              <span className="st-elobot__elo">1720<small>elo</small></span>
            </div>
          </div>
        </div>

        <div className="st-demo__copy st-lab__copy">
          <span className="eyebrow">05 — On the side</span>
          <h2>I taught two bots to play cards. Care to <em>beat</em> them?</h2>
          <p className="bd-lead st-demo__body">
            Bot Arena is an experimental project of mine &mdash; a way to learn more about
            machine learning through a hobby of mine, board games. One opponent is a hand-tuned
            heuristic; the other is a neural policy trained with <em>PPO</em> over thousands of
            self-play games.
          </p>
          <div className="st-demo__signin">
            <span className="ic"><Icon name="shield-check" size={15} /></span>
            Access is granted by hand &mdash; request a seat and I&rsquo;ll wave you in.
          </div>
          <div className="st-demo__cta">
            <Button size="lg" variant="primary" href={LINKS.arena} target="_blank" rel="noopener"
                    iconRight={<Icon name="arrow-up-right" size={18} />}>
              Enter the Bot Arena
            </Button>
            <Button size="lg" variant="secondary" href="#contact" iconLeft={<Icon name="mail" size={18} />}>
              Get in touch
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- App -------------------------------------------------------------- */
function App() {
  React.useEffect(() => {
    const h = window.location.hash;
    if (!h || h.length < 2) return;
    const el = document.getElementById(h.slice(1));
    if (!el) return;
    requestAnimationFrame(() => {
      const y = el.getBoundingClientRect().top + window.scrollY - 84;
      window.scrollTo({ top: y, behavior: 'auto' });
    });
  }, []);
  return (
    <React.Fragment>
      <Backdrop />
      <Header active="home" nav={STORY_NAV} brandHref="#top" />
      <main>
        <Hero />
        <EducationSection />
        <ExperienceSection />
        <StackSection />
        <ContactSection />
        <DevDemoSection />
        <BotArenaSection />
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);