import { Link } from "react-router";
import { CheckCircle, Phone, ArrowRight, Star } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useTranslation } from "react-i18next";

export function Home() {
  const { t } = useTranslation();

  const services = [
    {
      title: t("home.services.items.plumbing.title"),
      description: t("home.services.items.plumbing.description"),
      image:
        "https://images.unsplash.com/photo-1760571327612-8ab776dcd462?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVwYWlyJTIwcGx1bWJpbmd8ZW58MXx8fHwxNzcxNTE2ODQ2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    },
    {
      title: t("home.services.items.electrical.title"),
      description: t("home.services.items.electrical.description"),
      image:
        "https://images.unsplash.com/photo-1767514536570-83d70c024247?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbGVjdHJpY2FsJTIwd29yayUyMGluc3RhbGxhdGlvbnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    },
    {
      title: t("home.services.items.painting.title"),
      description: t("home.services.items.painting.description"),
      image:
        "https://images.unsplash.com/photo-1574359411659-15573a27fd0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3VzZSUyMHBhaW50aW5nJTIwY29udHJhY3RvcnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    },
  ];

  const features = [
    t("home.features.licensed"),
    t("home.features.sameDay"),
    t("home.features.quality"),
    t("home.features.affordable"),
    t("home.features.satisfaction"),
    t("home.features.emergency"),
  ];

  const testimonials = [
    {
      name: t("home.testimonials.items.sarah.name"),
      text: t("home.testimonials.items.sarah.text"),
      rating: 5,
    },
    {
      name: t("home.testimonials.items.mike.name"),
      text: t("home.testimonials.items.mike.text"),
      rating: 5,
    },
    {
      name: t("home.testimonials.items.emily.name"),
      text: t("home.testimonials.items.emily.text"),
      rating: 5,
    },
  ];

  return (
    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
      {/* Hero */}
      <section className="relative bg-gradient-to-br from-sky-50 to-sky-100 overflow-hidden dark:from-gray-900 dark:to-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl mb-6 text-gray-900 dark:text-white">
                {t("home.hero.title")}
                <span className="text-sky-600"> {t("home.hero.titleHighlight")}</span>
              </h1>
              <p className="text-xl text-gray-700 mb-8 dark:text-gray-300">
                {t("home.hero.subtitle")}
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  to="/contact"
                  className="inline-flex items-center justify-center bg-sky-600 text-white px-8 py-4 rounded-lg hover:bg-sky-700 transition-colors"
                >
                  {t("home.hero.ctaPrimary")}
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Link>
                <a
                  href="tel:5551234567"
                  className="inline-flex items-center justify-center bg-white text-sky-600 px-8 py-4 rounded-lg border-2 border-sky-600 hover:bg-sky-50 transition-colors dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500 dark:hover:bg-gray-800"
                >
                  <Phone className="mr-2 h-5 w-5" />
                  {t("home.hero.ctaSecondary")}
                </a>
              </div>
            </div>
            <div className="relative">
              <ImageWithFallback
                src="https://images.unsplash.com/photo-1620838883342-ca19cf8448d6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBoYW5keW1hbiUyMHNlcnZpY2V8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                alt={t("home.hero.imageAlt")}
                className="rounded-lg shadow-2xl w-full"
              />
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <div key={index} className="flex items-center space-x-3">
                <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0" />
                <span className="text-gray-700 dark:text-gray-300">{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("home.services.title")}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
              {t("home.services.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div
                key={index}
                className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow dark:bg-gray-900 dark:border dark:border-gray-800"
              >
                <ImageWithFallback
                  src={service.image}
                  alt={service.title}
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <h3 className="text-xl mb-2 text-gray-900">{service.title}</h3>
                  <p className="text-gray-600 mb-4 dark:text-gray-300">{service.description}</p>
                  <Link
                    to="/services"
                    className="inline-flex items-center text-sky-600 hover:text-sky-700"
                  >
                    {t("home.services.learnMore")}
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <Link
              to="/services"
              className="inline-flex items-center bg-sky-600 text-white px-8 py-3 rounded-lg hover:bg-sky-700 transition-colors"
            >
              {t("home.services.viewAll")}
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
          </div>
        </div>
      </section>

      {/* About Preview Section */}
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <ImageWithFallback
              src="https://images.unsplash.com/photo-1581783898377-1c85bf937427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoYW5keW1hbiUyMGNhcnBlbnRlciUyMHRvb2xzfGVufDF8fHx8MTc3MTU5ODc5N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
              alt={t("home.about.imageAlt")}
              className="rounded-lg shadow-lg w-full"
            />
            <div>
              <h2 className="text-3xl md:text-4xl mb-6 text-gray-900 dark:text-white">
                {t("home.about.title")}
              </h2>
              <p className="text-lg text-gray-600 mb-6 dark:text-gray-300">
                {t("home.about.subtitle")}
              </p>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start space-x-3">
                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900 dark:text-white">
                      {t("home.about.points.experienced.title")}
                    </span>
                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.experienced.text")}
                    </p>
                  </div>
                </li>
                <li className="flex items-start space-x-3">
                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900 dark:text-white">
                      {t("home.about.points.pricing.title")}
                    </span>
                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.pricing.text")}
                    </p>
                  </div>
                </li>
                <li className="flex items-start space-x-3">
                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900 dark:text-white">
                      {t("home.about.points.guarantee.title")}
                    </span>
                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.guarantee.text")}
                    </p>
                  </div>
                </li>
              </ul>
              <Link
                to="/about"
                className="inline-flex items-center text-sky-600 hover:text-sky-700 text-lg"
              >
                {t("home.about.learnMore")}
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("home.testimonials.title")}
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300">
              {t("home.testimonials.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="bg-white rounded-lg p-6 shadow-lg dark:bg-gray-900 dark:border dark:border-gray-800">
                <div className="flex mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                  ))}
                </div>
                <p className="text-gray-700 mb-4 dark:text-gray-300">"{testimonial.text}"</p>
                <p className="text-gray-900">- {testimonial.name}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-sky-600 dark:bg-sky-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl mb-6 text-white">
            {t("home.cta.title")}
          </h2>
          <p className="text-xl text-sky-100 mb-8 dark:text-sky-100/90">
            {t("home.cta.subtitle")}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/contact"
              className="inline-flex items-center justify-center bg-white text-sky-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
            >
              {t("home.cta.primary")}
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
            <a
              href="tel:5551234567"
              className="inline-flex items-center justify-center bg-sky-700 text-white px-8 py-4 rounded-lg hover:bg-sky-800 transition-colors dark:bg-sky-800 dark:hover:bg-sky-900"
            >
              <Phone className="mr-2 h-5 w-5" />
              {t("home.cta.secondary")}
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}