// About page — Pierre Hulsebus bio, credentials, H.A.C.K.S. origin.
function AboutHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'radial-gradient(820px 440px at 70% 40%, #4A0E1C 0, #140A0D 66%)', padding: '88px 24px 80px', textAlign: 'center' }}>
      <div class="ember-field" aria-hidden="true"></div>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'inline-block', fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gold)', border: '1px solid rgba(255,194,51,.35)', borderRadius: 999, padding: '5px 14px', marginBottom: 18 }}>
          The Instructor
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(36px,6vw,72px)', textTransform: 'uppercase', letterSpacing: '.02em', lineHeight: 1.0, color: 'var(--cream)', margin: '0 0 6px' }}>
          40+ Years.<br /><span style={{ color: 'var(--gold)' }}>One Curriculum.</span>
        </h1>
        <p style={{ color: 'rgba(255,240,220,.65)', fontSize: 18, lineHeight: 1.55, maxWidth: 520, margin: '18px auto 0' }}>
          Pierre Hulsebus built the H.A.C.K.S. framework from four decades in the field — and put the entire playbook online, free, so anyone can break into tech sales.
        </p>
      </div>
    </section>
  );
}

function AboutCredentials() {
  const item = (n, t) => (
    <span style={{ fontWeight: 500, color: 'var(--cream)' }}>
      <b style={{ color: 'var(--gold)', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>{n}</b> {t}
    </span>
  );
  return (
    <div data-theme="dark" style={{ background: 'var(--maroon-deep)', padding: '16px 0', fontFamily: 'var(--font-body)', borderBottom: '1px solid rgba(255,194,51,.16)' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 22px', display: 'flex', gap: 34, justifyContent: 'center', flexWrap: 'wrap', fontSize: 14 }}>
        {item('40+ yrs', 'in technology sales')}
        {item('Global Black Belt', 'ex-Microsoft')}
        {item('Dynamics 365', 'certified')}
        {item('7', 'methodologies mapped')}
      </div>
    </div>
  );
}

function AboutBio() {
  return (
    <section style={{ padding: '80px 0', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 22px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }} className="hero-grid">
        <div style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '1 / 1', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <img src="assets/podcast-studio.jpg" alt="Pierre Hulsebus in studio — Tech Sales 110" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: 14 }}>
            Pierre Hulsebus
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-2xl)', textTransform: 'uppercase', letterSpacing: '.01em', color: 'var(--text-strong)', lineHeight: 1.05, margin: '0 0 24px' }}>
            Forty Years.<br />One Bag Carried.<br /><span style={{ color: 'var(--gold)' }}>Zero Theater.</span>
          </h2>
          <div style={{ color: 'var(--text-body)', fontSize: 17, lineHeight: 1.7 }}>
            <p style={{ marginTop: 0 }}>I started in tech sales before anyone called it "tech sales."  Forty years later, I've run every major methodology that actually matters | and closed with each one: Sandler, SPIN, MEDDIC, Solution Selling, Microsoft MCEM, Demo2Win, Track Selling.</p>
            <p>At Microsoft, as Global Black Belt for Dynamics 365 Field Service, I was the guy enterprise teams called when the deal was on the brink.  I walked into rooms full of skeptical stakeholders, translated buyer needs into technical reality, and closed.  Not theory.  Closed-won.</p>
            <p>Tech Sales 110 exists because the playbook you need is scattered across expensive courses, jargon walls, and outdated advice.  52 Hacks.  5 Stages (Hunt → Ask → Convey → Keep → Scale).  7 Methodologies Mapped.  All free on YouTube.  Built by a practitioner, not a guru.</p>
            <p>This is your Rosetta Stone: every hack shown live (including the AI-era upgrades), placed in the exact methodology your employer runs.  No fluff.  No $497 upsells to get started.</p>
            <p>Go from "I think I want into tech sales" to walking onto any floor sounding like you've been closing for years | because you've studied the same plays that built $500M+ pipelines.</p>
          </div>
          <a href="/#learn" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 28, background: 'var(--gold)', color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14, textTransform: 'uppercase', letterSpacing: '.05em', padding: '13px 24px', borderRadius: 'var(--radius-md)', textDecoration: 'none' }}>
            Start with Hack #1 →
          </a>
        </div>
      </div>
    </section>
  );
}

function AboutHacks() {
  return (
    <section data-theme="dark" style={{ position: 'relative', overflow: 'hidden', background: 'radial-gradient(900px 500px at 20% 60%, #4A0E1C 0, #140A0D 70%)', padding: '80px 24px' }}>
      <div class="ember-field" aria-hidden="true"></div>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 840, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gold)', border: '1px solid rgba(255,194,51,.35)', borderRadius: 999, padding: '5px 14px', display: 'inline-block', marginBottom: 18 }}>
          The Method
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px,4vw,52px)', textTransform: 'uppercase', letterSpacing: '.02em', color: 'var(--cream)', lineHeight: 1.05, margin: '0 0 20px' }}>
          Why I Built<br /><span style={{ color: 'var(--gold)' }}>H.A.C.K.S.</span>
        </h2>
        <p style={{ color: 'rgba(255,240,220,.7)', fontSize: 17, lineHeight: 1.65, maxWidth: 640, margin: '0 auto 20px' }}>
          Every sales methodology teaches the same five things — they just use different words.  Hunt the right buyers.  Ask the right questions.  Convey the right value.  Keep the account.  Scale the system.
        </p>
        <p style={{ color: 'rgba(255,240,220,.7)', fontSize: 17, lineHeight: 1.65, maxWidth: 640, margin: '0 auto 36px' }}>
          H.A.C.K.S. is the Rosetta Stone.  Learn it once and you're fluent in every room, every methodology, every employer.
        </p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          {['HUNT', 'ASK', 'CONVEY', 'KEEP', 'SCALE'].map(s => (
            <span key={s} style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 13, letterSpacing: '.1em', color: 'var(--gold)', border: '1px solid rgba(255,194,51,.4)', borderRadius: 6, padding: '8px 18px' }}>{s}</span>
          ))}
        </div>
        <a href="/#learn" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 36, background: 'transparent', color: 'var(--gold)', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14, textTransform: 'uppercase', letterSpacing: '.05em', padding: '13px 28px', borderRadius: 'var(--radius-md)', textDecoration: 'none', border: '1px solid rgba(255,194,51,.5)' }}>
          See the Full Curriculum →
        </a>
      </div>
    </section>
  );
}

function AboutConnect() {
  const links = [
    { label: 'YouTube', href: 'https://www.youtube.com/@TechSales110', sub: '@TechSales110' },
    { label: 'LinkedIn', href: 'https://www.linkedin.com/in/nukasoft', sub: '/in/nukasoft' },
    { label: 'Podcast', href: 'https://Podcast.TechSales110.com', sub: 'Tech Sales 110 Podcast' },
  ];
  return (
    <section style={{ padding: '72px 0', background: 'var(--surface-page-alt)' }}>
      <div style={{ maxWidth: 860, margin: '0 auto', padding: '0 22px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gold)', border: '1px solid rgba(255,194,51,.35)', borderRadius: 999, padding: '5px 14px', display: 'inline-block', marginBottom: 18 }}>
          Connect
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-2xl)', textTransform: 'uppercase', color: 'var(--text-strong)', margin: '0 0 40px', letterSpacing: '.01em' }}>
          Find Pierre Online
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="vid-grid">
          {links.map(l => (
            <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '28px 20px', textDecoration: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, transition: 'border-color .15s' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 20, textTransform: 'uppercase', letterSpacing: '.02em', color: 'var(--text-strong)' }}>{l.label}</span>
              <span style={{ fontSize: 13, color: 'var(--gold)', fontFamily: 'var(--font-body)' }}>{l.sub}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.AboutHero = AboutHero;
window.AboutCredentials = AboutCredentials;
window.AboutBio = AboutBio;
window.AboutHacks = AboutHacks;
window.AboutConnect = AboutConnect;