// Products (5 cards with micro-interactions) + Client Logos + Entry Points + FAQ + Final CTA

// ---------- Product cards ----------

const MarketWatchViz = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(()=>{
    const t = setInterval(()=>setActive(a => (a+1) % 4), 1600);
    return ()=>clearInterval(t);
  }, []);
  const rows = [
    { co: 'Ramp', sig: 'Series E · $150M', date: '04.12' },
    { co: 'Mercury', sig: 'VP Sales hired', date: '04.12' },
    { co: 'Brex',   sig: 'ICP news match', date: '04.11' },
    { co: 'Unit',   sig: 'Stack · Segment added', date: '04.10' },
  ];
  return (
    <div style={{fontFamily:'var(--mono)', fontSize: 11, display:'flex', flexDirection:'column', gap: 2}}>
      {rows.map((r,i)=>(
        <div key={i} style={{
          display:'grid', gridTemplateColumns:'60px 1fr 46px', gap: 10,
          padding:'5px 8px',
          background: i === active ? 'color-mix(in oklab, var(--accent) 14%, transparent)' : 'transparent',
          borderLeft: i === active ? '2px solid var(--accent)' : '2px solid transparent',
          transition:'all 180ms'
        }}>
          <span style={{color: i === active ? 'var(--accent)' : 'var(--mute-on-ink)'}}>{r.co}</span>
          <span style={{color:'var(--paper)', opacity: 0.88}}>{r.sig}</span>
          <span style={{color:'var(--mute-on-ink)', textAlign:'right'}}>{r.date}</span>
        </div>
      ))}
    </div>
  );
};

const ContactForgeViz = () => {
  const [step, setStep] = React.useState(0);
  React.useEffect(()=>{
    const t = setInterval(()=>setStep(s => (s+1) % 4), 1400);
    return ()=>clearInterval(t);
  }, []);
  const people = ['VP Eng', 'Head of Risk', 'CFO', 'VP Sales · ★'];
  return (
    <div style={{fontFamily:'var(--mono)', fontSize: 11, display:'flex', flexDirection:'column', gap:6}}>
      {people.map((p,i)=>{
        const isPick = step === 3 && i === 3;
        const crossed = step >= i && !isPick && step === 3;
        return (
          <div key={i} style={{display:'flex', justifyContent:'space-between', gap:8, padding:'6px 8px',
            color: isPick ? 'var(--accent)' : (crossed ? 'var(--mute-on-ink)' : 'var(--paper)'),
            textDecoration: crossed ? 'line-through' : 'none',
            border: isPick ? '1px solid var(--accent)' : '1px solid transparent',
            opacity: step < i ? 0.35 : 1, transition:'all 220ms'}}>
            <span>{p}</span>
            <span style={{opacity:0.6}}>{isPick ? '✓ verified' : (step < i ? 'checking…' : 'score · lower')}</span>
          </div>
        );
      })}
    </div>
  );
};

const MessageMillViz = () => {
  const lines = [
    { t: 'Subject:', v: 're: Segment added last week', claim: 'stack.change' },
    { t: 'Body:', v: 'Saw you rolled Segment into the data layer.', claim: 'stack.source' },
    { t: '',    v: 'Also — new VP Sales (congrats Jenna).', claim: 'hire.signal' },
    { t: '',    v: 'Have a TAM-shaped idea. Worth 12 min?', claim: 'tone.human' },
  ];
  return (
    <div style={{fontFamily:'var(--mono)', fontSize: 11}}>
      {lines.map((l,i)=>(
        <div key={i} style={{display:'grid', gridTemplateColumns:'60px 1fr 90px', gap: 10, padding:'4px 0', alignItems:'baseline'}}>
          <span style={{color:'var(--mute-on-ink)'}}>{l.t}</span>
          <span style={{color:'var(--paper)'}}>{l.v}</span>
          <span style={{color:'var(--accent)', fontSize: 9, textAlign:'right', letterSpacing:'0.06em'}}>→ {l.claim}</span>
        </div>
      ))}
      <div style={{borderTop:'1px solid var(--rule-light)', marginTop:8, paddingTop:8, color:'var(--accent)', display:'flex', justifyContent:'space-between'}}>
        <span>4 claims · 4 source fields</span>
        <span>0 fabricated</span>
      </div>
    </div>
  );
};

const SignalRiverViz = () => {
  // deterministic sparkline (fintech-lenders TAM, 30-day signal volume)
  const series = [6,4,7,5,9,8,5,11,7,9,14,8,10,16,12,9,13,18,11,14,21,15,12,17,22,16,19,24,17,20];
  const max = Math.max(...series);
  const W = 240, H = 44;
  const step = W / (series.length - 1);
  const pts = series.map((v,i)=>[i*step, H - (v/max)*H]);
  const path = pts.map((p,i)=>(i===0?`M${p[0]},${p[1]}`:`L${p[0]},${p[1]}`)).join(' ');
  const area = `${path} L${W},${H} L0,${H} Z`;

  return (
    <div style={{fontFamily:'var(--mono)', fontSize: 11, color:'var(--paper)'}}>
      <div style={{display:'flex', justifyContent:'space-between', color:'var(--mute-on-ink)', marginBottom: 8}}>
        <span>signal_river.yaml</span>
        <span>last 30d</span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" style={{display:'block', marginBottom: 10}}>
        <path d={area} fill="color-mix(in oklab, var(--accent) 18%, transparent)" />
        <path d={path} fill="none" stroke="var(--accent)" strokeWidth="1.25" />
        {pts.filter((_,i)=>i===pts.length-1).map((p,i)=>(
          <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="var(--accent)" />
        ))}
      </svg>
      <div style={{display:'grid', gridTemplateColumns:'90px 1fr', rowGap: 3, columnGap: 10, lineHeight: 1.5}}>
        <span style={{color:'var(--mute-on-ink)'}}>tam:</span><span>fintech-lenders · 98</span>
        <span style={{color:'var(--mute-on-ink)'}}>sources:</span><span>predictleads, exa, news</span>
        <span style={{color:'var(--mute-on-ink)'}}>freshness:</span><span>&lt;= 90d</span>
        <span style={{color:'var(--mute-on-ink)'}}>fired_30d:</span><span style={{color:'var(--accent)'}}>24 signals · 5 actionable</span>
      </div>
    </div>
  );
};

const PipeGunViz = () => {
  return (
    <div style={{fontFamily:'var(--mono)', fontSize: 11, color:'var(--paper)'}}>
      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom: 10}}>
        <span style={{color:'var(--accent)'}}>▸</span>
        <span>intake.yaml</span>
        <span style={{marginLeft:'auto', color:'var(--mute-on-ink)'}}>routing…</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 6, marginBottom: 10}}>
        {['SR','MW','CF','MM'].map(s=>(
          <div key={s} style={{
            padding:'8px 0', textAlign:'center',
            border:'1px solid var(--rule-light)', color:'var(--paper)'
          }}>{s}</div>
        ))}
      </div>
      <div style={{color:'var(--accent)', textAlign:'right'}}>→ send.smartlead</div>
    </div>
  );
};

const ProductCard = ({ tag, name, desc, proof, viz, i, cols = 2 }) => (
  <article style={{
    padding: '36px 32px 32px',
    borderRight: (i+1) % cols === 0 ? 'none' : '1px solid var(--rule-light)',
    borderBottom: '1px solid var(--rule-light)',
    display:'flex', flexDirection:'column', gap: 20,
    minHeight: 460, position:'relative'
  }}>
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
      <span className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--mute-on-ink)', textTransform:'uppercase'}}>{tag}</span>
      <span className="mono" style={{fontSize:10, color:'var(--mute-on-ink)'}}>0{i+1} / 05</span>
    </div>
    <h3 style={{fontFamily:'var(--serif)', fontSize: 40, margin: 0, fontWeight: 400, letterSpacing:'-0.025em', lineHeight: 0.98}}>{name}</h3>
    <p style={{margin: 0, fontSize: 15, lineHeight: 1.55, color:'var(--paper)', opacity: 0.78}}>{desc}</p>
    <div style={{marginTop:'auto'}}>
      <div style={{padding:'14px 14px 12px', background:'rgba(255,255,255,0.02)', border:'1px solid var(--rule-light)', marginBottom: 14}}>
        {viz}
      </div>
      <p style={{margin:0, fontFamily:'var(--mono)', fontSize: 11, lineHeight: 1.5, color:'var(--accent)'}}>↳ {proof}</p>
    </div>
  </article>
);

const Products = () => {
  const cards = [
    { tag: 'Client-facing', name: 'Market Watch', desc: "Reps shouldn't have to guess which accounts are in-market. Market Watch runs the daily signal watch so they only touch the ones that fire.", proof: "April 12 live test: 14 signals, 40 emails, 19 claims source-traced, zero fabricated.", viz: <MarketWatchViz /> },
    { tag: 'Client-facing', name: 'Contact Forge', desc: "Title-search enrichment finds a person, not the right person. Contact Forge picks the decision-maker by the shape of the signal, then verifies email.", proof: "POC: 108 verified contacts from 574 companies in 16 minutes, $7 in API calls.", viz: <ContactForgeViz /> },
    { tag: 'Client-facing', name: 'Message Mill', desc: "A name token isn't personalization. Message Mill writes from the signal outward, and every factual claim maps to a source field or the email doesn't ship.", proof: "Generated across 600+ contacts in an embedded production workflow.", viz: <MessageMillViz /> },
    { tag: 'Scaffolding', name: 'Signal River', desc: "We run our own stack before we ship it. Signal River is our in-house signal engine, dogfooded on CO runs before anything client-facing.", proof: "CO-dogfooded across 574 companies in a month of runs.", viz: <SignalRiverViz /> },
    { tag: 'Scaffolding', name: 'Pipe Gun', desc: "Campaigns stitched across five tools lose the week. Pipe Gun is the orchestration layer that routes intake, signals, contacts, copy.", proof: "Powers our internal campaign runs end-to-end through intake and routing.", viz: <PipeGunViz /> },
  ];

  return (
    <section id="products" className="ink" style={{padding:'120px 0 60px', borderTop:'1px solid var(--rule-light)'}}>
      <div className="wrap">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 56, gap:24, flexWrap:'wrap'}}>
          <div>
            <span className="eyebrow-dot on-ink">Instrument panel</span>
            <h2 className="display" style={{fontSize:'clamp(40px, 4.4vw, 68px)', margin:'16px 0 0', letterSpacing:'-0.025em', color:'var(--paper)'}}>
              Five products,<br/>
              <em>one running pipeline.</em>
            </h2>
          </div>
          <p style={{maxWidth: 380, margin:0, fontSize:15, lineHeight:1.55, color:'var(--mute-on-ink)'}}>
            Each product handles one part of the sequence. They ship as one system. The micro-panels below show the actual motion, not a screenshot.
          </p>
        </div>
      </div>
      <div className="wrap" style={{padding: 0}}>
        <div className="products-grid" style={{
          display:'grid', gridTemplateColumns:'repeat(2, 1fr)',
          borderTop:'1px solid var(--rule-light)',
          borderLeft:'1px solid var(--rule-light)',
          borderRight:'1px solid var(--rule-light)'
        }}>
          {cards.slice(0,4).map((c,i)=><ProductCard key={c.name} {...c} i={i} cols={2} />)}
        </div>
        <div style={{borderLeft:'1px solid var(--rule-light)', borderRight:'1px solid var(--rule-light)', borderBottom:'1px solid var(--rule-light)'}}>
          <ProductCard {...cards[4]} i={4} cols={1} />
        </div>
      </div>
    </section>
  );
};

// ---------- Client logos as editorial prose ----------
const Clients = () => {
  const logos = [
    { src:'assets/clients/tech-mahindra.png', name:'Tech Mahindra' },
    { src:'assets/clients/platformsh.png', name:'Platform.sh' },
    { src:'assets/clients/guidecx.png', name:'GuideCX' },
    { src:'assets/clients/boombox.jpeg', name:'Boombox' },
    { src:'assets/clients/mylearninghub.png', name:'My Learning Hub' },
    { src:'assets/clients/competera.png', name:'Competera' },
    { src:'assets/clients/lev-capital.png', name:'Lev Capital' },
    { src:'assets/clients/siemens.png', name:'Siemens' },
  ];
  return (
    <section className="paper" style={{padding:'100px 0'}}>
      <div className="wrap">
        <div className="clients-section-grid" style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 80, alignItems:'center'}}>
          <div>
            <span className="eyebrow-dot">Receipts</span>
            <h2 style={{fontFamily:'var(--serif)', fontSize:'clamp(32px, 3.4vw, 52px)', margin:'16px 0 20px', letterSpacing:'-0.025em', lineHeight: 1.02, fontWeight: 400}}>
              Teams we've worked with.
            </h2>
            <p className="sig">↳ Delivered directly by the operator writing this page.</p>
          </div>
          <div className="clients-logos-grid" style={{
            display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0,
            borderTop:'1px solid var(--rule)', borderLeft:'1px solid var(--rule)'
          }}>
            {logos.map((l,i)=>(
              <div key={l.name} style={{
                aspectRatio: '1.6',
                display:'flex', alignItems:'center', justifyContent:'center',
                borderRight:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)',
                padding: 22, filter:'grayscale(1)', opacity: 0.75,
                transition:'opacity 200ms, filter 200ms'
              }}
              onMouseOver={e=>{e.currentTarget.style.filter='grayscale(0)'; e.currentTarget.style.opacity='1';}}
              onMouseOut={e=>{e.currentTarget.style.filter='grayscale(1)'; e.currentTarget.style.opacity='0.75';}}>
                <img src={l.src} alt={l.name} style={{maxHeight: 48, maxWidth:'100%', objectFit:'contain'}}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Entry Point Selector ----------
const EntryPoints = () => {
  const [hover, setHover] = React.useState(0);
  const tiles = [
    { n:'01', title:'Pipeline first.', sub:'Your CRM is already fine.', body:'Your TAM is defined or close to it. We spin up Market Watch, run the motion, surface accounts already shopping.', cta:'Book a pilot · From $1,500', primary:true, weeks: '2 weeks' },
    { n:'02', title:'Fix the data first.', sub:'Then run pipeline.', body:'If the data has to come first, cold outbound on it stays broken. Clay-based cleanup, then pipeline follows 4–8 weeks in.', cta:'Start with a TAM audit', weeks: '4–8 weeks' },
    { n:'03', title:'Complete reset.', sub:'90-day engagement.', body:'Enrichment and pipeline, bundled. Built for teams redoing the outbound motion from the ground up. Custom scope.', cta:'Talk to Travis', weeks: '90 days' },
  ];
  return (
    <section id="entry" className="bone" style={{padding:'120px 0', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 60, flexWrap:'wrap', gap: 20}}>
          <div>
            <span className="eyebrow-dot">Engagements</span>
            <h2 className="display" style={{fontSize:'clamp(40px, 4.4vw, 72px)', margin:'16px 0 18px', letterSpacing:'-0.025em'}}>
              Three ways in.
            </h2>
            <p style={{margin:0, fontSize:17, color:'var(--mute)', maxWidth: 520}}>
              Pick the one that matches where you're starting.
            </p>
          </div>
        </div>
        <div className="entry-grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 0, borderTop:'1px solid var(--rule)'}}>
          {tiles.map((t,i)=>(
            <div key={t.n}
              onMouseEnter={()=>setHover(i)}
              style={{
                padding:'36px 32px 32px',
                borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                borderBottom:'1px solid var(--rule)',
                background: hover === i ? 'var(--paper-2)' : 'transparent',
                transition:'background 180ms',
                minHeight: 380, display:'flex', flexDirection:'column', gap: 18
              }}>
              <div style={{display:'flex', justifyContent:'space-between'}}>
                <span className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--mute)'}}>{t.n}</span>
                <span className="mono" style={{fontSize:11, color:'var(--accent-deep)'}}>{t.weeks}</span>
              </div>
              <h3 style={{fontFamily:'var(--serif)', fontSize: t.primary ? 42 : 34, margin:'4px 0 2px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02}}>
                {t.title}
              </h3>
              <p style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize: 18, color:'var(--mute)', margin:0}}>{t.sub}</p>
              <p style={{margin:0, fontSize:15, lineHeight:1.55, color:'var(--ink)', opacity:0.8, flex:1}}>{t.body}</p>
              <a href="#cta" style={{
                display:'inline-flex', alignItems:'center', gap: 10,
                fontFamily:'var(--mono)', fontSize: 12, letterSpacing:'0.1em',
                textTransform:'uppercase', color: t.primary ? 'var(--accent-deep)' : 'var(--ink)',
                borderTop:'1px solid var(--rule)', paddingTop: 14, marginTop: 6
              }}>
                {t.cta}
                <span style={{marginLeft:'auto'}}>↗</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Products, Clients, EntryPoints });