Accordion 05

import { Oswald } from "next/font/google"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

const myFont = Oswald({
  weight: ["400", "700"],
  subsets: ["latin"],
})

const items = [
  {
    id: "1",
    title: "Who am I?",
    content:
      "I’m Ali Imam — a designer and creative developer focused on building digital experiences that are minimal, meaningful, and timeless.",
  },
  {
    id: "2",
    title: "What do I design?",
    content:
      "I create clean, functional interfaces, brand systems, and digital products. My work blends simplicity with clarity and usability.",
  },
  {
    id: "3",
    title: "My design approach",
    content:
      "For me, design isn’t just visuals — it’s how something feels and works. I focus on clarity, detail, and storytelling in every project.",
  },
  {
    id: "4",
    title: "Beyond design",
    content:
      "I bridge design and development, turning ideas into interactive experiences with modern tools and technology.",
  },
  {
    id: "5",
    title: "What inspires me",
    content:
      "Minimalism, architecture, and everyday details. I believe great design is found in the small things we often overlook.",
  },
  {
    id: "6",
    title: "Who I work with",
    content:
      "I collaborate with startups, brands, and individuals who value thoughtful design and want to create lasting impact.",
  },
  {
    id: "7",
    title: "My toolkit",
    content:
      "Figma, Next.js, and modern frameworks are part of my process — but for me, tools always serve the idea, not the other way around.",
  },
  {
    id: "8",
    title: "Let’s connect",
    content:
      "You can reach me through contact@aliimam.in or on social platforms. I’m always open to new projects, collaborations, and conversations.",
  },
]

export default function PricingAccordion() {
  return (
    <div className="mx-auto flex h-full w-full max-w-3xl items-center justify-center">
      <Accordion defaultValue={["2"]} className="w-full">
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            className="border-transparent"
          >
            <AccordionTrigger className="cursor-pointer border-0 text-foreground/20 duration-200 hover:no-underline">
              <div className="flex flex-1 items-start gap-4 overflow-hidden"> 
                <div className="border-b flex gap-6 pl-10 w-full h-9">
                <p className="text-xs">{item.id}</p>
                  <h1
                    className={`${myFont.className} relative -translate-y-1 text-3xl uppercase md:text-5xl`}
                  >
                    {item.title}
                  </h1>
                </div>
              </div>
            </AccordionTrigger>

            <AccordionContent className="pb-10 border-b pl-20 text-muted-foreground">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}