export default function UbuntuCybersecurityWebsite() {
  return (
    <div className="min-h-screen bg-slate-950 text-white font-sans">
      {/* Hero Section */}
      <section className="relative overflow-hidden border-b border-slate-800">
        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 via-slate-950 to-emerald-500/10" />

        <div className="relative max-w-7xl mx-auto px-6 py-24 lg:py-32 grid lg:grid-cols-2 gap-14 items-center">
          <div>
            <div className="inline-flex items-center rounded-full border border-cyan-400/30 bg-cyan-400/10 px-4 py-2 text-sm text-cyan-300 mb-6">
              Trusted Governance, Risk & Compliance Solutions
            </div>

            <h1 className="text-5xl lg:text-7xl font-black leading-tight tracking-tight">
              Ubuntu <span className="text-cyan-400">Cybersecurity</span>
            </h1>

            <p className="mt-8 text-lg text-slate-300 leading-8 max-w-xl">
              Helping businesses strengthen governance, manage cyber risk, and stay compliant with modern security standards.
              We provide practical and business-focused GRC solutions tailored to your organisation.
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <a
                href="#contact"
                className="rounded-2xl bg-cyan-500 hover:bg-cyan-400 transition px-7 py-4 text-lg font-semibold shadow-xl shadow-cyan-500/20"
              >
                Contact Us
              </a>

              <a
                href="#services"
                className="rounded-2xl border border-slate-700 hover:border-cyan-400 transition px-7 py-4 text-lg font-semibold"
              >
                Our Services
              </a>
            </div>
          </div>

          <div className="relative">
            <div className="rounded-3xl border border-slate-800 bg-slate-900/80 backdrop-blur p-8 shadow-2xl shadow-cyan-500/10">
              <div className="grid gap-5">
                <div className="rounded-2xl bg-slate-800 p-5 border border-slate-700">
                  <h3 className="text-xl font-bold text-cyan-400">Governance</h3>
                  <p className="text-slate-300 mt-2">
                    Build clear cybersecurity frameworks, policies, and accountability structures.
                  </p>
                </div>

                <div className="rounded-2xl bg-slate-800 p-5 border border-slate-700">
                  <h3 className="text-xl font-bold text-cyan-400">Risk Management</h3>
                  <p className="text-slate-300 mt-2">
                    Identify, assess, and reduce cyber and operational risks before they become incidents.
                  </p>
                </div>

                <div className="rounded-2xl bg-slate-800 p-5 border border-slate-700">
                  <h3 className="text-xl font-bold text-cyan-400">Compliance</h3>
                  <p className="text-slate-300 mt-2">
                    Align with regulatory requirements and industry standards through practical compliance programs.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="max-w-7xl mx-auto px-6 py-24">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-black">Our Core Services</h2>
          <p className="text-slate-400 mt-4 text-lg max-w-2xl mx-auto">
            Ubuntu Cybersecurity focuses on strengthening your organisation’s governance, risk management, and compliance posture.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {[
            {
              title: 'Cybersecurity Governance',
              text: 'Policy development, governance frameworks, and security strategy alignment.'
            },
            {
              title: 'Risk Assessments',
              text: 'Comprehensive cyber risk assessments and mitigation planning.'
            },
            {
              title: 'Compliance Audits',
              text: 'Gap analysis and compliance readiness support for industry standards.'
            },
            {
              title: 'Third-Party Risk',
              text: 'Vendor and supplier cybersecurity risk management solutions.'
            },
            {
              title: 'Security Awareness',
              text: 'Employee awareness training to strengthen human cyber resilience.'
            },
            {
              title: 'Incident Readiness',
              text: 'Response planning and governance support for security incidents.'
            }
          ].map((service, index) => (
            <div
              key={index}
              className="rounded-3xl border border-slate-800 bg-slate-900 p-8 hover:border-cyan-400 transition duration-300 shadow-lg"
            >
              <h3 className="text-2xl font-bold text-cyan-400">{service.title}</h3>
              <p className="text-slate-300 mt-4 leading-7">{service.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="bg-slate-900 border-y border-slate-800">
        <div className="max-w-7xl mx-auto px-6 py-24 grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-4xl font-black mb-6">Why Choose Ubuntu Cybersecurity?</h2>
            <p className="text-slate-300 text-lg leading-8">
              We combine technical cybersecurity knowledge with practical business governance principles to help organisations operate securely and confidently.
            </p>
          </div>

          <div className="grid gap-6">
            {[
              'Business-focused cybersecurity solutions',
              'Practical and scalable GRC implementation',
              'Professional and client-centric approach',
              'Focused on long-term cyber resilience'
            ].map((item, index) => (
              <div
                key={index}
                className="flex items-center gap-4 rounded-2xl border border-slate-700 bg-slate-950 p-5"
              >
                <div className="h-4 w-4 rounded-full bg-cyan-400" />
                <span className="text-lg text-slate-200">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="max-w-5xl mx-auto px-6 py-24">
        <div className="text-center mb-14">
          <h2 className="text-4xl font-black">Contact Us</h2>
          <p className="text-slate-400 mt-4 text-lg">
            Reach out to discuss your governance, risk, and compliance needs.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-10">
          <div className="rounded-3xl border border-slate-800 bg-slate-900 p-8 shadow-xl">
            <h3 className="text-2xl font-bold text-cyan-400 mb-6">Get In Touch</h3>

            <div className="space-y-6 text-slate-300 text-lg">
              <div>
                <p className="font-semibold text-white">Email</p>
                <a
                  href="mailto:info@cybersec.co.za"
                  className="text-cyan-400 hover:underline"
                >
                  info@cybersec.co.za
                </a>
              </div>

              <div>
                <p className="font-semibold text-white">Company</p>
                <p>Ubuntu Cybersecurity</p>
              </div>
            </div>
          </div>

          <form
            action="https://formsubmit.co/info@cybersec.co.za"
            method="POST"
            className="rounded-3xl border border-slate-800 bg-slate-900 p-8 shadow-xl space-y-6"
          >
            <input type="hidden" name="_captcha" value="false" />

            <div>
              <label className="block mb-2 text-slate-300">Full Name</label>
              <input
                type="text"
                name="name"
                required
                className="w-full rounded-2xl bg-slate-950 border border-slate-700 px-5 py-4 text-white focus:outline-none focus:border-cyan-400"
                placeholder="Your name"
              />
            </div>

            <div>
              <label className="block mb-2 text-slate-300">Email Address</label>
              <input
                type="email"
                name="email"
                required
                className="w-full rounded-2xl bg-slate-950 border border-slate-700 px-5 py-4 text-white focus:outline-none focus:border-cyan-400"
                placeholder="your@email.com"
              />
            </div>

            <div>
              <label className="block mb-2 text-slate-300">Message</label>
              <textarea
                name="message"
                rows="6"
                required
                className="w-full rounded-2xl bg-slate-950 border border-slate-700 px-5 py-4 text-white focus:outline-none focus:border-cyan-400"
                placeholder="Tell us about your requirements"
              />
            </div>

            <button
              type="submit"
              className="w-full rounded-2xl bg-cyan-500 hover:bg-cyan-400 transition py-4 text-lg font-bold"
            >
              Send Message
            </button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-slate-800 bg-slate-950">
        <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <h3 className="text-xl font-bold text-cyan-400">Ubuntu Cybersecurity</h3>
            <p className="text-slate-400 mt-1">Governance • Risk • Compliance</p>
          </div>

          <div className="text-slate-400 text-sm">
            © 2026 Ubuntu Cybersecurity. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}