// Bespoke standalone pages: case-studies, compare, integrations, personalization-paradox

const { SubHero: __SH, SubCTA: __SC, pageStyles: _ps } = window;

// ========================================================================
// /case-studies — ledger of brief records
// ========================================================================

const CASES = [
  {
    tag: '01 · Enrichment',
    h3: 'Three validated emails across 400 partner companies, into a working database.',
    situation: "A European tech distributor had 400 named partner companies in the CRM and three validated emails across the whole file. Partner marketing couldn't run. Channel outbound couldn't run. The list existed on paper and nowhere else.",
    move: 'Waterfall enrichment across the 400 accounts. Direct write-back into the CRM so nothing lived in a spreadsheet. Phone numbers validated separately. Turnaround measured in days, not quarters.',
    result: '474 verified emails, 445 decision makers, 404 phone numbers, 311 companies covered. Two weeks, start to finish.',
    stats: '3 → 474 emails · 311 companies · 2-week turnaround · direct CRM write-back'
  },
  {
    tag: '02 · Outbound',
    h3: 'Cold outbound that opened doors at Siemens, Bosch, and Universal Music.',
    situation: 'Enventive sells mechanical engineering software. Small team, large target accounts, long technical sales cycle. The ask was pipeline at named enterprises without a 10-person SDR floor to run it.',
    move: "Signal-based targeting against industry-specific events and product launches. Messaging written one-to-one, tied to the specific engineering problem each account was working through. Their case studies (including a 40% prototyping time reduction at Siemens) used as teaching material inside the sequences, not as marketing copy pasted into an email.",
    result: '8,500+ leads sourced against the target ICP. 3–5 qualified meetings per week on in-signal segments. Meetings with Siemens, Bosch, and Universal Music.',
    stats: '8,500+ leads sourced · 3–5 qualified meetings/wk · named enterprise access'
  },
  {
    tag: '03 · Migration',
    h3: 'Migrate the database. Clean it on the way over, not after.',
    situation: 'Most teams migrate a CRM, drag the bad records into the new system, and then spend six to twelve months cleaning. Post-migration cleanup typically runs $30,000 to $60,000 in labor, and the new platform inherits every missing field, every stale contact, every duplicate.',
    move: 'Enrichment runs as part of the migration itself. Records get validated, deduped, and filled before they land in the destination CRM. The new instance starts clean. Old cleanup budget disappears with it.',
    result: '70%+ fill rate on accounts that had sub-40% coverage before migration. Cleanup work that usually takes 6–12 months, eliminated. Sales team productive in the new system from week one instead of week thirty.',
    stats: '70%+ fill at go-live · $30K–60K cleanup avoided · productive from week one'
  }
];

const CaseStudies = () => (
  <React.Fragment>
    <SubHero
      eyebrow="Case studies"
      h2Line1="Real engagements."
      h2Line2="Specific numbers."
      body={`Short briefs from work we've actually shipped. The situation we walked into, the move we made, the result that came out of it. No "increased pipeline." Either the number is real or the brief doesn't exist. When we can't name the client, we describe them enough that it's clear we're not making it up.`}
      sig="If a claim can't be verified, it isn't on this page."
    />
    <section style={{background:'var(--paper)', padding:'80px 0', borderBottom:'1px solid var(--rule)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px'}}>
        {CASES.map((c, i) => (
          <article key={i} style={{
            display:'grid', gridTemplateColumns:'200px 1fr', gap:60,
            padding:'64px 0',
            borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
            borderBottom:'1px solid var(--rule)'
          }} className="case-row">
            <div style={{position:'sticky', top:100, alignSelf:'start'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)'}}>
                {c.tag}
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize:96, fontWeight:300, lineHeight:1, letterSpacing:'-0.03em', color:'var(--rule)', marginTop:16}}>
                {String(i+1).padStart(2,'0')}
              </div>
            </div>
            <div>
              <h2 style={{fontFamily:'var(--serif)', fontSize:34, lineHeight:1.18, fontWeight:400, letterSpacing:'-0.02em', margin:'0 0 32px', maxWidth:720}}>
                {c.h3}
              </h2>
              <p style={{fontFamily:'var(--sans)', fontSize:18, lineHeight:1.65, color:'var(--ink-2)', margin:'0 0 18px', maxWidth:680}}>
                <strong style={{fontWeight:600, color:'var(--ink-1)'}}>Situation.</strong> {c.situation}
              </p>
              <p style={{fontFamily:'var(--sans)', fontSize:18, lineHeight:1.65, color:'var(--ink-2)', margin:'0 0 18px', maxWidth:680}}>
                <strong style={{fontWeight:600, color:'var(--ink-1)'}}>Move.</strong> {c.move}
              </p>
              <p style={{fontFamily:'var(--sans)', fontSize:18, lineHeight:1.65, color:'var(--ink-2)', margin:'0 0 32px', maxWidth:680}}>
                <strong style={{fontWeight:600, color:'var(--ink-1)'}}>Result.</strong> {c.result}
              </p>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', color:'var(--ink-3)', paddingTop:20, borderTop:'1px solid var(--rule)'}}>
                {c.stats}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
    <section style={{background:'var(--bone)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px', display:'grid', gridTemplateColumns:'260px 1fr', gap:80}} className="two-col">
        <div style={{position:'sticky', top:100, alignSelf:'start'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
            <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)'}}/>The pattern
          </div>
          <h2 style={{fontFamily:'var(--serif)', fontSize:40, lineHeight:1.08, letterSpacing:'-0.02em', fontWeight:400, margin:0}}>
            The first conversation is usually about data.
          </h2>
        </div>
        <div>
          <p style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.55, color:'var(--ink-2)', margin:0}}>
            Every one of these started the same way. Someone looked at the CRM, saw that most of the fields were empty, and realized outbound couldn't run on what was there. The enrichment was step one. The outbound was whatever made sense after that. Sometimes it was signal-based sequences. Sometimes it was cleaning the migration. Sometimes it was both. The common thread is that the list came first and the messaging came second.
          </p>
          <div style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em', color:'var(--ink-3)', marginTop:32, lineHeight:1.7}}>
            ↳ The list is the message. The CRM is how the list gets built.
          </div>
        </div>
      </div>
    </section>
    <SubCTA
      h2Line1="Want to see what your CRM looks like from this side?"
      h2Line2="Thirty minutes, live."
      body="Screen-share, live walkthrough, written report inside 24 hours. If your situation looks like one of these, we'll say so. If it doesn't, we'll say that too."
    />
  </React.Fragment>
);

// ========================================================================
// /compare — honest comparisons
// ========================================================================

const COMPARISONS = [
  {
    tag: '01 · vs. data tools',
    anchor: 'Apollo, ZoomInfo, Cognism, Clearbit',
    h3: "A list isn't a pipeline.",
    what: 'Apollo, ZoomInfo, Cognism, and Clearbit each sell large contact databases with decent coverage in their own sweet spot. Apollo and ZoomInfo are strong in North American B2B. Cognism is strong on GDPR-compliant European data. Clearbit is strong on tech-stack signals. If the job is a single-source contact list, any of them can give you one.',
    where: 'We use all of them inside an enrichment waterfall, not instead of them. Single-source data typically covers 40–50% of a target list. A waterfall across multiple providers gets to 70%+. And once the list is built, we run the strategy, targeting, and messaging on top of it. The tool is the floor. The pipeline is the building.',
    verdict: 'if you need a list, buy a tool. if you need pipeline, run the stack.'
  },
  {
    tag: '02 · vs. Clay agencies',
    anchor: 'most Clay agencies',
    h3: "Workflows don't book meetings. Conversations do.",
    what: 'Most Clay agencies build workflows. They set up tables, wire providers together, configure enrichment logic, and hand the keys back. For a team that already has targeting, messaging, and deliverability dialed in, that\'s genuinely useful. The implementation is the product.',
    where: "Clay is one of the tools in our stack, not the whole engagement. Tool implementation is maybe 20% of the outbound problem. Strategy, signal selection, ICP mapping, human-written sequences, deliverability setup, and CRM write-back are the other 80%. We're a Clay Bootcamp graduate and we run Clay every day. But the pipeline is what gets built on top.",
    verdict: 'if you want a clay table, hire a claygency. if you want the conversation clay is supposed to produce, run the whole motion.'
  },
  {
    tag: '03 · vs. BPO enrichment',
    anchor: 'BPO enrichment firms',
    h3: 'Volume without strategy is just expensive data storage.',
    what: "BPO enrichment firms can append data across millions of records. The pricing is aggressive, the throughput is real, and for a team that genuinely has a volume problem, they're the right call. If you're buying an acquired database and need every row touched, a BPO can do that at scale.",
    where: "The problem isn't usually volume. It's that enriched records without a strategy sit in the CRM doing nothing. We enrich against a target ICP, not against the whole database. Then we write back into the CRM in the exact fields the sales team already uses, and build the outbound motion that turns those records into conversations.",
    verdict: 'if you have a million rows that just need fields filled, BPO. if you have 5,000 rows that need to turn into pipeline, us.'
  },
  {
    tag: '04 · vs. in-house SDR team',
    anchor: 'an in-house SDR team',
    h3: 'Direct control is real, but ramp is real too.',
    what: "An in-house SDR team sits in your Slack, reports to your leadership, and learns your product inside-out. For a company with a stable ICP, a repeatable pitch, and the patience to ramp, it's a durable investment. The control and the institutional knowledge are genuinely worth something.",
    where: "We're the path before the hire, or alongside it. A new SDR takes about 3 months to fill the seat and another 3 to 6 to ramp. Meanwhile, the pipeline problem is already live. We build the list, set up deliverability, write the sequences, and run the motion while the team is getting hired, or instead of hiring if the volume doesn't justify a full seat yet.",
    verdict: 'hire the team when the motion is proven. run this to prove the motion.'
  }
];

const Compare = () => (
  <React.Fragment>
    <SubHero
      eyebrow="Compare"
      h2Line1="Honest comparisons."
      h2Line2="No competitor bashing."
      body="Every option on this page has real merit. The data tools have billions of records. The Clay agencies build fast. The BPO firms enrich at volume. An in-house team gives you direct control. None of them are wrong answers. They're just answers to different questions. This page is about where we fit, where someone else fits better, and what the actual differences are so you can make the right call."
      sig="If the audit shows you don't need us, we'll say so."
    />
    <section style={{background:'var(--paper)', padding:'80px 0', borderBottom:'1px solid var(--rule)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px'}}>
        {COMPARISONS.map((c, i) => (
          <article key={i} style={{
            padding:'72px 0',
            borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
            borderBottom:'1px solid var(--rule)'
          }}>
            <div style={{display:'grid', gridTemplateColumns:'220px 1fr', gap:60}} className="two-col">
              <div>
                <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)', marginBottom:16}}>
                  {c.tag}
                </div>
                <div style={{fontFamily:'var(--sans)', fontSize:14, lineHeight:1.5, color:'var(--ink-3)', fontStyle:'italic'}}>
                  vs. {c.anchor}
                </div>
              </div>
              <div>
                <h2 style={{fontFamily:'var(--serif)', fontSize:38, lineHeight:1.15, fontWeight:400, letterSpacing:'-0.02em', margin:'0 0 36px', maxWidth:720}}>
                  {c.h3}
                </h2>
                <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:48}} className="compare-cols">
                  <div>
                    <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:12}}>
                      What they do
                    </div>
                    <p style={{fontFamily:'var(--sans)', fontSize:16, lineHeight:1.65, color:'var(--ink-2)', margin:0}}>
                      {c.what}
                    </p>
                  </div>
                  <div>
                    <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12}}>
                      Where we fit
                    </div>
                    <p style={{fontFamily:'var(--sans)', fontSize:16, lineHeight:1.65, color:'var(--ink-2)', margin:0}}>
                      {c.where}
                    </p>
                  </div>
                </div>
                <div style={{marginTop:40, paddingTop:20, borderTop:'1px solid var(--rule)', fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em', color:'var(--ink-1)', lineHeight:1.6}}>
                  <span style={{color:'var(--accent)'}}>·</span> {c.verdict}
                </div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
    <section style={{background:'var(--bone)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px', display:'grid', gridTemplateColumns:'260px 1fr', gap:80}} className="two-col">
        <div style={{position:'sticky', top:100, alignSelf:'start'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
            <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)'}}/>Not a fit
          </div>
          <h2 style={{fontFamily:'var(--serif)', fontSize:40, lineHeight:1.08, letterSpacing:'-0.02em', fontWeight:400, margin:0}}>
            We'll tell you if it's not a fit.
          </h2>
        </div>
        <div>
          <p style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.55, color:'var(--ink-2)', margin:0}}>
            If the ICP isn't defined, enrichment won't save it. If the product doesn't have a clear wedge, better targeting won't invent one. If the goal is 50,000 sends a month, we're the wrong shop. If the CRM is a mess and leadership isn't willing to fix it, no amount of outbound tooling will stick. The free audit usually tells us within the first 20 minutes whether this is the right engagement or whether someone else fits better. We'll say so on the call.
          </p>
          <div style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em', color:'var(--ink-3)', marginTop:32, lineHeight:1.7}}>
            ↳ A bad fit for us is a worse fit for you.
          </div>
        </div>
      </div>
    </section>
    <SubCTA
      h2Line1="Audit the CRM first."
      h2Line2="Decide the vendor second."
      body="Screen-share, live walkthrough, written report inside 24 hours. We'll tell you honestly whether we're the right fit, whether a tool is, or whether you need to hire."
    />
  </React.Fragment>
);

// ========================================================================
// /integrations — three lists: CRMs, providers, outreach platforms
// ========================================================================

const Integrations = () => {
  const Row = ({ name, body, tags }) => (
    <div style={{display:'grid', gridTemplateColumns:'200px 1fr', gap:40, padding:'28px 0', borderTop:'1px solid var(--rule)'}} className="int-row">
      <div style={{fontFamily:'var(--serif)', fontSize:24, fontWeight:500, letterSpacing:'-0.01em', color:'var(--ink-1)'}}>
        {name}
      </div>
      <div>
        <p style={{fontFamily:'var(--sans)', fontSize:17, lineHeight:1.6, color:'var(--ink-2)', margin:'0 0 14px', maxWidth:720}}>
          {body}
        </p>
        <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', color:'var(--ink-3)'}}>
          {tags}
        </div>
      </div>
    </div>
  );

  const Section = ({ eyebrow, h2, intro, rows, last }) => (
    <section style={{background:'var(--paper)', padding:'80px 0', borderBottom: last ? '1px solid var(--rule)' : '1px solid var(--rule)'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px'}}>
        <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
          <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)'}}/>{eyebrow}
        </div>
        <h2 style={{fontFamily:'var(--serif)', fontSize:40, lineHeight:1.08, letterSpacing:'-0.02em', fontWeight:400, margin:'0 0 24px', maxWidth:720}}>
          {h2}
        </h2>
        {intro && <p style={{fontFamily:'var(--serif)', fontSize:19, lineHeight:1.6, color:'var(--ink-2)', margin:'0 0 32px', maxWidth:720}}>{intro}</p>}
        <div style={{borderBottom:'1px solid var(--rule)'}}>
          {rows.map((r, i) => <Row key={i} {...r}/>)}
        </div>
      </div>
    </section>
  );

  return (
    <React.Fragment>
      <SubHero
        eyebrow="Integrations"
        h2Line1="Connects to the systems you already run."
        h2Line2="No CSVs."
        body="Enrichment writes back directly into your CRM through the API. Outbound runs on the sending platforms your team already uses. Data comes from the providers you'd expect. Nothing exotic, nothing that requires a new subscription you don't already have. The list below is what we actually connect to, not what we could theoretically connect to."
        sig="If it has an API, we can probably wire it in. Ask on the audit."
      />
      <Section
        eyebrow="CRMs we write back to"
        h2="The fields your team already uses."
        rows={[
          { name:'Dynamics 365', body:'Native Dataverse write-back. Custom entities and standard tables. Power Automate compatible for downstream workflows.', tags:'Dataverse API · custom entities · Power Automate' },
          { name:'Salesforce', body:'Direct API write-back to your org. Standard and custom objects. Respects duplicate management rules and validation logic. Built for large databases and complex orgs.', tags:'REST API · custom objects · dedup rules respected' },
          { name:'HubSpot', body:"Works across all tiers. Fills the fields HubSpot's built-in tools miss, costs less per record than Breeze Intelligence, and plugs into Operations Hub workflows.", tags:'all tiers · Operations Hub · lower cost than Breeze' },
          { name:'Other CRMs', body:"If you're running Pipedrive, Close, Copper, or anything with a working API, we can usually connect. The audit is the fastest way to find out.", tags:'audit first · API-dependent' }
        ]}
      />
      <Section
        eyebrow="Where the data comes from"
        h2="Ten-plus providers. One validated record out the other end."
        intro="Single-source coverage tops out around 40–50%. A waterfall gets to 70%+ by running the same record through several providers in sequence, using the first valid match for each field. Cost per record stays around $0.10 because most providers only charge when they're the one who returns the answer."
        rows={[
          { name:'Apollo', body:'Large North American B2B database. Strong on job titles, direct dials, and department mapping.', tags:'NA B2B · titles · direct dials' },
          { name:'ZoomInfo', body:'Deep coverage on US mid-market and enterprise. Strong technographic and org-chart data.', tags:'US mid-market + enterprise · technographic' },
          { name:'Cognism', body:"Best GDPR-compliant European database we've found. Used when the target list is EMEA-heavy.", tags:'GDPR-compliant · EMEA' },
          { name:'Clearbit', body:'Tech-stack signals and firmographic enrichment. Useful for ICP scoring and signal filtering.', tags:'tech-stack · firmographic' },
          { name:'Clay', body:'The orchestration layer the waterfall runs on. Clay Bootcamp graduate. Table-level logic, provider chaining, signal enrichment.', tags:'waterfall engine · signal enrichment' },
          { name:'Others rotated in', body:'LeadMagic, Hunter, Dropcontact, Prospeo, ContactOut. Each one fills gaps the others miss, which is the whole reason a waterfall works.', tags:'fill-the-gaps · per-field routing' }
        ]}
      />
      <Section
        eyebrow="Where sequences run"
        h2="Inbox-first, not spray-first."
        rows={[
          { name:'Instantly', body:'Primary sending platform for multi-domain cold outbound. Strong deliverability tooling, good warmup, flexible sequence logic.', tags:'multi-domain · warmup · deliverability tools' },
          { name:'SmartLead', body:'Secondary platform for engagements where the client already runs it. Same sequence capabilities, different deliverability mechanics.', tags:'client-preferred alternative' },
          { name:'HeyReach', body:'LinkedIn outbound when the motion is multi-channel. Used in parallel with email, not as a replacement.', tags:'linkedin · multi-channel' },
          { name:'CRM-native sequences', body:'Salesforce Cadences, HubSpot Sequences, Dynamics Sales Accelerator. Used when the AE team already lives in the CRM and a separate tool would fragment visibility.', tags:'in-CRM when it fits' }
        ]}
      />
      <section style={{background:'var(--bone)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
        <div style={{maxWidth:1200, margin:'0 auto', padding:'0 40px', display:'grid', gridTemplateColumns:'260px 1fr', gap:80}} className="two-col">
          <div style={{position:'sticky', top:100, alignSelf:'start'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
              <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)'}}/>Wired together
            </div>
            <h2 style={{fontFamily:'var(--serif)', fontSize:36, lineHeight:1.08, letterSpacing:'-0.02em', fontWeight:400, margin:0}}>
              One list, one cadence, one CRM record.
            </h2>
          </div>
          <div>
            <p style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.55, color:'var(--ink-2)', margin:0}}>
              Clay orchestrates the waterfall. Records come out validated and enriched. They write back into Dynamics, Salesforce, or HubSpot in the exact fields the sales team already uses. Instantly or SmartLead runs the sequences on dedicated sending domains. Replies route back into the CRM thread. The whole thing sits on infrastructure we set up during onboarding and verify weekly. No spreadsheets between steps. No re-imports.
            </p>
            <div style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em', color:'var(--ink-3)', marginTop:32, lineHeight:1.7}}>
              ↳ The audit includes a live look at how this would plug into your stack.
            </div>
          </div>
        </div>
      </section>
      <SubCTA
        h2Line1="See what plugs in, live."
        h2Line2="Thirty minutes on your CRM."
        body="Screen-share, live walkthrough, written report inside 24 hours. We'll map what the waterfall would look like against your exact stack."
      />
    </React.Fragment>
  );
};

// ========================================================================
// /personalization-paradox — magazine long-read
// ========================================================================

const TOC = [
  { n:'I', title:'The noise got deafening' },
  { n:'II', title:'Three models still burning money' },
  { n:'III', title:'The shared mistake' },
  { n:'IV', title:'What the work actually looks like' },
  { n:'V', title:'A quieter kind of outbound' },
  { n:'VI', title:'The alternative' }
];

const PullQuote = ({ children, align = 'left' }) => (
  <blockquote style={{
    fontFamily:'var(--serif)',
    fontSize:26, lineHeight:1.35, fontStyle:'italic',
    color:'var(--accent)', fontWeight:400, letterSpacing:'-0.01em',
    margin:'48px 0', padding: align === 'center' ? '20px 0' : '20px 0 20px 28px',
    borderLeft: align === 'center' ? 'none' : '3px solid var(--accent)',
    textAlign: align === 'center' ? 'center' : 'left',
    textWrap:'balance'
  }}>
    {children}
  </blockquote>
);

const EssaySection = ({ num, title, children }) => (
  <section id={`sec-${num}`} style={{padding:'56px 0', borderTop:'1px solid var(--rule)'}}>
    <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--accent)', marginBottom:16}}>
      {num} &middot;
    </div>
    <h2 style={{fontFamily:'var(--serif)', fontSize:36, lineHeight:1.15, fontWeight:400, letterSpacing:'-0.02em', margin:'0 0 36px', textWrap:'balance'}}>
      {title}
    </h2>
    {children}
  </section>
);

const P = ({ children }) => (
  <p style={{fontFamily:'var(--serif)', fontSize:20, lineHeight:1.65, color:'var(--ink-1)', margin:'0 0 24px'}}>{children}</p>
);

const H3 = ({ children }) => (
  <h3 style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.3, fontWeight:500, fontStyle:'italic', letterSpacing:'-0.01em', margin:'36px 0 16px', color:'var(--ink-1)'}}>{children}</h3>
);

const PersonalizationParadox = () => {
  React.useEffect(() => {
    // Highlight active TOC entry
    const onScroll = () => {
      const sections = TOC.map(t => document.getElementById(`sec-${t.n}`)).filter(Boolean);
      let active = null;
      for (const s of sections) {
        if (s.getBoundingClientRect().top < 200) active = s.id;
      }
      document.querySelectorAll('[data-toc]').forEach(el => {
        el.style.color = el.getAttribute('data-toc') === active ? 'var(--accent)' : 'var(--ink-3)';
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <React.Fragment>
      <section style={{background:'var(--paper)', padding:'160px 0 80px', borderBottom:'1px solid var(--rule)'}}>
        <div style={{maxWidth:720, margin:'0 auto', padding:'0 40px'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', display:'flex', alignItems:'center', gap:10, marginBottom:32}}>
            <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)'}}/>Essay · conceptoutbound.com
          </div>
          <div style={{fontFamily:'var(--serif)', fontSize:18, fontStyle:'italic', color:'var(--ink-3)', margin:'0 0 24px'}}>
            On what broke, and what didn't.
          </div>
          <h1 style={{fontFamily:'var(--serif)', fontSize:'clamp(48px, 6vw, 72px)', lineHeight:1.05, letterSpacing:'-0.025em', fontWeight:400, margin:'0 0 28px', textWrap:'balance'}}>
            The personalization paradox.
          </h1>
          <p style={{fontFamily:'var(--serif)', fontSize:24, fontStyle:'italic', lineHeight:1.45, color:'var(--ink-2)', margin:'0 0 40px', fontWeight:400}}>
            We tried to scale the one part of cold email that doesn't scale. The inbox noticed.
          </p>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', paddingTop:20, paddingBottom:20, borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)'}}>
            Travis Ross · operator, Concept Outbound · 2026 · ~12 min read
          </div>
        </div>
      </section>

      <section style={{background:'var(--paper)', padding:'40px 0 120px'}}>
        <div style={{maxWidth:1040, margin:'0 auto', padding:'0 40px', display:'grid', gridTemplateColumns:'180px 1fr', gap:80}} className="essay-grid">
          <aside style={{position:'sticky', top:100, alignSelf:'start'}} className="essay-toc">
            <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:20}}>
              Contents
            </div>
            {TOC.map(t => (
              <a key={t.n} href={`#sec-${t.n}`} data-toc={`sec-${t.n}`} style={{
                display:'block', fontFamily:'var(--mono)', fontSize:10,
                letterSpacing:'0.1em', textTransform:'uppercase',
                color:'var(--ink-3)', textDecoration:'none',
                padding:'8px 0', transition:'color 200ms'
              }}>
                {t.n} · {t.title}
              </a>
            ))}
          </aside>

          <article style={{maxWidth:680}}>
            <EssaySection num="I" title="The noise got deafening, and that was the point">
              <P>Response rates on cold email used to sit somewhere around three to five percent for a reasonably good campaign. Today a lot of teams would call one percent a win. Reps spend roughly a third of their week actually selling. The rest goes to research, admin, tools that don't talk to each other, and sequences that never should have been sent in the first place.</P>
              <P>If it feels like you're running faster to stay in the same place, you're not imagining it. The inbox economy changed under you.</P>
              <P>The popular diagnosis is that AI ruined cold email. That's partly right and mostly not. What actually happened is more specific. We took the one thing in outbound that never scaled, the human effort of writing a message to a real person, and tried to industrialize it with first-generation AI. The machine wrote faster than any team could, at volumes nobody asked for, with a level of fluency that got past every spam filter and landed directly in a human's attention span.</P>
              <P>The inbox defended itself. Not with filters. With people. Buyers learned to pattern-match faster than the tools could adapt. A sophisticated reader knows the shape of an AI sequence within the first line. Once they know, the whole send is dead before it's read. Not deleted. Not unsubscribed. Just ignored at a scale no unsubscribe rate captures.</P>
              <PullQuote>"We took the one thing in outbound that never scaled, and tried to industrialize it."</PullQuote>
              <P>The paradox sits right there. The tools that promised to make outreach more personal made every outreach more generic. Personalization tokens at scale are not personalization. They're the ghost of it. Everybody gets a message that technically mentions their company, and nobody gets a message that means anything.</P>
              <P>This isn't a slump. It isn't a cycle. It's a systemic shift in what a cold inbox is willing to tolerate. And the old playbooks, the ones written when response rates were forgiving, can't be tuned back into the new environment. They were built for a different inbox.</P>
            </EssaySection>

            <EssaySection num="II" title="Three models that are still burning money">
              <P>Most outbound today runs on one of three setups. Each one fails in a specific way. If any of these sound familiar, the frustration isn't your team's fault. The model was broken before the first email was sent.</P>
              <H3>The in-house team, expensively slow</H3>
              <P>The default for a company that can afford it is to hire. One SDR, then two, then three. Full control, direct culture, institutional knowledge. That's the theory.</P>
              <P>The numbers tell a different story. A new SDR takes about three months to fill and another three to six to ramp. Fully loaded cost per seat, once salary, benefits, tools, and management overhead are counted, runs high. And when those reps actually sit down to work, studies put their active selling time at around twenty-eight percent of the week. Roughly a third of the remaining time goes to deciding who to even target. The rest dissolves into admin.</P>
              <P>You're paying enterprise prices for boutique output. The model works if the ICP is stable, the pitch is repeatable, and leadership has the patience to ramp. For everyone else, it's a slow, expensive way to discover you needed a targeting layer before you needed another headcount.</P>
              <H3>The black-box agency, stale by design</H3>
              <P>When the hire doesn't pencil out, the usual next move is an agency. Retainer per month, promise of meetings, hands-off experience. Leads start arriving within a few weeks.</P>
              <P>The leads are the problem. Purchased and non-exclusive lists get sold to ten other companies buying the same service from the same vendor. Manually built lists, the ones your team would have built for itself, close at a rate several times higher than bought ones. The agency's messaging is templated by necessity, because that's how the retainer math works. And because the send volumes are high, the sender reputation that took you years to build on your primary domain is now being rented to a third party who has no stake in protecting it.</P>
              <PullQuote>"Purchased lists close at a fraction of the rate of lists you'd have built yourself. The agency math depends on you not noticing."</PullQuote>
              <P>The agency model isn't always wrong. It's wrong when it's sold as a strategy. A retainer doesn't buy you positioning. It buys you activity. Activity without strategy is just a more efficient way to waste attention.</P>
              <H3>The robotic-AI model, scale without signal</H3>
              <P>The most recent wave is AI-native outbound. Spin up an agent, point it at an ICP, let it send. The promise is infinite scale. The reality is a slightly better-dressed version of mass email.</P>
              <P>First-generation AI tools tend to generate what experienced buyers immediately clock as a feature dump with a personalization garnish. The subject lines are gimmicky. The openers reference something technically true and contextually meaningless. And because the cost per send is near zero, the output floods an inbox that was already suspicious.</P>
              <P>The mistake is philosophical. The tools assume the inbox is a math problem. It isn't. It's a human filter. The more you send, the sharper that filter gets. Volume doesn't defeat relevance. It trains the reader against you.</P>
              <P>What AI is genuinely good at is research. Reading a LinkedIn profile, parsing a company's recent news, finding the signal buried in public data. That's the part of outbound that used to burn a rep's whole morning. If AI does that part, and a human writes the sentence that lands on it, the economics change. The tool becomes an assistant, not a sender.</P>
            </EssaySection>

            <EssaySection num="III" title="The shared mistake">
              <P>All three models fail for the same reason. They treat outbound as a volume problem.</P>
              <P>It isn't. It never was. Volume is what you do when you don't know who to talk to. When you know, volume becomes irrelevant. Ten messages to the right ten people beats ten thousand to a hand-waved ICP, every time, on every metric that matters.</P>
              <P>The market doesn't reward whoever shouts loudest. It rewards whoever is sharpest. Whoever shows up at the moment the prospect's own situation has already made them curious. Whoever references the specific thing that changed, the specific decision that's on the table, the specific question the buyer is already asking themselves.</P>
              <PullQuote align="center">"Ten messages to the right ten people beats ten thousand to a hand-waved ICP, every time, on every metric that matters."</PullQuote>
              <P>The word for this isn't personalization. Personalization is what you call it when the token got inserted. The word is relevance. And relevance has a different cost structure. You can't manufacture it by running prompts at scale. You earn it by knowing which signals matter, watching for them, and writing to the one human the signal identifies.</P>
            </EssaySection>

            <EssaySection num="IV" title="What the work actually looks like">
              <P>The Concept Outbound method is a short answer to a long problem. It has three pieces, and they belong in this order.</P>
              <P>First, the list. Not the CRM export. An actual target list, built from observable signals that say the account is in-market right now. New leadership in the role that owns the problem you solve. A funding round that unlocks budget. A stack change that creates a new integration point. A hire that implies a roadmap. These aren't guesses. They're events in the world that a real person can confirm, one prospect at a time.</P>
              <P>Second, the message. Written by a human. Not a human editing an AI draft. A human who has read the signal, understood what it means for this specific account, and written one sentence that earns the second sentence. AI does the research underneath. A person does the sending.</P>
              <P>Third, the infrastructure. Dedicated sending domains, warmed for two to three weeks before the first cold email ships, verified weekly against seed lists, operated separately from the primary domain so the brand never takes the hit. Inbox placement around ninety-five percent because the delivery side of the equation is a technical problem with a technical answer, not a personalization problem.</P>
              <P>That's the method. Signal, message, delivery. In that order, with that discipline. None of the three is new. What's rare is running all three at the same time, for the same account, with the same care.</P>
            </EssaySection>

            <EssaySection num="V" title="A quieter kind of outbound">
              <P>A working outbound motion doesn't feel like the slot machine most teams have come to expect. There's no wall of sends, no dashboard of vanity metrics, no quarterly panic when numbers drop. There's a smaller list, slower sequences, more one-to-one research, fewer but better conversations.</P>
              <P>That's the exchange. Volume for relevance. Noise for signal. Scale for sharpness.</P>
              <P>A VP of Sales reading this is doing the math on what that means for their team. It means fewer SDRs running hotter, not more SDRs running cold. It means a RevOps lead who owns the signal pipeline and the CRM write-back, not a stack of tools none of which talk to each other. It means the primary domain stays clean, the sender reputation compounds, and the pipeline that gets built on top of it holds up over time.</P>
              <PullQuote>"Volume for relevance. Noise for signal. Scale for sharpness."</PullQuote>
              <P>The companies that made this shift in the last eighteen months aren't shouting about it. They're the ones whose reply rates went back up while everyone else's kept falling. They stopped running the old playbook before the old playbook finished collapsing. Nothing they did was clever. They just stopped pretending the inbox hadn't changed.</P>
            </EssaySection>

            <EssaySection num="VI" title="The alternative is the Concept Outbound method">
              <P>If any of this lands, the next step is a thirty-minute conversation. I'll look at the CRM, size the signals that actually work for your market, and tell you honestly whether the method fits. If it doesn't, I'll say so and point you at what does.</P>
              <P>The detail of the engagement lives on the <a href="#/services" style={{color:'var(--accent)'}}>services</a> page. The comparisons, including where we're not the right call, live on <a href="#/compare" style={{color:'var(--accent)'}}>compare</a>. And if it's easier to just talk, the calendar is here.</P>
              <div style={{fontFamily:'var(--mono)', fontSize:13, letterSpacing:'0.02em', color:'var(--ink-2)', marginTop:40, paddingTop:24, borderTop:'1px solid var(--rule)', lineHeight:1.7}}>
                ↳ <a href="https://cal.com/travisross/15min" target="_blank" rel="noopener" style={{color:'var(--accent)'}}>Book a thirty-minute call.</a> Or email travis@conceptoutbound.com.
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize:18, fontStyle:'italic', color:'var(--ink-2)', textAlign:'right', marginTop:48, lineHeight:1.5}}>
                Travis Ross<br/>
                Concept Outbound
              </div>
            </EssaySection>
          </article>
        </div>
      </section>
    </React.Fragment>
  );
};

Object.assign(window, { CaseStudies, Compare, Integrations, PersonalizationParadox });
