// Brand-research findings overlay — what conflicts and how to avoid them
const FINDINGS = [
  {
    id: 'name',
    severity: 'high',
    title: 'The "V0" suffix collides with Vercel\'s trademark',
    body: 'Vercel registers v0 (their AI codegen product) as a trademark covering the name and logo. Their brand guidelines explicitly forbid use of confusingly similar marks or product names. SecurityV0 uses V0 as a versioning/posture cue, not an AI tool — but visual similarity amplifies the risk.',
    affects: ['All marks — wordmark contains "V0"'],
    recommendation: 'Treat "V0" as a typographic suffix, not a logo element. Keep the wordmark two-tone (Security · V0) so V0 reads as a number, not a brand. Avoid any V-shaped icon paired with a 0.',
  },
  {
    id: 'notch',
    severity: 'high',
    title: 'The notch / chevron mark resembles the Vercel triangle',
    body: 'A geometric V cut into a square reads as the same negative-space-triangle motif Vercel has owned since 2015. At small sizes (favicon, sidebar) the resemblance is strong.',
    affects: ['F · Notch / chevron'],
    recommendation: 'Drop or heavily redesign. We\'ve marked this option REMOVE.',
  },
  {
    id: 'orbit',
    severity: 'med',
    title: 'Orbit + V0 reads as "AI" branding',
    body: 'Circle-with-tracking-dot motifs are heavily used by AI/agent products (OpenAI, Anthropic Atlas-era, Claude-Code, Cursor adjacent). Combined with "V0," the impression skews "AI tool" when we want "security platform."',
    affects: ['C · Orbit / V0 dot'],
    recommendation: 'Keep as a B-tier option but don\'t lead with it. If used, let the orbit be a scanning sweep, not a satellite.',
  },
  {
    id: 'shield',
    severity: 'low',
    title: 'Shields are saturated in security branding',
    body: 'McAfee, Norton, Cloudflare-adjacent, hundreds of MSSPs use shields. Not a legal conflict (the shape is generic), but a memorability problem — the mark blends in.',
    affects: ['B · Layered shield'],
    recommendation: 'Keep only if the layered/double-shield treatment is distinctive enough. Otherwise demote.',
  },
  {
    id: 'bracket',
    severity: 'low',
    title: 'Bracket monograms are common in dev-tool branding',
    body: 'Square brackets around a letter is a recognizable pattern (Bitbucket-era, dozens of CLI tools). No specific conflict, but the silhouette reads as "generic dev tool" before "security."',
    affects: ['A · Bracket monogram'],
    recommendation: 'Keep — strongest engineering register of the set. Consider as primary candidate alongside the wordmark.',
  },
  {
    id: 'wordmark',
    severity: 'safe',
    title: 'Wordmark-only is the safest direction',
    body: 'A typographic-only mark (single letter S, or full Security·V0 wordmark) avoids icon-collision risk entirely. Defers visual identity to color and type — which we already control via tokens.',
    affects: ['D · Wordmark only'],
    recommendation: 'Lead with this. The single-letter S in a soft square is distinctive at favicon size and avoids every conflict above.',
  },
  {
    id: 'stacked',
    severity: 'safe',
    title: 'Stacked block is unique to us',
    body: 'Two-layer block referencing the "posture / evidence" stack from the product itself. No close visual match found in the security or dev-tool space.',
    affects: ['E · Stacked block'],
    recommendation: 'Keep as the conceptual A-side option — it\'s the only mark that visually encodes the product idea (layered defense / evidence stack).',
  },
];

const SEV_STYLES = {
  high: { bg: '#fde6e6', text: '#752121', label: 'High risk' },
  med: { bg: '#ffe7c2', text: '#6b3a0a', label: 'Medium risk' },
  low: { bg: '#e8eef2', text: '#566166', label: 'Low risk' },
  safe: { bg: '#cfeee9', text: '#005c54', label: 'Safe' },
};

function FindingsPanel() {
  const counts = FINDINGS.reduce((acc, f) => { acc[f.severity] = (acc[f.severity]||0)+1; return acc; }, {});
  return (
    <div style={{ background: '#fff', padding: '32px 36px', borderRadius: 4, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid #e1e9ee', paddingBottom: 14 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#717c82', marginBottom: 4 }}>Trademark & similarity research</div>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: '#0b0f10' }}>What conflicts and what we can keep</div>
        </div>
        <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
          <span style={{ background: SEV_STYLES.high.bg, color: SEV_STYLES.high.text, padding: '3px 8px', borderRadius: 2, fontWeight: 600 }}>{counts.high||0} high</span>
          <span style={{ background: SEV_STYLES.med.bg, color: SEV_STYLES.med.text, padding: '3px 8px', borderRadius: 2, fontWeight: 600 }}>{counts.med||0} med</span>
          <span style={{ background: SEV_STYLES.low.bg, color: SEV_STYLES.low.text, padding: '3px 8px', borderRadius: 2 }}>{counts.low||0} low</span>
          <span style={{ background: SEV_STYLES.safe.bg, color: SEV_STYLES.safe.text, padding: '3px 8px', borderRadius: 2, fontWeight: 600 }}>{counts.safe||0} safe</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, background: '#e1e9ee', borderRadius: 4, overflow: 'hidden', border: '1px solid #e1e9ee' }}>
        {FINDINGS.map(f => {
          const sev = SEV_STYLES[f.severity];
          return (
            <div key={f.id} style={{ background: '#fff', padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#0b0f10', letterSpacing: '-0.005em', lineHeight: 1.3 }}>{f.title}</div>
                <span style={{ background: sev.bg, color: sev.text, padding: '2px 7px', borderRadius: 2, fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{sev.label}</span>
              </div>
              <div style={{ fontSize: 12, color: '#566166', lineHeight: 1.55 }}>{f.body}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 6, fontSize: 11, paddingTop: 8, borderTop: '1px dashed #e1e9ee' }}>
                <div style={{ color: '#9a9d9f', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>Affects</div>
                <div style={{ color: '#2a3439', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>{f.affects.join(' · ')}</div>
                <div style={{ color: '#9a9d9f', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>Recommend</div>
                <div style={{ color: '#2a3439', lineHeight: 1.5 }}>{f.recommendation}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ background: '#0b0f10', color: '#d9e4ea', padding: '20px 24px', borderRadius: 4 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9a9d9f', marginBottom: 8 }}>Recommended path forward</div>
        <ol style={{ margin: 0, paddingLeft: 20, fontSize: 13, lineHeight: 1.65, color: '#d9e4ea' }}>
          <li><strong style={{ color: '#fff' }}>Lead with D · Wordmark</strong> + <strong style={{ color: '#fff' }}>E · Stacked block</strong> — neither has a close conflict.</li>
          <li><strong style={{ color: '#fff' }}>Drop F · Notch</strong> — too close to Vercel\'s triangle.</li>
          <li><strong style={{ color: '#fff' }}>Talk to legal</strong> about the SecurityV0 name itself. Vercel\'s v0 trademark is the dominant risk; the icon is secondary.</li>
          <li><strong style={{ color: '#fff' }}>Possible name hedge:</strong> always render as <code style={{ background: 'rgba(255,255,255,0.08)', padding: '1px 5px', borderRadius: 2, fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>Security<span style={{ opacity: 0.6 }}>V0</span></code> with V0 visually demoted, so it reads as a version cue, not a co-branded "v0" reference.</li>
        </ol>
      </div>

      <div style={{ fontSize: 10, color: '#9a9d9f', letterSpacing: '0.04em', paddingTop: 8 }}>
        Sources reviewed: vercel.com/geist/brands · brandfetch.com/v0.dev · industry surveys (Looka, DesignMantic, Wix on security branding patterns). This is a designer\'s similarity scan, not a legal trademark search — recommend formal clearance via counsel before filing.
      </div>
    </div>
  );
}

// Risk badge to overlay on individual brand artboards
function RiskBadge({ level }) {
  const sev = SEV_STYLES[level];
  if (!sev) return null;
  return (
    <span style={{ background: sev.bg, color: sev.text, padding: '2px 7px', borderRadius: 2, fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{sev.label}</span>
  );
}

Object.assign(window, { FindingsPanel, RiskBadge, FINDINGS, SEV_STYLES });