export default function SaintLuciaWixMockup() {
  const airbnbUrl = "https://www.airbnb.ca/rooms/1632095227096655929";

  const Section = ({ id, title, children, soft = false }) => (
    <section id={id} className={`max-w-6xl mx-auto px-6 md:px-10 py-16 ${soft ? 'bg-white/70 rounded-3xl' : ''}`}>
      <h2 className="text-3xl md:text-4xl font-serif text-slate-900 mb-6">{title}</h2>
      <div className="text-slate-700 text-lg leading-8">{children}</div>
    </section>
  );

  const Card = ({ title, text }) => (
    <div className="bg-white rounded-3xl shadow-sm border border-slate-200 p-6">
      <h3 className="text-xl font-semibold text-slate-900 mb-3">{title}</h3>
      <p className="text-slate-700 leading-7">{text}</p>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-amber-50 text-slate-900">
      <header className="sticky top-0 z-20 backdrop-blur bg-white/80 border-b border-slate-200">
        <div className="max-w-6xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
          <div>
            <div className="font-serif text-xl">Stay Near Cas en Bas</div>
            <div className="text-xs text-slate-500">Saint Lucia Vacation Stay</div>
          </div>
          <nav className="hidden md:flex gap-6 text-sm text-slate-700">
            <a href="#home" className="hover:text-slate-900">Home</a>
            <a href="#stay" className="hover:text-slate-900">The Stay</a>
            <a href="#area" className="hover:text-slate-900">Why This Area</a>
            <a href="#things" className="hover:text-slate-900">Things To Do</a>
            <a href="#faq" className="hover:text-slate-900">FAQ</a>
            <a href="#book" className="hover:text-slate-900">Book</a>
          </nav>
        </div>
      </header>

      <section id="home" className="max-w-6xl mx-auto px-6 md:px-10 py-12 md:py-20">
        <div className="grid md:grid-cols-2 gap-10 items-center">
          <div>
            <div className="inline-flex items-center rounded-full bg-white border border-slate-200 px-4 py-2 text-sm text-slate-600 mb-5 shadow-sm">
              Sleeps 6 · 3 Bedrooms · 3.5 Bathrooms · Pool Access
            </div>
            <h1 className="text-5xl md:text-6xl font-serif leading-tight text-slate-900">
              Your Saint Lucia Escape Near Cas en Bas Beach
            </h1>
            <p className="mt-6 text-lg md:text-xl text-slate-700 leading-8 max-w-xl">
              Stay in a spacious 3-bedroom townhouse in Cap Cove, near Cas en Bas Beach in Saint Lucia’s beautiful north end.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href={airbnbUrl}
                className="rounded-2xl px-6 py-3 bg-slate-900 text-white font-medium shadow-sm hover:opacity-90"
              >
                Check Availability on Airbnb
              </a>
              <a
                href="#area"
                className="rounded-2xl px-6 py-3 bg-white border border-slate-300 text-slate-900 font-medium shadow-sm"
              >
                Explore the Area
              </a>
            </div>
            <div className="mt-6 text-sm text-slate-500">
              Wi‑Fi · Free Parking · Full Kitchen · Beach Nearby
            </div>
          </div>

          <div>
            <div className="rounded-[2rem] overflow-hidden shadow-lg border border-slate-200 bg-white">
              <div className="h-80 md:h-[28rem] bg-[linear-gradient(180deg,rgba(14,165,233,.15),rgba(250,245,235,.9))] p-5 flex flex-col justify-between">
                <div className="grid grid-cols-2 gap-4">
                  <div className="rounded-2xl bg-[url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop')] bg-cover bg-center h-40" />
                  <div className="rounded-2xl bg-[url('https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=1200&auto=format&fit=crop')] bg-cover bg-center h-40" />
                </div>
                <div className="grid grid-cols-3 gap-4">
                  <div className="rounded-2xl bg-white/80 backdrop-blur p-4 border border-white/70">
                    <div className="text-xs uppercase tracking-wide text-slate-500">Location</div>
                    <div className="mt-1 font-semibold">Cap Cove</div>
                  </div>
                  <div className="rounded-2xl bg-white/80 backdrop-blur p-4 border border-white/70">
                    <div className="text-xs uppercase tracking-wide text-slate-500">Style</div>
                    <div className="mt-1 font-semibold">Spacious Townhouse</div>
                  </div>
                  <div className="rounded-2xl bg-white/80 backdrop-blur p-4 border border-white/70">
                    <div className="text-xs uppercase tracking-wide text-slate-500">Perfect For</div>
                    <div className="mt-1 font-semibold">Beach + Golf</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Section id="stay" title="A Comfortable Home Base for Your Saint Lucia Trip">
        <div className="grid md:grid-cols-2 gap-8 items-start">
          <div>
            <p>
              Looking for more space than a hotel room? This entire townhouse in Cap Cove is a great fit for families, couples traveling together, golf travelers, or anyone who wants a relaxed base in northern Saint Lucia.
            </p>
            <p className="mt-5">
              With 3 bedrooms, 3.5 bathrooms, a full kitchen, Wi‑Fi, free parking, pool access, and beach access nearby, it offers the comfort and flexibility to enjoy the island at your own pace.
            </p>
            <a href={airbnbUrl} className="inline-block mt-8 rounded-2xl px-6 py-3 bg-slate-900 text-white font-medium shadow-sm">
              View Full Airbnb Listing
            </a>
          </div>
          <div className="grid grid-cols-2 gap-4">
            {[
              'Entire townhouse',
              'Sleeps up to 6',
              '3 bedrooms',
              '3.5 bathrooms',
              'Full kitchen',
              'Wi‑Fi',
              'Free parking',
              'Pool access',
            ].map((item) => (
              <div key={item} className="rounded-2xl bg-white border border-slate-200 p-5 shadow-sm text-slate-800 font-medium">
                {item}
              </div>
            ))}
          </div>
        </div>
      </Section>

      <Section id="area" title="Why Stay in Cap Cove and Cas en Bas?" soft>
        <p className="max-w-3xl mb-8">
          The north end of Saint Lucia is ideal for travelers who want beaches, scenic surroundings, dining, golf, and easy day-trip access without always being in the busiest resort area.
        </p>
        <div className="grid md:grid-cols-3 gap-6">
          <Card title="Near the Beach" text="Enjoy easy access to Cas en Bas Beach and the breezy, relaxed feel of Saint Lucia’s northeastern coast." />
          <Card title="Great for Exploring" text="Use this location as a practical base for discovering the north of the island and beyond." />
          <Card title="Ideal for Golf Getaways" text="A strong location for travelers interested in the Cap Estate area and Point Hardy Golf Club." />
        </div>
      </Section>

      <Section id="perfect" title="Perfect For">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card title="Families" text="Enjoy more room, a kitchen, and space to unwind after beach days and island exploring." />
          <Card title="Couples Traveling Together" text="Share a beautiful Saint Lucia stay without giving up comfort or privacy." />
          <Card title="Golf Travelers" text="Stay in the Cap Estate area, close to one of the island’s most talked-about golf destinations." />
          <Card title="Longer Stays" text="A practical choice for guests who want flexibility, comfort, and a true home base." />
        </div>
      </Section>

      <Section id="things" title="Things To Do Nearby" soft>
        <p className="max-w-3xl mb-8">
          This location gives you easy access to some of the best experiences in northern Saint Lucia.
        </p>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[
            'Relax at Cas en Bas Beach',
            'Explore Cap Estate',
            'Dine in Gros Islet and Rodney Bay',
            'Plan a golf trip near Point Hardy Golf Club',
            'Enjoy pool time and quiet downtime',
            'Use the condo as a base for island day trips',
          ].map((item) => (
            <div key={item} className="rounded-2xl bg-white border border-slate-200 p-5 shadow-sm">{item}</div>
          ))}
        </div>
      </Section>

      <Section id="faq" title="Frequently Asked Questions">
        <div className="space-y-5">
          {[
            ['How many guests can stay here?', 'Up to 6 guests.'],
            ['How many bedrooms and bathrooms are there?', 'The townhouse has 3 bedrooms and 3.5 bathrooms.'],
            ['Is there a pool?', 'Yes, guests have access to a pool.'],
            ['Is there parking?', 'Yes, free parking is available on the premises.'],
            ['Is it near the beach?', 'Yes, the property is near Cas en Bas Beach and offers beach access nearby.'],
            ['How do I book?', 'Please use Airbnb for current availability, pricing, and booking details.'],
          ].map(([q, a]) => (
            <div key={q} className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
              <div className="font-semibold text-slate-900 text-lg">{q}</div>
              <div className="mt-2 text-slate-700">{a}</div>
            </div>
          ))}
        </div>
      </Section>

      <section id="book" className="max-w-6xl mx-auto px-6 md:px-10 py-16">
        <div className="rounded-[2rem] bg-slate-900 text-white p-10 md:p-14 shadow-lg">
          <h2 className="text-4xl md:text-5xl font-serif leading-tight">Ready to Plan Your Saint Lucia Getaway?</h2>
          <p className="mt-5 text-lg text-slate-200 max-w-2xl leading-8">
            See current availability, photos, and booking details on Airbnb.
          </p>
          <a href={airbnbUrl} className="inline-block mt-8 rounded-2xl px-6 py-3 bg-white text-slate-900 font-semibold shadow-sm">
            Check Availability on Airbnb
          </a>
          <div className="mt-4 text-sm text-slate-300">
            For the latest rates and availability, please book directly through Airbnb.
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-200 py-8 px-6 md:px-10 text-sm text-slate-500">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row gap-3 md:gap-0 justify-between">
          <div>Saint Lucia stay near Cas en Bas Beach · Cap Cove · Gros Islet</div>
          <div className="flex gap-5">
            <a href={airbnbUrl}>Airbnb Listing</a>
            <a href="#faq">FAQ</a>
            <a href="#home">Top of Page</a>
          </div>
        </div>
      </footer>
    </div>
  );
}