// Problem (week-in-review) + Solution Mechanism (5-step rail)

const Problem = () => {
  const bullets = [
    { ts: "MON 08:42", text: "Your SDRs spend the morning scraping lists, guessing who might be ready to talk." },
    { ts: "TUE 14:11", text: "Reply rates keep slipping, and nobody on the team can tell you what actually changed." },
    { ts: "WED 10:03", text: "Dealfront, Clay, Apollo, ZoomInfo, plus an agency, and pipeline review still reads the same." },
    { ts: "THU 16:27", text: "New SDRs are ninety days in, still researching, zero closed." },
    { ts: "FRI 09:18", text: "The agency is on its third \u201Cnew angle\u201D this quarter and nothing's lifted." }
  ];

  return (
    <section id="problem" className="paper" style={{padding: '120px 0 100px', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <div className="problem-grid" style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 80, alignItems:'start'}}>
          <div style={{position:'sticky', top: 120}}>
            <span className="eyebrow-dot">Diagnosis</span>
            <h2 className="display" style={{
              fontSize: 'clamp(36px, 3.8vw, 56px)',
              marginTop: 20, marginBottom: 24,
              letterSpacing:'-0.025em',
              lineHeight: 1.05
            }}>
              Not a copy problem.<br/>
              <em style={{color:'var(--accent-deep)'}}>A timing problem.</em>
            </h2>
            <p style={{fontSize:16, lineHeight:1.55, color:'var(--mute)', maxWidth: 360, margin:0}}>
              Read the clock, not the copy.
            </p>
          </div>

          <ol style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column'}}>
            {bullets.map((b, i) => (
              <li key={i} style={{
                display:'grid',
                gridTemplateColumns:'110px 32px 1fr',
                gap: 24,
                padding: '26px 0',
                borderTop: '1px solid var(--rule)',
                alignItems:'baseline'
              }}>
                <span className="mono" style={{fontSize:11, letterSpacing:'0.12em', color:'var(--mute)'}}>{b.ts}</span>
                <span className="mono" style={{fontSize:12, color:'var(--mute)'}}>0{i+1}</span>
                <span style={{fontFamily:'var(--serif)', fontSize: 'clamp(22px, 2vw, 30px)', lineHeight: 1.25, letterSpacing:'-0.015em'}}>{b.text}</span>
              </li>
            ))}
            <li style={{borderTop:'1px solid var(--rule)', padding:'20px 0 0', marginTop: 0}}>
              <span className="sig">↳ None of these are copy problems. They're timing problems.</span>
            </li>
          </ol>
        </div>
      </div>
    </section>
  );
};

// Mechanism — 5 steps on a connector rail
const Mechanism = () => {
  const steps = [
    { n: '01', name: 'Define TAM', body: 'Narrow the universe to the accounts worth watching. The watchlist is the moat.', product: 'input' },
    { n: '02', name: 'Watch signals', body: 'Daily vigil over the TAM. Only accounts where buying activity just happened move forward.', product: 'Market Watch' },
    { n: '03', name: 'Verify contact', body: 'The right decision-maker selected by the shape of the signal, not a title search. Email verified.', product: 'Contact Forge' },
    { n: '04', name: 'Claim-trace email', body: 'Written from the signal outward. Every factual claim maps to a source field or it doesn\u2019t ship.', product: 'Message Mill' },
    { n: '05', name: 'Send from your stack', body: 'Sequenced out of your sending infra (Smartlead, Instantly). We stop at the send line.', product: 'Pipe Gun' },
  ];

  return (
    <section id="mechanism" className="ink" style={{padding: '120px 0'}}>
      <div className="wrap">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 80, gap: 40, flexWrap:'wrap'}}>
          <div style={{maxWidth: 720}}>
            <span className="eyebrow-dot">Mechanism</span>
            <h2 className="display" style={{
              fontSize: 'clamp(44px, 5.6vw, 88px)',
              marginTop: 18, marginBottom: 22, color:'var(--paper)',
              letterSpacing:'-0.03em'
            }}>
              TAM in,<br/>
              <em style={{color:'var(--accent)'}}>claim-traced</em> email out.
            </h2>
            <p style={{fontSize: 20, lineHeight: 1.5, color: 'var(--paper)', maxWidth: 620, margin:0, opacity: 0.85}}>
              The sequence is fixed and it's the reason the numbers work. Same step order every week. That's what makes timing solvable.
            </p>
          </div>
          <div className="mono" style={{fontSize:11, color:'var(--mute-on-ink)', letterSpacing:'0.12em'}}>
            diagnose → prescribe
          </div>
        </div>

        {/* The rail */}
        <div style={{position:'relative'}}>
          {/* horizontal rail */}
          <div aria-hidden style={{
            position:'absolute', top: 26, left: '5%', right: '5%', height: 1,
            background:'var(--rule-light)'
          }} />
          <div className="mechanism-rail" style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 28}}>
            {steps.map((s, i) => (
              <div key={s.n} style={{position:'relative'}}>
                <div aria-hidden style={{
                  width: 14, height: 14, borderRadius: '50%',
                  background: i === 0 ? 'var(--accent)' : 'var(--ink)',
                  border: '1px solid var(--accent)',
                  marginBottom: 26,
                  boxShadow: i === 0 ? '0 0 0 4px rgba(20,168,163,0.18)' : 'none'
                }}/>
                <span className="mono" style={{fontSize: 11, letterSpacing:'0.14em', color:'var(--mute-on-ink)'}}>STEP {s.n}</span>
                <h3 style={{
                  fontFamily:'var(--serif)', fontSize: 30, fontWeight: 400,
                  margin: '10px 0 14px', letterSpacing:'-0.02em', lineHeight: 1.05
                }}>{s.name}</h3>
                <p style={{margin:0, fontSize: 15, lineHeight: 1.5, color:'var(--paper)', opacity: 0.72}}>{s.body}</p>
                <div style={{marginTop: 18, paddingTop: 12, borderTop:'1px solid var(--rule-light)'}}>
                  <span className="mono" style={{fontSize: 10, letterSpacing:'0.12em', color: s.product === 'input' ? 'var(--mute-on-ink)' : 'var(--accent)', textTransform:'uppercase'}}>
                    {s.product === 'input' ? '↳ your input' : `↳ ${s.product}`}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop: 72, paddingTop: 28, borderTop: '1px solid var(--rule-light)', display:'flex', justifyContent:'space-between', gap: 24, flexWrap:'wrap'}}>
          <p style={{
            fontFamily:'var(--serif)', fontStyle:'italic', fontSize: 28,
            letterSpacing:'-0.02em', lineHeight: 1.25, margin: 0, maxWidth: 780,
            color:'var(--paper)'
          }}>
            Same step order every week. That's what makes timing solvable.
          </p>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Problem, Mechanism });