export default function WildaBeastNewsletterMockup() {
  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <div className="max-w-5xl mx-auto bg-white shadow-2xl rounded-3xl overflow-hidden">

        {/* HERO SECTION */}
        <div
          className="relative h-[420px] bg-cover bg-center"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop')",
          }}
        >
          <div className="absolute inset-0 bg-black/45" />

          <div className="relative z-10 flex flex-col justify-center h-full px-10 text-white">
            <h1 className="text-5xl font-black mb-4">
              WildaBeast Media Newsletter
            </h1>

            <p className="text-2xl font-light mb-6">
              Explore • Discover • Ride • Connect
            </p>

            <p className="max-w-2xl text-lg leading-relaxed">
              Spotlighting local businesses, North Carolina adventures,
              community events, and the people helping make our communities
              stronger.
            </p>
          </div>
        </div>

        {/* FEATURED BUSINESS */}
        <section className="grid md:grid-cols-2 gap-0">
          <div
            className="h-[340px] bg-cover bg-center"
            style={{
              backgroundImage:
                "url('https://images.unsplash.com/photo-1556740749-887f6717d7e4?q=80&w=1200&auto=format&fit=crop')",
            }}
          />

          <div className="p-10 flex flex-col justify-center bg-white">
            <p className="uppercase tracking-[4px] text-sky-600 font-bold mb-3">
              Featured Local Business
            </p>

            <h2 className="text-4xl font-black mb-4 text-gray-900">
              Downtown Coffee & Co.
            </h2>

            <p className="text-gray-700 leading-relaxed mb-6">
              This month we’re spotlighting one of our favorite local coffee
              shops in North Carolina. Their mission of community, family, and
              supporting local events made them a perfect WildaBeast feature.
            </p>

            <button className="bg-sky-600 hover:bg-sky-700 transition text-white px-6 py-3 rounded-2xl w-fit font-semibold shadow-lg">
              Visit Their Website
            </button>
          </div>
        </section>

        {/* ADVENTURE SECTION */}
        <section className="bg-sky-50 p-10">
          <div className="text-center mb-10">
            <p className="uppercase tracking-[4px] text-sky-700 font-bold mb-3">
              Next Adventure
            </p>

            <h2 className="text-5xl font-black text-gray-900 mb-4">
              Exploring Sanford, NC
            </h2>

            <p className="max-w-3xl mx-auto text-gray-700 text-lg leading-relaxed">
              We’ll be exploring local shops, hidden gems, community events,
              trails, and businesses throughout Sanford while capturing the
              beauty and energy of the area.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {[
              "https://images.unsplash.com/photo-1526779259212-939e64788e3c?q=80&w=1000&auto=format&fit=crop",
              "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1000&auto=format&fit=crop",
              "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1000&auto=format&fit=crop",
            ].map((img, index) => (
              <div
                key={index}
                className="h-72 rounded-3xl overflow-hidden shadow-xl"
              >
                <img
                  src={img}
                  alt="Adventure"
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>
        </section>

        {/* COMMUNITY SECTION */}
        <section className="p-10 bg-white">
          <div className="text-center mb-10">
            <p className="uppercase tracking-[4px] text-sky-700 font-bold mb-3">
              Community Highlights
            </p>

            <h2 className="text-4xl font-black text-gray-900">
              Chamber Events & Local Connections
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-gray-50 rounded-3xl overflow-hidden shadow-lg">
              <img
                src="https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=1200&auto=format&fit=crop"
                className="h-64 w-full object-cover"
              />

              <div className="p-6">
                <h3 className="text-2xl font-bold mb-3 text-gray-900">
                  Angier Chamber Networking Night
                </h3>

                <p className="text-gray-700 leading-relaxed">
                  Amazing conversations, great local businesses, and a strong
                  sense of community collaboration throughout the evening.
                </p>
              </div>
            </div>

            <div className="bg-gray-50 rounded-3xl overflow-hidden shadow-lg">
              <img
                src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?q=80&w=1200&auto=format&fit=crop"
                className="h-64 w-full object-cover"
              />

              <div className="p-6">
                <h3 className="text-2xl font-bold mb-3 text-gray-900">
                  Supporting Local Businesses
                </h3>

                <p className="text-gray-700 leading-relaxed">
                  WildaBeast Media continues spotlighting the people and
                  businesses helping North Carolina communities grow stronger.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* FOOTER */}
        <footer className="bg-black text-white p-10 text-center">
          <h2 className="text-3xl font-black mb-3">WildaBeast Media</h2>

          <p className="text-sky-400 mb-6 text-lg">
            Explore • Discover • Ride • Connect
          </p>

          <p className="max-w-2xl mx-auto text-gray-300 leading-relaxed mb-6">
            Thank you for supporting local businesses, local adventures, and
            the communities that make North Carolina such an incredible place
            to live, work, and explore.
          </p>

          <div className="flex justify-center gap-4 flex-wrap">
            <button className="bg-sky-600 px-5 py-3 rounded-2xl font-semibold">
              Visit Website
            </button>

            <button className="border border-white px-5 py-3 rounded-2xl font-semibold">
              Watch on YouTube
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
}