// find-graphics.jsx — Evercap "Find" stage collateral graphics.
// Same system as the website process section: forest ground, brass accents,
// EB Garamond serif + Archivo sans + IBM Plex Mono data labels. Mountain mark
// from mountains.jsx. Each graphic is a 1280×800 artboard-ready component.

const FG = {
  forest:'#143D2E', pine:'#0E2A20', night:'#091A13',
  brass:'#B0894C', brassLt:'#C9A86A', cream:'#F5F2EA', sage:'#DCE3D8',
  line:'rgba(245,242,234,0.14)', line2:'rgba(245,242,234,0.22)',
  dim:'rgba(245,242,234,0.62)', dim2:'rgba(245,242,234,0.78)',
  card:'rgba(245,242,234,0.045)', card2:'rgba(245,242,234,0.07)',
  serif:'"EB Garamond", Georgia, serif',
  sans:'"Archivo", system-ui, sans-serif',
  mono:'"IBM Plex Mono", ui-monospace, monospace',
};
const FG_BG = 'radial-gradient(120% 90% at 90% 6%, rgba(176,137,76,0.16), rgba(176,137,76,0) 52%), '+FG.forest;

function Check({ c = '#C9A86A', s = 16 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M3.5 8.4l3 3 6-6.8" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Shared frame: forest ground + brass glow, header (stage/eyebrow/title), body, footer.
function Frame({ stage, title, children, footer, footStat, bare }) {
  if (bare) {
    return (
      <div style={{ width:'100%', height:'100%', background:'transparent', fontFamily:FG.sans, color:FG.cream,
        padding:0, display:'flex', flexDirection:'column', boxSizing:'border-box', overflow:'hidden' }}>
        {title && <h3 style={{ fontFamily:FG.serif, fontWeight:500, fontSize:40, lineHeight:1.05,
          letterSpacing:'-0.015em', margin:'0 0 30px', color:FG.cream, maxWidth:'24ch' }}>{title}</h3>}
        <div style={{ flex:1, display:'flex', minHeight:0 }}>{children}</div>
      </div>
    );
  }
  return (
    <div style={{ width:'100%', height:'100%', background: FG_BG,
      fontFamily:FG.sans, color:FG.cream, padding:'52px 60px 46px',
      display:'flex', flexDirection:'column', boxSizing:'border-box', overflow:'hidden' }}>
      {/* header */}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:30 }}>
        <div>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
            <span style={{ width:38, height:1.5, background:FG.brass }} />
            <span style={{ fontFamily:FG.mono, fontSize:12, fontWeight:500, letterSpacing:'0.18em',
              textTransform:'uppercase', color:FG.brassLt }}>{stage}</span>
          </div>
          <h3 style={{ fontFamily:FG.serif, fontWeight:500, fontSize:42, lineHeight:1.05,
            letterSpacing:'-0.015em', margin:0, color:FG.cream, maxWidth:'22ch' }}>{title}</h3>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:11, flexShrink:0, paddingTop:4 }}>
          <span style={{ fontFamily:FG.serif, fontSize:23, fontWeight:600, color:FG.cream, opacity:0.9 }}>Evercap</span>
          <span style={{ fontFamily:FG.sans, fontSize:8.5, fontWeight:600, color:FG.brassLt,
            letterSpacing:'0.4em', textTransform:'uppercase' }}>Advisors</span>
        </div>
      </div>
      {/* body */}
      <div style={{ flex:1, display:'flex', minHeight:0, marginTop:34 }}>{children}</div>
      {/* footer */}
      {footer && (
        <div style={{ borderTop:`1px solid ${FG.line}`, paddingTop:18, marginTop:24,
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:40 }}>
          <p style={{ margin:0, fontSize:14.5, lineHeight:1.55, color:FG.dim, maxWidth:'70ch' }}>{footer}</p>
          {footStat && (
            <div style={{ flexShrink:0, textAlign:'right' }}>
              <div style={{ fontFamily:FG.serif, fontSize:40, fontWeight:600, color:FG.brassLt, lineHeight:1 }}>{footStat[0]}</div>
              <div style={{ fontFamily:FG.mono, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase',
                color:FG.dim, marginTop:5 }}>{footStat[1]}</div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ============================ A — MOSAIC ENGINE ============================ */
const SOURCES = ['PitchBook','ZoomInfo','Crunchbase','Apollo.io','CB Insights','Grata','SourceScrub',
  'Clearbit','Dealroom','Harmonic.ai','Owler','RocketReach','People Data Labs','SimilarWeb','HG Insights',
  'Cyndx','Crustdata','Demandbase','Explorium','LeadMagic','Lusha','Ocean.io','PredictLeads','Beauhurst',
  'BuiltWith','D&B','LinkedIn','Google Maps','Yelp','BBB','Manta','Enigma'];

function GraphicMosaic() {
  return (
    <Frame stage="Stage 01 · Find" title={<>Mosaic — our custom-built sourcing engine</>}
      footer={<>Mosaic blends best-in-class databases with real-time data collection across the open web, search, directories, and social — then resolves it into one clean, deduplicated universe.</>}
      footStat={['95%+', 'of all companies in any niche']}>
      <div style={{ display:'flex', alignItems:'center', gap:30, width:'100%' }}>

        {/* left: source mosaic */}
        <div style={{ flex:'0 0 46%', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
          padding:'18px 18px 20px' }}>
          <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.brassLt, margin:'2px 4px 14px' }}>40+ data sources, unified</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:7 }}>
            {SOURCES.map((s,i) => (
              <span key={s} style={{ fontFamily:FG.mono, fontSize:11.5, color: i%3===0?FG.cream:FG.dim2,
                background: i%3===0?'rgba(176,137,76,0.16)':'rgba(245,242,234,0.05)',
                border:`1px solid ${i%3===0?'rgba(176,137,76,0.3)':FG.line}`,
                padding:'6px 10px', borderRadius:6, whiteSpace:'nowrap' }}>{s}</span>
            ))}
            <span style={{ fontFamily:FG.mono, fontSize:11.5, color:FG.brassLt, padding:'6px 10px' }}>+ many more</span>
          </div>
        </div>

        {/* converging lines */}
        <svg width="80" height="300" viewBox="0 0 80 300" fill="none" style={{ flexShrink:0 }}>
          {[18,60,108,150,192,240,282].map((y,i) => (
            <path key={i} d={`M0,${y} C40,${y} 40,150 78,150`} stroke={FG.brass}
              strokeWidth="1.5" opacity={0.28} fill="none" />
          ))}
          <circle cx="78" cy="150" r="3.5" fill={FG.brassLt} />
        </svg>

        {/* node */}
        <div style={{ flexShrink:0, display:'flex', flexDirection:'column', alignItems:'center', gap:12 }}>
          <div style={{ width:138, height:138, borderRadius:'50%', background:FG.pine,
            border:`2px solid ${FG.brass}`, display:'flex', flexDirection:'column', alignItems:'center',
            justifyContent:'center', gap:8, boxShadow:'0 0 0 8px rgba(176,137,76,0.08)' }}>
            <MountainMark size={62} land={LAND_REV} water={WATER_REV} horizon={FG.cream} uid="mosaic" />
          </div>
          <span style={{ fontFamily:FG.serif, fontSize:24, fontWeight:600, letterSpacing:'0.02em',
            color:FG.cream }}>Mosaic</span>
        </div>

        {/* arrow */}
        <svg width="38" height="20" viewBox="0 0 38 20" fill="none" style={{ flexShrink:0 }}>
          <path d="M2,10 H32 M24,3 L33,10 L24,17" stroke={FG.brassLt} strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        {/* outputs */}
        <div style={{ flex:1, display:'flex', flexDirection:'column', gap:14, minWidth:0 }}>
          {[['Companies','Every relevant company in the niche — including the off-market ones that never surface.'],
            ['Verified contacts','The right owner, with confirmed, multi-source contact details.']].map(([t,d]) => (
            <div key={t} style={{ background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:12,
              padding:'18px 20px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:8 }}>
                <Check /><span style={{ fontFamily:FG.serif, fontSize:21, fontWeight:600, color:FG.cream }}>{t}</span>
              </div>
              <p style={{ margin:0, fontSize:13.5, lineHeight:1.5, color:FG.dim }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </Frame>
  );
}

/* ======================= B — COMPANY FINDING ============================== */
function GraphicCompanyFinding() {
  return (
    <Frame stage="Stage 01 · Find — Companies" title={<>We find the companies others miss</>}
      footer={<>Lead databases are fast but never exhaustive. By combining leading platforms with our own proprietary scraping, Evercap surfaces the businesses flying under the radar.</>}
      footStat={['98%+', 'coverage incl. hard-to-find sources']}>
      <div style={{ display:'flex', gap:34, width:'100%' }}>

        {/* left: +40% comparison */}
        <div style={{ flex:'1.25', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
          padding:'26px 28px', display:'flex', flexDirection:'column' }}>
          <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.brassLt, marginBottom:24 }}>Share of the relevant universe found</div>

          {/* baseline bar */}
          <div style={{ marginBottom:22 }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
              <span style={{ fontSize:13, color:FG.dim2 }}>Standard lead databases</span>
              <span style={{ fontFamily:FG.mono, fontSize:12, color:FG.dim }}>~60%</span>
            </div>
            <div style={{ height:30, borderRadius:6, background:'rgba(245,242,234,0.16)', width:'60%' }} />
          </div>
          {/* evercap bar */}
          <div>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
              <span style={{ fontSize:13, color:FG.cream, fontWeight:600 }}>Evercap Mosaic</span>
              <span style={{ fontFamily:FG.mono, fontSize:12, color:FG.brassLt }}>95%+</span>
            </div>
            <div style={{ position:'relative', height:30, borderRadius:6, width:'95%',
              background:`linear-gradient(90deg, ${FG.brass}, ${FG.brassLt})` }}>
              <span style={{ position:'absolute', right:14, top:'50%', transform:'translateY(-50%)',
                fontFamily:FG.serif, fontSize:17, fontWeight:600, color:FG.night }}>95%+ found</span>
            </div>
          </div>
          <div style={{ fontFamily:FG.mono, fontSize:10, color:FG.dim, letterSpacing:'0.06em',
            textAlign:'right', marginTop:9 }}>100% = every company in the relevant universe</div>

          <div style={{ marginTop:'auto', paddingTop:24, display:'flex', alignItems:'baseline', gap:14 }}>
            <span style={{ fontFamily:FG.serif, fontSize:64, fontWeight:600, color:FG.brassLt, lineHeight:0.9 }}>95%+</span>
            <span style={{ fontSize:14.5, color:FG.dim2, lineHeight:1.45, maxWidth:'26ch' }}>of the relevant universe for a given business type — where lead lists top out near 60%.</span>
          </div>
        </div>

        {/* right: method */}
        <div style={{ flex:'1', display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:12, padding:'20px 22px' }}>
            <p style={{ margin:0, fontFamily:FG.serif, fontSize:20, fontWeight:500, color:FG.cream, lineHeight:1.3 }}>
              If a company has any meaningful web presence, we capture it.</p>
          </div>
          {/* AI + human flow */}
          <div style={{ flex:1, background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
            padding:'22px', display:'flex', flexDirection:'column', justifyContent:'center', gap:0 }}>
            <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
              color:FG.brassLt, marginBottom:18 }}>How lists are built</div>
            {[['AI-assisted discovery','Real-time collection + AI refine the universe at scale.'],
              ['Human-verified','Every target & key decision reviewed by the Evercap Research Team.']].map(([t,d],i) => (
              <div key={t}>
                <div style={{ display:'flex', gap:14 }}>
                  <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
                    <span style={{ width:30, height:30, borderRadius:'50%', border:`1.5px solid ${FG.brass}`,
                      display:'flex', alignItems:'center', justifyContent:'center', fontFamily:FG.mono,
                      fontSize:12, color:FG.brassLt }}>{i+1}</span>
                    {i===0 && <span style={{ width:1.5, height:34, background:FG.line2, margin:'4px 0' }} />}
                  </div>
                  <div style={{ paddingTop:3 }}>
                    <div style={{ fontFamily:FG.serif, fontSize:19, fontWeight:600, color:FG.cream }}>{t}</div>
                    <p style={{ margin:'4px 0 0', fontSize:13, lineHeight:1.5, color:FG.dim }}>{d}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Frame>
  );
}

/* =================== C — RESEARCH & MARKET INTELLIGENCE =================== */
// stylized low-poly continental US + coverage network
const US_PATH = 'M16,28 L72,22 L126,18 L138,28 L150,22 L168,26 L240,22 L233,46 L227,72 L223,92 L228,108 L217,148 L205,110 L150,118 L138,114 L129,138 L117,116 L92,118 L64,114 L38,96 L23,82 L17,56 Z';
const US_NODES = [[28,32],[22,74],[37,90],[60,98],[88,72],[120,108],[132,116],[132,64],[140,40],[158,52],[186,100],[212,138],[214,62],[226,48]];
const US_EDGES = [[0,1],[1,2],[2,3],[2,4],[4,7],[7,8],[8,9],[9,7],[7,5],[5,3],[5,6],[5,10],[6,10],[10,11],[9,12],[12,13],[10,12],[4,5],[9,10]];
const US_HUBS = [4,5,7,9,10];

function USNetworkMap() {
  return (
    <svg viewBox="0 0 256 156" fill="none" style={{ width:'100%', height:'100%', display:'block' }}>
      <path d={US_PATH} fill="rgba(245,242,234,0.04)" stroke={FG.brass} strokeWidth="1" strokeLinejoin="round" opacity="0.55" />
      {US_EDGES.map(([a,b],i) => (
        <line key={i} x1={US_NODES[a][0]} y1={US_NODES[a][1]} x2={US_NODES[b][0]} y2={US_NODES[b][1]}
          stroke={FG.brassLt} strokeWidth="0.8" opacity="0.4" />
      ))}
      {US_NODES.map(([x,y],i) => {
        const hub = US_HUBS.includes(i);
        return <circle key={i} cx={x} cy={y} r={hub?3.4:2}
          fill={hub?FG.brassLt:FG.cream} opacity={hub?1:0.7}
          stroke={hub?'rgba(176,137,76,0.35)':'none'} strokeWidth={hub?3:0} />;
      })}
    </svg>
  );
}

function CriteriaTimeline() {
  const steps = ['Initial criteria','List v1','Refined','Dialed in'];
  return (
    <div style={{ marginTop:6 }}>
      <div style={{ position:'relative', display:'flex', justifyContent:'space-between' }}>
        <div style={{ position:'absolute', left:8, right:8, top:7, height:1.5, background:FG.line2 }} />
        <div style={{ position:'absolute', left:8, top:7, width:'66%', height:1.5, background:FG.brass }} />
        {steps.map((s,i) => (
          <div key={s} style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:8, width:'25%' }}>
            <span style={{ width:15, height:15, borderRadius:'50%', background: i<3?FG.brass:FG.pine,
              border:`1.5px solid ${i<3?FG.brass:FG.line2}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
              {i<3 && <span style={{ width:5, height:5, borderRadius:'50%', background:FG.night }} />}
            </span>
            <span style={{ fontFamily:FG.mono, fontSize:9.5, letterSpacing:'0.04em', color: i<3?FG.dim2:FG.dim,
              textTransform:'uppercase', textAlign:'center', lineHeight:1.3 }}>{s}</span>
          </div>
        ))}
      </div>
      <div style={{ display:'flex', gap:8, marginTop:16, flexWrap:'wrap' }}>
        {[['＋','more like this'],['−','not these'],['✎','tighter on size']].map(([sym,txt]) => (
          <span key={txt} style={{ display:'inline-flex', alignItems:'center', gap:6, fontFamily:FG.mono,
            fontSize:10.5, color:FG.dim2, background:'rgba(245,242,234,0.05)', border:`1px solid ${FG.line}`,
            borderRadius:20, padding:'5px 11px' }}>
            <span style={{ color:FG.brassLt, fontWeight:600 }}>{sym}</span>{txt}</span>
        ))}
      </div>
    </div>
  );
}

function GraphicResearch({ bare }) {
  return (
    <Frame bare={bare} stage="Stage 01 · Find — Research" title={<>Market intelligence before we ever reach out</>}
      footer={<>Evercap's research team offers pre-engagement market mapping to size a niche before kickoff — then makes sure every relevant detail is found, organized, and kept current.</>}>
      <div style={{ display:'flex', gap:20, width:'100%' }}>

        {/* Market mapping + US web map */}
        <div style={{ flex:'1.32', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
          padding:'24px 26px', display:'flex', flexDirection:'column' }}>
          <span style={{ fontFamily:FG.serif, fontSize:24, fontWeight:600, color:FG.cream, marginBottom:4 }}>Market mapping</span>
          <span style={{ fontFamily:FG.mono, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase',
            color:FG.brassLt, marginBottom:8 }}>Vetted opportunities, mapped nationwide</span>
          <div style={{ flex:1, minHeight:0, overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center', padding:'6px 0' }}>
            <USNetworkMap />
          </div>
          <p style={{ margin:0, fontSize:13.5, lineHeight:1.55, color:FG.dim2 }}>
            A pre-engagement read on how many private companies truly exist in a segment — built from vetted opportunities, not inflated generic estimates that ignore ownership.</p>
        </div>

        {/* right column: criteria + conflict */}
        <div style={{ flex:'1', display:'flex', flexDirection:'column', gap:20 }}>
          {/* criteria tracking */}
          <div style={{ flex:'1', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
            padding:'22px 24px', display:'flex', flexDirection:'column' }}>
            <span style={{ fontFamily:FG.serif, fontSize:23, fontWeight:600, color:FG.cream, marginBottom:4 }}>Criteria tracking</span>
            <p style={{ margin:'0 0 18px', fontSize:13, lineHeight:1.5, color:FG.dim2 }}>
              A written history of your initial criteria plus a timeline of feedback on every list — so we learn exactly what you like.</p>
            <div style={{ marginTop:'auto' }}><CriteriaTimeline /></div>
          </div>

          {/* conflict checking */}
          <div style={{ background:'rgba(176,137,76,0.1)', border:`1px solid rgba(176,137,76,0.32)`,
            borderRadius:12, padding:'20px 24px', display:'flex', alignItems:'center', gap:22 }}>
            <div>
              <span style={{ fontFamily:FG.serif, fontSize:23, fontWeight:600, color:FG.cream, display:'block' }}>Conflict checking</span>
              <span style={{ fontFamily:FG.mono, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase',
                color:FG.brassLt }}>Truly proprietary</span>
              <p style={{ margin:'12px 0 0', fontSize:12.5, lineHeight:1.5, color:FG.dim2, maxWidth:'30ch' }}>
                One buyer for one seller. We never run the same target to competing acquirers.</p>
            </div>
            <div style={{ flexShrink:0, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ textAlign:'center' }}>
                <div style={{ width:52, height:52, borderRadius:'50%', background:FG.pine, border:`2px solid ${FG.brass}`,
                  display:'flex', alignItems:'center', justifyContent:'center', fontFamily:FG.serif, fontSize:22,
                  fontWeight:600, color:FG.brassLt }}>1</div>
                <div style={{ fontSize:10, color:FG.dim2, marginTop:6 }}>Buyer</div>
              </div>
              <svg width="38" height="12" viewBox="0 0 38 12" fill="none">
                <path d="M2,6 H32 M26,2 L35,6 L26,10" stroke={FG.brassLt} strokeWidth="1.6"
                  strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <div style={{ textAlign:'center' }}>
                <div style={{ width:52, height:52, borderRadius:'50%', background:FG.pine, border:`2px solid ${FG.brass}`,
                  display:'flex', alignItems:'center', justifyContent:'center', fontFamily:FG.serif, fontSize:22,
                  fontWeight:600, color:FG.brassLt }}>1</div>
                <div style={{ fontSize:10, color:FG.dim2, marginTop:6 }}>Seller</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Frame>
  );
}

/* ======================= D — SIZING ACCURACY ============================= */
function GraphicSizing({ bare }) {
  const signals = ['Facilities','Locations','Employee counts','Implied headcount','Site imagery',
    'Certifications','End markets','Customers'];
  return (
    <Frame bare={bare} stage="Stage 01 · Find — Sizing" title={<>Private-company size data is broken. We fix it.</>}
      footer={<>Off-the-shelf estimates routinely misjudge private companies. Evercap sizes each target from real-world evidence — so your buy-box filters actually mean something.</>}>
      <div style={{ display:'flex', gap:34, width:'100%' }}>

        {/* left: the 10x problem */}
        <div style={{ flex:'1', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
          padding:'24px 26px', display:'flex', flexDirection:'column' }}>
          <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.brassLt, marginBottom:20 }}>Generic provider estimates</div>
          {['PitchBook','CapIQ','Grata'].map((p) => (
            <div key={p} style={{ marginBottom:16 }}>
              <div style={{ fontSize:13, color:FG.dim2, marginBottom:7 }}>{p}</div>
              <div style={{ position:'relative', height:14, borderRadius:7, background:'rgba(245,242,234,0.08)' }}>
                {/* error range bar */}
                <div style={{ position:'absolute', left:'8%', right:'6%', top:0, bottom:0, borderRadius:7,
                  background:'repeating-linear-gradient(90deg, rgba(176,137,76,0.5) 0 6px, rgba(176,137,76,0.18) 6px 12px)' }} />
                {/* true marker */}
                <div style={{ position:'absolute', left:'30%', top:-4, width:2, height:22, background:FG.cream }} />
              </div>
            </div>
          ))}
          <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:8, fontSize:12, color:FG.dim }}>
            <span style={{ width:14, height:2, background:FG.cream, display:'inline-block' }} /> actual size
            <span style={{ marginLeft:14, width:14, height:8, borderRadius:2, display:'inline-block',
              background:'repeating-linear-gradient(90deg, rgba(176,137,76,0.5) 0 4px, rgba(176,137,76,0.18) 4px 8px)' }} /> reported range
          </div>
          <div style={{ marginTop:'auto', paddingTop:22, display:'flex', alignItems:'baseline', gap:12 }}>
            <span style={{ fontFamily:FG.serif, fontSize:62, fontWeight:600, color:FG.brassLt, lineHeight:0.9 }}>10×</span>
            <span style={{ fontSize:14, color:FG.dim2, lineHeight:1.45, maxWidth:'24ch' }}>off — estimates can miss true size by an order of magnitude.</span>
          </div>
        </div>

        {/* right: what evercap evaluates */}
        <div style={{ flex:'1.05', background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:12,
          padding:'24px 26px', display:'flex', flexDirection:'column' }}>
          <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.brassLt, marginBottom:6 }}>What Evercap evaluates instead</div>
          <p style={{ margin:'0 0 20px', fontFamily:FG.serif, fontSize:19, fontWeight:500, color:FG.cream, lineHeight:1.3 }}>
            Ground-truth signals, reviewed by analysts.</p>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:11 }}>
            {signals.map((s) => (
              <div key={s} style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(245,242,234,0.05)',
                border:`1px solid ${FG.line}`, borderRadius:8, padding:'12px 14px' }}>
                <Check s={15} /><span style={{ fontSize:13.5, color:FG.cream }}>{s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Frame>
  );
}

/* ======================= E — CONTACT DOSSIER ============================= */
function GraphicContacts({ bare }) {
  const channels = [['Work email','Validated'],['Personal email','Validated'],['Work phone','Confirmed'],
    ['Cell phone','Confirmed'],['LinkedIn profile','Matched'],['Mailing address','For letters']];
  const sources = ['LinkedIn','Company filings','Website / about history','Press releases'];
  return (
    <Frame bare={bare} stage="Stage 01 · Find — Contact Info" title={<>We find the owner — and every way to reach them</>}
      footer={<>Two owners? We reach the second if the first goes quiet. Can't find them online? We pick up the phone and find out.</>}
      footStat={['2', 'independent validators per email']}>
      <div style={{ display:'flex', gap:24, width:'100%' }}>

        {/* left: owner identification */}
        <div style={{ flex:'1', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12, padding:'24px 26px',
          display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:20 }}>
            <div style={{ width:54, height:54, borderRadius:'50%', background:'rgba(245,242,234,0.1)',
              border:`1.5px solid ${FG.line2}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="8" r="4" stroke={FG.brassLt} strokeWidth="1.6" />
                <path d="M4.5 20c0-4 3.4-6.5 7.5-6.5s7.5 2.5 7.5 6.5" stroke={FG.brassLt} strokeWidth="1.6" strokeLinecap="round" />
              </svg>
            </div>
            <div>
              <div style={{ fontFamily:FG.serif, fontSize:22, fontWeight:600, color:FG.cream }}>The right owner</div>
              <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:4 }}>
                <Check s={14} /><span style={{ fontFamily:FG.mono, fontSize:11, color:FG.brassLt,
                  letterSpacing:'0.06em' }}>Verified · 4 sources</span>
              </div>
            </div>
          </div>
          <div style={{ fontFamily:FG.mono, fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.dim, marginBottom:12 }}>Cross-checked against</div>
          <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
            {sources.map((s) => (
              <div key={s} style={{ display:'flex', alignItems:'center', gap:11, fontSize:14, color:FG.dim2 }}>
                <span style={{ width:6, height:6, borderRadius:'50%', background:FG.brass }} />{s}
              </div>
            ))}
          </div>
        </div>

        {/* right: comprehensive contact file */}
        <div style={{ flex:'1.18', background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:12,
          padding:'24px 26px', display:'flex', flexDirection:'column' }}>
          <div style={{ fontFamily:FG.mono, fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase',
            color:FG.brassLt, marginBottom:18 }}>Comprehensive contact file</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            {channels.map(([t,tag]) => (
              <div key={t} style={{ background:'rgba(245,242,234,0.05)', border:`1px solid ${FG.line}`,
                borderRadius:9, padding:'13px 15px' }}>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <Check s={15} /><span style={{ fontSize:14, color:FG.cream, fontWeight:600 }}>{t}</span>
                </div>
                <div style={{ fontFamily:FG.mono, fontSize:10, color:FG.dim, letterSpacing:'0.05em',
                  marginTop:6, marginLeft:23, textTransform:'uppercase' }}>{tag}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop:'auto', paddingTop:20, display:'flex', alignItems:'center', gap:12 }}>
            <span style={{ fontSize:13, color:FG.dim2 }}>Every email validated through</span>
            {['ZeroBounce','NeverBounce'].map((b) => (
              <span key={b} style={{ fontFamily:FG.mono, fontSize:11.5, color:FG.cream,
                background:'rgba(176,137,76,0.16)', border:`1px solid rgba(176,137,76,0.3)`,
                padding:'6px 11px', borderRadius:6 }}>{b}</span>
            ))}
          </div>
        </div>
      </div>
    </Frame>
  );
}

/* ================== A+B — MOSAIC + COVERAGE (combined) =================== */
function GraphicMosaicCoverage({ bare, heading }) {
  const chips = SOURCES.slice(0, 15);
  return (
    <Frame bare={bare} stage="Stage 01 · Find" title={heading ? heading : <>Mosaic — we find 95%+ of any niche</>}
      footer={<>Mosaic blends best-in-class databases with real-time collection across web, search, directories, and social — surfacing the under-the-radar owners no list has.</>}
      footStat={['98%+', 'coverage incl. hard-to-find sources']}>
      <div style={{ display:'flex', gap:30, width:'100%' }}>

        {/* LEFT — the engine */}
        <div style={{ flex:'1.05', background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12,
          padding:'24px 24px', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ alignSelf:'flex-start', fontFamily:FG.mono, fontSize:10, letterSpacing:'0.12em',
            textTransform:'uppercase', color:FG.brassLt, marginBottom:13 }}>40+ data sources, unified</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:6, justifyContent:'center' }}>
            {chips.map((s,i) => (
              <span key={s} style={{ fontFamily:FG.mono, fontSize:10.5, color: i%3===0?FG.cream:FG.dim2,
                background: i%3===0?'rgba(176,137,76,0.16)':'rgba(245,242,234,0.05)',
                border:`1px solid ${i%3===0?'rgba(176,137,76,0.3)':FG.line}`,
                padding:'5px 9px', borderRadius:6, whiteSpace:'nowrap' }}>{s}</span>
            ))}
            <span style={{ fontFamily:FG.mono, fontSize:10.5, color:FG.brassLt, padding:'5px 9px' }}>+ more</span>
          </div>
          {/* converging into node */}
          <svg width="150" height="40" viewBox="0 0 150 40" fill="none" style={{ margin:'6px 0 2px' }}>
            {[12,52,92,138].map((x,i) => (
              <path key={i} d={`M${x},2 C${x},20 75,20 75,38`} stroke={FG.brass} strokeWidth="1.4" opacity="0.32" fill="none" />
            ))}
            <circle cx="75" cy="38" r="3" fill={FG.brassLt} />
          </svg>
          <div style={{ width:118, height:118, borderRadius:'50%', background:FG.pine, border:`2px solid ${FG.brass}`,
            display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 0 0 8px rgba(176,137,76,0.08)' }}>
            <MountainMark size={54} land={LAND_REV} water={WATER_REV} horizon={FG.cream} uid="mc" />
          </div>
          <span style={{ fontFamily:FG.serif, fontSize:22, fontWeight:600, color:FG.cream, margin:'10px 0 14px' }}>Mosaic</span>
          <div style={{ display:'flex', gap:12, width:'100%' }}>
            {[['Companies','Every relevant company'],['Verified contacts','The right owner']].map(([t,d]) => (
              <div key={t} style={{ flex:1, background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:10,
                padding:'12px 14px' }}>
                <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:4 }}>
                  <Check s={14} /><span style={{ fontFamily:FG.serif, fontSize:16, fontWeight:600, color:FG.cream }}>{t}</span>
                </div>
                <p style={{ margin:0, fontSize:11.5, lineHeight:1.4, color:FG.dim }}>{d}</p>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — coverage proof */}
        <div style={{ flex:'1', display:'flex', flexDirection:'column', gap:16 }}>
          <div style={{ flex:1, background:FG.card, border:`1px solid ${FG.line}`, borderRadius:12, padding:'22px 24px',
            display:'flex', flexDirection:'column', justifyContent:'center' }}>
            <div style={{ fontFamily:FG.mono, fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase',
              color:FG.brassLt, marginBottom:20 }}>Share of the relevant universe found</div>
            <div style={{ marginBottom:18 }}>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:7 }}>
                <span style={{ fontSize:12.5, color:FG.dim2 }}>Standard lead databases</span>
                <span style={{ fontFamily:FG.mono, fontSize:11.5, color:FG.dim }}>~60%</span>
              </div>
              <div style={{ height:26, borderRadius:6, background:'rgba(245,242,234,0.16)', width:'60%' }} />
            </div>
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:7 }}>
                <span style={{ fontSize:12.5, color:FG.cream, fontWeight:600 }}>Evercap Mosaic</span>
                <span style={{ fontFamily:FG.mono, fontSize:11.5, color:FG.brassLt }}>95%+</span>
              </div>
              <div style={{ position:'relative', height:26, borderRadius:6, width:'95%',
                background:`linear-gradient(90deg, ${FG.brass}, ${FG.brassLt})` }}>
                <span style={{ position:'absolute', right:12, top:'50%', transform:'translateY(-50%)',
                  fontFamily:FG.serif, fontSize:15, fontWeight:600, color:FG.night }}>95%+</span>
              </div>
            </div>
            <div style={{ fontFamily:FG.mono, fontSize:9.5, color:FG.dim, letterSpacing:'0.05em',
              textAlign:'right', marginTop:8 }}>100% = every company in the relevant universe</div>
          </div>

          <div style={{ flex:1, background:FG.card2, border:`1px solid ${FG.line2}`, borderRadius:12,
            padding:'22px 24px', display:'flex', flexDirection:'column', justifyContent:'center', gap:18 }}>
            <p style={{ margin:0, fontFamily:FG.serif, fontSize:19, fontWeight:500, color:FG.cream, lineHeight:1.35 }}>
              If a company has any meaningful web presence, we capture it.</p>
            <div style={{ display:'flex', gap:10 }}>
              {[['AI-assisted','discovery at scale'],['Human-verified','by our Research Team']].map(([t,d],i) => (
                <div key={t} style={{ flex:1, display:'flex', alignItems:'flex-start', gap:10 }}>
                  <span style={{ width:26, height:26, flexShrink:0, borderRadius:'50%', border:`1.5px solid ${FG.brass}`,
                    display:'flex', alignItems:'center', justifyContent:'center', fontFamily:FG.mono, fontSize:11,
                    color:FG.brassLt }}>{i+1}</span>
                  <div>
                    <div style={{ fontFamily:FG.serif, fontSize:16, fontWeight:600, color:FG.cream, lineHeight:1.1 }}>{t}</div>
                    <div style={{ fontSize:11.5, color:FG.dim, marginTop:3 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Frame>
  );
}

Object.assign(window, { GraphicMosaic, GraphicMosaicCoverage, GraphicCompanyFinding, GraphicResearch, GraphicSizing, GraphicContacts });
