// Website UI kit — Hero (always-dark varsity) + trust bar.
const { Button, Eyebrow } = window.TechSales110_c20112;

function Hero({ onJoin }) {
  return (
    <header id="top" data-theme="dark" style={{
      position: 'relative', overflow: 'hidden', color: 'var(--cream)',
      background: 'linear-gradient(90deg, rgba(20,10,13,.94) 0%, rgba(20,10,13,.82) 30%, rgba(20,10,13,.45) 56%, rgba(20,10,13,.12) 78%, rgba(20,10,13,.35) 100%), linear-gradient(0deg, rgba(20,10,13,.55), rgba(20,10,13,0) 38%), #140A0D',
      minHeight: 600, display: 'flex', alignItems: 'center', padding: '72px 0',
    }}>
      {/* Hero photograph — full bleed, negative space on the left for type */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: "url('assets/hero-portrait.jpg')",
        backgroundSize: 'cover', backgroundPosition: 'right center',
      }}></div>
      {/* gold ember haze + bottom seam */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        background: 'radial-gradient(420px 320px at 60% 55%, rgba(255,194,51,.10), transparent 65%), linear-gradient(0deg, #140A0D 1%, transparent 22%)',
      }}></div>

      <div style={{ position: 'relative', zIndex: 1, width: '100%', maxWidth: 1080, margin: '0 auto', padding: '0 22px' }}>
        <div style={{ maxWidth: 620 }}>
          <Eyebrow>Break In · Sales 110</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-hero)',
            lineHeight: 'var(--leading-display)', letterSpacing: 'var(--tracking-hero)',
            textTransform: 'uppercase', margin: '14px 0 0', color: 'var(--cream)',
            textShadow: '0 2px 30px rgba(20,10,13,.6)',
          }}>
            Break Into<br />Tech <span style={{ color: 'var(--gold)' }}>Sales.</span>
          </h1>
          <div className="draw-rule" style={{ marginTop: 18 }}></div>
          <p style={{ color: 'var(--cream)', opacity: .92, fontSize: 'var(--text-lg)', margin: '22px 0 28px', maxWidth: 500, lineHeight: 1.55, textShadow: '0 1px 16px rgba(20,10,13,.7)' }}>
            The 52-hack curriculum that takes you from "I think I want in" to selling like a pro — prospect, demo, and close, fluent in every methodology your employer actually runs.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button variant="primary" as="a" href="#videos">Start Free →</Button>
            <Button variant="ghost" as="a" href="#join" onClick={onJoin}>Go Pro · <span style={{ textDecoration: 'line-through', opacity: 0.6 }}>$5</span> $0</Button>
          </div>
          <div style={{ color: 'var(--cream)', opacity: .7, fontSize: 13, marginTop: 18 }}>
            Taught by a 40+ year practitioner &amp; ex-Microsoft Global Black Belt · The Tech Sales 110 podcast
          </div>
        </div>
      </div>
    </header>
  );
}

function TrustBar() {
  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('Ex-Microsoft', 'Global Black Belt')}
        {item('52', 'hacks · one curriculum')}
        {item('7', 'methodologies, mapped')}
      </div>
    </div>
  );
}
window.Hero = Hero;
window.TrustBar = TrustBar;