import { Plus } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    id: "01",
    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: "02",
    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: "03",
    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: "04",
    title: "Beyond design",
    content:
      "I bridge design and development, turning ideas into interactive experiences with modern tools and technology.",
  },
  {
    id: "05",
    title: "What inspires me",
    content:
      "Minimalism, architecture, and everyday details. I believe great design is found in the small things we often overlook.",
  },
  {
    id: "06",
    title: "Who I work with",
    content:
      "I collaborate with startups, brands, and individuals who value thoughtful design and want to create lasting impact.",
  },
  {
    id: "07",
    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: "08",
    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 function Accordion01() {
  return (
    <div className="mx-auto flex h-full w-full max-w-xl items-center justify-center">
      <Accordion defaultValue={["03"]} className="w-full">
        {items.map((item) => (
          <AccordionItem value={item.id} key={item.id}>
            <AccordionTrigger className="[data-slot=accordion-trigger] cursor-pointer text-left duration-1000 hover:pl-3 hover:no-underline hover:[&_div.bg-primary]:bg-secondary hover:[&_svg]:rotate-90 hover:[&_svg]:text-primary [&>svg]:hidden">
              <div className="flex flex-1 items-start justify-between gap-4">
                <div className="flex items-center gap-3">
                  <h1>{item.id}</h1>
                  <h3 className="text-lg font-semibold md:text-xl">
                    {item.title}
                  </h3>
                </div>
                <div className="flex items-center bg-primary p-2 duration-500">
                  <Plus
                    className={cn(
                      "size-4 shrink-0 text-primary-foreground transition-transform duration-1000",
                      "[data-state=open]:rotate-90"
                    )}
                  />
                </div>
              </div>
            </AccordionTrigger>

            <AccordionContent className="pr-20 pb-6 text-muted-foreground">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

/* eslint-disable react/jsx-key */
import { Minus, Plus } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

const items = [
  {
    id: "01",
    title: "Who am I?",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="01"
      >
        <div className="">
          <h1 className="text-xs">
            I’m Ali Imam, a designer and creative developer dedicated to
            crafting digital experiences that are minimal, meaningful, and
            timeless. My work blends aesthetic precision with technical
            expertise, creating interfaces and products that feel intuitive and
            resonate deeply with users. Inspired by the harmony of architecture
            and the subtleties of human behavior, I approach every project with
            curiosity and a commitment to storytelling. Whether designing a
            sleek app interface or coding a responsive website, my goal is to
            create experiences that leave a lasting impression while solving
            real problems for users and businesses alike.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Creative Direction, UI/UX Design, Front-End Development, Brand
            Identity Design, Interaction Design, Prototyping, User Research,
            Visual Storytelling, Responsive Web Design, Design Systems
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "02",
    title: "What do I design?",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="02"
      >
        <div className="">
          <h1 className="text-xs">
            I design clean, functional, and visually compelling interfaces,
            brand systems, and digital products that prioritize usability and
            clarity. From pixel-perfect mobile apps to immersive websites, my
            work is rooted in simplicity, ensuring every element serves a
            purpose. I create cohesive brand identities that reflect a company’s
            essence and connect emotionally with audiences. My designs are not
            just about aesthetics—they’re about guiding users effortlessly
            through intuitive layouts, thoughtful typography, and seamless
            interactions. Whether it’s a startup’s landing page or a complex
            SaaS platform, I aim to deliver experiences that are both beautiful
            and highly functional.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            UI/UX Design, Web Design, Mobile App Design, Brand Identity Systems,
            Visual Design, Wireframing, Prototyping, Design Systems,
            Iconography, Animation Design
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "03",
    title: "My design approach",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="03"
      >
        <div className="">
          <h1 className="text-xs">
            My design approach is holistic, blending form, function, and feeling
            to create experiences that resonate. I prioritize clarity, ensuring
            users grasp a design’s purpose instantly, while obsessing over
            details like typography and micro-interactions to elevate the
            experience. Storytelling is at the core—every project tells a
            narrative that connects with its audience emotionally and
            intellectually. I start by understanding user needs and business
            goals, then iterate through sketches, wireframes, and prototypes,
            refining based on feedback. This process ensures designs are not
            only visually striking but also intuitive and purposeful, creating a
            seamless bridge between user expectations and client objectives.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            User-Centered Design, Interaction Design, Prototyping, User Testing,
            Design Thinking, Visual Storytelling, Information Architecture,
            Accessibility Design, Feedback Integration, Iterative Design
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "04",
    title: "Beyond design",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="04"
      >
        <div className="">
          <h1 className="text-xs">
            As a creative developer, I go beyond designing visuals—I build
            interactive, performant experiences that bring ideas to life. Using
            tools like Next.js, React, and TypeScript, I code responsive
            websites and applications that are as robust as they are beautiful.
            My dual expertise in design and development allows me to oversee
            projects from concept to deployment, ensuring a seamless transition
            from prototypes to production. Whether it’s integrating APIs,
            optimizing performance, or crafting smooth animations, I focus on
            creating digital products that users can engage with effortlessly
            across devices, delivering both technical excellence and aesthetic
            finesse.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Front-End Development, Full-Stack Development, API Integration,
            Responsive Web Development, Animation Coding, Performance
            Optimization, CMS Integration, JavaScript Frameworks, Web
            Accessibility, Code Reviews
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "05",
    title: "What inspires me",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="05"
      >
        <div className="">
          <h1 className="text-xs">
            My inspiration stems from the elegance of minimalism, the structural
            beauty of architecture, and the subtle details of everyday life. A
            perfectly balanced building, the texture of a natural material, or
            the rhythm of a bustling street can spark ideas for a user interface
            or brand system. I’m also inspired by human behavior—how people
            interact with technology, what frustrates them, and what brings joy.
            This curiosity drives me to design with intention, creating
            experiences that feel calm, intuitive, and timeless. By focusing on
            the often-overlooked details, I craft designs that resonate deeply
            and endure over time.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Moodboard Creation, Visual Inspiration Curation, Environmental
            Design, User Behavior Analysis, Emotional Design, Minimalist Design,
            Concept Development, Design Research, Trend Analysis, Creative
            Consulting
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "06",
    title: "Who I work with",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="06"
      >
        <div className="">
          <h1 className="text-xs">
            I partner with startups, brands, and individuals who share a passion
            for thoughtful design and meaningful impact. My collaborators range
            from tech entrepreneurs launching innovative products to established
            companies seeking to refresh their digital presence. I thrive in
            partnerships where creativity is valued, and ideas are explored
            collaboratively. By deeply understanding my clients’ goals,
            challenges, and audiences, I create designs that not only meet their
            needs but also inspire their users. Whether it’s a bold new app or a
            refined brand identity, I work with those who want to make a lasting
            difference through design that’s purposeful and memorable.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Client Collaboration, Startup Consulting, Brand Strategy,
            User-Centered Design, Project Management, Stakeholder Workshops,
            Creative Direction, Brand Refresh, Product Launch Design, Community
            Engagement Design
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "07",
    title: "My toolkit",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="07"
      >
        <div className="">
          <h1 className="text-xs">
            My toolkit is a blend of design and development tools that empower
            me to execute ideas with precision and efficiency. For design, I use
            Figma to create wireframes, prototypes, and pixel-perfect
            interfaces, enabling seamless collaboration with clients. On the
            development side, I leverage Next.js, React, and TypeScript to build
            fast, scalable applications. Tools like GSAP bring animations to
            life, while Tailwind CSS ensures consistent, rapid styling. However,
            tools are secondary to the idea—they exist to serve the vision. My
            focus is on crafting solutions that align with the project’s goals,
            ensuring both aesthetic excellence and technical performance in
            every deliverable.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Figma Prototyping, Next.js Development, React Development,
            TypeScript Coding, Animation Design, CSS Styling, Design-to-Code
            Workflow, Tool Integration, Performance Optimization, Collaborative
            Design Systems
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
  {
    id: "08",
    title: "Let’s connect",
    content: [
      <div
        className="relative grid gap-10 pb-30 md:grid-cols-2 lg:gap-30 lg:pt-10"
        key="08"
      >
        <div className="">
          <h1 className="text-xs">
            I’m passionate about connecting with those who share a love for
            design, technology, and creativity. Whether you’re a startup founder
            with a bold vision, a brand seeking a fresh identity, or someone who
            wants to explore the possibilities of design, I’m here to
            collaborate. Reach me at contact@designali.com or find me on X,
            LinkedIn, or Dribbble, where I share my latest work and insights.
            I’m open to new projects, creative partnerships, or even a chat
            about the future of digital experiences. Let’s create something
            meaningful together—reach out, and let’s start the conversation.
          </h1>
        </div>
        <div className="space-y-3 pr-6 text-[8px]">
          <h1 className="">RELATED SERVICES</h1>
          <h1 className="">
            Creative Consulting, Project Scoping, Collaboration Workshops,
            Social Media Content Creation, Portfolio Reviews, Design Mentorship,
            Networking Events, Project Proposals, Client Onboarding, Idea
            Brainstorming
          </h1>
        </div>
        <div className="absolute right-0 bottom-0">
          <Button className="h-16 cursor-pointer rounded-r-none rounded-b-none px-10 text-xs">
            Reach out contact@designali.com
          </Button>
        </div>
      </div>,
    ],
  },
]

export function Accordion02() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion defaultValue={["03"]} className="w-full border">
        {items.map((item) => (
          <AccordionItem value={item.id} key={item.id}>
            <AccordionTrigger className="[data-slot=accordion-trigger] cursor-pointer text-left duration-500 hover:no-underline data-[state=open]:[&_svg]:rotate-180 data-[state=open]:[&_svg]:[#plus]:opacity-0 [&_svg]:[#plus]:[data-state=open]:opacity-0 [&>svg]:hidden">
              <div className="flex flex-1 items-center gap-4">
                <div className="relative ml-4">
                  <Plus
                    id="plus"
                    className={cn(
                      "h-6 w-6 shrink-0 transition-all duration-500",
                      "data-[state=closed]:opacity-100 group-aria-expanded/accordion-trigger:opacity-0",
                      "group-aria-expanded/accordion-trigger:rotate-180"
                    )}
                  />
                  <Minus
                    id="minus"
                    className={cn(
                      "absolute inset-0 h-6 w-6 opacity-100 transition-all duration-500",
                      "hover:opacity-100 group-aria-expanded/accordion-trigger:opacity-100",
                      "group-aria-expanded/accordion-trigger:rotate-180"
                    )}
                  />
                </div>
                <h3 className="text-lg font-semibold">{item.title}</h3>
              </div>
            </AccordionTrigger>

            <AccordionContent className="ml-6 p-0">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

/* eslint-disable @next/next/no-img-element */
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

const items = [
  {
    id: "01",
    title: "Who am I?",
    img: "/img/chat-1-light.jpg",
    content:
      "I’m Ali Imam — a multidisciplinary designer and creative developer crafting thoughtful digital experiences with purpose and precision.",
  },
  {
    id: "02",
    title: "What do I design?",
    img: "/img/dashboard-1-dark.jpg",
    content:
      "I design intuitive interfaces, visual identities, and digital products that connect clarity with emotion — always guided by simplicity and usability.",
  },
  {
    id: "03",
    title: "My design approach",
    img: "/img/hero-1.jpg",
    content:
      "Every project begins with understanding. I combine logic, emotion, and craft to create experiences that feel effortless and meaningful.",
  },
  {
    id: "04",
    title: "Philosophy & values",
    img: "/img/hero-2.jpg",
    content:
      "Design should be timeless — not trendy. I value honesty in visuals, restraint in detail, and intention in every decision I make.",
  },
  {
    id: "05",
    title: "Beyond design",
    img: "/img/login-1.jpg",
    content:
      "Outside of work, I explore photography, motion, and creative coding — all ways to see and shape the world differently.",
  },
]

export function Accordion03() {
  return (
    <div className="mx-auto flex w-full max-w-3xl items-center justify-center border">
      <Accordion defaultValue={["02"]} className="h-full w-full">
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            className="relative overflow-hidden"
          >
            <AccordionTrigger
              className="group px-6 hover:no-underline [&>svg]:hidden data-[state=open]:h-40"
            >
              <h2 className="text-lg font-semibold md:text-xl">
                {item.title}
              </h2>
            </AccordionTrigger>

            <AccordionContent className="w-full p-0 pr-4">
              <div className="flex h-full w-full flex-col md:flex-row">
                {/* Content */}
                <div className="flex w-full shrink-0 flex-col justify-between gap-6 p-6 md:w-80">
                  <p className="text-muted-foreground">
                    {item.content}
                  </p> 
                  <Button className="w-fit">
                    View More
                  </Button>
                </div>

                {/* Image */}
                <div className="min-h-0 flex-1 border border-b-0">
                  <img
                    src={item.img}
                    alt={item.title}
                    className="h-full w-full object-contain"
                  />
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

/* eslint-disable react/jsx-key */
import { Plus, X } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    id: "01",
    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: "02",
    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: "03",
    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: "04",
    title: "Beyond design",
    content:
      "I bridge design and development, turning ideas into interactive experiences with modern tools and technology.",
  },
  {
    id: "05",
    title: "What inspires me",
    content:
      "Minimalism, architecture, and everyday details. I believe great design is found in the small things we often overlook.",
  },
]

export function Accordion02() {
  return (
    <div className="mx-auto flex h-full w-full max-w-xl items-center justify-center">
      <Accordion defaultValue={["04"]} className="w-full space-y-2">
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            className="border last:border-b"
          >
            <AccordionTrigger className="m-1 cursor-pointer bg-primary/10 px-6 text-left hover:no-underline">
              <div className="flex w-full items-center justify-between gap-4">
                <h3 className="text-2xl font-semibold">
                  {item.title}
                </h3>

                <div className="relative h-6 w-6 shrink-0">
                  <Plus
                    strokeWidth={2}
                    className="
                    absolute inset-0
                    h-6 w-6
                    rotate-0 opacity-100
                    transition-all duration-300
                    group-aria-expanded/accordion-trigger:rotate-45
                    group-aria-expanded/accordion-trigger:opacity-0
                    "
                  />

                  <X
                    strokeWidth={2}
                    className="
                    absolute inset-0
                    h-6 w-6
                    rotate-45 opacity-0
                    transition-all duration-300
                    group-aria-expanded/accordion-trigger:rotate-0
                    group-aria-expanded/accordion-trigger:opacity-100
                   "
                  />
                </div>
              </div>
            </AccordionTrigger>

            <AccordionContent className="p-6">{item.content}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

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

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/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 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>
  )
}

"use client"

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

export function FAQs() {
  const faqItems = [
    {
      id: "item-1",
      question: "How fast will I receive my designs?",
      answer:
        "Most design requests are completed within 24–48 hours. Larger or more complex requests may take longer, but I provide daily progress updates so you always know what’s happening.",
    },
    {
      id: "item-2",
      question: "Who will be working on my designs?",
      answer:
        "You’ll work directly with me, Ali — the founder and sole designer. I don’t outsource or use a team, so every design is personally crafted with full attention.",
    },
    {
      id: "item-3",
      question: "What type of design work do you offer?",
      answer:
        "I work across all kinds of design, including branding, UI/UX, social media creatives, marketing designs, and website visuals.",
    },
    {
      id: "item-4",
      question: "Is there a limit to how many requests I can make?",
      answer:
        "There’s no limit on total requests. Depending on your plan, I work on a fixed number of active requests at a time. Once one is done, the next begins.",
    },
    {
      id: "item-5",
      question: "Do you offer unlimited revisions?",
      answer:
        "Yes. Unlimited revisions are included. I’ll keep refining the design until you’re fully satisfied.",
    },
    {
      id: "item-6",
      question: "How do you handle large or complex projects?",
      answer:
        "Large projects are broken into smaller tasks or phases to ensure quality, clarity, and timely delivery.",
    },
    {
      id: "item-7",
      question: "How will I receive updates on my work?",
      answer:
        "I share daily updates on what was completed that day, so you’re always aware of progress.",
    },
    {
      id: "item-8",
      question: "How do we communicate?",
      answer:
        "For smooth and fast communication, I’m available on WhatsApp. Other tools can also be used if preferred.",
    },
    {
      id: "item-9",
      question: "How do I submit design requests?",
      answer:
        "You can submit requests through WhatsApp, Figma, Google Docs, Notion, Trello, or Loom — whatever is easiest for you.",
    },
    {
      id: "item-10",
      question: "What if I don’t like the design?",
      answer:
        "That’s completely fine. We’ll revise it until it matches your vision. Feedback is a core part of the process.",
    },
  ]

  return (
    <div className="border">
      <Accordion defaultValue={["item-7"]} className="-mb-1 w-sm md:w-xl">
        {faqItems.map((item) => (
          <AccordionItem
            key={item.id}
            value={item.id}
            className="space-y-1 border-none"
          >
            <AccordionTrigger className="group flex w-full justify-end py-0 hover:no-underline [&_svg]:hidden">
              <div className="max-w-[80%] cursor-pointer bg-primary px-4 py-3 text-left text-base text-primary-foreground transition">
                {item.question}
              </div>
            </AccordionTrigger>

            <AccordionContent className="flex justify-start">
              <div className="max-w-[80%] bg-muted px-4 py-3 text-base text-muted-foreground">
                {item.answer}
              </div>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}