// Shared primitives for the Chatterkick Reporting Deck
// DESIGN RULES (Reporting Deck only — other deck types have their own rules):
//   • Slide bg: #000 (black); page body bg behind deck must NOT be black
//   • NO PINK — use lime #DEE22A, cream #f4efe1, green #22c55e, red #dc2626, yellow #DEE22A, purple #7c3aed
//   • Eyebrow: lime uppercase tiny, top-left
//   • Logo: top-right (placeholder for CLIENT LOGO)
//   • Title: Montserrat 600-800 title-case row 1 + TAN Aegean upright row 2 (double-decker)
//   • All photos & logos = placeholders for client assets (visual comp only)
//
// BIG-PICTURE RULES (apply to every slide, every deck variant):
//   1. NEVER let copy overlap another element in a way that reduces readability —
//      captions, scripts, labels, and numbers must each have clear breathing room.
//   2. Matching headline style = matching color. Same treatment on the same page
//      must share one color; only change color when it signals real hierarchy or
//      meaningfully different content.
//   3. Handwriting script (cyan TAN/serif, R.handwriting) is RESERVED. Only add
//      it when the user explicitly asks for a handwritten callout — otherwise
//      omit it entirely. Do NOT auto-attach "why it matters"–style scripts.
//   4. Icons (green check, status glyphs) must be visually centered to the
//      number or value they modify — use alignItems:'center', not baseline,
//      when pairing an icon with a big numeral.
//   5. Keep content off the slide edges. Leave breathing room below the last
//      element; never run content to y ≈ canvas-bottom.
//   6. When iterating on feedback, only change what was called out. Approved
//      slides stay byte-identical.
//   7. PICK & CHOOSE — this 16-slide deck is the FULL reporting layout kit,
//      not a required sequence. Read the user's brief first, then compose a
//      deck from the subset of slide types that fit the job:
//        • Client reporting / QBRs → use detail-heavy slides: Executive
//          Summary (04), Discoverability (05), AI Visibility (06),
//          Demographics (07), Benchmarks (08), Top Content (09/10),
//          Action Items (11), Definitions (13/14).
//        • Speaking engagement / keynote → lean on title + statement slides:
//          Cover (01), Quarterly Insight (02, big single idea), Summary
//          Highlights (03, 3 bullets), Section divider, big-number beat,
//          Reach Out (15), End (16). Skip tables, dense KPI grids, and
//          definition pages.
//        • Sales pitch / short narrative → Cover, one or two Summary
//          Highlights, one proof slide (05 or 09), Action Items, End.
//      The 16 slides here are the vocabulary; the user's ask determines the
//      sentence. Never dump all 16 when 5 are enough, and never strip the
//      deck down to titles-only when the user needs depth.
//   8. TYPE SIZES. Body copy STARTS at 18px. Go smaller only when the layout
//      genuinely requires it (dense tables, 5-up grids, footnotes, secondary
//      captions) — 18 is the default, not the ceiling. On the Insight slide
//      (02) the Montserrat row is 48 and the TAN "Insight" row is 44.
//   9. PLATFORM ICONS. Whenever a social platform is named as a label, metric
//      row, or sub-stat, prefix it with <PlatformIcon>/<PlatformLabel>.
//      Icons are monochrome and inherit their neighbor's color — never
//      platform brand colors, which would break the deck palette. Skip icons
//      inside running prose.
//  10. STYLE RULES SURVIVE subset selection. Whatever slides you pick, they
//      still obey rules 1–6 and the reporting-deck color/type system above.

const R = {
  black: "#000",
  cream: "#f4efe1",
  lime: "#DEE22A",         // highlights/fills only — never in headings
  green: "#22c55e",
  red: "#dc2626",
  yellow: "#DEE22A",       // alias for lime
  purple: "#7c3aed",
  ink: "#111",
  gray: "#6b6b6b",
  lightGray: "#e5e5e5",
  paleLime: "#eaf88a",
  handwriting: "#7CCFF2",  // ALL handwriting/script accents, light+dark safe
};

// Slide shell: black canvas, standardized padding, eyebrow, logo
function Slide({ children, bg = R.black, eyebrow = "Q1 2026", logo = "white", noChrome = false, style = {} }) {
  return (
    <div data-screen-label={style.label} style={{
      width: '100%', height: '100%', background: bg, color: bg === R.black ? '#fff' : R.ink,
      fontFamily: 'var(--font-sans)', position: 'relative', overflow: 'hidden', ...style
    }}>
      {!noChrome && eyebrow && <div style={{
        position: 'absolute', top: 46, left: 56, fontSize: 13, fontWeight: 700,
        color: R.lime, letterSpacing: '.02em'
      }}>{eyebrow}</div>}
      {!noChrome && logo && <ClientLogo variant={logo}/>}
      {children}
    </div>
  );
}

// CLIENT LOGO PLACEHOLDER — in a live client deck this swaps to the client mark.
// For the Chatterkick template we use the PRIMARY logo (wordmark + pink bubble)
// in both variants — NEVER the monochrome-white logo unless the user asks.
function ClientLogo({ variant = "white" }) {
  const src = variant === "white"
    ? "../assets/logo-horizontal-whitepink.png"   // primary on dark
    : "../assets/logo-horizontal-blackpink.png";  // primary on light
  return (
    <div style={{
      position: 'absolute', top: 42, right: 56, display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <img src={src} alt="Client logo placeholder" style={{height: 22, display:'block', opacity: .95}}/>
    </div>
  );
}

// Double-decker title — Montserrat 600 row (readable, not overly heavy) + TAN accent row.
// Rules: Title Case, TAN is the accent (never italic, generous breathing room, no overlap).
function TitleBlock({ row1, row2, sub, topPad = 86, x = 56, width = 780, color, accentColor, row1Weight = 600, row1Size = 60 }) {
  return (
    <div style={{position:'absolute', left: x, top: topPad, width, color}}>
      <div style={{fontFamily:'var(--font-sans)', fontWeight: row1Weight, fontSize: row1Size, lineHeight:1.05, letterSpacing:'-.01em'}}>{row1}</div>
      {/* TAN row defaults to NEUTRAL (inherits color) — white on dark, ink on light.
         Pass accentColor (R.yellow, etc.) only for covers / hero / intentional accents. */}
      <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontStyle:'normal', fontSize:86, lineHeight:1.0, marginTop:30, marginLeft:4, padding:'0 .08em', color: accentColor}}>{row2}</div>
      {sub && <div style={{marginTop:22, fontSize:14, fontWeight:500, opacity:.85, lineHeight:1.5}}>{sub}</div>}
    </div>
  );
}

// White rounded card — used for nearly every data panel on black
function WhiteCard({ children, style = {}, radius = 20, pad = 28 }) {
  return (
    <div style={{
      background:'#fff', color: R.ink, borderRadius: radius, padding: pad, boxSizing:'border-box',
      boxShadow: '0 0 0 1px rgba(255,255,255,.04)', ...style
    }}>{children}</div>
  );
}

// White-dot check icon (used on bullet rows). Lime/yellow is reserved for highlights, not structure.
function CheckDot({ size = 20, bg = '#fff', color = R.ink }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      width:size, height:size, borderRadius:999, background:bg, flexShrink:0
    }}>
      <svg viewBox="0 0 14 14" width={size*0.6} height={size*0.6} fill="none">
        <path d="M2 7.5 L5.5 11 L12 3.5" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </span>
  );
}

// Green-circle bigger check
function GreenCheck({ size = 36 }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      width:size, height:size, borderRadius:999, background: R.green, flexShrink:0
    }}>
      <svg viewBox="0 0 14 14" width={size*0.55} height={size*0.55} fill="none">
        <path d="M2 7.5 L5.5 11 L12 3.5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </span>
  );
}

// Yellow bulb (Trends)
function Lightbulb({ size = 36 }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size}>
      <circle cx="20" cy="16" r="11" fill={R.yellow}/>
      <rect x="14" y="23" width="12" height="7" rx="2" fill={R.yellow} stroke="#000" strokeWidth="1.2"/>
      <rect x="15" y="30" width="10" height="3" fill="#000"/>
      <path d="M16 14 L18 18 L20 12 L22 18 L24 14" stroke="#000" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// Purple warning triangle (Things to Test)
function WarningTri({ size = 36 }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size}>
      <path d="M20 4 L38 34 L2 34 Z" fill={R.purple}/>
      <rect x="18.6" y="13" width="2.8" height="13" rx="1.4" fill="#fff"/>
      <circle cx="20" cy="30" r="1.8" fill="#fff"/>
    </svg>
  );
}

// Monochrome social platform glyphs. Inherit currentColor (or take an explicit
// color) so they sit inside the reporting palette instead of importing brand hues.
// Canonical Chatterkick platform glyphs — the SAME path data used by
// ui_kits/website/Footer.jsx and PlatformChips.jsx. Do not redraw these; if a
// platform is missing here, add it to the ui_kits set first, then mirror it.
// Monochrome by design: they inherit the neighboring color, never brand hues.
const PLATFORM_PATHS = {
  facebook:  'M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.6H7.7V14h2.7v8h3.1z',
  instagram: 'M8 3h8a5 5 0 015 5v8a5 5 0 01-5 5H8a5 5 0 01-5-5V8a5 5 0 015-5zm0 2a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3V8a3 3 0 00-3-3H8zm9 1.5a1 1 0 110 2 1 1 0 010-2zM12 7.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z',
  tiktok:    'M14 3h2.2c.2 1.3.9 2.4 1.9 3.2.9.7 2 1.1 3.2 1.1v2.4c-1.9 0-3.6-.6-5.1-1.6v6.7c0 3.6-2.9 6.5-6.5 6.5S3.2 18.4 3.2 14.8 6.1 8.3 9.7 8.3c.5 0 .9 0 1.4.1v2.5c-.4-.1-.9-.2-1.4-.2-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1V3z',
  x:         'M17.7 3h2.8l-6.2 7.1L22 21h-5.7l-4.5-5.9L6.6 21H3.8l6.6-7.6L3 3h5.8l4 5.4L17.7 3zm-1 16h1.6L7.4 4.9H5.7L16.7 19z',
  linkedin:  'M6 8.5h2.6v9H6zM7.3 4.7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10.4 8.5H13v1.2c.4-.7 1.3-1.4 2.7-1.4 2.9 0 3.4 1.9 3.4 4.3v4.9h-2.6v-3.4c0-1 0-2.3-1.4-2.3-1.4 0-1.6 1.1-1.6 2.2v3.5h-2.6v-9z',
  youtube:   'M21.6 7.2c-.2-.9-.9-1.6-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4c-.9.2-1.6.9-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8c.2.9.9 1.6 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4c.9-.2 1.6-.9 1.8-1.8.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5 3-5 3z',
  threads:   'M12.2 2c-5.5 0-9 3.5-9 10s3.5 10 9 10 9-3.5 9-10-3.5-10-9-10zm.2 15.6c-2.5 0-4.4-1.1-4.4-2.9 0-1.5 1.3-2.5 3.5-2.5 1 0 1.8.1 2.6.3v.6c0 1.6-.6 2.7-1.7 2.7-.4 0-.7-.1-.9-.3l.1-.1c.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.7s-.9.3-.9.8c0 .9.9 1.6 2.1 1.6 2 0 3.4-1.4 3.4-3.6v-.9c.5.2.9.5 1.3.9l1-1c-.6-.6-1.4-1-2.3-1.2v-.5c0-1-.4-1.6-1.2-1.6-.5 0-.8.2-.8.5 0 .2.1.4.2.5.2.1.4.2.7.2v.7c-.7-.2-1.4-.3-2.2-.3-2.7 0-4.6 1.5-4.6 3.8-.1 2.4 1.9 4.1 4.7 4.1z',
  pinterest: 'M12.3 2.6C6.7 2.6 3.4 6.6 3.4 10c0 2.1.8 3.9 2.5 4.6.3.1.5 0 .6-.4l.3-.9c.1-.3 0-.5-.2-.7-.4-.5-.7-1.2-.7-2.2 0-2.9 2.1-5.4 5.7-5.4 3 0 4.8 1.9 4.8 4.5 0 3.3-1.5 6.1-3.6 6.1-1.2 0-2.1-1-1.8-2.3.4-1.5 1.2-3.1 1.2-4.2 0-1-.6-1.8-1.7-1.8-1.3 0-2.4 1.4-2.4 3.2 0 1.2.4 1.9.4 1.9s-1.4 5.7-1.6 6.8c-.2 1 0 2.3 0 2.4 0 .1.2.2.3 0 .2-.2 1.8-2.2 2.4-4.3l.9-3.3c.5.8 1.7 1.5 3 1.5 4 0 6.7-3.6 6.7-8.4 0-3.7-3.1-6.9-8.4-6.9z',
  // Meta and Google have no mark in ui_kits — these two are the only additions,
  // drawn as closed/complete forms so they stay legible at 16-22px.
  meta:      'M12 12c2-3.1 3.5-4.6 5.4-4.6 2.3 0 3.8 2.1 3.8 4.6s-1.5 4.6-3.8 4.6c-1.9 0-3.4-1.5-5.4-4.6zm0 0c-2-3.1-3.5-4.6-5.4-4.6C4.3 7.4 2.8 9.5 2.8 12s1.5 4.6 3.8 4.6c1.9 0 3.4-1.5 5.4-4.6z',
  google:    'M12.2 11.9v2.6h6.2c-.2 1.4-1.7 4.1-6.2 4.1-3.7 0-6.8-3.1-6.8-6.9S8.5 4.9 12.2 4.9c2.1 0 3.5.9 4.3 1.7l2.1-2C17.2 3.3 15 2.4 12.2 2.4 6.9 2.4 2.6 6.7 2.6 12s4.3 9.6 9.6 9.6c5.5 0 9.2-3.9 9.2-9.4 0-.6-.1-1.1-.2-1.6h-9z',
};
const PLATFORM_STROKE = { meta: true }; // outline-only marks
const PLATFORM_ALIASES = { "x/twitter":"x", twitter:"x", "x (twitter)":"x" };

function PlatformIcon({ name, size = 16, color = "currentColor", style = {} }) {
  const key = PLATFORM_ALIASES[String(name || "").toLowerCase()] || String(name || "").toLowerCase();
  const d = PLATFORM_PATHS[key];
  if (!d) return null;
  const stroke = PLATFORM_STROKE[key];
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true"
      style={{display:'block', flexShrink:0, ...style}}>
      <path d={d} fill={stroke ? 'none' : color} stroke={stroke ? color : 'none'}
        strokeWidth={stroke ? 2 : undefined} strokeLinejoin="round"/>
    </svg>
  );
}

// Detects a leading platform word in a label ("LinkedIn CPM", "Meta 11.4K") and
// renders icon + text. Falls back to plain text when no platform is present.
function PlatformLabel({ text, size = 16, color = "currentColor", gap = 7, style = {} }) {
  const str = String(text || "");
  const first = str.split(/\s+/)[0] || "";
  const key = PLATFORM_ALIASES[first.toLowerCase()] || first.toLowerCase();
  if (!PLATFORM_PATHS[key]) return <span style={style}>{str}</span>;
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap, ...style}}>
      <PlatformIcon name={key} size={size} color={color}/>
      <span>{str}</span>
    </span>
  );
}

// Footer label (small)
function Foot({ left = "Chatterkick", right }) {
  return (
    <div style={{position:'absolute', bottom:32, left:56, right:56, display:'flex', justifyContent:'space-between', fontSize:11, color:'rgba(255,255,255,.5)', letterSpacing:'.06em', textTransform:'uppercase'}}>
      <span>{left}</span><span>{right}</span>
    </div>
  );
}

Object.assign(window, { R, Slide, ClientLogo, TitleBlock, WhiteCard, CheckDot, GreenCheck, Lightbulb, WarningTri, Foot, PlatformIcon, PlatformLabel });