import { useState } from "react";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal } from "@/components/ContactModals";
import {
  Rocket,
  Target,
  Eye,
  Award,
  Users,
  ShieldCheck,
  Server,
  Clock,
  Globe,
  Sparkles,
  Heart,
  TrendingUp,
  ArrowRight,
  Check,
  Headphones,
  Building2,
  Cpu,
  Mail,
  Phone,
  MapPin,
  Send,
  Loader2,
  CheckCircle2,
  AlertCircle,
} from "lucide-react";

/**
 * About Us — DoItEasy
 * -------------------
 * Company story, mission, vision, values, team highlights, milestones, and
 * a contact inquiry form that persists to the `contact_inquiries` table.
 */

// ----------------------------- Static content ------------------------------

const stats = [
  { value: "15+", label: "Years of Experience", icon: Award },
  { value: "50K+", label: "Happy Clients", icon: Users },
  { value: "99.9%", label: "Uptime SLA", icon: Server },
  { value: "24/7", label: "Expert Support", icon: Headphones },
];

const values = [
  {
    icon: ShieldCheck,
    title: "Trust & Security",
    desc: "Every service we deliver is built with enterprise-grade security, transparency and full accountability.",
  },
  {
    icon: Sparkles,
    title: "Innovation First",
    desc: "We adopt the latest cloud, AI and automation technologies to keep your business ahead of the curve.",
  },
  {
    icon: Heart,
    title: "Customer Obsession",
    desc: "Your success is our success. We listen, adapt, and deliver solutions tailored to your real needs.",
  },
  {
    icon: TrendingUp,
    title: "Continuous Growth",
    desc: "We never stop learning — our team is constantly trained on emerging tech to serve you better.",
  },
];

const whyChoose = [
  {
    icon: Building2,
    title: "Enterprise Infrastructure",
    desc: "Tier-III data centers, redundant networks, and enterprise-grade hardware power every service we run.",
  },
  {
    icon: Cpu,
    title: "Modern Cloud Stack",
    desc: "From VPS and dedicated servers to managed Kubernetes — we support the tools modern businesses rely on.",
  },
  {
    icon: Globe,
    title: "Global Reach, Local Support",
    desc: "Presence across multiple regions with local billing, local language support and regional compliance.",
  },
  {
    icon: Clock,
    title: "Proven Reliability",
    desc: "Over a decade of delivering rock-solid uptime, fast response times and measurable business outcomes.",
  },
];

const milestones = [
  {
    year: "2010",
    title: "Company Founded",
    desc: "DoItEasy was founded with a vision to make enterprise-grade hosting accessible to every business.",
  },
  {
    year: "2014",
    title: "First Data Center",
    desc: "Launched our first Tier-III data center with fully redundant power, cooling and network infrastructure.",
  },
  {
    year: "2018",
    title: "10,000+ Clients",
    desc: "Crossed the 10,000 active client milestone and expanded our service portfolio to include cloud & managed services.",
  },
  {
    year: "2022",
    title: "Global Expansion",
    desc: "Opened new regional points of presence and introduced enterprise cloud, WhatsApp API, and SD-WAN services.",
  },
  {
    year: "2025",
    title: "AI-Powered Platform",
    desc: "Launched AI-assisted support, Bizmail360 collaboration mail, and an integrated client self-service dashboard.",
  },
];

// ------------------------------ Contact form ------------------------------

interface InquiryForm {
  name: string;
  email: string;
  phone: string;
  subject: string;
  message: string;
}

const initialForm: InquiryForm = {
  name: "",
  email: "",
  phone: "",
  subject: "",
  message: "",
};

// -------------------------------- Page ------------------------------------

export default function AboutUs() {
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  const [form, setForm] = useState<InquiryForm>(initialForm);
  const [submitting, setSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<
    null | { ok: true } | { ok: false; message: string }
  >(null);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value });
    if (submitStatus) setSubmitStatus(null);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (submitting) return;

    // Basic client-side validation
    if (!form.name.trim() || !form.email.trim() || !form.subject.trim() || !form.message.trim()) {
      setSubmitStatus({
        ok: false,
        message: "Please fill in all required fields (name, email, subject, message).",
      });
      return;
    }
    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRe.test(form.email.trim())) {
      setSubmitStatus({ ok: false, message: "Please enter a valid email address." });
      return;
    }

    setSubmitting(true);
    setSubmitStatus(null);

    try {
      const res = await fetch("/api/v1/entities/contact_inquiries", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          name: form.name.trim(),
          email: form.email.trim(),
          phone: form.phone.trim(),
          subject: form.subject.trim(),
          message: form.message.trim(),
        }),
      });

      if (!res.ok) {
        const txt = await res.text().catch(() => "");
        throw new Error(txt || `Request failed (${res.status})`);
      }

      setForm(initialForm);
      setSubmitStatus({ ok: true });
    } catch (err) {
      setSubmitStatus({
        ok: false,
        message:
          err instanceof Error && err.message
            ? err.message
            : "Sorry, we couldn't send your message. Please try again.",
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <SiteLayout>
      {/* HERO ---------------------------------------------------------- */}
      <section className="relative overflow-hidden bg-[#0b1d14] text-white">
        <div className="absolute inset-0 -z-0">
          <div className="absolute inset-0 bg-gradient-to-br from-[#0b1d14] via-[#123826] to-[#0e6305]" />
          <img
            src="https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-30/nt55soyaaflq/about-hero-team.png"
            alt="DoItEasy team collaborating in a modern office"
            className="absolute inset-0 w-full h-full object-cover opacity-20 mix-blend-luminosity"
          />
          <div className="absolute -top-40 -right-32 w-[40rem] h-[40rem] rounded-full bg-[#0e6305]/40 blur-3xl" />
          <div className="absolute -bottom-40 -left-32 w-[40rem] h-[40rem] rounded-full bg-emerald-400/10 blur-3xl" />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24 text-center">
          <AnimateIn>
            <div className="inline-flex items-center gap-2 bg-emerald-400/15 border border-emerald-400/40 backdrop-blur-sm rounded-full px-4 py-1.5 text-xs md:text-sm mb-5">
              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
              About DoItEasy
            </div>
            <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-6 max-w-4xl mx-auto">
              Empowering businesses with{" "}
              <span className="text-emerald-300">reliable cloud services</span>
            </h1>
            <p className="text-lg md:text-xl text-slate-200 mb-8 leading-relaxed max-w-3xl mx-auto">
              For over 15 years, DoItEasy has been helping companies of every
              size run, secure and scale their IT. From hosting and cloud to
              managed IT and collaboration tools — we&apos;re the trusted partner
              behind the scenes.
            </p>
            <div className="flex flex-wrap justify-center gap-3">
              <button
                type="button"
                onClick={() => setContactOpen(true)}
                className="px-7 py-3.5 rounded-md bg-[#f5c400] text-[#1e3828] font-bold hover:bg-yellow-400 transition shadow-2xl shadow-yellow-500/20 inline-flex items-center gap-2"
              >
                <Headphones className="w-5 h-5" /> Talk to Our Team
              </button>
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-7 py-3.5 rounded-md bg-white/10 border border-white/25 text-white font-bold hover:bg-white/20 transition backdrop-blur-sm inline-flex items-center gap-2"
              >
                Explore Services <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* STATS --------------------------------------------------------- */}
      <section className="py-14 bg-white border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map((s, idx) => (
              <AnimateIn
                key={s.label}
                delay={idx * 80}
                className="text-center p-6 rounded-2xl bg-gradient-to-br from-emerald-50 to-white border border-emerald-100 hover:border-[#0e6305] hover:shadow-lg transition"
              >
                <div className="w-12 h-12 mx-auto rounded-xl bg-[#0e6305] text-white flex items-center justify-center mb-3">
                  <s.icon className="w-5 h-5" />
                </div>
                <div className="text-3xl md:text-4xl font-extrabold text-[#0e6305]">
                  {s.value}
                </div>
                <div className="text-sm text-slate-600 mt-1 font-medium">
                  {s.label}
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* WHO WE ARE / MISSION / VISION -------------------------------- */}
      {/*
        Three unified responsive cards. Each card keeps its image and its
        description inside the SAME card container:
          - Desktop: image on the left, text on the right (side-by-side).
          - Mobile:  image on top, text below, still inside the same card.
        This prevents the image/text separation issue we had on mobile.
      */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12 max-w-3xl mx-auto">
            <span className="text-[#0e6305] font-bold uppercase tracking-widest text-sm">
              About DoItEasy
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-[#111827] mt-2">
              Who we are, what we stand for
            </h2>
          </AnimateIn>

          <div className="space-y-8">
            {[
              {
                icon: Users,
                eyebrow: "Who Are We",
                title: "Reliable technology partner for growing businesses",
                body:
                  "Since 2018, DoItEasy has been helping businesses build a reliable digital presence through secure web hosting, cloud infrastructure, and managed IT services. We serve clients across Saudi Arabia, Egypt, Kuwait, and the Gulf with practical, cost-effective technology solutions designed for growth.",
                image:
                  "https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-30/nuyls3qaaflq/about-whoarewe-datacenter.png",
                imageAlt:
                  "Modern datacenter with rows of server racks and green LED lights",
                ctaLabel: "Learn more about us",
                ctaHref: "#contact-form",
                reverse: false,
              },
              {
                icon: Target,
                eyebrow: "Our Mission",
                title: "Make technology simple, secure, and accessible",
                body:
                  "Our mission is to make technology simple, secure, and accessible for every business. We deliver reliable hosting, cloud, email, cybersecurity, and managed IT services backed by proactive support, transparent service, and long-term partnership.",
                image:
                  "https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-30/nuyltjqaafna/about-mission-partnership.png",
                imageAlt:
                  "Business professionals shaking hands over managed IT services",
                ctaLabel: "Explore our services",
                ctaHref: "/",
                reverse: true,
              },
              {
                icon: Eye,
                eyebrow: "Our Vision",
                title: "A trusted technology partner in the Gulf and beyond",
                body:
                  "Our vision is to become a trusted technology partner in the Gulf and beyond, enabling organizations to grow with confidence through scalable cloud platforms, secure infrastructure, and innovative digital services.",
                image:
                  "https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-30/nuylrsyaafma/about-vision-cloud-innovation.png",
                imageAlt:
                  "Futuristic cloud innovation and scalable infrastructure concept",
                ctaLabel: "Talk to our team",
                ctaHref: "#contact-form",
                reverse: false,
              },
            ].map((card, idx) => {
              const Icon = card.icon;
              return (
                <AnimateIn
                  key={card.eyebrow}
                  delay={idx * 120}
                  direction={card.reverse ? "left" : "right"}
                >
                  <article
                    className="group relative bg-white rounded-[24px] overflow-hidden border border-slate-200 shadow-[0_10px_40px_-12px_rgba(14,99,5,0.15)] hover:shadow-[0_20px_60px_-15px_rgba(14,99,5,0.25)] transition"
                  >
                    {/* Subtle green gradient accent at the top edge. */}
                    <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-[#0e6305] via-[#22c55e] to-[#0e6305]" />

                    <div
                      className={`flex flex-col ${
                        card.reverse ? "md:flex-row-reverse" : "md:flex-row"
                      }`}
                    >
                      {/* Image side — mobile: on top, desktop: side-by-side */}
                      <div className="md:w-5/12 p-5 md:p-6 shrink-0">
                        <div className="relative rounded-[20px] overflow-hidden aspect-[4/3] md:aspect-auto md:h-full bg-slate-100 shadow-md">
                          <img
                            src={card.image}
                            alt={card.imageAlt}
                            loading="lazy"
                            className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500"
                          />
                          <div className="absolute top-3 left-3 bg-white/95 backdrop-blur rounded-xl px-3 py-1.5 inline-flex items-center gap-2 shadow-sm">
                            <span className="w-6 h-6 rounded-md bg-[#0e6305] text-white flex items-center justify-center">
                              <Icon className="w-3.5 h-3.5" />
                            </span>
                            <span className="text-[11px] font-bold uppercase tracking-wider text-[#0e6305]">
                              {card.eyebrow}
                            </span>
                          </div>
                        </div>
                      </div>

                      {/* Text side — mobile: below image, desktop: next to image */}
                      <div className="md:flex-1 p-5 md:p-8 flex flex-col justify-center">
                        <div className="hidden md:inline-flex items-center gap-2 mb-2">
                          <span className="w-8 h-8 rounded-lg bg-[#0e6305]/10 text-[#0e6305] flex items-center justify-center">
                            <Icon className="w-4 h-4" />
                          </span>
                          <span className="text-xs font-bold uppercase tracking-[0.18em] text-[#0e6305]">
                            {card.eyebrow}
                          </span>
                        </div>
                        <h3 className="text-xl md:text-3xl font-bold text-[#111827] leading-tight mb-3">
                          {card.title}
                        </h3>
                        <p className="text-[#4b5563] leading-relaxed text-sm md:text-base">
                          {card.body}
                        </p>

                        <div className="mt-5">
                          <a
                            href={card.ctaHref}
                            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[#0e6305] text-white text-sm font-bold hover:bg-[#0a4a04] transition shadow-sm"
                          >
                            {card.ctaLabel}
                            <ArrowRight className="w-4 h-4" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                </AnimateIn>
              );
            })}
          </div>
        </div>
      </section>

      {/* VALUES -------------------------------------------------------- */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-3xl mx-auto">
            <span className="text-[#0e6305] font-bold uppercase tracking-widest text-sm">
              Our Core Values
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-[#1e3828] mt-2 mb-4">
              The principles that guide every decision
            </h2>
            <p className="text-slate-600 leading-relaxed">
              We&apos;ve built DoItEasy around four core values that shape how we
              hire, how we build, and how we serve our clients every day.
            </p>
          </AnimateIn>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {values.map((v, idx) => (
              <AnimateIn
                key={v.title}
                delay={idx * 90}
                className="group relative rounded-3xl p-6 bg-white border border-slate-200 hover:border-[#0e6305] hover:shadow-2xl hover:-translate-y-1 transition"
              >
                <div className="w-14 h-14 rounded-2xl bg-[#0e6305]/10 text-[#0e6305] flex items-center justify-center mb-4 group-hover:bg-[#0e6305] group-hover:text-white transition">
                  <v.icon className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-[#1e3828] mb-2">
                  {v.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {v.desc}
                </p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* WHY DOITEASY -------------------------------------------------- */}
      <section className="py-20 bg-white">
        <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">
            <AnimateIn direction="right" delay={100}>
              <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-slate-200">
                <img
                  src="https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-30/nt55t5qaafna/about-values-team.png"
                  alt="DoItEasy team collaborating"
                  className="w-full h-[460px] object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0b1d14]/70 via-transparent to-transparent" />
                <div className="absolute top-4 left-4 bg-white/95 backdrop-blur rounded-xl px-4 py-2 text-xs font-bold text-[#0e6305] shadow-lg">
                  ⭐ 4.9 / 5 Client Satisfaction
                </div>
              </div>
            </AnimateIn>

            <AnimateIn direction="left">
              <span className="text-[#0e6305] font-bold uppercase tracking-widest text-sm">
                Why DoItEasy
              </span>
              <h2 className="text-3xl md:text-5xl font-bold text-[#1e3828] mt-2 mb-5 leading-tight">
                The trusted choice for modern businesses
              </h2>
              <p className="text-slate-600 mb-7 leading-relaxed">
                Thousands of businesses choose DoItEasy because we combine
                enterprise infrastructure, a modern product stack and a team
                that genuinely shows up when you need us.
              </p>

              <div className="space-y-4">
                {whyChoose.map((w, idx) => (
                  <div
                    key={w.title}
                    className="flex items-start gap-4 p-4 rounded-2xl hover:bg-slate-50 transition"
                    style={{ transitionDelay: `${idx * 40}ms` }}
                  >
                    <div className="w-11 h-11 rounded-xl bg-[#0e6305] text-white flex items-center justify-center shrink-0">
                      <w.icon className="w-5 h-5" />
                    </div>
                    <div>
                      <div className="font-bold text-[#1e3828]">{w.title}</div>
                      <p className="text-sm text-slate-600 mt-0.5 leading-relaxed">
                        {w.desc}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </AnimateIn>
          </div>
        </div>
      </section>

      {/* MILESTONES ---------------------------------------------------- */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-2xl mx-auto">
            <span className="text-[#0e6305] font-bold uppercase tracking-widest text-sm">
              Our Journey
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-[#1e3828] mt-2">
              15 years of building and growing
            </h2>
          </AnimateIn>

          <div className="relative">
            {/* Timeline line */}
            <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#0e6305] via-[#0e6305]/60 to-transparent -translate-x-1/2" />

            <div className="space-y-8 md:space-y-12">
              {milestones.map((m, idx) => {
                const isLeft = idx % 2 === 0;
                return (
                  <AnimateIn
                    key={m.year}
                    delay={idx * 100}
                    direction={isLeft ? "right" : "left"}
                    className={`md:grid md:grid-cols-2 md:gap-10 items-center ${
                      isLeft ? "" : "md:[&>*:first-child]:col-start-2"
                    }`}
                  >
                    <div
                      className={`relative bg-white rounded-2xl border border-slate-200 p-6 shadow hover:shadow-xl hover:border-[#0e6305] transition ${
                        isLeft ? "md:text-right md:mr-4" : "md:ml-4"
                      }`}
                    >
                      <div className="text-[#f5c400] text-sm font-extrabold tracking-wider">
                        {m.year}
                      </div>
                      <h3 className="text-xl font-bold text-[#1e3828] mt-1 mb-2">
                        {m.title}
                      </h3>
                      <p className="text-sm text-slate-600 leading-relaxed">
                        {m.desc}
                      </p>
                      {/* Center dot */}
                      <span
                        className={`hidden md:block absolute top-8 w-4 h-4 rounded-full bg-[#0e6305] border-4 border-slate-50 ${
                          isLeft ? "-right-[34px]" : "-left-[34px]"
                        }`}
                      />
                    </div>
                    <div className="hidden md:block" />
                  </AnimateIn>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT INQUIRY FORM ----------------------------------------- */}
      <section id="contact-form" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-10">
            <AnimateIn direction="right">
              <span className="text-[#0e6305] font-bold uppercase tracking-widest text-sm">
                Get In Touch
              </span>
              <h2 className="text-3xl md:text-5xl font-bold text-[#1e3828] mt-2 mb-4 leading-tight">
                Let&apos;s start a conversation
              </h2>
              <p className="text-slate-600 mb-8 leading-relaxed">
                Have a question about our services? Looking for a quote?
                Planning a migration? Tell us a bit about what you&apos;re trying
                to do and our team will get back to you within one business day.
              </p>

              <div className="space-y-5">
                <div className="flex items-start gap-4">
                  <div className="w-11 h-11 rounded-xl bg-[#0e6305]/10 text-[#0e6305] flex items-center justify-center shrink-0">
                    <Mail className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-sm text-slate-500">Email us</div>
                    <div className="font-bold text-[#1e3828]">
                      sales@doiteasy.com
                    </div>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-11 h-11 rounded-xl bg-[#0e6305]/10 text-[#0e6305] flex items-center justify-center shrink-0">
                    <Phone className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-sm text-slate-500">Call us (24/7)</div>
                    <div className="font-bold text-[#1e3828]">
                      +1 (800) 555-0199
                    </div>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-11 h-11 rounded-xl bg-[#0e6305]/10 text-[#0e6305] flex items-center justify-center shrink-0">
                    <MapPin className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-sm text-slate-500">Head office</div>
                    <div className="font-bold text-[#1e3828]">
                      DoItEasy HQ — Global Operations Center
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-8 rounded-2xl border border-emerald-100 bg-emerald-50 p-5 text-sm text-slate-700">
                <div className="font-bold text-[#0e6305] mb-1 inline-flex items-center gap-2">
                  <Rocket className="w-4 h-4" /> Quick response guaranteed
                </div>
                Our sales and support team typically responds to inquiries
                within a few hours on business days.
              </div>
            </AnimateIn>

            <AnimateIn direction="left" delay={120}>
              <form
                onSubmit={handleSubmit}
                className="bg-gradient-to-br from-slate-50 to-white border border-slate-200 rounded-3xl shadow-xl p-6 md:p-8 space-y-4"
                noValidate
              >
                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="ci-name" className="block text-xs font-bold text-[#1e3828] mb-1.5 uppercase tracking-wide">
                      Name <span className="text-red-500">*</span>
                    </label>
                    <input
                      id="ci-name"
                      type="text"
                      name="name"
                      value={form.name}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-[#0e6305] focus:ring-2 focus:ring-[#0e6305]/20 outline-none transition text-[#1e3828]"
                      placeholder="Your full name"
                    />
                  </div>
                  <div>
                    <label htmlFor="ci-email" className="block text-xs font-bold text-[#1e3828] mb-1.5 uppercase tracking-wide">
                      Email <span className="text-red-500">*</span>
                    </label>
                    <input
                      id="ci-email"
                      type="email"
                      name="email"
                      value={form.email}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-[#0e6305] focus:ring-2 focus:ring-[#0e6305]/20 outline-none transition text-[#1e3828]"
                      placeholder="you@company.com"
                    />
                  </div>
                </div>

                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="ci-phone" className="block text-xs font-bold text-[#1e3828] mb-1.5 uppercase tracking-wide">
                      Phone
                    </label>
                    <input
                      id="ci-phone"
                      type="tel"
                      name="phone"
                      value={form.phone}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-[#0e6305] focus:ring-2 focus:ring-[#0e6305]/20 outline-none transition text-[#1e3828]"
                      placeholder="Optional"
                    />
                  </div>
                  <div>
                    <label htmlFor="ci-subject" className="block text-xs font-bold text-[#1e3828] mb-1.5 uppercase tracking-wide">
                      Subject <span className="text-red-500">*</span>
                    </label>
                    <input
                      id="ci-subject"
                      type="text"
                      name="subject"
                      value={form.subject}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-[#0e6305] focus:ring-2 focus:ring-[#0e6305]/20 outline-none transition text-[#1e3828]"
                      placeholder="How can we help?"
                    />
                  </div>
                </div>

                <div>
                  <label htmlFor="ci-message" className="block text-xs font-bold text-[#1e3828] mb-1.5 uppercase tracking-wide">
                    Message <span className="text-red-500">*</span>
                  </label>
                  <textarea
                    id="ci-message"
                    name="message"
                    value={form.message}
                    onChange={handleChange}
                    required
                    rows={5}
                    className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-[#0e6305] focus:ring-2 focus:ring-[#0e6305]/20 outline-none transition text-[#1e3828] resize-y"
                    placeholder="Tell us about your project, goals, or questions..."
                  />
                </div>

                {submitStatus && submitStatus.ok && (
                  <div className="flex items-start gap-3 p-4 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm">
                    <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold">Message sent!</div>
                      <div>
                        Thanks for reaching out. Our team will get back to you
                        shortly.
                      </div>
                    </div>
                  </div>
                )}
                {submitStatus && !submitStatus.ok && (
                  <div className="flex items-start gap-3 p-4 rounded-lg bg-red-50 border border-red-200 text-red-800 text-sm">
                    <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold">Couldn&apos;t send message</div>
                      <div>{submitStatus.message}</div>
                    </div>
                  </div>
                )}

                <button
                  type="submit"
                  disabled={submitting}
                  className="w-full py-3.5 rounded-lg bg-[#0e6305] text-white font-bold hover:bg-[#0a5004] transition shadow-lg disabled:opacity-70 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2"
                >
                  {submitting ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Sending...
                    </>
                  ) : (
                    <>
                      <Send className="w-4 h-4" />
                      Send Message
                    </>
                  )}
                </button>

                <p className="text-xs text-slate-500 text-center">
                  By submitting this form you agree to our{" "}
                  <a href="/privacy-center" className="text-[#0e6305] font-semibold hover:underline">
                    privacy policy
                  </a>
                  . We&apos;ll never share your details.
                </p>
              </form>
            </AnimateIn>
          </div>
        </div>
      </section>

      {/* CTA BAND ------------------------------------------------------ */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="rounded-3xl bg-gradient-to-br from-[#0e6305] via-[#0a5004] to-[#1e3828] text-white p-10 md:p-14 shadow-2xl text-center relative overflow-hidden">
            <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
            <div className="absolute -bottom-20 -left-20 w-72 h-72 rounded-full bg-[#f5c400]/20 blur-3xl" />
            <div className="relative">
              <Rocket className="w-12 h-12 mx-auto mb-5 text-[#f5c400]" />
              <h2 className="text-3xl md:text-5xl font-extrabold mb-4">
                Ready to grow with DoItEasy?
              </h2>
              <p className="text-slate-100 max-w-2xl mx-auto mb-8">
                Join 50,000+ businesses that trust us with their hosting, cloud,
                collaboration and managed IT. Get a personalized consultation
                today.
              </p>
              <div className="flex flex-wrap justify-center gap-3">
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="px-8 py-3.5 bg-[#f5c400] text-[#1e3828] font-bold rounded-md hover:bg-yellow-400 transition inline-flex items-center gap-2"
                >
                  <Headphones className="w-4 h-4" /> Talk to Sales
                </button>
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-8 py-3.5 bg-white/10 border border-white/30 text-white font-bold rounded-md hover:bg-white/20 transition inline-flex items-center gap-2"
                >
                  Get Pricing <ArrowRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      <ContactUsModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <GetPriceModal open={priceOpen} onClose={() => setPriceOpen(false)} />
    </SiteLayout>
  );
}