// Website UI kit — Curriculum (HACKS stages) + Methodologies (Rosetta).
const { Eyebrow, StageTile, Pill } = window.TechSales110_c20112;

function SectionHead({ eyebrow, title, sub, dark, align = 'center' }) {
  return (
    <div style={{ textAlign: align, maxWidth: 680, margin: align === 'center' ? '0 auto' : 0 }}>
      <Eyebrow tone={dark ? 'accent' : 'accent'}>{eyebrow}</Eyebrow>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-3xl)',
        lineHeight: 1.02, textTransform: 'uppercase', letterSpacing: '0.005em',
        color: dark ? 'var(--cream)' : 'var(--text-strong)', margin: '10px 0 0',
      }}>{title}</h2>
      <div className="draw-rule center" style={{ marginTop: 16 }}></div>
      {sub && <p style={{ color: dark ? 'var(--text-on-dark-muted)' : 'var(--text-muted)', fontSize: 17, marginTop: 14, lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

function Curriculum() {
  return (
    <section id="learn" style={{ position: 'relative', overflow: 'hidden', padding: '72px 0', background: 'var(--surface-page)' }}>
      {/* 4 · Playbook Blueprint motif */}
      <div className="blueprint" aria-hidden="true"></div>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1080, margin: '0 auto', padding: '0 22px' }}>
        <SectionHead eyebrow="The Curriculum" title="The HACKS Method"
          sub="Fifty-two hacks across the five stages every deal moves through. Watch in order and graduate — no RevOps team required." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14, marginTop: 40 }} className="stage-grid">
          <StageTile stage="HUNT" title="Find buyers">Target the right accounts and surface the warm ones.</StageTile>
          <StageTile stage="ASK" title="Discover">Earn the conversation, then earn the truth.</StageTile>
          <StageTile stage="CONVEY" title="Win the room">Prove it, present it, demo like a pro.</StageTile>
          <StageTile stage="KEEP" title="Grow">Convert and expand the account.</StageTile>
          <StageTile stage="SCALE" title="Systematize">The backbone that makes it repeatable.</StageTile>
        </div>
      </div>
    </section>
  );
}

function Methodologies() {
  const list = ['Sandler', 'SPIN', 'Solution Selling', 'MEDDIC', 'Microsoft MCEM', 'Demo2Win', 'Track Selling'];
  return (
    <section data-theme="dark" style={{ position: 'relative', overflow: 'hidden', padding: '72px 0', background: 'radial-gradient(900px 460px at 18% 0%, #4A0E1C 0, #140A0D 64%)' }}>
      <div className="ember-field" aria-hidden="true"></div>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1080, margin: '0 auto', padding: '0 22px' }}>
        <SectionHead dark eyebrow="Why This Channel" title="Speak Every Sales Methodology"
          sub="Every hack maps into the framework your employer actually runs — so you walk onto any sales floor fluent. Nobody else teaches it this way." />
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginTop: 28 }}>
          {list.map((m) => <Pill key={m}>{m}</Pill>)}
        </div>
      </div>
    </section>
  );
}
window.SectionHead = SectionHead;
window.Curriculum = Curriculum;
window.Methodologies = Methodologies;