export default function PureBlastWebsite() {
  const services = [
    {
      title: "Driveways & Paths",
      text: "Cut through built-up grime, dirt, and stains to restore a cleaner, sharper finish.",
    },
    {
      title: "House Washing",
      text: "Refresh exterior walls and outdoor surfaces for a brighter, cleaner presentation.",
    },
    {
      title: "Patios & Outdoor Areas",
      text: "Bring entertaining spaces back to life with a deep exterior clean.",
    },
    {
      title: "Fences",
      text: "Lift surface build-up and improve the look of boundary and timber areas.",
    },
    {
      title: "Commercial Pressure Cleaning",
      text: "Keep shopfronts, access areas, and business exteriors looking professional.",
    },
    {
      title: "General Exterior Surface Cleaning",
      text: "A practical cleaning solution for hard outdoor surfaces around your property.",
    },
  ];

  const benefits = [
    "Modern, professional presentation",
    "Strong before-and-after results",
    "South Burnett local service area",
    "Residential and commercial jobs",
    "Fast quotes and direct contact with Mick",
    "Attention to detail on every clean",
  ];

  const process = [
    "Send through your job details or give Mick a call",
    "Get a fast quote for your property or surface cleaning job",
    "Book a time that suits and get a fresh, professional result",
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <section className="relative overflow-hidden border-b border-sky-400/10 bg-[radial-gradient(circle_at_top_right,_rgba(56,189,248,0.16),_transparent_28%),radial-gradient(circle_at_bottom_left,_rgba(14,165,233,0.15),_transparent_30%)]">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950" />
        <div className="absolute -left-32 bottom-0 h-72 w-72 rounded-full bg-sky-500/10 blur-3xl" />
        <div className="absolute right-0 top-0 h-80 w-80 rounded-full bg-cyan-400/10 blur-3xl" />

        <div className="relative mx-auto max-w-7xl px-6 py-6 md:px-10">
          <div className="flex flex-col gap-4 rounded-3xl border border-white/10 bg-white/5 px-5 py-4 backdrop-blur md:flex-row md:items-center md:justify-between">
            <div className="flex items-center gap-3">
              <img
                src="/logo.png"
                alt="Pure Blast Pressure Cleaning logo"
                className="h-12 w-auto object-contain"
              />
              <div>
                <div className="text-2xl font-black tracking-tight md:text-3xl">
                  <span className="text-white">Pure</span>{" "}
                  <span className="text-cyan-300">Blast</span>
                </div>
                <div className="text-xs font-semibold uppercase tracking-[0.35em] text-sky-100/70 md:text-sm">
                  Pressure Cleaning
                </div>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-3 md:gap-4">
              <div className="rounded-2xl border border-cyan-400/25 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-200">
                Servicing the South Burnett
              </div>
              <a
                href="tel:0412144297"
                className="rounded-2xl bg-cyan-400 px-5 py-3 text-sm font-black text-slate-950 transition hover:scale-[1.02] md:text-base"
              >
                Call Mick: 0412 144 297
              </a>
            </div>
          </div>
        </div>

        <div className="relative mx-auto grid max-w-7xl gap-12 px-6 pb-20 pt-8 md:px-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:pb-28 lg:pt-10">
          <div>
            <div className="inline-flex items-center rounded-full border border-cyan-400/30 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-200">
              Exterior Cleaning Done Right
            </div>

            <h1 className="mt-6 max-w-4xl text-5xl font-black leading-none tracking-tight sm:text-6xl lg:text-7xl">
              High Pressure.
              <br />
              <span className="text-cyan-300">Pure Results.</span>
            </h1>

            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300 sm:text-xl">
              Pure Blast Pressure Cleaning delivers a clean, modern service for driveways, homes, patios, fences, and outdoor surfaces across the South Burnett.
            </p>

            <div className="mt-8 flex flex-col gap-4 sm:flex-row">
              <a
                href="tel:0412144297"
                className="rounded-2xl bg-cyan-400 px-6 py-4 text-center text-lg font-black text-slate-950 shadow-lg shadow-cyan-500/20 transition hover:scale-[1.02]"
              >
                Call Now
              </a>
              <a
                href="#quote"
                className="rounded-2xl border border-slate-700 bg-white/5 px-6 py-4 text-center text-lg font-semibold text-white transition hover:bg-white/10"
              >
                Request a Quote
              </a>
            </div>

            <div className="mt-8 grid max-w-2xl grid-cols-2 gap-4 sm:grid-cols-3">
              {[
                "Driveways",
                "House Washing",
                "Patios",
                "Fences",
                "Commercial",
                "Free Quotes",
              ].map((item) => (
                <div
                  key={item}
                  className="rounded-2xl border border-slate-800 bg-white/5 px-4 py-3 text-center text-sm font-semibold text-slate-200 backdrop-blur"
                >
                  {item}
                </div>
              ))}
            </div>
          </div>

          <div className="relative">
            <div className="overflow-hidden rounded-[2rem] border border-cyan-400/20 bg-gradient-to-br from-sky-500 via-blue-700 to-slate-950 p-[1px] shadow-2xl shadow-cyan-500/10">
              <div className="rounded-[2rem] bg-slate-950/90 p-8 sm:p-10">
                <div className="rounded-[1.75rem] border border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.95),rgba(14,116,144,0.65))] p-8">
                  <div className="text-center">
                    <div className="text-4xl font-black tracking-tight sm:text-5xl">
                      <span className="text-white">Pure</span>{" "}
                      <span className="text-cyan-300">Blast</span>
                    </div>
                    <div className="mt-2 text-xs font-bold uppercase tracking-[0.45em] text-sky-100/80 sm:text-sm">
                      Pressure Cleaning
                    </div>
                  </div>

                  <div className="my-8 h-px bg-gradient-to-r from-transparent via-cyan-300/60 to-transparent" />

                  <div className="space-y-5 text-center">
                    <div className="text-sm font-bold uppercase tracking-[0.3em] text-cyan-200">
                      Intro Offer
                    </div>
                    <div className="rounded-3xl bg-cyan-400 px-6 py-5 text-3xl font-black text-slate-950 shadow-lg shadow-cyan-500/20">
                      10% OFF FIRST CLEAN
                    </div>
                    <p className="text-base leading-7 text-slate-200">
                      Professional pressure cleaning for residential and commercial properties.
                    </p>
                  </div>

                  <div className="mt-8 grid gap-4 sm:grid-cols-2">
                    <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-4 text-center">
                      <div className="text-xs font-bold uppercase tracking-[0.3em] text-cyan-200">Main Contact</div>
                      <div className="mt-2 text-2xl font-black">Mick</div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-4 text-center">
                      <div className="text-xs font-bold uppercase tracking-[0.3em] text-cyan-200">ABN</div>
                      <div className="mt-2 text-base font-bold text-slate-100">70 051 256 598</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-16 md:px-10">
        <div className="grid gap-6 md:grid-cols-3">
          {[
            {
              heading: "Modern Branding",
              text: "A clean, professional presentation that makes your business feel established and trustworthy.",
            },
            {
              heading: "Strong Results",
              text: "Clear before-and-after value for driveways, homes, patios, and outdoor surfaces.",
            },
            {
              heading: "Local Service",
              text: "Focused on the South Burnett with direct contact and fast quoting through Mick.",
            },
          ].map((item) => (
            <div
              key={item.heading}
              className="rounded-[2rem] border border-slate-800 bg-slate-900/60 p-8 shadow-xl"
            >
              <div className="mb-4 text-sm font-bold uppercase tracking-[0.3em] text-cyan-300">
                Pure Blast
              </div>
              <h3 className="text-2xl font-black">{item.heading}</h3>
              <p className="mt-4 leading-7 text-slate-300">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="services" className="border-y border-slate-800 bg-slate-900/70">
        <div className="mx-auto max-w-7xl px-6 py-20 md:px-10">
          <div className="max-w-3xl">
            <div className="text-sm font-bold uppercase tracking-[0.35em] text-cyan-300">Services</div>
            <h2 className="mt-4 text-4xl font-black sm:text-5xl">Pressure cleaning that lifts presentation and restores surfaces</h2>
            <p className="mt-6 text-lg leading-8 text-slate-300">
              From everyday residential jobs to larger exterior cleaning work, Pure Blast Pressure Cleaning is built around reliable service, clear communication, and sharp results.
            </p>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {services.map((service) => (
              <div
                key={service.title}
                className="rounded-[2rem] border border-slate-800 bg-slate-950/65 p-7 transition hover:-translate-y-1 hover:border-cyan-400/40"
              >
                <div className="mb-5 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-400 text-xl font-black text-slate-950 shadow-lg shadow-cyan-500/20">
                  ✓
                </div>
                <h3 className="text-2xl font-black">{service.title}</h3>
                <p className="mt-4 leading-7 text-slate-300">{service.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20 md:px-10">
        <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <div className="rounded-[2rem] border border-slate-800 bg-gradient-to-br from-slate-900 to-slate-950 p-8 sm:p-10">
            <div className="text-sm font-bold uppercase tracking-[0.35em] text-cyan-300">Why Choose Us</div>
            <h2 className="mt-4 text-4xl font-black">A clean modern business built for trust and visibility</h2>
            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              {benefits.map((benefit) => (
                <div
                  key={benefit}
                  className="rounded-2xl border border-slate-800 bg-white/5 px-5 py-4 text-slate-200"
                >
                  {benefit}
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-[2rem] border border-cyan-400/30 bg-cyan-400/10 p-8 sm:p-10">
            <div className="text-sm font-bold uppercase tracking-[0.35em] text-cyan-200">How It Works</div>
            <h3 className="mt-4 text-3xl font-black text-white">Simple, fast, and direct</h3>
            <div className="mt-8 space-y-4">
              {process.map((step, index) => (
                <div key={step} className="flex gap-4 rounded-2xl border border-white/15 bg-white/5 p-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-white text-lg font-black text-slate-950">
                    {index + 1}
                  </div>
                  <div className="pt-1 text-slate-100">{step}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="quote" className="bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-500 text-slate-950">
        <div className="mx-auto max-w-7xl px-6 py-20 md:px-10">
          <div className="grid gap-8 lg:grid-cols-[1fr_0.95fr] lg:items-center">
            <div>
              <div className="text-sm font-bold uppercase tracking-[0.35em] text-slate-900/70">Request a Quote</div>
              <h2 className="mt-4 text-4xl font-black sm:text-5xl">Ready to bring your property back to life?</h2>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-900/80">
                Reach out for a free quote on pressure cleaning services across the South Burnett. Fast response, direct contact, and a professional finish.
              </p>

              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                <a
                  href="tel:0412144297"
                  className="rounded-2xl bg-slate-950 px-6 py-4 text-center text-lg font-black text-white shadow-xl"
                >
                  0412 144 297
                </a>
                <div className="rounded-2xl border border-slate-900/15 px-6 py-4 text-center text-lg font-bold text-slate-950">
                  Mick · Main Contact
                </div>
              </div>
            </div>

            <div className="rounded-[2rem] bg-white p-8 shadow-2xl">
              <form className="space-y-4">
                <input className="w-full rounded-2xl border border-slate-200 px-5 py-4 text-slate-950 outline-none" placeholder="Your name" />
                <input className="w-full rounded-2xl border border-slate-200 px-5 py-4 text-slate-950 outline-none" placeholder="Phone number" />
                <input className="w-full rounded-2xl border border-slate-200 px-5 py-4 text-slate-950 outline-none" placeholder="Town / suburb" />
                <textarea className="min-h-[140px] w-full rounded-2xl border border-slate-200 px-5 py-4 text-slate-950 outline-none" placeholder="What would you like cleaned?" />
                <button type="button" className="w-full rounded-2xl bg-slate-950 px-6 py-4 text-lg font-black text-white">
                  Submit Quote Request
                </button>
              </form>
              <p className="mt-4 text-center text-sm text-slate-500">
                Replace this form with your live website form, Facebook lead form, or website contact plugin.
              </p>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-800 bg-slate-950">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-8 text-sm text-slate-400 md:flex-row md:items-center md:justify-between md:px-10">
          <div>
            <span className="font-black text-white">Pure Blast Pressure Cleaning</span> · Servicing the South Burnett
          </div>
          <div className="flex flex-wrap gap-4">
            <span>Call Mick: 0412 144 297</span>
            <span>ABN: 70 051 256 598</span>
          </div>
        </div>
      </footer>
    </div>
  );
}