import { useState } from "react";
import { lazy, Suspense } from "react";
import { Button } from "@/components/ui/button";
import { Phone } from "lucide-react";

const TrustBadges = lazy(() =>
  import("@/components/TrustBadges").then((m) => ({ default: m.TrustBadges })),
);
const Testimonials = lazy(() =>
  import("@/components/Testimonials").then((m) => ({
    default: m.Testimonials,
  })),
);
import { m } from "framer-motion";

const Contact = () => {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    message: "",
  });

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

  return (
    <div className="flex flex-col min-h-screen bg-background">
      {/* Hero Section */}
      <section className="relative min-h-[70vh] flex items-center py-24 overflow-hidden">
        <m.div
          initial={{ scale: 1.1 }}
          animate={{ scale: 1 }}
          transition={{ duration: 2, ease: "easeOut" }}
          className="absolute inset-0 z-0"
        >
          <img
            src="https://vibe.filesafe.space/1787588974527990084/assets/410c1d44-123c-409d-b928-4d7e1068b6ad.png"
            alt="Contact Cole Facilities"
            className="w-full h-full object-cover"
            fetchPriority="high"
            loading="eager"
            decoding="async"
            width="1920"
            height="1080"
            sizes="100vw"
          />
          <div className="absolute inset-0 bg-black/70" />
        </m.div>

        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full text-center mt-12">
          <m.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.2 }}
          >
            <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-[5.5rem] font-serif font-bold text-primary-foreground mb-10 drop-shadow-2xl">
              CONTACT COLE FACILITIES
            </h1>
          </m.div>
          <div className="text-lg sm:text-xl text-primary-foreground/90 leading-relaxed space-y-6">
            <p>We'd love to hear from you.</p>
            <p>
              Please use the form to contact Cole Facilities if you would like
              further information about our roofing and building services, wish
              to request a free quotation or would like to discuss your project
              requirements.
            </p>
            <p className="font-semibold text-white">
              No job is too small or too large.
            </p>
            <p>
              Reach out via phone or the contact form and we'll get back to you
              promptly.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Info & Form */}
      <section className="py-16 md:py-24 bg-secondary cv-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12 lg:gap-20">
            {/* Contact Details */}
            <div>
              <h2 className="text-3xl font-serif font-bold text-foreground mb-8">
                Get In Touch
              </h2>

              <div className="space-y-8">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center text-accent shrink-0 shadow-sm border border-border">
                    <Phone className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="font-bold text-foreground mb-1">Phone</h3>
                    <a
                      href="tel:+447799087464"
                      className="text-muted-foreground hover:text-accent transition-colors"
                    >
                      07799 087464
                    </a>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center text-accent shrink-0 shadow-sm border border-border">
                    <svg
                      className="w-6 h-6"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                      ></path>
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                      ></path>
                    </svg>
                  </div>
                  <div>
                    <h3 className="font-bold text-foreground mb-1">Address</h3>
                    <p className="text-muted-foreground">
                      5 Broomfield House
                      <br />
                      5 Grover Close
                      <br />
                      Hemel Hempstead
                      <br />
                      Hertfordshire
                      <br />
                      HP2 5GG
                    </p>
                  </div>
                </div>
              </div>

              <div className="mt-12">
                <h3 className="font-bold text-foreground mb-4">Follow Us</h3>
                <div className="flex gap-4">
                  <a
                    href="#"
                    className="w-10 h-10 rounded-full bg-background flex items-center justify-center text-accent hover:bg-accent hover:text-primary-foreground transition-colors cursor-pointer shadow-sm border border-border"
                    aria-label="Facebook"
                  >
                    <svg
                      fill="currentColor"
                      viewBox="0 0 24 24"
                      className="w-5 h-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </a>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="bg-white p-8 md:p-10 rounded-2xl shadow-xl border border-border">
              <h2 className="text-3xl font-serif font-bold text-foreground mb-8">
                Send Us A Message
              </h2>
              <form onSubmit={handleSubmit} className="space-y-8">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
                  <div>
                    <label
                      htmlFor="firstName"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      First Name
                    </label>
                    <input
                      type="text"
                      id="firstName"
                      required
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                      value={formData.firstName}
                      onChange={(e) =>
                        setFormData({ ...formData, firstName: e.target.value })
                      }
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="lastName"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      Last Name
                    </label>
                    <input
                      type="text"
                      id="lastName"
                      required
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                      value={formData.lastName}
                      onChange={(e) =>
                        setFormData({ ...formData, lastName: e.target.value })
                      }
                    />
                  </div>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
                  <div>
                    <label
                      htmlFor="email"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      Email
                    </label>
                    <input
                      type="email"
                      id="email"
                      required
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                      value={formData.email}
                      onChange={(e) =>
                        setFormData({ ...formData, email: e.target.value })
                      }
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="phone"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      Phone Number
                    </label>
                    <input
                      type="tel"
                      id="phone"
                      required
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
                  <div>
                    <label
                      htmlFor="propertyType"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      Project Type
                    </label>
                    <select
                      id="propertyType"
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                    >
                      <option value="new_roof">
                        New Roof / Replacement Roof
                      </option>
                      <option value="pitched_roof">Pitched Roofing</option>
                      <option value="flat_roof">
                        Flat Roof / Felt Roofing
                      </option>
                      <option value="roof_repairs">
                        Roof Repairs / Leak Repairs
                      </option>
                      <option value="fascias_soffits">Fascias & Soffits</option>
                      <option value="guttering">Guttering & Downpipes</option>
                      <option value="lead_flashing">Lead Flashing</option>
                      <option value="ridge_tiles">
                        Ridge Tiles / Roof Valleys
                      </option>
                      <option value="painting_decorating">
                        Painting & Decorating
                      </option>
                      <option value="general_building">
                        General Building Work
                      </option>
                      <option value="other">Other Enquiry</option>
                    </select>
                  </div>
                  <div>
                    <label
                      htmlFor="serviceRequired"
                      className="block text-sm font-bold text-foreground mb-3"
                    >
                      Service Required
                    </label>
                    <select
                      id="serviceRequired"
                      className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm"
                    >
                      <option value="new_roof">
                        New Roof / Replacement Roof
                      </option>
                      <option value="pitched_roof">Pitched Roofing</option>
                      <option value="flat_roof">
                        Flat Roof / Felt Roofing
                      </option>
                      <option value="roof_repairs">
                        Roof Repairs / Leak Repairs
                      </option>
                      <option value="fascias_soffits">Fascias & Soffits</option>
                      <option value="guttering">Guttering & Downpipes</option>
                      <option value="lead_flashing">Lead Flashing</option>
                      <option value="ridge_tiles">
                        Ridge Tiles / Roof Valleys
                      </option>
                      <option value="painting_decorating">
                        Painting & Decorating
                      </option>
                      <option value="general_building">
                        General Building Work
                      </option>
                      <option value="other">Other Enquiry</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label
                    htmlFor="message"
                    className="block text-sm font-bold text-foreground mb-3"
                  >
                    Message
                  </label>
                  <textarea
                    id="message"
                    required
                    rows={5}
                    className="w-full bg-background border border-border rounded-xl px-5 py-4 text-foreground focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all shadow-sm resize-none"
                    value={formData.message}
                    onChange={(e) =>
                      setFormData({ ...formData, message: e.target.value })
                    }
                  ></textarea>
                </div>
                <Button
                  type="submit"
                  className="w-full text-xl py-8 font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-accent text-accent-foreground hover:bg-accent/90"
                >
                  Request My Free Quote
                </Button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <Suspense fallback={<div className="h-20" />}>
        <Testimonials />
        <TrustBadges />
      </Suspense>
    </div>
  );
};

export default Contact;