"use client";

import { ThemeColor } from "./types";

export function DocsNextra({ themeColor }: { themeColor?: ThemeColor }) {
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "system-ui, sans-serif", fontSize: 12, background: "#fff" }}>
      <div style={{ width: 168, flexShrink: 0, borderRight: "1px solid #f3f4f6", padding: "14px 10px", background: "#fafafa", display: "flex", flexDirection: "column", gap: 2 }}>
        {[
          { section: "Getting Started", items: ["Introduction", "Installation", "Quick Start"] },
          { section: "Components",      items: ["Button", "Card", "Input", "Modal", "Table"] },
          { section: "API Reference",   items: ["REST API", "Webhooks"] },
        ].map(g => (
          <div key={g.section} style={{ marginBottom: 14 }}>
            <p style={{ fontSize: 9, fontWeight: 600, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, padding: "0 6px" }}>{g.section}</p>
            {g.items.map((item, i) => (
              <div key={item} style={{ padding: "5px 8px", borderRadius: 5, fontSize: 10, color: i === 0 && g.section === "Getting Started" ? "#fff" : "#71717a", background: i === 0 && g.section === "Getting Started" ? "#18181b" : "none", marginBottom: 1, cursor: "pointer" }}>{item}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "18px 22px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 9, color: "#9ca3af", marginBottom: 16 }}>
          <span>Docs</span><span>/</span><span>Getting Started</span><span>/</span><span style={{ color: "#374151" }}>Introduction</span>
        </div>
        <h1 style={{ fontSize: 16, fontWeight: 700, color: "#09090b", marginBottom: 8 }}>Introduction</h1>
        <p style={{ fontSize: 11, color: "#71717a", marginBottom: 14, lineHeight: 1.65 }}>Acme UI is a collection of re-usable components that you can copy and paste into your web apps. Built with Radix UI and Tailwind CSS.</p>
        <div style={{ borderRadius: 8, padding: "10px 14px", marginBottom: 14, background: "#18181b" }}>
          <p style={{ fontSize: 10, fontFamily: "monospace", color: "#10b981" }}>$ npm install acme-ui</p>
        </div>
        <h2 style={{ fontSize: 13, fontWeight: 600, color: "#09090b", marginBottom: 8 }}>Key features</h2>
        {["Accessible by default", "Customisable", "Open source", "TypeScript ready"].map(f => (
          <div key={f} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "#71717a", marginBottom: 5 }}>
            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "#9ca3af", flexShrink: 0 }} />{f}
          </div>
        ))}
      </div>
    </div>
  );
}

export function DocsShadcnCustom({ themeColor }: { themeColor?: ThemeColor }) {
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "system-ui, sans-serif", fontSize: 12, background: "#fff" }}>
      <div style={{ width: 168, flexShrink: 0, borderRight: "1px solid #e5e7eb", padding: "14px 10px", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 16, paddingBottom: 12, borderBottom: "1px solid #f3f4f6" }}>
          <div style={{ width: 18, height: 18, borderRadius: 4, background: "#09090b" }} />
          <span style={{ fontWeight: 700, fontSize: 11, color: "#09090b" }}>Acme Docs</span>
        </div>
        {[{ section: "Guides", items: ["Introduction", "Installation", "Theming"] }, { section: "Components", items: ["Button", "Input", "Select", "Dialog"] }].map(g => (
          <div key={g.section} style={{ marginBottom: 12 }}>
            <p style={{ fontSize: 9, fontWeight: 600, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 5, padding: "0 6px" }}>{g.section}</p>
            {g.items.map((item, i) => (
              <div key={item} style={{ padding: "5px 8px", borderRadius: 5, fontSize: 10, marginBottom: 1, cursor: "pointer", background: i === 0 && g.section === "Guides" ? "#f4f4f5" : "none", color: i === 0 && g.section === "Guides" ? "#09090b" : "#71717a", fontWeight: i === 0 && g.section === "Guides" ? 500 : 400 }}>{item}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ flex: 1, padding: "18px 22px", overflow: "auto" }}>
        <h1 style={{ fontSize: 16, fontWeight: 700, color: "#09090b", marginBottom: 6 }}>Introduction</h1>
        <p style={{ fontSize: 11, color: "#71717a", marginBottom: 16, lineHeight: 1.65 }}>A set of beautifully designed components built with Radix UI and Tailwind CSS.</p>
        <div style={{ border: "1px solid #e5e7eb", borderRadius: 8, overflow: "hidden", marginBottom: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "7px 12px", borderBottom: "1px solid #e5e7eb", background: "#fafafa" }}>
            <span style={{ fontSize: 9, color: "#9ca3af" }}>bash</span>
          </div>
          <div style={{ padding: "10px 14px", background: "#09090b" }}>
            <p style={{ fontSize: 10, fontFamily: "monospace", color: "#4ade80" }}>npx shadcn@latest init</p>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {["Button", "Card", "Input", "Badge"].map(c => (
            <div key={c} style={{ borderRadius: 8, border: "1px solid #e5e7eb", padding: "10px 14px", cursor: "pointer" }}>
              <p style={{ fontSize: 10, fontWeight: 600, color: "#374151", marginBottom: 2 }}>{c}</p>
              <p style={{ fontSize: 9, color: "#9ca3af" }}>View component →</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}