"use client"

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, ChevronRight } from "lucide-react"
import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"

export default function ServicesPage() {
  const [activeSection, setActiveSection] = useState("foundations")

  const services = [
    {
      id: "foundations",
      title: "Footers & Foundations",
      icon: Layers,
      description:
        "Start your build off right with a solid foundation. An ICF basement provides a comfortable and energy-efficient environment - even on cold Colorado winter nights.",
      details: [
        "Superior insulation values (R-22+)",
        "Waterproofing and drainage solutions",
        "Precision leveling and layout",
        "Reinforced concrete core strength",
      ],
      image: "/icf-foundation-construction.jpg",
    },
    {
      id: "heating",
      title: "Radiant Heating Systems",
      icon: Zap,
      description:
        "Say goodbye to cold floors and fluctuating heat. Radiant heating systems provide consistent heat from the floor up keeping your energy bills down. Paired with a concrete structural floor, you can have the best of both worlds.",
      details: [
        "Even heat distribution",
        "Reduced energy costs (up to 30%)",
        "Silent operation",
        "Allergen-free heating method",
      ],
      image: "/radiant-floor-heating-installation.jpg",
    },
    {
      id: "walls",
      title: "ICF Above-Grade Walls",
      icon: Shield,
      description:
        "ICFs aren't only for foundations. Poured walls will significantly raise the R value of your structure as compared to a traditional build. It also provides a high level of protection from fires and the ever-present Colorado winds.",
      details: [
        "Sound dampening (STC 50+)",
        "Fire resistance (up to 4 hours)",
        "Wind resistance (up to 250mph)",
        "Mold and pest resistance",
      ],
      image: "/icf-above-grade-walls-construction.jpg",
    },
    {
      id: "training",
      title: "Training and Consulting",
      icon: GraduationCap,
      description:
        "Want to install your own ICFs but need a little guidance for the first project? With over 20 years experience building with ICFs, the installers at High Performance Structures can provide you with a number of options to suit your needs.",
      details: [
        "On-site installation training",
        "Project planning and estimation",
        "Tool and equipment guidance",
        "Quality assurance checks",
      ],
      image: "/construction-training-consultation.jpg",
    },
    {
      id: "flooring",
      title: "Structural Flooring",
      icon: Hammer,
      description:
        "With the use of LiteDeck, we can easily install structural concrete flooring and decking for added strength and protection. Don't like the look of concrete floors? Not a problem as the floors can be stamped, stained or covered with your choice of flooring.",
      details: [
        "Long spans without columns",
        "Integrated soundproofing",
        "High load-bearing capacity",
        "Compatible with radiant heating",
      ],
      image: "/concrete-structural-flooring.jpg",
    },
    {
      id: "shelters",
      title: "Safe Rooms & Shelters",
      icon: Shield,
      description:
        "Whether it's to protect your family or your valuables in case of a fire, tornado or other natural disaster, ICFs provide superior protection.",
      details: [
        "FEMA-grade protection",
        "Integrated into home design",
        "Ballistic protection",
        "Emergency supply storage",
      ],
      image: "/safe-room-shelter-construction.jpg",
    },
  ]

  useEffect(() => {
    const handleScroll = () => {
      const sections = services.map((s) => document.getElementById(s.id))
      const scrollPosition = window.scrollY + 200 // Offset for header

      for (const section of sections) {
        if (
          section &&
          section.offsetTop <= scrollPosition &&
          section.offsetTop + section.offsetHeight > scrollPosition
        ) {
          setActiveSection(section.id)
        }
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, []) // Removed services from dependencies

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id)
    if (element) {
      const offset = 120 // Increased offset to account for header height + spacing
      const bodyRect = document.body.getBoundingClientRect().top
      const elementRect = element.getBoundingClientRect().top
      const elementPosition = elementRect - bodyRect
      const offsetPosition = elementPosition - offset

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      })
    }
  }

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <SiteHeader />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden bg-deep-navy">
          <div className="absolute inset-0 z-0">
            <img
              src="/icf-above-grade-walls-construction.jpg"
              alt="HPS Services"
              className="w-full h-full object-cover opacity-30"
            />
            <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">
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
              Our <span className="text-accent">Services</span>
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
              Comprehensive concrete and construction solutions tailored to your project's needs.
            </p>
          </div>
        </section>

        <div className="container mx-auto px-4 py-16">
          <div className="flex flex-col lg:flex-row gap-12">
            {/* Sticky Sidebar Navigation */}
            <aside className="hidden lg:block w-1/4 relative">
              <div className="sticky top-32 space-y-2">
                <h3 className="text-lg font-bold text-deep-navy mb-4 px-4">Service Menu</h3>
                <nav className="space-y-1">
                  {services.map((service) => (
                    <button
                      key={service.id}
                      onClick={() => scrollToSection(service.id)}
                      className={cn(
                        "w-full text-left px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-between group",
                        activeSection === service.id
                          ? "bg-deep-navy text-white shadow-md"
                          : "text-gray-600 hover:bg-gray-100 hover:text-deep-navy",
                      )}
                    >
                      {service.title}
                      {activeSection === service.id && <ChevronRight className="h-4 w-4 text-accent" />}
                    </button>
                  ))}
                </nav>
                <div className="mt-8 p-6 bg-gray-50 rounded-xl border border-gray-200">
                  <h4 className="font-bold text-deep-navy mb-2">Need a Quote?</h4>
                  <p className="text-sm text-gray-600 mb-4">Contact us today to discuss your project requirements.</p>
                  <Link href="/contact">
                    <Button className="w-full bg-accent hover:bg-accent/90 text-deep-navy font-bold">Contact Us</Button>
                  </Link>
                </div>
              </div>
            </aside>

            {/* Main Content */}
            <div className="lg:w-3/4 space-y-24">
              {services.map((service, index) => (
                <section key={service.id} id={service.id} className="scroll-mt-32 group">
                  <div className="grid grid-cols-1 gap-8">
                    <div className="relative overflow-hidden rounded-2xl shadow-xl aspect-video">
                      <div className="absolute inset-0 bg-deep-navy/10 group-hover:bg-transparent transition-colors duration-500" />
                      <img
                        src={service.image || "/placeholder.svg"}
                        alt={service.title}
                        className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
                      />
                    </div>

                    <div className="space-y-6">
                      <div className="flex items-center gap-4">
                        <div className="p-3 bg-accent/10 rounded-xl">
                          <service.icon className="h-8 w-8 text-deep-navy" />
                        </div>
                        <h2 className="text-3xl font-bold text-deep-navy">{service.title}</h2>
                      </div>

                      <p className="text-lg text-gray-600 leading-relaxed">{service.description}</p>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
                        {service.details.map((detail, i) => (
                          <div
                            key={i}
                            className="flex items-center gap-3 bg-gray-50 p-3 rounded-lg border border-gray-100"
                          >
                            <CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0" />
                            <span className="text-gray-700 font-medium">{detail}</span>
                          </div>
                        ))}
                      </div>

                      <div className="pt-4">
                        <Link href="/contact">
                          <Button
                            variant="outline"
                            className="border-deep-navy text-deep-navy hover:bg-deep-navy hover:text-white font-bold bg-transparent"
                          >
                            Request {service.title} <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </div>
                  {index !== services.length - 1 && <div className="h-px bg-gray-200 mt-24" />}
                </section>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom CTA */}
        <section className="py-20 bg-deep-navy text-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Project?</h2>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              Our team of experts is ready to help you build with confidence and precision.
            </p>
            <Link href="/contact">
              <Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8 h-14">
                Get a Free Quote
              </Button>
            </Link>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  )
}