import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ArrowRight, CheckCircle2, Shield, Zap, Hammer, GraduationCap, Layers } from "lucide-react"

export default function HomePage() {
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <SiteHeader />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative h-[90vh] min-h-[500px] sm:min-h-[600px] flex items-center justify-center overflow-hidden overflow-x-hidden bg-deep-navy">
          {/* Background Image with Overlay */}
          <div className="absolute inset-0 z-0">
            <img
              src="/icf-above-grade-walls-construction.jpg"
              alt="ICF Construction"
              className="w-full h-full object-cover opacity-40"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-deep-navy via-deep-navy/80 to-transparent" />
          </div>

          <div className="relative z-10 container mx-auto px-4 text-center max-w-full">
            <h1 className="text-3xl sm:text-4xl md:text-7xl font-bold text-white mb-4 sm:mb-6 tracking-tight opacity-100 animate-in slide-in-from-bottom-4 duration-1000 break-words">
              Building the <span className="text-cyan-accent">Future</span>
              <br />
              with Concrete Precision
            </h1>
            <p className="text-base sm:text-lg md:text-2xl text-gray-300 max-w-3xl mx-auto mb-6 sm:mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
              Specializing in Insulating Concrete Form (ICF) installations, structural flooring, and radiant heating
              systems.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300">
              <Link href="/contact">
                <Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14">
                  Get a Quote
                </Button>
              </Link>
              <Link href="/services">
                <Button
                  size="lg"
                  variant="outline"
                  className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14 bg-transparent"
                >
                  Our Services
                </Button>
              </Link>
            </div>
          </div>
        </section>

        {/* Intro Section */}
        <section className="py-40 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="text-4xl font-bold text-deep-navy mb-6">
                  High Performance <span className="text-primary-blue">Structures</span>
                </h2>
                <div className="space-y-6 text-lg text-gray-800 leading-relaxed">
                  <p>
                    With over 250,000 wall face sq ft of ICFs installed over the course of 10 years, we are highly
                    capable and able to take on almost any project, from a simple cabin foundation to a multi-level
                    commercial structure.
                  </p>
                  <p>
                    We know time is a valuable commodity and we aim to complete our installations as quick as we can
                    while maintaining our high level of quality. Our seasoned ICF installation team allows HPS to get in
                    and get the job done on time and on budget.
                  </p>
                  <div className="flex items-center gap-4 pt-4">
                    <div className="flex flex-col">
                      <span className="text-5xl font-bold text-deep-navy">20+</span>
                      <span className="text-sm text-gray-700 font-semibold uppercase tracking-wider">
                        Years Experience
                      </span>
                    </div>
                    <div className="w-px h-12 bg-gray-300" />
                    <div className="flex flex-col">
                      <span className="text-5xl font-bold text-deep-navy">250k+</span>
                      <span className="text-sm text-gray-700 font-semibold uppercase tracking-wider">
                        Sq Ft Installed
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="relative">
                <div className="absolute -inset-4 bg-cyan-accent/20 rounded-lg transform rotate-3" />
                <img
                  src="/icf-foundation-construction.jpg"
                  alt="ICF Foundation"
                  className="relative rounded-lg shadow-2xl w-full object-cover aspect-video"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Services Grid */}
        <section className="py-24 bg-deep-navy text-white">
          <div className="container mx-auto px-4">
            <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
              <div className="max-w-2xl">
                <h2 className="text-sm font-bold text-cyan-accent uppercase tracking-widest mb-4">Our Expertise</h2>
                <h3 className="text-4xl md:text-5xl font-bold leading-tight">
                  Comprehensive concrete and construction solutions.
                </h3>
              </div>
              <Link href="/services">
                <Button
                  variant="outline"
                  className="border-white/20 text-white hover:bg-white hover:text-deep-navy rounded-none px-8 bg-transparent"
                >
                  View All Services
                </Button>
              </Link>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-white/10">
              {[
                {
                  icon: Layers,
                  title: "Footers & Foundations",
                  description:
                    "Start your build off right with a solid foundation. An ICF basement provides a comfortable and energy-efficient environment.",
                },
                {
                  icon: Zap,
                  title: "Radiant Heating",
                  description:
                    "Say goodbye to cold floors. Radiant heating systems provide consistent, efficient heat from the floor up.",
                },
                {
                  icon: Shield,
                  title: "ICF Above-Grade Walls",
                  description:
                    "Poured walls significantly raise the R-value of your structure compared to traditional builds, ensuring energy efficiency.",
                },
                {
                  icon: GraduationCap,
                  title: "Training & Consulting",
                  description:
                    "Want to install your own ICFs? We provide hands-on training and expert guidance for your first project.",
                },
                {
                  icon: Hammer,
                  title: "Structural Flooring",
                  description:
                    "Easily install structural concrete flooring and decking for added strength, soundproofing, and fire protection.",
                },
                {
                  icon: Shield,
                  title: "Safe Rooms & Shelters",
                  description:
                    "ICFs provide superior protection from fires, tornadoes, and other natural disasters for your peace of mind.",
                },
              ].map((service, index) => (
                <div
                  key={index}
                  className="group relative p-8 border-r border-b border-white/10 hover:bg-white/5 transition-colors duration-300 flex flex-col h-full"
                >
                  <div className="mb-8">
                    <service.icon className="h-10 w-10 text-cyan-accent stroke-[1.5]" />
                  </div>
                  <h3 className="text-2xl font-bold mb-4 group-hover:text-cyan-accent transition-colors">
                    {service.title}
                  </h3>
                  <p className="text-gray-400 leading-relaxed mb-8 flex-grow">{service.description}</p>
                  <div className="flex items-center text-sm font-bold text-white group-hover:text-cyan-accent transition-colors mt-auto">
                    LEARN MORE <ArrowRight className="ml-2 h-4 w-4" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Featured Videos Section */}
        <section className="py-24 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-deep-navy mb-4">See Us in Action</h2>
              <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                Watch our team at work and learn more about the ICF construction process.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {["eQAEIYZN4Xs", "xQ51P5oZBuw", "MXCVrOM3kBk"].map((videoId, index) => (
                <div key={index} className="aspect-video rounded-xl overflow-hidden shadow-lg bg-gray-100">
                  <iframe
                    width="100%"
                    height="100%"
                    src={`https://www.youtube.com/embed/${videoId}`}
                    title={`YouTube video player ${index + 1}`}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    className="border-0"
                  />
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Why Choose Us / CTA */}
        <section className="py-24 bg-deep-navy text-white relative overflow-hidden">
          <div className="absolute inset-0 opacity-10">
            <div className="absolute right-0 top-0 w-1/2 h-full bg-accent blur-[100px] transform translate-x-1/2" />
            <div className="absolute left-0 bottom-0 w-1/2 h-full bg-primary blur-[100px] transform -translate-x-1/2" />
          </div>

          <div className="container mx-auto px-4 relative z-10">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="text-4xl font-bold mb-6">Why Choose HPS?</h2>
                <div className="space-y-6">
                  {[
                    "Over 20 years of specialized ICF experience",
                    "Certified and trained installation crews",
                    "Commitment to energy efficiency and durability",
                    "On-time and on-budget project delivery",
                    "Comprehensive support from design to completion",
                  ].map((item, i) => (
                    <div key={i} className="flex items-center gap-4">
                      <div className="bg-accent/20 p-2 rounded-full">
                        <CheckCircle2 className="h-5 w-5 text-accent" />
                      </div>
                      <span className="text-lg text-gray-200">{item}</span>
                    </div>
                  ))}
                </div>
                <div className="mt-10">
                  <Link href="/contact">
                    <Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8">
                      Start Your Project
                    </Button>
                  </Link>
                </div>
              </div>
              <div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
                <h3 className="text-2xl font-bold mb-4">Ready to build better?</h3>
                <p className="text-gray-300 mb-6">
                  Contact us today for a consultation or quote on your next residential or commercial project.
                </p>
                <form className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <input
                      type="text"
                      placeholder="Name"
                      className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                    <input
                      type="email"
                      placeholder="Email"
                      className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <textarea
                    placeholder="Project Details"
                    rows={4}
                    className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                  <Button className="w-full bg-primary hover:bg-primary-dark text-white font-bold">Send Message</Button>
                </form>
              </div>
            </div>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  )
}