/* Kai - SEO mockups: content brief, ranking dashboard, technical audit */

const { IconCheck, IconArrow, IconHeart, IconComment, IconRepeat, IconSend } = window.KaiIcons;

const PORTRAIT_SRC = "../images/employees/seo.jpg";

function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Kai, SEO Specialist"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Kai</div>
            <div className="role">SEO Specialist</div>
          </div>
          <div className="hero-portrait-badge">
            <span className="dot"/>Tracking
          </div>
        </div>
      </div>

      <div className="hero-chat-card">
        <div className="hero-chat-head">
          <div className="hero-chat-head-l">
            <span className="channel-tag">#</span>
            <span>seo-kai</span>
          </div>
          <div className="live"><span className="pulse-dot"/>Live</div>
        </div>
        <div className="hero-chat-body">
          <div className="hero-msg">
            <div className="hero-msg-avatar placeholder" style={{ background: '#fed7aa', color: '#9a3412' }}>GM</div>
            <div>
              <div className="hero-msg-meta">Growth lead <span className="time">09:14</span></div>
              <div className="hero-msg-text">Ranking dropped on 'ai hr coordinator'. What happened?</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="kai">Kai</span> <span className="time">09:20</span></div>
              <div className="hero-msg-text">
                Diagnosed. New competitor in P1, plus our <span className="hl">FAQ schema is missing</span>. Fixing now.
              </div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="hero-msg-meta"><span className="kai">Kai</span> <span className="time">11:08</span></div>
              <div className="hero-msg-text" style={{ marginBottom: 6 }}>Recovery plan shipped:</div>
              <div className="hero-li-draft">
                <div className="hero-li-draft-head">
                  <span className="hero-li-draft-source">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0891b0" strokeWidth="2" aria-hidden="true"><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>
                    ai hr coordinator · #7 to #3
                  </span>
                  <span className="hero-li-draft-badge" style={{ background: '#dcfce7', color: '#15803d' }}>RECOVERING</span>
                </div>
                <div className="hero-li-draft-body">
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>PR opened:</span> add FAQ schema + 2 internal links<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>Brief:</span> refresh sent to your writer<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>AI overview:</span> we are cited again, click rate +18%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>200</em></div>
          <div className="l">keywords tracked daily</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">15 min</div>
          <div className="l">keyword to brief</div>
        </div>
      </div>
    </div>
  );
}

/* CONTENT BRIEF MOCK - Row 1 */
function LinkedInPostMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: 0, overflow: 'hidden' }}>
      <div style={{ background: '#f6f9fc', borderBottom: '1px solid var(--gt-border-subtle)', padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--gt-cyan-tint)', color: 'var(--gt-cyan)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px/1 var(--gt-font)' }}>SR</div>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 13px/1.2 var(--gt-font)', color: 'var(--gt-fg-1)' }}>ai sales agent for hubspot</div>
          <div style={{ font: '400 11px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>Vol 2,400 / mo · KD 28 · intent: compare</div>
        </div>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>BRIEF READY</span>
      </div>
      <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Outline (1,800 words)</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              'H1 · AI sales agent for HubSpot: how it works (and what it actually does)',
              'H2 · What an AI sales agent does (vs a workflow)',
              'H2 · Native HubSpot integration · what syncs both ways',
              'H2 · 4 use cases that work today',
              'H2 · How it compares to Outreach, Apollo, Lemlist',
              'H2 · Setup walkthrough · 5 minutes',
              'H2 · FAQ (PAA + AI overview answers)',
            ].map(function(line, i) {
              return (
                <div key={i} style={{ font: '400 11.5px/1.45 var(--gt-font)', color: 'var(--gt-fg-2)', paddingLeft: 4 }}>{line}</div>
              );
            })}
          </div>
        </div>
        <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: '10px 12px', font: '400 11.5px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Kai · why this brief</div>
          P1-P10 lean compare. PAA dominated by 'vs Outreach' and 'is it safe'. AI overview cites Reddit and one G2 doc. Win = clear comparison table + FAQ schema.
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span style={{ background: '#dbeafe', color: '#1e40af', font: '600 10.5px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 6 }}>8 internal links</span>
          <span style={{ background: '#fef3c7', color: '#92400e', font: '600 10.5px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 6 }}>3 external sources</span>
          <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10.5px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 6 }}>FAQ schema</span>
        </div>
      </div>
    </div>
  );
}

/* RANKING DASHBOARD MOCK - Row 2 */
function CalendarMock() {
  const rows = [
    { kw: 'ai sales agent', prev: 4, now: 2, label: 'up 2', color: '#15803d', bg: '#dcfce7' },
    { kw: 'ai hr coordinator', prev: 2, now: 7, label: 'down 5', color: '#991b1b', bg: '#fee2e2' },
    { kw: 'sales agent vs sdr', prev: 6, now: 5, label: 'up 1', color: '#15803d', bg: '#dcfce7' },
    { kw: 'autonomous ai employee', prev: 11, now: 8, label: 'up 3', color: '#15803d', bg: '#dcfce7' },
    { kw: 'ai customer support', prev: 9, now: 9, label: 'flat', color: 'var(--gt-fg-3)', bg: '#fafbfc' },
  ];
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: '16px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ font: '600 13.5px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Top movers · last 24h</div>
        <span style={{ background: '#fee2e2', color: '#991b1b', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>1 NEEDS FIX</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.map(function(r, i) {
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 10 }}>
              <div style={{ flex: 1, font: '600 12.5px/1.2 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{r.kw}</div>
              <span style={{ font: '500 11px/1 ui-monospace, monospace', color: 'var(--gt-fg-3)' }}>#{r.prev}</span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--gt-fg-3)" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              <span style={{ font: '700 13px/1 ui-monospace, monospace', color: 'var(--gt-fg-1)' }}>#{r.now}</span>
              <span style={{ background: r.bg, color: r.color, font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4, minWidth: 50, textAlign: 'center' }}>{r.label}</span>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 14, padding: '10px 12px', background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, font: '500 12px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
        <b style={{ color: 'var(--gt-cyan)' }}>ai hr coordinator</b> dropped 5 · new competitor in P1. Fix shipped, recovery expected by Friday.
      </div>
    </div>
  );
}

/* TECHNICAL AUDIT MOCK - Row 3 */
function DMReplyMock() {
  const tickets = [
    { id: 'SEO-218', title: 'Add FAQ schema to /employees/hr', impact: 'HIGH', impactBg: '#fee2e2', impactColor: '#991b1b', est: '30 min' },
    { id: 'SEO-219', title: 'Compress hero image on /pricing', impact: 'MED', impactBg: '#fef3c7', impactColor: '#92400e', est: '15 min' },
    { id: 'SEO-220', title: 'Fix broken canonical on /blog/launch', impact: 'HIGH', impactBg: '#fee2e2', impactColor: '#991b1b', est: '5 min' },
    { id: 'SEO-221', title: 'Add internal links from /docs to /pricing', impact: 'LOW', impactBg: '#dbeafe', impactColor: '#1e40af', est: '20 min' },
  ];
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 22, height: 22, borderRadius: 5, background: '#5e6ad2', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M.4 14.6L9.4 23.6c-3.6-.9-6.4-3.7-7.3-7.3L.4 14.6z"/></svg>
        </div>
        <span style={{ font: '600 13px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>SEO audit · 4 new tickets</span>
        <span style={{ font: '500 11px/1 var(--gt-font)', color: 'var(--gt-fg-3)', marginLeft: 'auto' }}>ranked by impact</span>
      </div>
      <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {tickets.map(function(t, i) {
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 10 }}>
              <span style={{ font: '600 10.5px/1 ui-monospace, monospace', color: 'var(--gt-fg-3)', minWidth: 60 }}>{t.id}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: '600 12.5px/1.3 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{t.title}</div>
                <div style={{ font: '400 10.5px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>est. {t.est}</div>
              </div>
              <span style={{ background: t.impactBg, color: t.impactColor, font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>{t.impact}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ScenarioMock({ children, header }) {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>{header}</div>
      <div style={{ padding: '14px 16px' }}>{children}</div>
    </div>
  );
}

const BRAND_LOGOS = {
  "Search Console": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="11" fill="#fff" stroke="#4285f4" strokeWidth="2"/><path fill="#4285f4" d="M12 5v14M5 12h14" strokeWidth="2"/><circle cx="12" cy="12" r="5" fill="none" stroke="#34a853" strokeWidth="2"/></svg>',
  Ahrefs:          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#0084DC"/><path fill="#fff" d="M5 17V7h2v4h3V7h2v10h-2v-4H7v4H5zm9 0V7h6v2h-4v2h3v2h-3v4h-2z"/></svg>',
  Semrush:         '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#FF642D"/><path fill="#fff" d="M6 8h6c1.7 0 3 1.3 3 3v1H9v3h6v2H8c-1.1 0-2-.9-2-2v-7zm0 8h2v-2H6v2zm12 0V8h2v8h-2z"/></svg>',
  Linear:          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#5e6ad2" d="M0.4 14.6L9.4 23.6c-3.6-.9-6.4-3.7-7.3-7.3L.4 14.6zM0 11.7l12.3 12.3c-.6 0-1.3-.1-1.9-.2L0 13.6v-1.9zm.2-2.6L14.9 23.8c-.5.1-1 .1-1.6.2L0 10.6c0-.5.1-1 .2-1.5zm.7-2.3L17.2 23.1c-.5.2-.9.3-1.4.4L.5 8.2c.1-.5.3-.9.4-1.4zm1.3-2L19.3 22.1c-.4.2-.8.4-1.2.6L2 5.9c.2-.4.4-.8.6-1.2zm1.8-1.7L20.6 20.9c-.3.3-.6.6-.9.8L3.3 4.3c.3-.3.5-.6.7-.9zm2.6-1.9L22.5 18.8c-.2.4-.5.7-.7 1L5.7 2.2c.4-.3.7-.5 1-.7zm3.7-1L23.7 17c-.1.5-.2.9-.4 1.4L7.4 1.7c.4-.2.8-.3 1.3-.4zM12 1L24 13c0 .6-.1 1.3-.2 1.9L9.2 0c1 0 2 .1 2.8.3z"/></svg>',
  WordPress:       '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="11" fill="#21759B"/><path fill="#fff" d="M5.5 12L8 18.5 10.5 12 12.7 6.5h-1.4l-1.5 4-1.5-4h-2L7 8l-1.5 4zm6 6.5L14.5 12l1.4-3.8c.4 0 1-.2 1-.2L13 19l3.5-9.5 1.6 4.2-1.6 4.8h-3z"/></svg>',
  Slack:           '<img src="/images/logos/tools/slack.png" alt="Slack"/>',
  Notion:          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#000" d="M4.46 3.62c.63.51 1.1.66 1.94.6l9.83-.6c.21 0 .04-.21-.04-.24l-1.65-1.18c-.32-.24-.74-.51-1.51-.44L3.5 2.45c-.33.02-.4.18-.27.3.13.14.6.6 1.23.87zm.59 2.3v10.34c0 .55.28.76.91.74l10.8-.62c.63-.03.7-.42.7-.87V5.24c0-.45-.17-.7-.55-.66l-11.28.65c-.42.03-.58.24-.58.69zm10.66.55c.07.32 0 .63-.32.66l-.52.1v7.68c-.45.24-.87.39-1.22.39-.55 0-.69-.17-1.1-.69L9.31 9.32v5.18l1.08.24s0 .63-.87.63l-2.4.14c-.07-.13 0-.45.24-.51l.62-.17V7.84l-.86-.07c-.07-.32.1-.79.6-.83l2.58-.17 3.55 5.42v-4.8l-.9-.1c-.07-.4.22-.69.59-.72z"/></svg>',
  Gmail:           '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#4285f4" d="M2 5.7v12.6c0 .9.7 1.7 1.7 1.7H6V9.6L2 5.7z"/><path fill="#34a853" d="M18 20h2.3c.9 0 1.7-.7 1.7-1.7V5.7L18 9.6V20z"/><path fill="#fbbc04" d="M18 4.3v5.3l4-3.9V4.3c0-.7-.8-1.1-1.4-.7L18 4.3z"/><path fill="#ea4335" d="M6 9.6V4.3l6 4.5 6-4.5v5.3l-6 4.5-6-4.5z"/><path fill="#c5221f" d="M2 4.3v1.4l4 3.9V4.3c0-.7-.8-1.1-1.4-.7L2 4.3z"/></svg>',
};
function BrandLogo({ name }) {
  const svg = BRAND_LOGOS[name];
  if (!svg) return <div style={{ width: 28, height: 28, borderRadius: 8, background: '#f6f9fc', color: 'var(--gt-fg-3)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px/1 var(--gt-font)' }}>{name[0]}</div>;
  return <div style={{ width: 64, height: 56, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
    <div style={{ width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center" }} dangerouslySetInnerHTML={{ __html: svg.replace(/<svg /, `<svg preserveAspectRatio="xMidYMid meet" style="width:56px;height:48px;display:block" `).replace(/<img /, `<img style="max-width:56px;max-height:48px;width:auto;height:auto;object-fit:contain;display:block" `) }} />
  </div>;
}

window.KaiMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};