"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { fontStacks } from "@/lib/typography"
import { cn } from "@/lib/utils"

export function AdvancedTypographySection() {
  const [openType, setOpenType] = useState(true)
  const [kerning, setKerning] = useState(true)
  const [ligatures, setLigatures] = useState(true)
  const [textBalance, setTextBalance] = useState(true)
  const [fontSmoothing, setFontSmoothing] = useState(true)
  const [selectedTab, setSelectedTab] = useState("headlines")

  // Sample text for headlines
  const headlines = [
    "Typography is the Voice of Your Design",
    "Creating Visual Hierarchy with Type",
    "The Art of Readable Interfaces",
    "Finding the Perfect Font Pairing",
    "Typography that Speaks to Your Users",
  ]

  // Sample text for paragraphs
  const paragraphs = [
    "Good typography establishes a strong visual hierarchy for the meaning of your content. It guides the reader through the content, showing what's important, what's related, and how to navigate the information. When done well, typography enhances readability, accessibility, and the overall user experience.",
    "The choice of typeface can dramatically affect how your content is perceived. Serif fonts often convey tradition, reliability, and comfort, while sans-serif fonts tend to feel more modern, clean, and straightforward. The right typeface should align with your brand's personality and the message you want to communicate.",
    "Typography isn't just about choosing fonts—it's about how you use them. Line height, letter spacing, and font size all play crucial roles in creating readable text. The goal is to make reading effortless, allowing users to focus on the content rather than struggling to decipher it.",
  ]

  // Get the current font stack
  const currentFontStack = fontStacks.sans.modern

  return (
    <section id="advanced-typography" className="scroll-mt-16">
      <h2 className="text-3xl font-semibold tracking-tight mb-4 text-foreground">Advanced Typography</h2>

      <p className="text-muted-foreground text-sm mb-8 max-w-2xl">
        Fine-tuning typography can dramatically improve the polish and readability of your interface. These advanced
        features help create a more professional and refined typographic experience.
      </p>

      <div className="space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="space-y-4">
            <h3 className="text-lg font-medium text-foreground">OpenType Features</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="opentype" className="font-medium">
                    OpenType Features
                  </Label>
                  <p className="text-sm text-muted-foreground">
                    Enable advanced typographic features like stylistic alternates
                  </p>
                </div>
                <Switch id="opentype" checked={openType} onCheckedChange={setOpenType} />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="kerning" className="font-medium">
                    Kerning
                  </Label>
                  <p className="text-sm text-muted-foreground">Adjust spacing between specific character pairs</p>
                </div>
                <Switch id="kerning" checked={kerning} onCheckedChange={setKerning} />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="ligatures" className="font-medium">
                    Ligatures
                  </Label>
                  <p className="text-sm text-muted-foreground">Combine characters into single glyphs</p>
                </div>
                <Switch id="ligatures" checked={ligatures} onCheckedChange={setLigatures} />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="text-balance" className="font-medium">
                    Text Balance
                  </Label>
                  <p className="text-sm text-muted-foreground">Improve line breaks for better readability</p>
                </div>
                <Switch id="text-balance" checked={textBalance} onCheckedChange={setTextBalance} />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="font-smoothing" className="font-medium">
                    Font Smoothing
                  </Label>
                  <p className="text-sm text-muted-foreground">Enhance text rendering on screens</p>
                </div>
                <Switch id="font-smoothing" checked={fontSmoothing} onCheckedChange={setFontSmoothing} />
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <h3 className="text-lg font-medium text-foreground">Typography Preview</h3>
            <Tabs value={selectedTab} onValueChange={setSelectedTab}>
              <TabsList className="mb-4">
                <TabsTrigger value="headlines">Headlines</TabsTrigger>
                <TabsTrigger value="paragraphs">Paragraphs</TabsTrigger>
                <TabsTrigger value="special">Special Cases</TabsTrigger>
              </TabsList>
              <TabsContent value="headlines" className="space-y-6">
                {headlines.map((headline, index) => (
                  <div key={index} className="space-y-1">
                    <h3
                      className={cn(
                        "text-2xl font-semibold",
                        openType && "font-feature-settings: 'salt' 1, 'ss01' 1",
                        kerning && "font-kerning: normal",
                        ligatures && "font-variant-ligatures: common-ligatures",
                        textBalance && "text-balance",
                        fontSmoothing && "-webkit-font-smoothing: antialiased",
                      )}
                      style={{ fontFamily: currentFontStack }}
                    >
                      {headline}
                    </h3>
                    <p className="text-xs text-muted-foreground">
                      {index === 0 && "← This headline demonstrates the selected typography features"}
                    </p>
                  </div>
                ))}
              </TabsContent>
              <TabsContent value="paragraphs" className="space-y-6">
                {paragraphs.map((paragraph, index) => (
                  <div key={index}>
                    <p
                      className={cn(
                        "text-base",
                        openType && "font-feature-settings: 'salt' 1, 'ss01' 1",
                        kerning && "font-kerning: normal",
                        ligatures && "font-variant-ligatures: common-ligatures",
                        textBalance && "text-balance",
                        fontSmoothing && "-webkit-font-smoothing: antialiased",
                      )}
                      style={{ fontFamily: currentFontStack }}
                    >
                      {paragraph}
                    </p>
                  </div>
                ))}
              </TabsContent>
              <TabsContent value="special" className="space-y-6">
                <div className="space-y-4">
                  <h4 className="text-sm font-medium">Ligatures Example</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">With Ligatures</p>
                      <p className="font-variant-ligatures: common-ligatures" style={{ fontFamily: currentFontStack }}>
                        efficient, affiliate, offline, fluffy
                      </p>
                    </div>
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">Without Ligatures</p>
                      <p
                        className="font-variant-ligatures: no-common-ligatures"
                        style={{ fontFamily: currentFontStack }}
                      >
                        efficient, affiliate, offline, fluffy
                      </p>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-sm font-medium">Kerning Example</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">With Kerning</p>
                      <p className="text-3xl font-kerning: normal" style={{ fontFamily: currentFontStack }}>
                        AWAY Typography
                      </p>
                    </div>
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">Without Kerning</p>
                      <p className="text-3xl font-kerning: none" style={{ fontFamily: currentFontStack }}>
                        AWAY Typography
                      </p>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-sm font-medium">Text Balance Example</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">With Text Balance</p>
                      <h3
                        className="text-2xl font-semibold text-balance"
                        style={{ fontFamily: currentFontStack, maxWidth: "200px" }}
                      >
                        Creating Beautiful Typography for Digital Interfaces
                      </h3>
                    </div>
                    <div className="p-4 border rounded-md">
                      <p className="text-lg mb-2">Without Text Balance</p>
                      <h3
                        className="text-2xl font-semibold"
                        style={{ fontFamily: currentFontStack, maxWidth: "200px" }}
                      >
                        Creating Beautiful Typography for Digital Interfaces
                      </h3>
                    </div>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </div>

        <div className="p-4 bg-muted/30 rounded-md border">
          <h4 className="text-sm font-medium mb-2">Advanced Typography Tips</h4>
          <ul className="list-disc list-inside space-y-2 text-xs text-muted-foreground">
            <li>
              Enable OpenType features for professional-looking text with stylistic alternates and proper ligatures
            </li>
            <li>Use proper kerning to ensure even spacing between letter pairs like "AV" or "WA"</li>
            <li>Apply text-balance for better line breaks in headlines and important text</li>
            <li>Enable font-smoothing for crisper text rendering, especially on high-resolution displays</li>
            <li>Consider using variable fonts for more precise control over font weight and width</li>
            <li>Maintain a consistent vertical rhythm by using a baseline grid</li>
            <li>Use proper typographic punctuation like em dashes (—) and smart quotes (" ")</li>
          </ul>
        </div>
      </div>
    </section>
  )
}