// After hero: Copyhackers 10x relevance sting, then trust (screenshot proof).
// Layout matches LiveRun: paper, left type, 18px image radius, no nested frame.

const Resonance = () => (
  <section id="resonance" className="paper" style={{padding:'clamp(72px, 10vh, 120px) 0', borderTop:'1px solid var(--rule)'}}>
    <div className="wrap" style={{maxWidth:760}}>
      <div className="evi-kicker" style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--slate)', display:'inline-flex', alignItems:'center', gap:10, marginBottom:26}}>
        <span style={{width:7, height:7, background:'var(--accent)', display:'inline-block', flex:'none'}}></span>
        The missed week
      </div>
      <h2 className="display" style={{fontSize:'clamp(32px, 3.6vw, 48px)', letterSpacing:'-0.03em', lineHeight:1.08, color:'var(--ink)', textWrap:'balance', margin:0}}>
        You have the accounts. The hard part is knowing which one is worth a call this week.
      </h2>
      <p style={{fontSize:18, lineHeight:1.55, color:'var(--mute)', maxWidth:'46ch', margin:'22px 0 0'}}>
        A lead score or a CRM view still leaves your rep picking which accounts to work on Monday.
      </p>
      <p style={{fontSize:18, lineHeight:1.55, color:'var(--mute)', maxWidth:'46ch', margin:'14px 0 0'}}>
        And the company where something public just happened looks like all the rest until somebody checks.
      </p>
    </div>
  </section>
);

const Trust = () => (
  <section id="trust" className="paper" style={{padding:'clamp(80px, 12vh, 160px) 0', borderTop:'1px solid var(--rule)'}}>
    <div className="wrap" style={{maxWidth:1180, display:'flex', flexDirection:'column', gap:32}}>
      <div style={{maxWidth:760}}>
        <div className="evi-kicker" style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--slate)', display:'inline-flex', alignItems:'center', gap:10, marginBottom:26}}>
          <span style={{width:7, height:7, background:'var(--accent)', display:'inline-block', flex:'none'}}></span>
          Proof you can open
        </div>
        <h2 className="display" style={{fontSize:'clamp(32px, 3.6vw, 48px)', letterSpacing:'-0.03em', lineHeight:1.08, color:'var(--ink)', textWrap:'balance', margin:0}}>
          Every email and talk track starts from a dated public event you and your prospect can open.
        </h2>
        <p style={{fontSize:18, lineHeight:1.55, color:'var(--mute)', maxWidth:'46ch', margin:'22px 0 0'}}>
          This is one week we ran for ourselves. Each row is an account, a public event with a date, and the person it points to.
        </p>
      </div>
      <div style={{border:'1px solid var(--rule)', borderRadius:18, overflow:'hidden', background:'var(--bone)', boxShadow:'0 16px 40px rgba(27,55,85,0.12)'}}>
        <img
          src="assets/proof/clay-signals.webp"
          alt="Twelve accounts, the event type, the headline, the event date, and the first contact at each one. Names hidden."
          width={1948}
          height={1177}
          loading="lazy"
          decoding="async"
          style={{width:'100%', height:'auto', display:'block'}}
        />
      </div>
      <p className="sig" style={{margin:0}}>↳ Twelve accounts that entered a buying window in one week. Names hidden.</p>
    </div>
  </section>
);

Object.assign(window, { Resonance, Trust });