import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { TestimonialSlider } from "@/components/testimonial-slider"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { FontLoader } from "@/components/font-loader"

export default function HomePage() {
  return (
    <div className="min-h-screen">
      <FontLoader />
      <Header />

      {/* Hero Section with New Mountain Background */}
      <section className="relative h-screen flex items-center justify-center text-white">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: "url('/images/hero-background.jpg')",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
        <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
          <h1 className="hero-title text-5xl md:text-6xl mb-6 leading-tight font-loading">
            Bring your digital marketing strategy full circle
          </h1>
          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-loading">
            We are a boutique digital marketing team committed to helping you succeed at what <em>you</em> do best.
          </p>
          <Button
            asChild
            size="lg"
            variant="outline"
            className="bg-transparent border-white text-white hover:bg-white hover:text-teal-600 font-loading"
          >
            <Link href="/our-services">See our Services</Link>
          </Button>
        </div>
      </section>

      {/* Services Section - FIXED TEXT VISIBILITY */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2
              className="text-4xl font-bold text-gray-900 mb-4"
              style={{ fontFamily: "var(--font-permanent-marker)" }}
            >
              Digital Marketing Solutions for Your Business
            </h2>
          </div>

          <div className="grid md:grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Integrated Digital Marketing Strategy */}
            <Card className="text-center p-6 border-none shadow-lg h-full">
              <CardContent className="pt-2">
                <div className="mb-2 h-60 flex items-center justify-center">
                  <Image
                    src="/images/icons/marketing-strategy-green.png"
                    alt="Integrated Digital Marketing Strategy"
                    width={240}
                    height={240}
                    className="mx-auto"
                  />
                </div>
                <h3
                  className="text-xl mb-4 font-bold text-gray-900"
                  style={{ fontFamily: "var(--font-permanent-marker)" }}
                >
                  Integrated Digital Marketing Strategy
                </h3>
                <p className="text-gray-600 mb-4 text-base leading-relaxed">
                  A robust marketing strategy should be rolled out consistently across each avenue you use to converse
                  with your customers. Our holistic approach to your digital success consists of the following
                  components & more:
                </p>
                <ul className="text-center text-gray-600 mb-6 space-y-2 text-sm">
                  <li>• Marketing Funnel Discovery</li>
                  <li>• Newsletter Automation Setup</li>
                  <li>• Social Content Strategy</li>
                  <li>• Promotion & Contest Planning</li>
                </ul>
                <Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
                  <Link href="/success-stories/integrated-digital-marketing-strategy">See our Success Story</Link>
                </Button>
              </CardContent>
            </Card>

            {/* Digital Media Buys */}
            <Card className="text-center p-6 border-none shadow-lg h-full">
              <CardContent className="pt-2">
                <div className="mb-2 h-60 flex items-center justify-center">
                  <Image
                    src="/images/icons/media-buys-green.png"
                    alt="Digital Media Buys"
                    width={240}
                    height={240}
                    className="mx-auto"
                  />
                </div>
                <h3
                  className="text-xl mb-4 font-bold text-gray-900"
                  style={{ fontFamily: "var(--font-permanent-marker)" }}
                >
                  Digital Media Search & Advertising 
                </h3>
                <p className="text-gray-600 mb-4 text-base leading-relaxed">
                  Integrated, consistent cross platform messaging is essential to promoting your brand or product. Our
                  media buy tactics work together with your organic post strategy and can incorporate the following
                  channels:
                </p>
                <ul className="text-center text-gray-600 mb-6 space-y-2 text-sm">
                  <li>• Facebook Advertising</li>
                  <li>• Instagram Advertising</li>
                  <li>• Youtube Advertising</li>
                  <li>• Search Advertising</li>
                </ul>
                <Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
                  <Link href="/success-stories/digital-media-buys">See our Success Story</Link>
                </Button>
              </CardContent>
            </Card>

            {/* Integrations, Analytics & Tracking */}
            <Card className="text-center p-6 border-none shadow-lg h-full">
              <CardContent className="pt-2">
                <div className="mb-2 h-60 flex items-center justify-center">
                  <Image
                    src="/images/icons/integrations.jpg"
                    alt="Integrations, Analytics & Tracking"
                    width={240}
                    height={240}
                    className="mx-auto"
                  />
                </div>
                <h3
                  className="text-xl mb-4 font-bold text-gray-900"
                  style={{ fontFamily: "var(--font-permanent-marker)" }}
                >
                  Platform Integrations, Analytics & Tracking
                </h3>
                <p className="text-gray-600 mb-4 text-base leading-relaxed">
                  An essential part of bringing your digital strategy full circle lies in tracking campaign progress,
                  ensuring targets are being met, and iterating on the ideas that work. We use a data based iteration model that suits the needs of any
                  business, utilizing the platforms below and more:
                </p>
                <ul className="text-center text-gray-600 mb-6 space-y-2 text-sm">
                  <li>• Google Analytics</li>
                  <li>• Tag Manager & Tracking Pixels</li>
                  <li>• Ad Campaign Reporting</li>
                </ul>
                <Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
                  <Link href="/success-stories/integrations-analytics-tracking">See our Success Story</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="relative py-20 text-white">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: "url('/images/hero-background-new.jpg')",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
        <div className="relative z-10 container mx-auto px-4">
          <h2 className="section-title text-4xl text-center mb-12 font-loading">Testimonials about Our Work</h2>
          <TestimonialSlider />
        </div>
      </section>

      {/* Client Logos Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Image
              src="/images/clients-header-hd.png"
              alt="Some of Our Clients"
              width={600}
              height={60}
              className="mx-auto mb-8 h-auto max-w-2xl"
            />
          </div>
          <div className="flex flex-wrap justify-center items-center gap-12 max-w-6xl mx-auto">
            <Link
              href="https://freeandeasytraveler.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
            >
              <Image
                src="/images/free-and-easy-traveler.jpg"
                alt="Free & Easy Traveler"
                width={210}
                height={210}
                className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
              />
            </Link>
            <Link
              href="https://breatheinlife.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
            >
              <Image
                src="/images/breathe-in-life.jpg"
                alt="Breathe in Life"
                width={210}
                height={210}
                className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
              />
            </Link>
            <Link
              href="https://seekers-media.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
            >
              <Image
                src="/images/seekers-media.jpg"
                alt="Seekers Media"
                width={210}
                height={210}
                className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
              />
            </Link>
            <Link
              href="https://pilateswithfadia.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
            >
              <Image
                src="/images/pilates-with-fadia-logo.png"
                alt="Pilates with Fadia"
                width={210}
                height={210}
                className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
              />
            </Link>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="section-title text-4xl text-gray-900 mb-8 font-loading">Who We Are</h2>
          <div className="max-w-4xl mx-auto">
            <p className="text-lg text-gray-700 mb-8 leading-relaxed font-loading">
              Full Circle Digital Marketing came together to amplify messages that we believe in. Although clicks and
              channel growth are a necessary component of any digital marketing strategy, we believe there is a more
              essential, real world impact when a good idea whose time has come hits the mainstream. We aren't your
              typical marketing types - we're not in this for the sake of mindless engagement, but for the
              people-oriented results we see when a good message spreads.
            </p>
            <Button asChild size="lg" className="bg-teal-600 hover:bg-teal-700 font-loading">
              <Link href="/about">Learn More About Us</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-20 text-white">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: "url('/images/hero-background-new.jpg')",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
        <div className="relative z-10 container mx-auto px-4 text-center">
          <h2 className="section-title text-4xl mb-6 font-loading">Ready to get noticed online?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto font-loading">
            Great! If you'd like to learn more about how we can help you get noticed online, click the button below to
            schedule an initial consultation phone call.
          </p>
          <Button
            asChild
            size="lg"
            variant="outline"
            className="bg-transparent border-white text-white hover:bg-white hover:text-teal-600 font-loading"
          >
            <Link href="/contact">Get in Touch</Link>
          </Button>
        </div>
      </section>

      <Footer />
    </div>
  )
}