// Live run: three anonymized screens from a real Clay workspace, proof of the weekly watch

const CAL = 'https://cal.com/travisross/15min';

const LIVE_RUN_EXHIBITS = [
  {
    label: 'Step 02 · Weekly watch',
    title: 'Twelve accounts moved. The reason sits next to each one.',
    body: 'Cut down to good fit and a real change. A funding round, a regulator ruling, a new director. Each has a date.',
    img: 'assets/proof/clay-signals.webp',
    alt: 'Twelve accounts with a live change, the signal type, the headline, the event date, and the first contact. Names hidden.',
    width: 1999,
    height: 1177
  },
  {
    label: 'Step 03 · Contact match',
    title: 'The person the change lands on, with a work email we checked.',
    body: 'Not the whole org chart. One or two people per account whose job this change actually touches.',
    img: 'assets/proof/clay-contacts.webp',
    alt: 'Ten contacts to call, with title and verified work email. Names and emails hidden.',
    width: 1576,
    height: 1180
  },
  {
    label: 'Step 04 · Write from the source',
    title: 'Why now, in one sentence. Then why this person.',
    body: 'Your rep reads this before the email goes out.',
    img: 'assets/proof/clay-reasoning.webp',
    alt: 'One account record: the why-now headline and sentence, the source link, two decision makers, and the reason they were picked. Names and links hidden.',
    width: 1572,
    height: 698
  }
];

const LiveRun = () => (
  <section id="live-run" className="paper" style={{padding:'clamp(110px, 17vh, 230px) 0', borderTop:'1px solid var(--rule)'}}>
    <div className="wrap" style={{maxWidth:1180, display:'flex', flexDirection:'column', gap:64}}>

      <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>
          From a live run
        </div>
        <h2 className="display" style={{fontSize:'clamp(36px, 3.9vw, 56px)', letterSpacing:'-0.03em', lineHeight:1.02, color:'var(--ink)', textWrap:'balance', margin:'0 0 20px'}}>
          This is what one week of the watch looks like.
        </h2>
        <p style={{fontFamily:'var(--sans)', fontSize:19, lineHeight:1.55, color:'var(--slate)', maxWidth:'48ch', margin:0}}>
          Real screens from this week's run in our own Clay workspace.
        </p>
      </div>

      {LIVE_RUN_EXHIBITS.map((ex) => (
        <div key={ex.img} style={{display:'flex', flexDirection:'column', gap:26}}>
          <div className="live-run-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'end'}}>
            <div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)', marginBottom:8}}>{ex.label}</div>
              <h3 style={{fontFamily:'var(--serif)', fontWeight:600, fontSize:'clamp(24px, 2.2vw, 30px)', lineHeight:1.08, letterSpacing:'-0.02em', color:'var(--ink)', margin:0}}>{ex.title}</h3>
            </div>
            <p style={{fontSize:17, lineHeight:1.55, color:'var(--mute)', maxWidth:'44ch', margin:0}}>{ex.body}</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={ex.img}
              alt={ex.alt}
              width={ex.width}
              height={ex.height}
              loading="lazy"
              decoding="async"
              style={{width:'100%', height:'auto', display:'block'}}
            />
          </div>
        </div>
      ))}

      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, paddingTop:28, borderTop:'1px solid var(--rule)', flexWrap:'wrap'}}>
        <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', color:'var(--mute)'}}>
          ↳ Company names, people, emails, and links are hidden. Every fact behind these screens traces to a page you can open.
        </span>
        <a href={CAL} target="_blank" rel="noopener" className="btn-pill btn-pill-solid" style={{fontSize:16}}>
          Book a pilot
          <svg width="15" height="11" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4" /></svg>
        </a>
      </div>

    </div>
  </section>
);

Object.assign(window, { LiveRun });