import { MarketingLayout } from '@/components/layouts/marketing-layout'
import { HeroSection } from '@/components/marketing/hero-section'
import { ServiceCard } from '@/components/marketing/service-card'
import { PricingCard } from '@/components/marketing/pricing-card'
import { TestimonialCard } from '@/components/marketing/testimonial-card'
import { FAQItem } from '@/components/marketing/faq-item'
import { mockTestimonials, getAllFAQs, getPricingPlansByServiceType } from '@/lib/mock-data'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { Globe, Bot, Rocket, ArrowRight } from 'lucide-react'

const services = [
  {
    icon: Globe,
    title: 'Web Design',
    description: 'Modern, responsive websites built with the latest technologies. From landing pages to e-commerce platforms.',
  },
  {
    icon: Bot,
    title: 'AI Automation',
    description: 'Intelligent chatbots and automation workflows that save time and enhance customer experience.',
  },
  {
    icon: Rocket,
    title: 'Growth Solutions',
    description: 'Complete digital transformation packages combining web, AI, and marketing strategies.',
  },
]

export default function Home() {
  const webDesignPlans = getPricingPlansByServiceType('web-design')
  const testimonials = mockTestimonials.slice(0, 4)
  const faqs = getAllFAQs()

  return (
    <MarketingLayout>
      <HeroSection />

      {/* Services Section */}
      <section id="services" className="w-full py-20 bg-card/50">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
          <div className="flex flex-col gap-12">
            <div className="text-center max-w-2xl mx-auto">
              <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
                Our Services
              </h2>
              <p className="text-muted-foreground text-lg">
                Everything you need to scale your business in the digital age.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {services.map((service, index) => (
                <ServiceCard key={index} {...service} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Preview Section */}
      <section id="pricing" className="w-full py-20">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
          <div className="flex flex-col gap-12">
            <div className="text-center max-w-2xl mx-auto">
              <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
                Simple, Transparent Pricing
              </h2>
              <p className="text-muted-foreground text-lg">
                Choose the perfect plan for your needs. All plans include our core features.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
              {webDesignPlans.map((plan) => (
                <PricingCard
                  key={plan.id}
                  tier={plan.tier}
                  price={plan.price}
                  currency={plan.currency}
                  features={plan.features}
                  popular={plan.popular}
                  planId={plan.id}
                />
              ))}
            </div>

            <div className="text-center">
              <Button asChild size="lg" className="glow-button bg-primary hover:bg-primary-glow text-white">
                <Link href="/services">View All Pricing</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="w-full py-20 bg-card/50">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
          <div className="flex flex-col gap-12">
            <div className="text-center max-w-2xl mx-auto">
              <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
                Trusted by Growing Businesses
              </h2>
              <p className="text-muted-foreground text-lg">
                See what our clients have to say about working with us.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {testimonials.map((testimonial) => (
                <TestimonialCard key={testimonial.id} {...testimonial} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="w-full py-20">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
          <div className="flex flex-col gap-8 max-w-3xl mx-auto">
            <div className="text-center">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
                Frequently Asked Questions
              </h2>
              <p className="text-muted-foreground text-lg">
                Common questions about our services and process.
              </p>
            </div>

            <div className="flex flex-col gap-4">
              {faqs.map((faq) => (
                <FAQItem key={faq.id} faq={faq} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="w-full py-20 bg-gradient-to-b from-background to-card border-t border-border">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10 text-center">
          <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-6">
            Ready to upgrade your business?
          </h2>
          <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
            Join hundreds of other businesses saving time and making money with ScaleSite's affordable tech solutions.
          </p>
          <Button size="lg" className="glow-button bg-primary hover:bg-primary-glow text-white text-lg font-bold h-14 px-10">
            Get Started Now
            <ArrowRight className="w-5 h-5 ml-2" />
          </Button>
        </div>
      </section>
    </MarketingLayout>
  )
}