export default function NMooreAttorneysWebsite() {
  const services = [
    {
      title: 'Commercial Law',
      description:
        'Strategic legal guidance for businesses, contracts, compliance, and commercial disputes.',
    },
    {
      title: 'Property & Conveyancing',
      description:
        'Professional assistance with property transfers, agreements, and real estate legal matters.',
    },
    {
      title: 'Litigation',
      description:
        'Strong representation in civil disputes, debt recovery, and court proceedings.',
    },
    {
      title: 'Family Law',
      description:
        'Supportive and practical legal solutions for divorce, custody, maintenance, and estates.',
    },
  ]

  return (
    <div className="min-h-screen bg-neutral-950 text-white">
      <header className="border-b border-white/10 bg-neutral-950/95 backdrop-blur sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-wide">N Moore Attorneys</h1>
            <p className="text-sm text-neutral-400">Trusted Legal Counsel in South Africa</p>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm text-neutral-300">
            <a href="#about" className="hover:text-white transition">About</a>
            <a href="#services" className="hover:text-white transition">Services</a>
            <a href="#contact" className="hover:text-white transition">Contact</a>
          </nav>
        </div>
      </header>

      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-amber-700/20 via-transparent to-transparent" />

        <div className="max-w-7xl mx-auto px-6 py-28 grid lg:grid-cols-2 gap-16 items-center relative z-10">
          <div>
            <div className="inline-flex items-center rounded-full border border-amber-500/40 bg-amber-500/10 px-4 py-2 text-sm text-amber-200 mb-6">
              Professional • Reliable • Results Driven
            </div>

            <h2 className="text-5xl md:text-6xl font-bold leading-tight mb-6">
              Legal Expertise You Can Trust
            </h2>

            <p className="text-lg text-neutral-300 leading-relaxed mb-8 max-w-2xl">
              N Moore Attorneys provides tailored legal services for individuals,
              families, and businesses across South Africa. We combine practical
              legal insight with responsive client service to deliver clear,
              effective solutions.
            </p>

            <div className="flex flex-wrap gap-4">
              <a
                href="#contact"
                className="rounded-2xl bg-amber-500 px-6 py-4 text-black font-semibold hover:bg-amber-400 transition shadow-lg shadow-amber-500/20"
              >
                Book a Consultation
              </a>

              <a
                href="#services"
                className="rounded-2xl border border-white/15 px-6 py-4 text-white hover:bg-white/5 transition"
              >
                View Services
              </a>
            </div>
          </div>

          <div className="bg-white/5 border border-white/10 rounded-[32px] p-8 shadow-2xl backdrop-blur">
            <div className="grid grid-cols-2 gap-6">
              <div className="rounded-3xl bg-neutral-900 p-6 border border-white/5">
                <div className="text-4xl font-bold text-amber-400 mb-2">10+</div>
                <p className="text-neutral-300 text-sm">Years Combined Legal Experience</p>
              </div>

              <div className="rounded-3xl bg-neutral-900 p-6 border border-white/5">
                <div className="text-4xl font-bold text-amber-400 mb-2">100%</div>
                <p className="text-neutral-300 text-sm">Client Focused Approach</p>
              </div>

              <div className="rounded-3xl bg-neutral-900 p-6 border border-white/5 col-span-2">
                <h3 className="text-xl font-semibold mb-3">Why Clients Choose Us</h3>
                <ul className="space-y-3 text-neutral-300 text-sm">
                  <li>• Clear communication and transparent legal guidance</li>
                  <li>• Efficient turnaround and practical solutions</li>
                  <li>• Dedicated support for individuals and businesses</li>
                  <li>• Professional representation with integrity</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="about" className="max-w-7xl mx-auto px-6 py-24">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <p className="text-amber-400 uppercase tracking-[0.25em] text-sm mb-4">
              About The Firm
            </p>

            <h3 className="text-4xl font-bold mb-6">
              Modern Legal Services With A Personal Approach
            </h3>

            <p className="text-neutral-300 leading-relaxed mb-6">
              At N Moore Attorneys, every client matter is handled with attention,
              professionalism, and care. We understand that legal matters can be
              complex and stressful, which is why we focus on straightforward
              communication and strategic legal guidance.
            </p>

            <p className="text-neutral-300 leading-relaxed">
              Whether you require legal support for business, property,
              litigation, or personal matters, our goal is to provide dependable
              representation and practical outcomes.
            </p>
          </div>

          <div className="rounded-[32px] border border-white/10 bg-white/5 p-10">
            <div className="space-y-8">
              <div>
                <h4 className="text-2xl font-semibold mb-2">Client Commitment</h4>
                <p className="text-neutral-300">
                  Responsive communication and tailored legal strategies.
                </p>
              </div>

              <div>
                <h4 className="text-2xl font-semibold mb-2">Professional Standards</h4>
                <p className="text-neutral-300">
                  Ethical representation grounded in integrity and accountability.
                </p>
              </div>

              <div>
                <h4 className="text-2xl font-semibold mb-2">Practical Solutions</h4>
                <p className="text-neutral-300">
                  Legal advice designed to achieve efficient and effective outcomes.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="services" className="bg-white/[0.03] border-y border-white/5">
        <div className="max-w-7xl mx-auto px-6 py-24">
          <div className="max-w-3xl mb-16">
            <p className="text-amber-400 uppercase tracking-[0.25em] text-sm mb-4">
              Legal Services
            </p>

            <h3 className="text-4xl font-bold mb-6">
              Comprehensive Legal Support
            </h3>

            <p className="text-neutral-300 text-lg">
              Professional legal services tailored to private individuals,
              families, and businesses throughout South Africa.
            </p>
          </div>

          <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-6">
            {services.map((service) => (
              <div
                key={service.title}
                className="rounded-[28px] border border-white/10 bg-neutral-900/60 p-8 hover:border-amber-500/40 transition"
              >
                <h4 className="text-2xl font-semibold mb-4">{service.title}</h4>
                <p className="text-neutral-300 leading-relaxed text-sm">
                  {service.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="contact" className="max-w-7xl mx-auto px-6 py-24">
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <div>
            <p className="text-amber-400 uppercase tracking-[0.25em] text-sm mb-4">
              Contact Us
            </p>

            <h3 className="text-4xl font-bold mb-6">
              Speak With An Attorney Today
            </h3>

            <p className="text-neutral-300 text-lg leading-relaxed mb-10 max-w-xl">
              Contact N Moore Attorneys to discuss your legal requirements or to
              arrange a professional consultation.
            </p>

            <div className="space-y-6 text-neutral-300">
              <div>
                <p className="text-white font-semibold mb-1">Phone</p>
                <p>+27 (0)11 000 0000</p>
              </div>

              <div>
                <p className="text-white font-semibold mb-1">Email</p>
                <p>info@nmooreattorneys.co.za</p>
              </div>

              <div>
                <p className="text-white font-semibold mb-1">Office Hours</p>
                <p>Monday to Friday • 08:00 to 17:00</p>
              </div>
            </div>
          </div>

          <div className="rounded-[32px] border border-white/10 bg-white/5 p-8">
            <form className="space-y-5">
              <div>
                <label className="block text-sm text-neutral-300 mb-2">Full Name</label>
                <input
                  type="text"
                  placeholder="Your name"
                  className="w-full rounded-2xl bg-neutral-900 border border-white/10 px-5 py-4 outline-none focus:border-amber-500"
                />
              </div>

              <div>
                <label className="block text-sm text-neutral-300 mb-2">Email Address</label>
                <input
                  type="email"
                  placeholder="you@example.com"
                  className="w-full rounded-2xl bg-neutral-900 border border-white/10 px-5 py-4 outline-none focus:border-amber-500"
                />
              </div>

              <div>
                <label className="block text-sm text-neutral-300 mb-2">Message</label>
                <textarea
                  rows="5"
                  placeholder="Tell us how we can assist you"
                  className="w-full rounded-2xl bg-neutral-900 border border-white/10 px-5 py-4 outline-none focus:border-amber-500"
                />
              </div>

              <button
                type="submit"
                className="w-full rounded-2xl bg-amber-500 px-6 py-4 text-black font-semibold hover:bg-amber-400 transition"
              >
                Submit Enquiry
              </button>
            </form>
          </div>
        </div>
      </section>

      <footer className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-neutral-400">
          <p>© 2026 N Moore Attorneys. All rights reserved.</p>
          <p>nmooreattorneys.co.za</p>
        </div>
      </footer>
    </div>
  )
}