import { Meta } from '@storybook/addon-docs/blocks';
import { XerticaLogo } from './brand/xertica-logo/XerticaLogo';

<Meta title="Introduction" />

<div className="flex flex-col gap-8 py-12 max-w-4xl mx-auto">
  <div className="flex flex-col items-center text-center space-y-4">
    <div className="p-3">
      <XerticaLogo className="h-16 w-auto" />
    </div>
    <h1 className="text-5xl font-extrabold tracking-tight text-foreground">Design System</h1>
    <p className="text-xl text-muted-foreground max-w-2xl">
      Official Design System for Xertica projects. Built with Tailwind CSS v4, Radix UI, and AI-first engineering.
    </p>
    <div className="text-lg font-mono text-muted-foreground bg-muted px-4 py-2 rounded-lg">
      97 Components
    </div>
    <div className="flex gap-4 pt-4">
      <a href="https://www.npmjs.com/package/xertica-ui" target="_blank" className="h-11 px-8 rounded-full border border-border bg-background text-foreground font-medium flex items-center hover:bg-accent transition-colors no-underline">
        NPM
      </a>
    </div>
  </div>

  {/* Installation */}
  <div className="bg-muted p-8 rounded-2xl space-y-6">
    <h2 className="text-2xl font-bold">Installation</h2>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div className="space-y-3">
        <h3 className="font-semibold flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
          npm
        </h3>
        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
          <pre className="text-foreground"><code>npm install xertica-ui</code></pre>
        </div>
      </div>
      <div className="space-y-3">
        <h3 className="font-semibold flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
          npx (CLI)
        </h3>
        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
          <pre className="text-foreground"><code>npx xertica-ui@latest init</code></pre>
        </div>
      </div>
    </div>
    <p className="text-sm text-muted-foreground">
      Use <code>npm</code> to install the package, or <code>npx</code> to scaffold a new project with the CLI.
    </p>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
      <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-4 text-info">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
      </div>
      <h3 className="text-lg font-semibold mb-2">Instant Installation</h3>
      <p className="text-sm text-muted-foreground leading-relaxed">
        Add to your project with a single command. Integrated CLI for layout and theme scaffolding.
      </p>
    </div>

    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
      <div className="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center mb-4 text-success">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
      </div>
      <h3 className="text-lg font-semibold mb-2">Tailwind v4 Native</h3>
      <p className="text-sm text-muted-foreground leading-relaxed">
        Leverage the power of Tailwind CSS v4 with its new faster and more flexible engine.
      </p>
    </div>

    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
      <div className="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center mb-4 text-warning">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
      </div>
      <h3 className="text-lg font-semibold mb-2">AI-Ready</h3>
      <p className="text-sm text-muted-foreground leading-relaxed">
        Documentation optimized for LLM prompt systems (Antigravity, Cursor, etc).
      </p>
    </div>
  </div>

  <div className="space-y-6 pt-12">
    <h2 className="text-3xl font-bold border-b pb-2 border-border">Design Philosophy</h2>
    <p className="text-lg leading-relaxed text-muted-foreground">
      Xertica UI focuses on modularity and high performance for Xertica's ecosystem of products. 
      Our goal is to ensure functional consistency, accessibility (via Radix UI), and rapid development at scale.
    </p>

    <div className="bg-muted p-8 rounded-2xl space-y-4">
      <h4 className="font-bold flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
        Ecosystem Highlights
      </h4>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
          <span className="w-2 h-2 rounded-full bg-primary" />
          <span><b>Radix UI</b> for accessible, unstyled primitives.</span>
        </div>
        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
          <span className="w-2 h-2 rounded-full bg-primary" />
          <span><b>Tailwind v4</b> ultra-fast engine.</span>
        </div>
        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
          <span className="w-2 h-2 rounded-full bg-primary" />
          <span><b>Dark Mode</b> native via CSS Tokens.</span>
        </div>
        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
          <span className="w-2 h-2 rounded-full bg-primary" />
          <span><b>Full Customization</b> via <code>tokens.css</code>.</span>
        </div>
      </div>
    </div>
  </div>

  <div className="pt-12 text-center text-sm text-muted-foreground border-t border-border">
    &copy; 2026 Xertica. All rights reserved.
  </div>
</div>