// Direct-response sections — RealFunnels-style mimicry in CO brand
// CtaBand · Comparison · RoiCalculator · AfterBooking · Guarantee · Testimonials · ScrollTopFab

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

// ---------- Shared centered section intro (RF marketing-section pattern) ----------
const SectionIntro = ({ kicker, title, sub, onInk }) =>
<div style={{ textAlign: 'center', maxWidth: 860, margin: '0 auto 64px' }}>
    <span className={onInk ? 'eyebrow-dot on-ink' : 'eyebrow-dot'} style={{ justifyContent: 'center', display: 'inline-flex' }}>{kicker}</span>
    <h2 className="display" style={{
    fontSize: 'clamp(34px, 4.2vw, 60px)', margin: '18px 0 0', letterSpacing: '-0.03em',
    lineHeight: 1.02, color: onInk ? 'var(--paper)' : 'var(--ink)', textWrap: 'balance'
  }}>{title}</h2>
    {sub && <p style={{ margin: '22px auto 0', maxWidth: 620, fontSize: 18, lineHeight: 1.55, color: onInk ? 'var(--mute-on-ink)' : 'var(--mute)' }}>{sub}</p>}
  </div>;


// ---------- "This isn't intent data" interstitial ----------
const IntentData = () => (
  <section className="paper" style={{padding:'110px 0', borderTop:'1px solid var(--rule)'}}>
    <div className="wrap">
      <div style={{maxWidth:800}}>
        <span className="eyebrow-dot">The difference</span>
        <h2 className="display" style={{fontSize:'clamp(32px,4vw,58px)', margin:'18px 0 40px', letterSpacing:'-0.03em', lineHeight:1.04}}>
          This isn’t intent data.
        </h2>
        <div style={{display:'flex', flexDirection:'column', gap:26, maxWidth:680}}>
          <p style={{margin:0, fontSize:19, lineHeight:1.7, color:'var(--mute)'}}>Tools like 6sense and Bombora sell you a black-box score and a guess at who’s in-market. You can’t see how it was built.</p>
          <p style={{margin:0, fontSize:19, lineHeight:1.7, color:'var(--mute)'}}>We build signals from real events across your own TAM. Every signal ships with its source.</p>
          <p style={{margin:0, fontSize:19, lineHeight:1.7, color:'var(--ink)', fontWeight:500}}>Open it, check the event, act on a fact you can defend in a review. Don’t take a score on faith.</p>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Repeating CTA band ----------
const CtaBand = ({ headline, sub, micro }) =>
<section className="ink" style={{ padding: '84px 0', borderTop: '1px solid var(--rule-light)', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(900px 320px at 50% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%)', pointerEvents: 'none' }} />
    <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
      <h2 className="display" style={{ fontSize: 'clamp(30px, 3.8vw, 54px)', margin: '0 auto', maxWidth: 900, letterSpacing: '-0.03em', color: 'var(--paper)', lineHeight: 1.04, textWrap: 'balance' }}>
        {headline}
      </h2>
      {sub && <p style={{ margin: '22px auto 0', maxWidth: 600, fontSize: 18, lineHeight: 1.55, color: 'var(--mute-on-ink)' }}>{sub}</p>}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 34 }}>
        <a href={CAL} target="_blank" rel="noopener" className="btn-pill btn-pill-solid" style={{ fontSize: 17, padding: '20px 38px' }}>
          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 className="mono" style={{ marginTop: 20, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-on-dark)' }}>
        {micro || 'Fixed-term · No retainer · Every claim source-traced'}
      </div>
    </div>
  </section>;


// ---------- Comparison table ----------
const Comparison = () => {
  const rows = [
  { label: 'Starts from your full TAM', co: true, agency: false, diy: 'partial' },
  { label: 'Sends only on a verified in-market signal', co: true, agency: false, diy: false },
  { label: 'Every factual claim source-traced', co: true, agency: false, diy: false },
  { label: 'One operator who built the stack', co: true, agency: 'partial', diy: true },
  { label: 'Deliverability owned end-to-end', co: true, agency: 'partial', diy: false },
  { label: 'Live in 2–3 weeks', co: true, agency: false, diy: 'partial' },
  { label: 'No long-term retainer', co: true, agency: false, diy: true },
  { label: 'Fabricated / hallucinated claims', co: 'never', agency: 'common', diy: 'risk', invert: true }];

  const Cell = ({ v, accent }) => {
    if (v === true) return <span style={{ color: accent ? 'var(--accent)' : 'var(--ink)', fontWeight: 700, fontSize: 20 }}>✓</span>;
    if (v === false) return <span style={{ color: 'var(--mute)', fontSize: 20, opacity: 0.5 }}>✕</span>;
    if (v === 'partial') return <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--mute)', textTransform: 'uppercase' }}>Partial</span>;
    return <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: accent ? 'var(--accent)' : 'var(--mute)', textTransform: 'uppercase', fontWeight: accent ? 600 : 400 }}>{v}</span>;
  };
  return (
    <section className="paper" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <SectionIntro
          kicker="Honest comparison"
          title={<>Concept Outbound vs. a <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>generic agency</em> vs. doing it yourself.</>}
          sub="Same money, three very different outcomes. Here's where the differences actually live." />
        
        <div className="cmp-card" style={{ maxWidth: 1040, margin: '0 auto', background: '#fff', borderRadius: 22, border: '1px solid rgba(27,55,85,0.10)', boxShadow: '0 1px 2px rgba(27,55,85,0.04), 0 24px 60px rgba(27,55,85,0.08)', overflow: 'hidden' }}>
          {/* Header row */}
          <div className="cmp-row cmp-head" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr' }}>
            <div style={{ padding: '22px 26px' }}></div>
            <div style={{ padding: '22px 16px', textAlign: 'center', background: 'var(--ink)', color: 'var(--paper)', borderTopLeftRadius: 14 }}>
              <div style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em' }}>Concept<br />Outbound</div>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-on-dark)', marginTop: 6 }}>You are here</div>
            </div>
            <div style={{ padding: '22px 16px', textAlign: 'center' }}>
              <div className="mono" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--mute)' }}>Generic<br />agency</div>
            </div>
            <div style={{ padding: '22px 16px', textAlign: 'center' }}>
              <div className="mono" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--mute)' }}>Doing it<br />yourself</div>
            </div>
          </div>
          {rows.map((r, i) =>
          <div key={i} className="cmp-row" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', borderTop: '1px solid rgba(27,55,85,0.08)', alignItems: 'center' }}>
              <div style={{ padding: '20px 26px', fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>{r.label}</div>
              <div style={{ padding: '20px 16px', textAlign: 'center', background: 'color-mix(in oklab, var(--accent) 5%, #fff)' }}><Cell v={r.co} accent /></div>
              <div style={{ padding: '20px 16px', textAlign: 'center' }}><Cell v={r.agency} /></div>
              <div style={{ padding: '20px 16px', textAlign: 'center' }}><Cell v={r.diy} /></div>
            </div>
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 44 }}>
          <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>);

};

// ---------- ROI calculator ----------
const RoiCalculator = () => {
  const [tam, setTam] = React.useState(2000);
  const [inMarket, setInMarket] = React.useState(6); // % of TAM in-market per quarter
  const [reply, setReply] = React.useState(8); // % reply on signal-timed sends
  const [meeting, setMeeting] = React.useState(35); // % of replies → meeting
  const [close, setClose] = React.useState(20); // % meetings → close
  const [acv, setAcv] = React.useState(24000); // $ ACV

  const signals = Math.round(tam * (inMarket / 100));
  const replies = Math.round(signals * (reply / 100));
  const meetings = Math.round(replies * (meeting / 100));
  const deals = Math.round(meetings * (close / 100));
  const pipeline = meetings * acv; // pipeline = meetings * acv (opportunity value)
  const revenue = deals * acv;

  const fmt = (n) => n >= 1000000 ? '$' + (n / 1000000).toFixed(1) + 'M' : '$' + (n / 1000).toFixed(0) + 'k';
  const Slider = ({ label, value, set, min, max, step, suffix }) =>
  <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute-on-ink)' }}>{label}</span>
        <span style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 20, color: 'var(--paper)' }}>{suffix === '$' ? fmt(value) : value.toLocaleString()}{suffix && suffix !== '$' ? suffix : ''}</span>
      </div>
      <input className="roi-range" type="range" min={min} max={max} step={step} value={value} onChange={(e) => set(Number(e.target.value))} />
    </div>;

  return (
    <section className="paper" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <SectionIntro
          kicker="The simple maths"
          title={<>The pipeline maths behind <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>your TAM.</em></>}
          sub="Move the sliders to your numbers. This is the same model we run before quoting a pilot — conservative on purpose." />
        
        <div className="roi-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, maxWidth: 1040, margin: '0 auto', borderRadius: 22, overflow: 'hidden', boxShadow: '0 24px 60px rgba(27,55,85,0.14)' }}>
          {/* Inputs (dark) */}
          <div className="ink" style={{ padding: '44px 40px' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-on-dark)', marginBottom: 26 }}>Your inputs</div>
            <Slider label="TAM accounts" value={tam} set={setTam} min={250} max={10000} step={250} />
            <Slider label="% in-market / quarter" value={inMarket} set={setInMarket} min={2} max={20} step={1} suffix="%" />
            <Slider label="Reply rate on timed sends" value={reply} set={setReply} min={2} max={20} step={1} suffix="%" />
            <Slider label="Reply → meeting" value={meeting} set={setMeeting} min={10} max={60} step={5} suffix="%" />
            <Slider label="Meeting → close" value={close} set={setClose} min={5} max={50} step={5} suffix="%" />
            <Slider label="Average contract value" value={acv} set={setAcv} min={5000} max={120000} step={1000} suffix="$" />
          </div>
          {/* Outputs (light card) */}
          <div style={{ padding: '44px 40px', background: '#fff', display: 'flex', flexDirection: 'column' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 26 }}>Projected, per quarter</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 30 }}>
              <Stat n={signals.toLocaleString()} l="in-market signals" />
              <Stat n={meetings.toLocaleString()} l="meetings booked" />
              <Stat n={deals.toLocaleString()} l="deals won" />
              <Stat n={replies.toLocaleString()} l="positive replies" />
            </div>
            <div style={{ marginTop: 'auto', borderTop: '1px solid rgba(27,55,85,0.10)', paddingTop: 26 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)' }}>Pipeline generated</div>
              <div style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 'clamp(44px, 5vw, 64px)', lineHeight: 1, letterSpacing: '-0.035em', color: 'var(--accent-deep)', margin: '6px 0 4px' }}>{fmt(pipeline)}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--mute)' }}>≈ {fmt(revenue)} closed-won at these rates</div>
            </div>
          </div>
        </div>
        <p className="mono" style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.04em', color: 'var(--mute)', marginTop: 22 }}>↳ Illustrative model, not a guarantee. We pressure-test these inputs against your real data on the first call.</p>
      </div>
    </section>);

};
const Stat = ({ n, l }) =>
<div>
    <div style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 38, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--ink)' }}>{n}</div>
    <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)', marginTop: 6 }}>{l}</div>
  </div>;


// ---------- What happens after you book ----------
const AfterBooking = () => {
  const steps = [
  { n: '01', t: 'Book the call', d: 'Pick a 30-minute slot. No deck, no discovery-call theatre — we look at your TAM and current motion live.' },
  { n: '02', t: 'TAM + signal audit', d: 'We map your addressable market and the signals that should trigger a send. You keep the audit either way.' },
  { n: '03', t: '2-week build', d: 'Deliverability, contact resolution, claim-traced messaging and orchestration get wired into one running pipeline.' },
  { n: '04', t: 'Pipeline, not promises', d: 'Sends fire on verified signals. You watch meetings land, with every claim traceable to a source field.' }];

  return (
    <section className="paper" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <SectionIntro
          kicker="Exactly what happens"
          title={<>What happens after you <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>book the call.</em></>}
          sub="No mystery, no month-long onboarding. Four steps from first call to live pipeline." />
        
        <div className="steps-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {steps.map((s, i) =>
          <div key={i} className="soft-card" style={{ padding: '30px 26px', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 500 }}>{s.n}</span>
                {i < steps.length - 1 && <span aria-hidden style={{ flex: 1, height: 1, background: 'rgba(27,55,85,0.12)' }} />}
              </div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, margin: 0, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--mute)' }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ---------- Guarantee / risk reversal ----------
const Guarantee = () =>
<section className="paper" style={{ padding: '110px 0' }}>
    <div className="wrap">
      <div className="guar-card" style={{
      maxWidth: 960, margin: '0 auto', background: '#fff', borderRadius: 26,
      border: '1px solid rgba(27,55,85,0.10)', boxShadow: '0 24px 60px rgba(27,55,85,0.10)',
      padding: '64px 56px', textAlign: 'center', position: 'relative', overflow: 'hidden'
    }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(600px 240px at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%)' }} />
        <div style={{ position: 'relative' }}>
          {/* Seal */}
          <div style={{ width: 92, height: 92, margin: '0 auto 26px', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 100 100" width="92" height="92" style={{ position: 'absolute', inset: 0 }}>
              <path d="M50 3 60 11 73 9 78 22 91 28 88 41 96 52 88 63 91 76 78 82 73 95 60 93 50 101 40 93 27 95 22 82 9 76 12 63 4 52 12 41 9 28 22 22 27 9 40 11Z" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.55" />
              <circle cx="50" cy="52" r="33" fill="none" stroke="var(--ink)" strokeWidth="1.5" />
            </svg>
            <span style={{ position: 'relative', fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em', color: 'var(--ink)', textAlign: 'center', lineHeight: 1.05 }}>0<br /><span style={{ fontSize: 8, letterSpacing: '0.1em' }}>FAB.</span></span>
          </div>
          <span className="eyebrow-dot" style={{ justifyContent: 'center', display: 'inline-flex' }}>The guarantee</span>
          <h2 className="display" style={{ fontSize: 'clamp(30px, 3.8vw, 52px)', margin: '18px 0 18px', letterSpacing: '-0.03em', lineHeight: 1.04, color: 'var(--ink)', textWrap: 'balance' }}>
            Every claim is source-traced — <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>or it doesn't send.</em>
          </h2>
          <p style={{ margin: '0 auto', maxWidth: 600, fontSize: 18, lineHeight: 1.6, color: 'var(--mute)' }}>
            No fabricated stats, no invented "I saw your post" openers. If a factual claim in an email can't be mapped to a verified source field, the email never ships. The pilot is fixed-term with no retainer — if the signal model doesn't fit your market, we tell you on the first call.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 14, marginTop: 34 }}>
            <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>
            <a href="#mechanism" className="btn-pill btn-pill-ghost" style={{ fontSize: 16 }}>See how it works</a>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ---------- Testimonials (real client quotes — text-only masonry) ----------
const Testimonials = () => {
  const Stars = () =>
  <div style={{ display: 'flex', gap: 3 }}>
      {[0, 1, 2, 3, 4].map((i) => <span key={i} style={{ color: 'var(--accent-on-dark)', fontSize: 14 }}>★</span>)}
    </div>;

  // Monogram tints drawn from the brand palette
  const tints = ['#46779b', '#e73645', '#597c93', '#5aa9ab', '#46779b', '#597c93'];
  const cards = [
  { name: 'Inge Moiweer', role: 'Founder, Ingeborg Moiweer',
    quote: 'Travis understands the big picture of how prospects move through your funnel, but he is also meticulous. If you don\u2019t have a reliable strategy for organic SEO, work with Travis.' },
  { name: 'Pankaj Bhardwaj', role: 'Director & CEO, YenDigital',
    quote: 'We were very impressed with the campaign strategy for Digital Transformation, AI, and Cloud Services Travis created. We believe we can begin implementing this plan in the first week of January\u2026 Following that, we\u2019ll also be able to create LinkedIn posts and other marketing assets for our website.' },
  { name: 'Chris Allen', role: 'CFO, Fondy Payments',
    quote: 'We did a lot better on the drip campaign than we could have done on our own. Travis knows how to figure out what our prospects want.' },
  { name: 'Maya Jaine', role: 'Founder, Tyrian',
    quote: '\u2026wonderful to work with. He listens to your concerns and is very attentive to detail. He understands our brand\u2019s tone and collaborated with me over multiple Zoom calls to understand our market, the nuances of my audience and clients. I\u2019m going to be working with him on an ongoing basis.' },
  { name: 'Diana Lora', role: 'Director, Bumi Express',
    quote: 'What he delivered was perfect and exactly what was needed.' },
  { name: 'Sultan Amin', role: 'Head of Business Development, CTG',
    quote: '\u2026really happy with the turnaround time and quality of your work. Thanks.' }];

  const initials = (n) => n.split(' ').map((w) => w[0]).slice(0, 2).join('');
  return (
    <section className="ink" style={{ padding: '120px 0', borderTop: '1px solid var(--rule-light)' }}>
      <div className="wrap">
        <SectionIntro
          onInk
          kicker="Receipts"
          title={<>What clients say after <em style={{ fontStyle: 'italic', color: 'var(--accent-on-dark)' }}>working with Travis.</em></>}
          sub="Six in their own words. Every engagement run directly by the operator behind this page." />
        
        <div className="tst-masonry">
          {cards.map((c, i) =>
          <figure key={i} className="soft-card-ink tst-card" style={{ margin: 0, padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 16, breakInside: 'avoid' }}>
              <Stars />
              <blockquote style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, color: 'var(--paper)' }}>{'\u201C'}{c.quote}{'\u201D'}</blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 4, borderTop: '1px solid var(--rule-light)', paddingTop: 18 }}>
                <span aria-hidden style={{
                width: 42, height: 42, borderRadius: '50%', flex: 'none',
                background: `color-mix(in oklab, ${tints[i]} 88%, transparent)`, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 15, letterSpacing: '0.01em'
              }}>{initials(c.name)}</span>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--paper)', letterSpacing: '-0.01em' }}>{c.name}</span>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.03em', color: 'var(--mute-on-ink)' }}>{c.role}</span>
                </span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

// ---------- Branded signal-feed panel (coded, illustrative — not a literal screenshot) ----------
const SignalPanel = () => {
  const rows = [
  { co: 'Northwind Pay', tag: 'Payments', sig: 'Raised Series B', kind: 'funding', state: 'queued' },
  { co: 'Ledgerline', tag: 'Lending', sig: 'Hiring VP Sales', kind: 'hiring', state: 'queued' },
  { co: 'Cohort Labs', tag: 'B2B SaaS', sig: 'Launched API', kind: 'product', state: 'scanning' },
  { co: 'Vaultry', tag: 'Fintech', sig: 'New CRO hire', kind: 'hiring', state: 'idle' },
  { co: 'Strunderwriting', tag: 'Insurtech', sig: 'No signal yet', kind: 'none', state: 'idle' }];

  const kindColor = { funding: 'var(--accent)', hiring: '#5aa9ab', product: '#46779b', none: 'var(--mute-on-ink)' };
  return (
    <div className="signal-panel" style={{
      background: 'var(--ink)', borderRadius: 20, border: '1px solid var(--rule-light)',
      boxShadow: '0 30px 70px rgba(27,55,85,0.28)', overflow: 'hidden',
      fontFamily: 'var(--sans)'
    }}>
      {/* Header bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '15px 18px', borderBottom: '1px solid var(--rule-light)' }}>
        <span style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--danger)' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#5aa9ab' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#46779b' }}></span>
        </span>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute-on-ink)', marginLeft: 4 }}>signal_feed.live</span>
        <span className="mono signal-live" style={{ marginLeft: 'auto', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-on-dark)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span className="signal-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent-on-dark)', display: 'inline-block' }}></span> Live
        </span>
      </div>
      {/* Column header */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1.3fr 0.9fr', gap: 10, padding: '11px 18px', borderBottom: '1px solid var(--rule-light)' }}>
        {['Account', 'In-market signal', 'Status'].map((h) =>
        <span key={h} className="mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute-on-ink)' }}>{h}</span>
        )}
      </div>
      {/* Rows */}
      <div>
        {rows.map((r, i) => {
          const fired = r.state === 'queued';
          return (
            <div key={i} className={fired ? 'signal-row fired' : 'signal-row'} style={{
              display: 'grid', gridTemplateColumns: '1.5fr 1.3fr 0.9fr', gap: 10, alignItems: 'center',
              padding: '15px 18px', borderBottom: i < rows.length - 1 ? '1px solid var(--rule-light)' : 'none',
              background: fired ? 'color-mix(in oklab, var(--accent) 12%, transparent)' : 'transparent',
              animationDelay: `${i * 0.12}s`
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--paper)', letterSpacing: '-0.01em' }}>{r.co}</span>
                <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--mute-on-ink)' }}>{r.tag}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', flex: 'none', background: kindColor[r.kind] }}></span>
                <span style={{ fontSize: 13, color: r.kind === 'none' ? 'var(--mute-on-ink)' : 'var(--paper)', opacity: r.kind === 'none' ? 0.7 : 1 }}>{r.sig}</span>
              </div>
              <div>
                {r.state === 'queued' && <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600, color: '#fff', background: 'var(--accent-deep)', padding: '4px 9px', borderRadius: 999, whiteSpace: 'nowrap' }}>✓ Queued</span>}
                {r.state === 'scanning' && <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent-on-dark)' }}>Scanning…</span>}
                {r.state === 'idle' && <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mute-on-ink)', opacity: 0.6 }}>Hold</span>}
              </div>
            </div>);

        })}
      </div>
      {/* Footer */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 18px', borderTop: '1px solid var(--rule-light)', background: 'rgba(0,0,0,0.15)' }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--mute-on-ink)' }}>2 of 574 accounts in-market today</span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--accent-on-dark)' }}>0 fabricated claims</span>
      </div>
    </div>);

};

// ---------- Image + text feature block (RF signature, with floating stat card) ----------
const FeatureBlock = ({ id, kicker, title, body, bullets, onInk, imageRight, slotLabel, stat, img, imgPos, media }) => {
  const Text =
  <div>
      <span className={onInk ? 'eyebrow-dot on-ink' : 'eyebrow-dot'}>{kicker}</span>
      <h2 className="display" style={{ fontSize: 'clamp(30px, 3.6vw, 50px)', margin: '18px 0 22px', letterSpacing: '-0.03em', lineHeight: 1.04, color: onInk ? 'var(--paper)' : 'var(--ink)', textWrap: 'balance' }}>{title}</h2>
      <p style={{ margin: '0 0 22px', fontSize: 18, lineHeight: 1.6, color: onInk ? 'var(--mute-on-ink)' : 'var(--mute)', maxWidth: 520 }}>{body}</p>
      {bullets &&
    <ul style={{ listStyle: 'none', margin: '0 0 30px', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {bullets.map((b, i) =>
      <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.5, color: onInk ? 'var(--paper)' : 'var(--ink)' }}>
              <span style={{ color: 'var(--accent)', fontWeight: 700, marginTop: 1, flex: 'none' }}>✓</span>{b}
            </li>
      )}
        </ul>
    }
      <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>;

  const Media =
  <div style={{ position: 'relative' }}>
      {media ?
    media :
    img ?
    <img src={img} alt="" style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', objectPosition: imgPos || 'center 30%', display: 'block', borderRadius: 20, border: onInk ? '1px solid var(--rule-light)' : '1px solid rgba(27,55,85,0.12)' }} data-comment-anchor="5b6a78da04-img-402-11" /> :
    <image-slot id={id} style={{ width: '100%', aspectRatio: '4/3', display: 'block', borderRadius: '20px', overflow: 'hidden', border: onInk ? '1px solid var(--rule-light)' : '1px solid rgba(27,55,85,0.12)' }} shape="rounded" radius="20" placeholder={slotLabel || 'Drop a photo'}></image-slot>}
      {stat &&
    <div className="feat-stat" style={{
      position: 'absolute', bottom: -18, left: imageRight ? 'auto' : -18, right: imageRight ? -18 : 'auto',
      background: '#fff', borderRadius: 16, padding: '18px 22px',
      boxShadow: '0 16px 40px rgba(27,55,85,0.18)', border: '1px solid rgba(27,55,85,0.08)',
      display: 'flex', flexDirection: 'column', gap: 4, minWidth: 150
    }}>
          <span style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 34, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--accent-deep)' }}>{stat.n}</span>
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mute)' }}>{stat.l}</span>
        </div>
    }
    </div>;

  return (
    <section className={onInk ? 'ink' : 'paper'} style={{ padding: '110px 0', borderTop: onInk ? '1px solid var(--rule-light)' : 'none' }}>
      <div className="wrap">
        <div className="feature-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
          {imageRight ? <>{Text}{Media}</> : <>{Media}{Text}</>}
        </div>
      </div>
    </section>);

};

// ---------- Scroll-to-top FAB ----------
const ScrollTopFab = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 1200);
    on();window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <button aria-label="Back to top" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{
      position: 'fixed', right: 22, bottom: 22, zIndex: 90,
      width: 52, height: 52, borderRadius: '50%',
      background: 'var(--accent)', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 10px 30px color-mix(in oklab, var(--accent) 45%, transparent)',
      opacity: show ? 1 : 0, transform: show ? 'translateY(0)' : 'translateY(12px)',
      pointerEvents: show ? 'auto' : 'none', transition: 'opacity 220ms, transform 220ms'
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 19V5M5 12l7-7 7 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
    </button>);

};

Object.assign(window, { CtaBand, Comparison, RoiCalculator, AfterBooking, Guarantee, Testimonials, ScrollTopFab, FeatureBlock, SignalPanel, IntentData });