'use client';

import { useState, useMemo } from 'react';
import { marked } from 'marked';
import { Section } from '../ui/Section';

// AI context markdown - condensed brand guidelines for AI systems
export const AI_CONTEXT_MARKDOWN = `# whyrating.com Brand Context for AI Systems

> **Purpose:** This document provides AI systems with comprehensive brand guidelines for generating content, designs, copy, and code related to whyrating.com.

---

## Brand Identity

### What whyrating.com Is
A review intelligence tool that helps local business owners understand what's really driving their Google rating — enterprise-grade insights at a small business price, no subscription required.

### Target Audience
Small and medium business owners: bakery owners, dentists, auto shop managers, local service providers. People who want actionable insights without complexity, jargon, or enterprise pricing.

### Core Positioning

| Attribute | Value |
|-----------|-------|
| Tagline | "The story behind your stars" |
| Primary CTA | "Analyze my reviews" |
| Value Proposition | "Enterprise-grade insights. Small business price." |
| Voice | Helpful expert, not salesy |
| Feel | Professional but approachable |

### The Logo Story (One Sentence)
"Your Google rating (yellow star) hides insights (dark magnifier) that reveal a path to growth (green bars)."

---

## Design System

### Key Principle
> **Logo = Distinctive.** Creates recognition and differentiation.
> **UI = Familiar.** Feels like tools users already know.

### Logo Colors (Reserved for Brand Mark Only)

| Element | HEX | RGB | Usage |
|---------|-----|-----|-------|
| Star | \`#FBBC05\` | rgb(251, 188, 5) | Google Yellow — instant recognition |
| Magnifier | \`#1E293B\` | rgb(30, 41, 59) | Dark Slate — "we see deeper" |
| Lens | \`#FEF3C7\` | rgb(254, 243, 199) | Light amber interior |
| Bar Light | \`#86EFAC\` | rgb(134, 239, 172) | Shortest growth bar |
| Bar Mid | \`#22C55E\` | rgb(34, 197, 94) | Medium growth bar |
| Bar Dark | \`#15803D\` | rgb(21, 128, 61) | Tallest growth bar |

### UI Colors (Product Interface & Marketing)

| Role | HEX | RGB | Usage |
|------|-----|-----|-------|
| Primary | \`#4285F4\` | rgb(66, 133, 244) | CTAs, links, buttons, focus states |
| Secondary | \`#1E40AF\` | rgb(30, 64, 175) | Hover states, depth |
| Accent | \`#F59E0B\` | rgb(245, 158, 11) | Highlights, \`.com\` in wordmark |
| Success | \`#34A853\` | rgb(52, 168, 83) | Success states, positive metrics |
| Error | \`#EA4335\` | rgb(234, 67, 53) | Errors, warnings |
| Dark | \`#1E293B\` | rgb(30, 41, 59) | Primary text |
| Slate | \`#64748B\` | rgb(100, 116, 139) | Secondary text |
| Light | \`#F8FAFC\` | rgb(248, 250, 252) | Page backgrounds |
| Card | \`#FFFFFF\` | rgb(255, 255, 255) | Card backgrounds |
| Dark BG | \`#1C1917\` | rgb(28, 25, 23) | Dark mode background (Stone 900) |

### Typography

| Context | Font | Weight | Size |
|---------|------|--------|------|
| Wordmark only | Nunito | 700 | Variable |
| H1 | Inter | 700 | 36px |
| H2 | Inter | 600 | 30px |
| H3 | Inter | 600 | 24px |
| H4 | Inter | 500 | 20px |
| Body | Inter | 400 | 16px |
| Small | Inter | 400 | 14px |
| Caption | Inter | 400 | 12px |

**Line Heights:** Headings 1.2-1.3, Body 1.5-1.6

**Font Loading:**
\`\`\`html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@700&display=swap" rel="stylesheet">
\`\`\`

### Border Radius
- Brand radius: \`10px\` (professional yet approachable)

---

## Brand Voice

### Tone Principles
1. **Helpful expert** — knowledgeable but never condescending
2. **Plain language** — no jargon, no buzzwords
3. **Respectful of time** — get to the point
4. **Encouraging** — problems are fixable

### Writing Examples

#### DO ✅

| Context | Example |
|---------|---------|
| Headlines | "See exactly what's frustrating your customers" |
| Value prop | "Fix the right problems first" |
| Pricing | "Enterprise-grade insights. Small business price." |
| CTA | "Analyze my reviews" |
| Feature | "We read every review so you don't have to" |
| Support | "Questions? Just reply to this email." |

#### DON'T ❌

| Context | Bad Example | Why |
|---------|-------------|-----|
| Headlines | "Leverage AI-powered sentiment analysis" | Jargon |
| Value prop | "Unlock synergies in your feedback pipeline" | Buzzwords |
| Pricing | "🚨 LIMITED TIME: 50% OFF!" | Salesy/desperate |
| CTA | "Get started now!" | Generic, pushy |
| Feature | "Revolutionary disruptive solution" | Empty hype |
| Support | "Please submit a ticket" | Cold, corporate |

### Email Subject Lines
- ✅ "Your June review summary is ready"
- ✅ "3 things customers mentioned this week"
- ❌ "🚨 URGENT: Don't miss your analytics!"
- ❌ "You won't BELIEVE what customers said"

---

## Logo Usage Rules

### Logo Variants
1. **Icon Only** — Star + magnifier + bars, no text (favicons, app icons, watermarks)
2. **Primary (Vertical)** — Icon above, wordmark below (landing pages, marketing)
3. **Full (Vertical)** — Icon + wordmark + tagline (splash screens, presentations)
4. **Horizontal** — Icon left, wordmark right (headers, email signatures)
5. **Horizontal Full** — Icon + wordmark + tagline horizontal (documentation)

### Minimum Sizes
- **Full logo:** 120px width minimum
- **Icon only:** 32px minimum

### Logo Misuse — DO NOT:
- Change logo colors outside approved variations
- Stretch, skew, or distort the logo
- Add effects (shadows, gradients, outlines)
- Place on busy backgrounds without contrast
- Rearrange logo elements
- Use Google Blue for the magnifier (makes us look like a Google product)

---

## CSS Variables Reference

\`\`\`css
:root {
  /* Brand Logo Colors */
  --brand-star: #FBBC05;
  --brand-magnifier: #1E293B;
  --brand-lens: #FEF3C7;
  --brand-bar-light: #86EFAC;
  --brand-bar-mid: #22C55E;
  --brand-bar-dark: #15803D;
  --brand-accent: #F59E0B;

  /* UI Colors */
  --ui-primary: #4285F4;
  --ui-primary-hover: #1E40AF;
  --ui-success: #34A853;
  --ui-error: #EA4335;

  /* Surface Colors */
  --surface-page: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-muted: #F1F5F9;

  /* Fonts */
  --font-sans: 'Inter', sans-serif;
  --font-wordmark: 'Nunito', sans-serif;

  /* Border radius */
  --radius-brand: 10px;
}

/* Dark mode */
.dark {
  --surface-page: #1C1917;
  --surface-card: #292524;
  --surface-muted: #44403C;
}
\`\`\`

---

## AI Generation Rules

When generating content for whyrating.com:

### Copy/Text
1. Use plain language — avoid jargon like "leverage", "synergy", "pipeline"
2. Be direct and respectful of time
3. Frame problems as fixable, tone should be encouraging
4. Never use desperate/salesy language (🚨, "URGENT", "LIMITED TIME")
5. Primary CTA is always "Analyze my reviews" or close variation

### Design/UI
1. Use \`#4285F4\` (Primary Blue) for interactive elements
2. Use \`#1E293B\` (Dark) for primary text
3. Reserve logo colors for the logo only — don't use \`#FBBC05\` or greens in UI
4. Use \`#F59E0B\` (Accent) sparingly for warmth and star-related visuals
5. Border radius should be \`10px\` for cards/buttons
6. Always support dark mode with warm Stone palette

### Code
1. Use Inter font family for UI, Nunito only for wordmark
2. Include font preconnect for performance
3. Use CSS variables for colors
4. Tailwind classes follow brand system

---

## Quick Copy Reference

| Need | Copy |
|------|------|
| Tagline | "The story behind your stars" |
| Primary CTA | "Analyze my reviews" |
| Value prop | "Enterprise-grade insights. Small business price." |
| Problem statement | "Your Google rating tells customers whether to visit — but it doesn't tell you why it's dropping." |
| Solution | "whyrating.com analyzes every review and shows you exactly what's frustrating customers, what they love, and what to fix first." |

---

*Version: 2.0 | Last updated: January 2025*
`;

export function AIContextTab() {
  const [copied, setCopied] = useState(false);

  const htmlContent = useMemo(() => {
    return marked.parse(AI_CONTEXT_MARKDOWN) as string;
  }, []);

  const copyToClipboard = () => {
    navigator.clipboard.writeText(AI_CONTEXT_MARKDOWN).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  const downloadMarkdown = () => {
    const blob = new Blob([AI_CONTEXT_MARKDOWN], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'whyrating-ai-context.md';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <Section
        title="AI Context Document"
        description="Use this markdown as context/system prompt for AI systems generating whyrating.com content"
      >
        <div className="flex flex-wrap gap-3 mb-6">
          <button
            onClick={downloadMarkdown}
            className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--ui-primary)] text-white rounded-lg text-sm font-medium hover:bg-[var(--ui-primary-hover)] transition-colors cursor-pointer"
          >
            ↓ Download .md
          </button>
          <button
            onClick={copyToClipboard}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
              copied
                ? 'bg-green-500 text-white'
                : 'bg-slate-100 dark:bg-stone-800 border border-slate-100 dark:border-stone-700 text-slate-700 dark:text-stone-300 hover:bg-slate-100 dark:hover:bg-stone-700/70'
            }`}
          >
            {copied ? '✓ Copied!' : 'Copy to clipboard'}
          </button>
        </div>

        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
          <p className="text-sm text-amber-800 dark:text-amber-200">
            <strong>Usage:</strong> Copy this document and include it in your AI system prompt, Claude Project Knowledge,
            or as context when asking AI to generate content, code, or designs for whyrating.com.
          </p>
        </div>

        <div
          className="markdown-content bg-slate-50 dark:bg-stone-800 rounded-xl p-6 border border-slate-100 dark:border-stone-700"
          dangerouslySetInnerHTML={{ __html: htmlContent }}
        />
      </Section>
    </div>
  );
}