export default function AmbulatorySurgeryComplianceSolutions() {
  return (
    <div className="min-h-screen bg-white text-slate-800">
      {/* Header */}
      <header className="border-b border-yellow-100 bg-white shadow-sm">
        <div className="mx-auto flex max-w-7xl flex-col items-center px-6 py-8">
          <img
            src="/logo-header.png"
            alt="Ambulatory Surgery Compliance Solutions"
            className="h-56 w-auto object-contain"
          />

          <nav className="mt-6 flex flex-wrap items-center justify-center gap-8 text-sm font-semibold uppercase tracking-wide text-slate-700">
            <a href="#services" className="transition hover:text-yellow-500">
              Services
            </a>
            <a href="#about" className="transition hover:text-yellow-500">
              About
            </a>
            <a href="#contact" className="transition hover:text-yellow-500">
              Contact
            </a>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-b from-yellow-50 to-white py-24">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(250,204,21,0.2),transparent_50%)]"></div>

        <div className="relative mx-auto max-w-6xl px-6 text-center">
          <div className="inline-flex items-center rounded-full border border-yellow-300 bg-yellow-100 px-5 py-2 text-sm font-semibold text-yellow-700 shadow-sm">
            Trusted Ambulatory Surgery Compliance Experts
          </div>

          <h1 className="mx-auto mt-8 max-w-5xl text-5xl font-bold leading-tight tracking-tight text-slate-900 md:text-6xl">
            Helping Ambulatory Surgery Centers Stay Survey Ready & Compliant
          </h1>

          <p className="mx-auto mt-8 max-w-3xl text-xl leading-relaxed text-slate-600">
            Ambulatory Surgery Compliance Solutions, LLC provides practical,
            reliable compliance consulting for ambulatory surgery centers with a
            focus on accreditation readiness, operational excellence, and patient safety.
          </p>

          <div className="mt-10 flex flex-wrap items-center justify-center gap-5">
            <a
              href="#contact"
              className="rounded-2xl bg-yellow-400 px-8 py-4 text-lg font-semibold text-slate-900 shadow-lg transition hover:scale-105 hover:bg-yellow-300"
            >
              Schedule Consultation
            </a>

            <a
              href="#services"
              className="rounded-2xl border border-slate-300 bg-white px-8 py-4 text-lg font-semibold text-slate-700 transition hover:border-yellow-400 hover:text-yellow-700"
            >
              View Services
            </a>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="mx-auto max-w-7xl px-6 py-24">
        <div className="text-center">
          <p className="font-semibold uppercase tracking-[0.3em] text-yellow-600">
            Our Services
          </p>

          <h2 className="mt-4 text-4xl font-bold text-slate-900">
            Compliance Support Designed for ASCs
          </h2>
        </div>

        <div className="mt-16 grid gap-8 md:grid-cols-3">
          {[
            {
              title: 'Regulatory Compliance Audits',
              text: 'Identify gaps, reduce risk, and strengthen operational readiness with comprehensive compliance evaluations.',
            },
            {
              title: 'Accreditation Preparation',
              text: 'Hands-on preparation for AAAHC, Joint Commission, CMS, and other accreditation standards.',
            },
            {
              title: 'Quality & Performance Improvement',
              text: 'Support patient safety initiatives and build sustainable quality improvement programs.',
            },
          ].map((service) => (
            <div
              key={service.title}
              className="rounded-[2rem] border border-yellow-100 bg-white p-8 shadow-lg transition hover:-translate-y-2 hover:shadow-2xl"
            >
              <div className="mb-6 h-2 w-20 rounded-full bg-yellow-400"></div>

              <h3 className="text-2xl font-bold text-slate-900">
                {service.title}
              </h3>

              <p className="mt-5 leading-relaxed text-slate-600">
                {service.text}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* About */}
      <section id="about" className="bg-yellow-50 py-24">
        <div className="mx-auto grid max-w-7xl gap-14 px-6 lg:grid-cols-2 lg:items-center">
          <div>
            <p className="font-semibold uppercase tracking-[0.3em] text-yellow-700">
              About Us
            </p>

            <h2 className="mt-4 text-4xl font-bold text-slate-900">
              Compliance Guidance with Integrity & Excellence
            </h2>

            <p className="mt-6 text-lg leading-relaxed text-slate-700">
              We partner with ambulatory surgery centers to simplify regulatory
              requirements, strengthen compliance programs, and support safer,
              more efficient patient care. Our mission is to deliver practical
              solutions that build confidence before, during, and after surveys.
            </p>
          </div>

          <div className="rounded-[2rem] bg-white p-10 shadow-2xl">
            <div className="space-y-8">
              <div className="flex gap-4">
                <div className="mt-2 h-4 w-4 rounded-full bg-yellow-400"></div>
                <p className="text-lg text-slate-700">
                  Customized compliance strategies for ambulatory surgery centers.
                </p>
              </div>

              <div className="flex gap-4">
                <div className="mt-2 h-4 w-4 rounded-full bg-yellow-400"></div>
                <p className="text-lg text-slate-700">
                  Accreditation readiness and operational improvement support.
                </p>
              </div>

              <div className="flex gap-4">
                <div className="mt-2 h-4 w-4 rounded-full bg-yellow-400"></div>
                <p className="text-lg text-slate-700">
                  Dedicated to patient safety, quality care, and sustainable compliance.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="mx-auto max-w-5xl px-6 py-24">
        <div className="rounded-[2rem] border border-yellow-200 bg-white p-10 shadow-2xl">
          <div className="text-center">
            <p className="font-semibold uppercase tracking-[0.3em] text-yellow-600">
              Contact Us
            </p>

            <h2 className="mt-4 text-4xl font-bold text-slate-900">
              Let’s Strengthen Your Compliance Program
            </h2>

            <p className="mt-5 text-lg text-slate-600">
              Connect with Ambulatory Surgery Compliance Solutions, LLC to discuss
              your organization’s compliance and accreditation goals.
            </p>
          </div>

          <form className="mt-12 grid gap-6 md:grid-cols-2">
            <input
              type="text"
              placeholder="Full Name"
              className="rounded-2xl border border-slate-200 px-5 py-4 outline-none transition focus:border-yellow-400"
            />

            <input
              type="email"
              placeholder="Email Address"
              className="rounded-2xl border border-slate-200 px-5 py-4 outline-none transition focus:border-yellow-400"
            />

            <textarea
              placeholder="How can we help your surgery center?"
              rows="6"
              className="md:col-span-2 rounded-2xl border border-slate-200 px-5 py-4 outline-none transition focus:border-yellow-400"
            ></textarea>

            <button
              type="submit"
              className="md:col-span-2 rounded-2xl bg-yellow-400 px-6 py-4 text-lg font-semibold text-slate-900 shadow-lg transition hover:bg-yellow-300"
            >
              Send Inquiry
            </button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-yellow-100 bg-white py-10">
        <div className="mx-auto flex max-w-7xl flex-col items-center gap-6 px-6 text-center">
          <img
            src="/logo-header.png"
            alt="Ambulatory Surgery Compliance Solutions"
            className="h-28 w-auto object-contain"
          />

          <p className="text-slate-600">
            Guiding Excellence. Ensuring Compliance.
          </p>

          <p className="text-sm text-slate-500">
            © 2026 Ambulatory Surgery Compliance Solutions, LLC. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  )
}