import Link from "next/link"
import Image from "next/image"
import { ArrowRight, BarChart3, Globe, Lightbulb, Mail, MessageSquare, Users } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-gray-900 hero-gradient">
        <div className="container mx-auto px-4 md:px-6 max-w-6xl">
          <div className="flex flex-col items-center text-center">
            <h1 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl lg:text-6xl">
              Elevate Your Brand with Strategic Marketing
            </h1>
            <p className="mt-4 max-w-[700px] text-gray-300 text-lg md:text-xl">
              We help businesses grow through data-driven marketing strategies, creative campaigns, and digital
              innovation.
            </p>
            <div className="mt-6">
              <Link href="/contact">
                <Button size="lg" className="bg-primary hover:bg-primary/90">
                  Get Started
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
            </div>
          </div>
          <div className="mt-12 relative max-w-5xl mx-auto">
            <div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-transparent rounded-xl" />
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image.jpg-VdSJ1bQ9mdaF07LjSMn4buxjzBPwaV.webp"
              width={1200}
              height={600}
              alt="Digital Marketing Analytics Dashboard"
              className="rounded-xl object-cover w-full h-auto"
            />
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto px-4 md:px-6 max-w-6xl">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">Services</div>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Our Marketing Solutions</h2>
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                Comprehensive marketing services tailored to your business needs
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 py-12 sm:grid-cols-2 lg:grid-cols-3">
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <Globe className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Digital Marketing</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                SEO, SEM, social media marketing, and content strategies to boost your online presence.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <Lightbulb className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Brand Strategy</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                Develop a compelling brand identity that resonates with your target audience.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <BarChart3 className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Analytics & Insights</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                Data-driven decision making with comprehensive analytics and reporting.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <Users className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Social Media</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                Engage your audience and build community through strategic social media management.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <MessageSquare className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Content Creation</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                Compelling content that tells your story and drives conversions.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 shadow-sm">
              <div className="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                <Mail className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">Email Marketing</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                Targeted email campaigns that nurture leads and drive customer retention.
              </p>
            </div>
          </div>
          <div className="flex justify-center">
            <Link href="/services">
              <Button size="lg" variant="outline">
                View All Services
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container mx-auto px-4 md:px-6 max-w-6xl">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">Testimonials</div>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">What Our Clients Say</h2>
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                Hear from businesses that have transformed their marketing with our help
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 py-12 sm:grid-cols-2">
            <div className="flex flex-col justify-between rounded-lg border p-6 shadow-sm">
              <div className="space-y-4">
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5 text-yellow-500"
                    >
                      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                    </svg>
                  ))}
                </div>
                <p className="text-gray-500 dark:text-gray-400">
                  "Their strategic approach to digital marketing transformed our online presence. We've seen a 200%
                  increase in qualified leads since working with them."
                </p>
              </div>
              <div className="mt-6 flex items-center space-x-4">
                <div className="rounded-full bg-gray-100 p-1 dark:bg-gray-800">
                  <img
                    src="/placeholder.svg?height=40&width=40"
                    width={40}
                    height={40}
                    alt="Sarah Johnson"
                    className="rounded-full"
                  />
                </div>
                <div>
                  <p className="text-sm font-medium">Sarah Johnson</p>
                  <p className="text-sm text-gray-500 dark:text-gray-400">COO, Datalyse Group Ltd.</p>
                </div>
              </div>
            </div>
            <div className="flex flex-col justify-between rounded-lg border p-6 shadow-sm">
              <div className="space-y-4">
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5 text-yellow-500"
                    >
                      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                    </svg>
                  ))}
                </div>
                <p className="text-gray-500 dark:text-gray-400">
                  "The team's creativity and attention to detail helped us rebrand successfully. Our customer engagement
                  has never been higher."
                </p>
              </div>
              <div className="mt-6 flex items-center space-x-4">
                <div className="rounded-full bg-gray-100 p-1 dark:bg-gray-800">
                  <img
                    src="/placeholder.svg?height=40&width=40"
                    width={40}
                    height={40}
                    alt="Michael Chen"
                    className="rounded-full"
                  />
                </div>
                <div>
                  <p className="text-sm font-medium">Michael Chen</p>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Marketing Director, Hermes Management Services
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 md:px-6 max-w-6xl">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Ready to Transform Your Marketing?
              </h2>
              <p className="mx-auto max-w-[700px] text-primary-foreground/80 text-lg md:text-xl">
                Let's discuss how our strategic marketing solutions can help your business grow.
              </p>
            </div>
            <div className="mt-6">
              <Link href="/contact">
                <Button size="lg" variant="secondary">
                  Schedule a Consultation
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}