import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { FeatureCard } from "@/components/feature-card"
import { TestimonialCard } from "@/components/testimonial-card"
import { features, testimonials } from "@/lib/data"

export default function HomePage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    name: "Higgy's Android Boxes",
    description:
      "Android streaming boxes with included tech support. Only $20/month.",
    telephone: "+1-250-701-1183",
    url: "https://higgysandroidboxes.com",
    address: {
      "@type": "PostalAddress",
      addressRegion: "BC",
      addressCountry: "CA",
    },
    priceRange: "$20/month",
    areaServed: "Canada",
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <div className="min-h-screen">
        {/* Hero Section */}
        <section className="relative bg-gradient-to-br from-green-50 to-emerald-50 py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="space-y-6">
                <img
                  src="/images/logo.jpg"
                  alt="Higgy's Android Boxes Logo"
                  width={500}
                  height={300}
                  className="w-full max-w-md"
                />
                <h1 className="text-4xl lg:text-5xl font-bold text-balance">
                  Cut the cord. Keep the content.
                </h1>
                <p className="text-xl text-muted-foreground leading-relaxed">
                  Only $20/month with no hidden fees. Tech support included.
                  Based on Vancouver Island and trusted across Canada.
                </p>
                <div className="flex flex-wrap gap-4">
                  <Button
                    size="lg"
                    className="bg-[#8BC34A] hover:bg-[#7CB342] text-white"
                    asChild
                  >
                    <Link href="/login">Get Started</Link>
                  </Button>
                  <Button variant="outline" size="lg" asChild>
                    <Link href="/videos">Watch Tutorials</Link>
                  </Button>
                </div>
              </div>
              <div className="relative">
                <img
                  src="/images/android-box-device.jpg"
                  alt="Android Box Device"
                  width={600}
                  height={800}
                  className="rounded-2xl shadow-2xl"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section className="py-20 px-4 bg-white">
          <div className="container mx-auto max-w-6xl">
            <h2 className="text-3xl lg:text-4xl font-bold text-center mb-12">
              Why People Love Higgy&apos;s
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              {features.map((feature) => (
                <FeatureCard key={feature.title} {...feature} />
              ))}
            </div>
          </div>
        </section>

        {/* Referral Program Section */}
        <section className="py-20 px-4 bg-gradient-to-br from-[#8BC34A]/5 to-emerald-50">
          <div className="container mx-auto max-w-4xl">
            <Card className="border-4 border-[#8BC34A]">
              <CardContent className="p-8 lg:p-12">
                <img
                  src="/images/referral-program.png"
                  alt="Referral Program"
                  width={800}
                  height={1000}
                  className="w-full rounded-lg mb-8"
                />
              </CardContent>
            </Card>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className="py-20 px-4 bg-white">
          <div className="container mx-auto max-w-6xl">
            <h2 className="text-3xl lg:text-4xl font-bold text-center mb-12">
              What Our Customers Are Saying
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              {testimonials.map((testimonial) => (
                <TestimonialCard key={testimonial.author} {...testimonial} />
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 px-4 bg-gradient-to-br from-[#8BC34A] to-[#7CB342] text-white">
          <div className="container mx-auto max-w-4xl text-center space-y-6">
            <h2 className="text-3xl lg:text-4xl font-bold">
              Ready to Get Started?
            </h2>
            <p className="text-xl text-white/90">
              Contact Daniel Higginson for more information
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Button size="lg" variant="secondary" className="text-lg" asChild>
                <a href="tel:2507011183">250-701-1183</a>
              </Button>
              <Button
                size="lg"
                className="bg-white/10 border border-white text-white hover:bg-white hover:text-[#8BC34A]"
                asChild
              >
                <a
                  href="https://www.facebook.com/p/Higgys-Android-Boxes-100090633582181/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Facebook - Higgy&apos;s Android Boxes
                </a>
              </Button>
            </div>
          </div>
        </section>
      </div>
    </>
  )
}