// SLIDE 06 — AI BRAND VISIBILITY
// Clean 3-col grid below the title. No overlapping boxes. All sub-headings cyan/white (no yellow).
function AIVisibilitySlide() {
  return (
    <Slide eyebrow="March 2026" logo="white" style={{label:"06 AI Brand Visibility"}}>
      <TitleBlock row1="AI Brand" row2="Visibility" topPad={80} width={600} row1Weight={800}/>

      {/* 3 independent columns below title, each a card with its own border (no running borders) */}
      <div style={{position:'absolute', top: 308, left: 56, right: 56, bottom: 70,
        display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 34}}>

        {/* Col 1 — Summary + Actions (combined into one card) */}
        <div style={{
          background:'rgba(255,255,255,.08)', border:'1.5px solid rgba(255,255,255,.28)',
          borderRadius: 18, padding: 26, display:'flex', flexDirection:'column', gap:18,
          boxShadow:'0 6px 20px rgba(0,0,0,.35)'
        }}>
          <div style={{fontSize: 12.5, lineHeight:1.6, color: '#e5e5e5'}}>
            AI visibility is increasing across models, with 14% brand visibility and strong presence in ChatGPT and smaller reach from Gemini. However, this is translating into minimal measurable traffic.
          </div>
          <div style={{fontSize: 12, fontWeight: 600, color: '#fff', borderTop:'1px solid rgba(255,255,255,.12)', paddingTop: 14}}>
            chatgpt.com · 18 sessions<br/>gemini.google.com · 1 session
          </div>
          <div style={{borderTop:'1px solid rgba(255,255,255,.12)', paddingTop: 14}}>
            <div style={{fontWeight:700, fontSize:12, color:'#fff', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>Actions</div>
            <ul style={{margin:0, paddingLeft:0, listStyle:'none', fontSize:11.5, lineHeight:1.55, color:'#ddd', display:'flex', flexDirection:'column', gap:10}}>
              <li style={{display:'flex', gap:8}}><span style={{color: R.handwriting}}>→</span> Build AEO-focused pages on high-visibility topics where we rank (agency, B2B, multi-location)</li>
              <li style={{display:'flex', gap:8}}><span style={{color: R.handwriting}}>→</span> Strengthen conversion paths to capture early-stage discovery from AI-assisted journeys</li>
              <li style={{display:'flex', gap:8}}><span style={{color: R.handwriting}}>→</span> Expand content depth so models interpret and recommend our services more accurately</li>
            </ul>
          </div>
        </div>

        {/* Col 2 — Positioning Gap (cyan header) */}
        <div style={{
          background:'rgba(255,255,255,.08)', border:'1.5px solid rgba(255,255,255,.28)',
          borderRadius: 18, padding: 26, display:'flex', flexDirection:'column',
          boxShadow:'0 6px 20px rgba(0,0,0,.35)'
        }}>
          <div style={{color: R.handwriting, fontWeight:700, fontSize:14, lineHeight:1.35, marginBottom: 6, letterSpacing:'.04em', textTransform:'uppercase'}}>The Positioning Gap</div>
          <div style={{color:'#bbb', fontSize:11, marginBottom:18}}>Who It Thinks We Are</div>
          <PositionItem title="Category-Level Positioning Lock" body="AI consistently associates Chatterkick with &ldquo;marketing agency&rdquo; and &ldquo;social media services.&rdquo; Presence confirmed, but differentiation limited."/>
          <PositionItem title="Mid-Market Strategy Alignment" body="Strong visibility with personas like female-led strategists (26%) and growth-stage operators (21%), but not yet enterprise-level positioning."/>
          <PositionItem title="Depth vs Recognition Gap" body="AI understands what we do, but not the complexity of how. Multi-layered, B2B, and regulated signals remain underrepresented."/>
        </div>

        {/* Col 3 — Authority Mechanics — matching headline style shares one color */}
        <div style={{
          background:'rgba(255,255,255,.08)', border:'1.5px solid rgba(255,255,255,.28)',
          borderRadius: 18, padding: 26, display:'flex', flexDirection:'column',
          boxShadow:'0 6px 20px rgba(0,0,0,.35)'
        }}>
          <div style={{color: R.handwriting, fontWeight:700, fontSize:14, lineHeight:1.35, marginBottom: 6, letterSpacing:'.04em', textTransform:'uppercase'}}>The Authority Mechanics</div>
          <div style={{color:'#bbb', fontSize:11, marginBottom:18}}>How It Validates Us</div>
          <PositionItem title="Third-Party Sources Dominate" body="Clutch, Uforocks, and Sprout Social drive the majority of citations &mdash; external validation still outweighs owned authority."/>
          <PositionItem title="Owned Visibility Is Emerging" body="Chatterkick.com is gaining traction as a cited source, but not at a level where it controls narrative or positioning."/>
          <PositionItem title="Content Type Imbalance" body="Directories and service sites dominate; deeper editorial and educational content remains underleveraged."/>
        </div>
      </div>
    </Slide>
  );
}

function PositionItem({ title, body }) {
  return (
    <div style={{display:'flex', gap:10, marginBottom: 14}}>
      <CheckDot size={14} bg="#fff" color={R.ink}/>
      <div style={{fontSize: 10.5, lineHeight:1.5, color:'#ddd'}}>
        <span style={{fontWeight:700, color:'#fff', display:'block', marginBottom:2}}>{title}</span>
        <span dangerouslySetInnerHTML={{__html: body}}/>
      </div>
    </div>
  );
}

window.AIVisibilitySlide = AIVisibilitySlide;