import React from 'react';
import './StyleGuide.scss';

const StyleGuide: React.FC = () => {
  return (
    <div className="style-guide">
      {/* Header */}
      <div className="sg-header">
        <div className="sg-container">
          <h1 className="sg-title">Visual Style Guide</h1>
          <p className="sg-subtitle">Professional technical design system for HamView</p>
        </div>
      </div>

      {/* Main Content */}
      <div className="sg-container">
        {/* Color Palette Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Color Palette</h2>

          {/* Base Colors */}
          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Base Colors</h3>
            <div className="sg-color-grid">
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#071b3a' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Primary Background</span>
                  <code className="sg-color-code">#071b3a</code>
                  <code className="sg-color-var">--app-bg</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#0b2752' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Elevated Background</span>
                  <code className="sg-color-code">#0b2752</code>
                  <code className="sg-color-var">--app-bg-elevated</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#e8efff' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Primary Text</span>
                  <code className="sg-color-code">#e8efff</code>
                  <code className="sg-color-var">--app-text</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#afc1e6' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Muted Text</span>
                  <code className="sg-color-code">#afc1e6</code>
                  <code className="sg-color-var">--app-text-muted</code>
                </div>
              </div>
            </div>
          </div>

          {/* Accent Colors */}
          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Accent Colors</h3>
            <div className="sg-color-grid">
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#8eb4ff' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Primary Blue</span>
                  <code className="sg-color-code">#8eb4ff</code>
                  <code className="sg-color-var">--app-accent-primary</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#5a9eff' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Secondary Blue</span>
                  <code className="sg-color-code">#5a9eff</code>
                  <code className="sg-color-var">--app-accent-blue</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#ffd700' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Yellow Accent</span>
                  <code className="sg-color-code">#ffd700</code>
                  <code className="sg-color-var">--app-accent-yellow</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#a8c5ff' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Light Blue</span>
                  <code className="sg-color-code">#a8c5ff</code>
                  <code className="sg-color-var">--app-blue-light</code>
                </div>
              </div>
            </div>
          </div>

          {/* Status Colors */}
          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Status Colors</h3>
            <div className="sg-color-grid">
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#4ade80' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Success</span>
                  <code className="sg-color-code">#4ade80</code>
                  <code className="sg-color-var">--app-status-success</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#facc15' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Warning</span>
                  <code className="sg-color-code">#facc15</code>
                  <code className="sg-color-var">--app-status-warning</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#ef4444' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Error</span>
                  <code className="sg-color-code">#ef4444</code>
                  <code className="sg-color-var">--app-status-error</code>
                </div>
              </div>
              <div className="sg-color-card">
                <div className="sg-color-swatch" style={{ backgroundColor: '#60a5fa' }}></div>
                <div className="sg-color-info">
                  <span className="sg-color-name">Info</span>
                  <code className="sg-color-code">#60a5fa</code>
                  <code className="sg-color-var">--app-status-info</code>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Typography Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Typography</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Font Family: Inter, -apple-system, sans-serif</h3>
            <div className="sg-typography-grid">
              <div className="sg-type-item">
                <h1 className="type-h1">Heading 1 - Page Title</h1>
                <span className="type-meta">32px • 700 • Line Height: 1.2</span>
              </div>
              <div className="sg-type-item">
                <h2 className="type-h2">Heading 2 - Section Title</h2>
                <span className="type-meta">24px • 700 • Line Height: 1.3</span>
              </div>
              <div className="sg-type-item">
                <h3 className="type-h3">Heading 3 - Component Title</h3>
                <span className="type-meta">18px • 600 • Line Height: 1.4</span>
              </div>
              <div className="sg-type-item">
                <p className="type-body">Body text - Regular paragraph content</p>
                <span className="type-meta">14px • 400 • Line Height: 1.6</span>
              </div>
              <div className="sg-type-item">
                <p className="type-small">Small text - Secondary information</p>
                <span className="type-meta">12px • 400 • Line Height: 1.5</span>
              </div>
              <div className="sg-type-item">
                <code className="type-code">const x = "monospace code";</code>
                <span className="type-meta">13px • 400 • Courier New/Monospace</span>
              </div>
            </div>
          </div>
        </section>

        {/* Buttons Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Buttons</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Button States</h3>
            <div className="sg-demo-grid">
              <div className="sg-demo-item">
                <button className="btn btn-primary">Primary Button</button>
                <span className="sg-demo-label">Primary</span>
              </div>
              <div className="sg-demo-item">
                <button className="btn btn-primary" disabled>
                  Disabled
                </button>
                <span className="sg-demo-label">Primary Disabled</span>
              </div>
              <div className="sg-demo-item">
                <button className="btn btn-secondary">Secondary Button</button>
                <span className="sg-demo-label">Secondary</span>
              </div>
              <div className="sg-demo-item">
                <button className="btn btn-tertiary">Tertiary Button</button>
                <span className="sg-demo-label">Tertiary</span>
              </div>
              <div className="sg-demo-item">
                <button className="btn btn-danger">Danger Button</button>
                <span className="sg-demo-label">Danger</span>
              </div>
              <div className="sg-demo-item">
                <button className="btn btn-success">Success Button</button>
                <span className="sg-demo-label">Success</span>
              </div>
            </div>
          </div>
        </section>

        {/* Badges Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Badges & Tags</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Status Badges</h3>
            <div className="sg-demo-inline">
              <span className="badge badge-success">Online</span>
              <span className="badge badge-warning">Pending</span>
              <span className="badge badge-error">Offline</span>
              <span className="badge badge-info">Active</span>
            </div>
          </div>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Technical Tags</h3>
            <div className="sg-demo-inline">
              <span className="tag tag-blue">TypeScript</span>
              <span className="tag tag-blue">Component</span>
              <span className="tag tag-yellow">Core</span>
              <span className="tag tag-yellow">Radio</span>
            </div>
          </div>
        </section>

        {/* Cards Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Cards & Containers</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Card Styles</h3>
            <div className="sg-card-grid">
              <div className="sg-card sg-card-default">
                <div className="sg-card-header">
                  <h4>Default Card</h4>
                </div>
                <div className="sg-card-body">
                  <p>Standard content area with consistent spacing and typography.</p>
                </div>
              </div>
              <div className="sg-card sg-card-elevated">
                <div className="sg-card-header">
                  <h4>Elevated Card</h4>
                </div>
                <div className="sg-card-body">
                  <p>Higher elevation for primary focus areas and important content.</p>
                </div>
              </div>
              <div className="sg-card sg-card-accent">
                <div className="sg-card-header">
                  <h4>Accent Card</h4>
                </div>
                <div className="sg-card-body">
                  <p>Emphasizes technical information with blue accent border.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Input Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Form Elements</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Input Fields</h3>
            <div className="sg-form-grid">
              <div className="sg-form-group">
                <label className="form-label">Text Input</label>
                <input
                  type="text"
                  className="form-input"
                  placeholder="Enter text here..."
                />
              </div>
              <div className="sg-form-group">
                <label className="form-label">Search Input</label>
                <input
                  type="text"
                  className="form-input form-input-search"
                  placeholder="Search..."
                />
              </div>
              <div className="sg-form-group">
                <label className="form-label">Code Input</label>
                <input
                  type="text"
                  className="form-input form-input-code"
                  value="const value = 'monospace';"
                  readOnly
                />
              </div>
              <div className="sg-form-group">
                <label className="form-label">Select Dropdown</label>
                <select className="form-select">
                  <option>Option 1</option>
                  <option>Option 2</option>
                  <option>Option 3</option>
                </select>
              </div>
            </div>
          </div>
        </section>

        {/* Code Block Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Code & Technical Elements</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Code Block</h3>
            <div className="code-block">
              <pre><code>{`/* CSS Variables - Easy Reuse */
:root {
  --app-accent-primary: #8eb4ff;
  --app-accent-yellow: #ffd700;
  --app-status-success: #4ade80;
}

/* Usage Example */
.component {
  color: var(--app-text);
  background: var(--app-bg-elevated);
  border: 1px solid var(--app-border-color);
}`}</code></pre>
            </div>
          </div>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Inline Code & Emphasis</h3>
            <div className="sg-demo-block">
              <p>
                Use <code className="inline-code">className</code> for CSS classes and <code className="inline-code">var(--app-accent-yellow)</code> for CSS variables.
              </p>
              <p>
                Technical terms like <span className="highlight-tech">HamView</span> or <span className="highlight-tech">APRS</span> can be emphasized.
              </p>
            </div>
          </div>
        </section>

        {/* Grid & Spacing Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Spacing & Layout</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Spacing Scale</h3>
            <div className="sg-spacing-grid">
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '4px' }}></div>
                <span>4px (xs)</span>
              </div>
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '8px' }}></div>
                <span>8px (sm)</span>
              </div>
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '12px' }}></div>
                <span>12px (md)</span>
              </div>
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '16px' }}></div>
                <span>16px (lg)</span>
              </div>
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '24px' }}></div>
                <span>24px (xl)</span>
              </div>
              <div className="sg-spacing-item">
                <div className="sg-spacing-box" style={{ padding: '32px' }}></div>
                <span>32px (2xl)</span>
              </div>
            </div>
          </div>
        </section>

        {/* Borders & Shadows Section */}
        <section className="sg-section">
          <h2 className="sg-section-title">Borders & Effects</h2>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Border Radius</h3>
            <div className="sg-effects-grid">
              <div className="sg-effect-box" style={{ borderRadius: '0' }}>Square</div>
              <div className="sg-effect-box" style={{ borderRadius: '4px' }}>4px</div>
              <div className="sg-effect-box" style={{ borderRadius: '8px' }}>8px</div>
              <div className="sg-effect-box" style={{ borderRadius: '12px' }}>12px</div>
            </div>
          </div>

          <div className="sg-subsection">
            <h3 className="sg-subsection-title">Shadow Elevations</h3>
            <div className="sg-effects-grid">
              <div className="sg-shadow-box sg-shadow-sm">Slight Elevation</div>
              <div className="sg-shadow-box sg-shadow-md">Medium Elevation</div>
              <div className="sg-shadow-box sg-shadow-lg">High Elevation</div>
            </div>
          </div>
        </section>

        {/* Footer Section */}
        <section className="sg-section sg-footer">
          <p className="sg-footer-text">
            This style guide is a living document. All CSS variables are centralized in <code className="inline-code">App.scss</code> for easy customization and consistency across the application.
          </p>
        </section>
      </div>
    </div>
  );
};

export default StyleGuide;
