export default function HomePage() {
  return (
    <div className="min-h-screen bg-[#efe3c7] text-[#1f3b2d]">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');
        .font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }
        .font-body { font-family: 'Inter', sans-serif; }
      `}</style>

      <section
        className="relative overflow-hidden"
        style={{
          backgroundImage:
            "linear-gradient(rgba(20,40,28,.58), rgba(20,40,28,.70)), url('/mnt/data/9572e206-b36d-4466-9def-eea5585fa441.png')",
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(214,165,64,.28),transparent_30%),radial-gradient(circle_at_bottom_right,rgba(202,99,34,.22),transparent_28%)]" />

        <div className="relative mx-auto flex max-w-7xl flex-col gap-12 px-6 py-8 md:px-10 lg:px-12">
          <header className="flex flex-col items-center justify-between gap-6 rounded-[28px] border border-[#f7e7b7]/30 bg-[#10271d]/55 px-6 py-5 shadow-[0_18px_60px_rgba(0,0,0,.28)] backdrop-blur md:flex-row">
            <div className="flex items-center gap-4">
              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-[#f3ead1] shadow-[0_0_0_4px_rgba(214,165,64,.45),0_0_30px_rgba(214,165,64,.35)]">
                <img
                  src="/mnt/data/Screen Shot 2026-04-11 at 6.47.55 PM.png"
                  alt="360 Degrees Renovations and Landscaping Inc. logo"
                  className="h-16 w-16 rounded-full object-cover"
                />
              </div>
              <div>
                <p className="font-display text-3xl leading-none text-[#f8edcb] md:text-4xl">
                  360 Degrees Renovations
                </p>
                <p className="font-display text-2xl leading-none text-[#d9a645] md:text-3xl">
                  And Landscaping Inc.
                </p>
              </div>
            </div>

            <div className="flex flex-col items-center gap-3 text-center md:items-end md:text-right">
              <a
                href="tel:7073849940"
                className="font-display text-2xl text-[#f8edcb] transition hover:text-[#f2b24f]"
              >
                707.384.9940
              </a>
              <a
                href="mailto:RobertIngram957@GMail.Com"
                className="font-body text-sm font-semibold text-[#f8edcb]/90 transition hover:text-white"
              >
                RobertIngram957@GMail.Com
              </a>
              <a
                href="#contact"
                className="rounded-full bg-[#d9a645] px-6 py-3 font-display text-xl text-[#173223] shadow-[0_10px_30px_rgba(217,166,69,.45)] transition hover:-translate-y-0.5 hover:bg-[#eab85c]"
              >
                Request A Free Estimate
              </a>
            </div>
          </header>

          <div className="grid items-center gap-10 py-6 lg:grid-cols-[1.15fr_.85fr] lg:py-12">
            <div className="max-w-3xl">
              <p className="mb-4 inline-flex rounded-full border border-[#f4dd9b]/40 bg-[#f0dfb3]/10 px-4 py-2 font-body text-sm font-semibold uppercase tracking-[0.2em] text-[#f8edcb] backdrop-blur">
                Family-Friendly • Reliable • Professional • Same Week Availability
              </p>
              <h1 className="font-display text-6xl leading-[0.9] text-[#fff6df] drop-shadow md:text-8xl xl:text-[7rem]">
                Curb Appeal.
                <br />
                Clean Renovation.
                <br />
                Trusted Service.
              </h1>
              <p className="mt-6 max-w-2xl font-body text-lg leading-8 text-[#f8edcb]/92 md:text-xl">
                Reliable, honest work you can count on. From yard cleanups and landscaping touch-ups to small home repairs and upgrades, Mr. Ingram focuses on getting the job done right without overcomplicating the process.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <a
                  href="#contact"
                  className="rounded-full bg-[#d9a645] px-7 py-4 font-display text-2xl text-[#173223] shadow-[0_12px_36px_rgba(217,166,69,.42)] transition hover:-translate-y-0.5 hover:bg-[#e9b95d]"
                >
                  Get In Touch
                </a>
                <a
                  href="tel:7073849940"
                  className="rounded-full border border-[#f8edcb]/50 bg-white/10 px-7 py-4 font-display text-2xl text-[#fff6df] backdrop-blur transition hover:bg-white/18"
                >
                  Call Now
                </a>
              </div>
            </div>

            <div className="relative">
              <div className="absolute -inset-4 rounded-[34px] bg-[linear-gradient(135deg,rgba(217,166,69,.38),rgba(202,99,34,.25),rgba(25,73,48,.35))] blur-2xl" />
              <div className="relative overflow-hidden rounded-[34px] border border-[#f3e4bd]/35 bg-[#f7edd3]/95 shadow-[0_22px_70px_rgba(0,0,0,.28)]">
                <img
                  src="/mnt/data/f3716fcb-d52d-4da0-975d-e5f15b2824ad.png"
                  alt="Owner portrait"
                  className="h-[440px] w-full object-cover object-center"
                />
                <div className="bg-[#163626] px-6 py-5 text-[#f7edd3]">
                  <p className="font-display text-3xl leading-none text-[#d9a645]">Ready To Serve</p>
                  <p className="mt-2 font-body text-sm leading-6 text-[#f7edd3]/90">
                    Call or email and get a fast, straightforward response. Most jobs can be quoted quickly and scheduled without delays.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="relative -mt-10 z-10 mx-auto max-w-7xl px-6 md:px-10 lg:px-12">
        <div className="grid gap-5 md:grid-cols-3">
          {[
            {
              title: 'Landscaping',
              text: 'Yard cleanups, lawn care, trimming, planting, and general upkeep to keep your property looking clean and welcoming.',
            },
            {
              title: 'Renovation',
              text: 'Minor home repairs and upgrades including painting, fixtures, light carpentry, and general handyman-level renovation work done with care and precision.',
            },
            {
              title: 'Direct Contact',
              text: 'Call or email directly for quick answers, fast quotes, and simple scheduling. No runaround—just straightforward service.',
            },
          ].map((item) => (
            <div
              key={item.title}
              className="rounded-[28px] border border-[#dbc99a] bg-[#f8efd9] p-7 shadow-[0_12px_34px_rgba(31,59,45,.08)]"
            >
              <h3 className="font-display text-4xl leading-none text-[#1e432f]">{item.title}</h3>
              <p className="mt-4 font-body text-[15px] leading-7 text-[#3d4e43]">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20 md:px-10 lg:px-12">
        <div className="grid items-center gap-10 lg:grid-cols-[.95fr_1.05fr]">
          <div className="overflow-hidden rounded-[34px] border border-[#d8c692] bg-[#f8efd9] shadow-[0_18px_60px_rgba(31,59,45,.10)]">
            <img
              src="/mnt/data/9572e206-b36d-4466-9def-eea5585fa441.png"
              alt="Landscaped home exterior"
              className="h-full w-full object-cover"
            />
          </div>

          <div>
            <p className="font-display text-2xl text-[#ca6322]">Dependable service you can trust</p>
            <h2 className="mt-2 font-display text-5xl leading-[0.95] text-[#1e432f] md:text-6xl">
              Simple by design.
              <br />
              Strong where it counts.
            </h2>
            <p className="mt-6 font-body text-lg leading-8 text-[#425548]">
              Mr. Ingram provides dependable, hands-on service with fair pricing and attention to detail. From yard work to small repairs and upgrades, the focus is on practical improvements that make your home and property look better and function properly—without overcomplicating the job.
            </p>

            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              {[
                'Same Week Availability', 'Fast Response Times', 'Reliable Local Service', 'Straightforward Pricing',
              ].map((point) => (
                <div
                  key={point}
                  className="rounded-2xl border border-[#d9c88f] bg-[#f3e7c7] px-5 py-4 font-body text-sm font-semibold text-[#254534]"
                >
                  {point}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="contact" className="bg-[#173223] px-6 py-20 text-[#f8efd9] md:px-10 lg:px-12">
        <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[.85fr_1.15fr]">
          <div>
            <p className="font-display text-2xl text-[#f2b24f]">Let’s make it easy to reach him</p>
            <h2 className="mt-2 font-display text-5xl leading-[0.95] md:text-6xl">
              Contact Robert Directly
            </h2>
            <p className="mt-6 font-body text-lg leading-8 text-[#f8efd9]/88">
              Reach out directly by phone or email for a quick response. Most jobs can be discussed and scheduled easily without a long process.
            </p>

            <div className="mt-8 space-y-4">
              <a
                href="tel:7073849940"
                className="block rounded-[24px] border border-[#e0c172]/35 bg-white/8 px-6 py-5 transition hover:bg-white/12"
              >
                <span className="font-display text-3xl text-[#f2b24f]">Call</span>
                <span className="mt-2 block font-body text-lg">707.384.9940</span>
              </a>
              <a
                href="mailto:RobertIngram957@GMail.Com"
                className="block rounded-[24px] border border-[#e0c172]/35 bg-white/8 px-6 py-5 transition hover:bg-white/12"
              >
                <span className="font-display text-3xl text-[#f2b24f]">Email</span>
                <span className="mt-2 block font-body break-all text-lg">RobertIngram957@GMail.Com</span>
              </a>
            </div>
          </div>

          <div className="rounded-[34px] border border-[#f0d89d]/20 bg-[#f8efd9] p-6 text-[#173223] shadow-[0_20px_70px_rgba(0,0,0,.18)] md:p-8">
            <h3 className="font-display text-4xl leading-none text-[#1e432f]">Request Information</h3>
            <p className="mt-3 font-body text-sm leading-6 text-[#4d5b52]">
              Fill out the form and your message will be sent directly by email so you can get a fast response about your project.
            </p>

            <form className="mt-8 grid gap-4 md:grid-cols-2">
              <input className="rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322]" placeholder="First Name" />
              <input className="rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322]" placeholder="Last Name" />
              <input className="rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322] md:col-span-1" placeholder="Phone Number" />
              <input className="rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322] md:col-span-1" placeholder="Email Address" />
              <input className="rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322] md:col-span-2" placeholder="Service Needed" />
              <textarea className="min-h-[160px] rounded-2xl border border-[#d8c692] bg-white px-4 py-4 font-body outline-none ring-0 transition focus:border-[#ca6322] md:col-span-2" placeholder="Tell us a little about your project" />
              <button
                type="button"
                className="md:col-span-2 rounded-full bg-[#d9a645] px-7 py-4 font-display text-2xl text-[#173223] shadow-[0_10px_30px_rgba(217,166,69,.35)] transition hover:-translate-y-0.5 hover:bg-[#ebb85b]"
              >
                Send Request
              </button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}