"use client"

import type React from "react"

import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Mail, Phone, MapPin, Clock, Play, ExternalLink } from "lucide-react"
import { useState } from "react"
import Image from "next/image"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    interest: "",
    message: "",
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted:", formData)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

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

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative bg-[#0f172a] pt-40 pb-20 overflow-hidden">
          <div className="absolute inset-0 bg-[url('/construction-blueprint.jpg')] opacity-10 bg-cover bg-center" />
          <div className="container mx-auto px-4 relative z-10">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Contact Us</h1>
            <p className="text-xl text-gray-300 max-w-2xl">
              Get in touch with our team to discuss your next high-performance project.
            </p>
          </div>
        </section>

        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Main Content - Left Column */}
            <div className="lg:col-span-2 space-y-12">
              {/* Intro Text */}
              <div className="space-y-6">
                <h2 className="text-3xl font-bold text-[#0f172a]">We want to hear from you!</h2>
                <p className="text-gray-600 leading-relaxed text-lg">
                  We have over 20 years of construction experience and specialize in Insulated Concrete Form (ICFs)
                  installations, Structural Concrete Flooring and Radiant Heating Systems. If you are interested in more
                  information regarding ICF structures or require an estimate, please fill out the contact form, call or
                  email us today.
                </p>

                <div className="grid md:grid-cols-2 gap-6 pt-4">
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <MapPin className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
                      <div>
                        <h3 className="font-bold text-[#0f172a]">Address:</h3>
                        <p className="text-sm text-gray-600">
                          We are located in beautiful Woodland Park, CO and serve the Rocky Mtn. Region and the Front
                          Range. Please call to set up an appointment.
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <Mail className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
                      <div>
                        <h3 className="font-bold text-[#0f172a]">Email:</h3>
                        <a
                          href="mailto:info@highperformancestructures.com"
                          className="text-sm text-[#0066bf] hover:underline"
                        >
                          info@highperformancestructures.com
                        </a>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <Phone className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
                      <div>
                        <h3 className="font-bold text-[#0f172a]">Phone:</h3>
                        <a href="tel:7199008850" className="text-sm text-[#0066bf] hover:underline">
                          719.900.8850
                        </a>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <Clock className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
                      <div>
                        <h3 className="font-bold text-[#0f172a]">Business Hours:</h3>
                        <p className="text-sm text-gray-600">8:00a–4:00p M-F</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Contact Form */}
              <Card className="border-t-4 border-t-[#0066bf] shadow-lg">
                <CardContent className="p-8">
                  <form onSubmit={handleSubmit} className="space-y-8">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="firstName" className="text-[#0f172a] font-semibold">
                          Name <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="firstName"
                          name="firstName"
                          placeholder="First"
                          required
                          value={formData.firstName}
                          onChange={handleChange}
                          className="bg-gray-50"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName" className="text-[#0f172a] font-semibold">
                          &nbsp;
                        </Label>
                        <Input
                          id="lastName"
                          name="lastName"
                          placeholder="Last"
                          value={formData.lastName}
                          onChange={handleChange}
                          className="bg-gray-50"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email" className="text-[#0f172a] font-semibold">
                        Email <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        required
                        value={formData.email}
                        onChange={handleChange}
                        className="bg-gray-50"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone" className="text-[#0f172a] font-semibold">
                        Phone <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="phone"
                        name="phone"
                        type="tel"
                        required
                        value={formData.phone}
                        onChange={handleChange}
                        className="bg-gray-50"
                      />
                    </div>

                    <div className="space-y-4">
                      <Label className="text-[#0f172a] font-semibold">
                        I am Interested in Being Contacted About: <span className="text-red-500">*</span>
                      </Label>
                      <RadioGroup
                        onValueChange={(value) => setFormData({ ...formData, interest: value })}
                        className="space-y-3"
                      >
                        {[
                          "ICF Training/Consultation",
                          "Installation Estimate (Excavation, Footers, ICF Foundation, ICF Above-Grade Walls, Other)",
                          "General Information About Building with ICFs",
                          "Custom Residential Design/Build Services",
                          "Commercial New Construction",
                          "Other (Please Explain Below)",
                        ].map((option) => (
                          <div key={option} className="flex items-start space-x-3">
                            <RadioGroupItem value={option} id={option} className="mt-1 text-[#0066bf]" />
                            <Label htmlFor={option} className="font-normal text-gray-700 cursor-pointer leading-tight">
                              {option}
                            </Label>
                          </div>
                        ))}
                      </RadioGroup>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="message" className="text-[#0f172a] font-semibold">
                        Comment or Message <span className="text-red-500">*</span>
                      </Label>
                      <Textarea
                        id="message"
                        name="message"
                        required
                        rows={6}
                        value={formData.message}
                        onChange={handleChange}
                        className="bg-gray-50 resize-none"
                      />
                    </div>

                    {/* reCAPTCHA Placeholder */}
                    <div className="bg-gray-100 border border-gray-300 p-4 rounded-md w-fit flex items-center gap-4">
                      <div className="w-6 h-6 border-2 border-gray-400 rounded-sm" />
                      <span className="text-sm text-gray-600">I'm not a robot</span>
                      <div className="ml-4 flex flex-col items-center">
                        <div className="w-8 h-8 bg-[url('https://www.gstatic.com/recaptcha/api2/logo_48.png')] bg-contain bg-no-repeat" />
                        <span className="text-[10px] text-gray-500">reCAPTCHA</span>
                      </div>
                    </div>

                    <Button
                      type="submit"
                      className="bg-[#0066bf] hover:bg-[#0055a0] text-white px-8 py-6 text-lg font-semibold w-full md:w-auto"
                    >
                      Submit
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

            {/* Sidebar - Right Column */}
            <div className="space-y-8">
              {/* Newsletter Signup */}
              <Card className="bg-gray-50 border-none shadow-md">
                <CardHeader>
                  <CardTitle className="text-xl font-bold text-[#0f172a]">Subscribe to Our Newsletter</CardTitle>
                  <p className="text-xs text-gray-500 text-right">* indicates required</p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="nl-email" className="text-sm font-semibold">
                      Email Address <span className="text-red-500">*</span>
                    </Label>
                    <Input id="nl-email" className="bg-white" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="nl-first" className="text-sm font-semibold">
                      First Name
                    </Label>
                    <Input id="nl-first" className="bg-white" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="nl-last" className="text-sm font-semibold">
                      Last Name
                    </Label>
                    <Input id="nl-last" className="bg-white" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm font-semibold">Birthday</Label>
                    <div className="flex gap-2">
                      <Input placeholder="MM" className="w-16 bg-white" />
                      <span className="self-center">/</span>
                      <Input placeholder="DD" className="w-16 bg-white" />
                    </div>
                    <p className="text-xs text-gray-500">( mm / dd )</p>
                  </div>
                  <Button className="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold">
                    Subscribe
                  </Button>
                </CardContent>
              </Card>

              {/* ProView Badge */}
              <div className="flex justify-center">
                <div className="bg-gradient-to-b from-blue-100 to-blue-50 border border-blue-200 rounded-full px-8 py-3 shadow-sm">
                  <span className="text-[#0066bf] font-bold italic text-lg">ProView</span>
                  <span className="block text-[10px] text-center text-gray-500 uppercase tracking-wider">
                    Qualify Us Now!
                  </span>
                </div>
              </div>

              {/* BuilderTrend Login */}
              <div className="space-y-2">
                <h3 className="font-bold text-[#0f172a]">BuilderTrend Login</h3>
                <Card className="bg-gray-100 border-gray-200">
                  <CardHeader className="bg-[#b0b0b0] py-2 px-4">
                    <h4 className="text-white text-xs font-bold uppercase tracking-wider text-center">Client Login</h4>
                  </CardHeader>
                  <CardContent className="p-6">
                    <Button
                      variant="outline"
                      className="w-full flex items-center justify-center gap-2 bg-white hover:bg-gray-50 text-[#0066bf] border-gray-300"
                    >
                      <span className="font-bold">Sign in to Buildertrend</span>
                      <ExternalLink className="h-4 w-4" />
                    </Button>
                  </CardContent>
                </Card>
              </div>

              {/* Video Placeholder */}
              <div className="relative aspect-video bg-black rounded-lg overflow-hidden group cursor-pointer shadow-lg">
                <Image
                  src="/construction-site-video.jpg"
                  alt="ICF Installation Video"
                  width={500}
                  height={300}
                  className="object-cover opacity-80 group-hover:opacity-60 transition-opacity"
                />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
                    <Play className="h-8 w-8 text-white fill-current ml-1" />
                  </div>
                </div>
                <div className="absolute top-4 left-4 flex items-center gap-2">
                  <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
                    <span className="font-bold text-xs text-[#0f172a]">HPS</span>
                  </div>
                  <span className="text-white font-medium text-sm drop-shadow-md">ICF Install in B...</span>
                </div>
              </div>

              {/* BBB Accredited */}
              <div className="space-y-2">
                <h3 className="font-bold text-[#0f172a]">BBB Accredited</h3>
                <div className="w-24 h-32 bg-[#1a1a1a] rounded-sm flex flex-col items-center justify-center p-2 text-white">
                  <span className="text-2xl font-serif font-bold">BBB</span>
                  <div className="w-full h-px bg-gray-600 my-2" />
                  <span className="text-[10px] text-center leading-tight">ACCREDITED BUSINESS</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  )
}