export default function PartyBrigadePremiumSite() { const packages = [ { name: "Blue Package", price: "$490", duration: "Up to 1 hour", ride: "No ride included", description: "A fun, simple party option for younger children who want the excitement of a real fire truck arrival, onboard features, music and photos.", features: [ "Real fire truck party experience", "Emergency siren and PA system", "Touch-screen music with 5,000+ songs", "Disco lighting, bubbles and onboard fun features", "Great for smaller birthdays and home parties", ], featured: false, }, { name: "Yellow Package", price: "$540", duration: "Up to 1 hour", ride: "1 x 15 minute ride included", description: "The easiest crowd-pleaser. Parents get a simple booking option and kids get the excitement of a real ride on Engine Number 9.", features: [ "15-minute ride included", "Emergency siren and PA system", "Music, fire bell and fun honkers onboard", "Authentic fire station radio calls while riding", "Best for high-impact birthday moments", ], featured: true, }, { name: "Orange Package", price: "$650", duration: "Up to 1 hour 15 minutes", ride: "1 x 30 minute or 2 x 15 minute rides", description: "A stronger mid-tier package for larger groups or families wanting more ride time and more flexibility.", features: [ "More ride flexibility", "More time for photos and party flow", "Ideal for bigger guest groups", "Great for parks, venues and larger home parties", "Balanced value and wow-factor", ], featured: false, }, { name: "Red Package", price: "$790", duration: "Up to 1.5 hours", ride: "1 x 60 minute, 2 x 30 minute or 4 x 15 minute rides", description: "The premium party package for families who want the full Engine Number 9 experience with maximum ride time.", features: [ "Longest ride options available", "Best for premium birthdays", "Excellent for larger celebrations", "Flexible flow for different venues", "Maximum fun and strongest value experience", ], featured: false, }, ];

const included = [ "Emergency siren and PA system", "Touch-screen music video selection with 5,000+ songs", "Professional nightclub sound system", "Nightclub and disco lighting", "Bubble fun", "Children’s fire bell ringer and fun honkers", "Authentic fire station radio calls while riding", "Onboard karaoke and microphone on request", "Onboard surveillance safety cameras", "External LED text signage", ];

const extras = [ { title: "Birthday Essentials Pack", price: "$290", copy: "A bundled birthday upgrade that includes a special birthday gift, 18 Smoken fire truck show bags, fire hose water blasting, downloadable invitations and LED text signage.", }, { title: "Fire Hose Water Blasting", price: "$67", copy: "Kids get to blast water from Engine Number 9’s fire hose like a real firefighter, with seasonal adjustments to keep the activity safe and fun.", }, { title: "Fireman Dad", price: "FREE", copy: "A surprise family favourite. Dad or another adult secretly boards the truck, gets dressed in authentic fireman gear and arrives as part of the crew.", }, { title: "Fireman Dan", price: "$347/hr", copy: "An interactive children’s entertainer with comedy, games, music, prizes, balloon sculptures and fire-themed fun that complements the truck hire.", }, { title: "Kids Photographer", price: "$275/hr", copy: "Professional event coverage with candid family moments, special requests and digitally enhanced photos delivered after the event.", }, ];

const trustPoints = [ "Accredited public passenger vehicle operator", "Accredited and routinely maintained fleet", "Authorised and accredited drivers", "Fully insured with current public liability cover", "Working With Children Check clearance policy for children’s packages", "Fire extinguishers, first aid kits and bottled water onboard", "Onboard surveillance safety cameras", "Special needs and requests catered for", ];

const rules = [ "Open to ages 0 to 12 only", "Maximum of 20 people total, usually 18 children and 2 adults for supervision", "Minimum 2 adult parent supervisors required per ride", "Pick up and drop off from single locations only", "Available 7 days a week", "Drug and alcohol free under-18s event", "No alcohol or smoking onboard", "$250 deposit required to secure booking", "Outer suburbs surcharges may apply", "Toll way usage charge applies", ];

const gallery = [ { src: "/images/firetruck-ocean.jpg", alt: "Engine Number 9 fire truck at a kids party" }, { src: "/images/interior-seating.jpg", alt: "Premium seating inside the party fire truck" }, { src: "/images/front-truck.jpg", alt: "Front view of Engine Number 9 fire truck" }, { src: "/images/kids-cheering.jpg", alt: "Kids cheering inside the party fire truck" }, { src: "/images/birthday-ride.jpg", alt: "Children enjoying the fire truck party ride" }, { src: "/images/family-ride.jpg", alt: "Families enjoying a fire truck party ride" }, { src: "/images/fire-hose.jpg", alt: "Fire hose water blasting activity at a kids party" }, { src: "/images/fireman-dad.jpg", alt: "Fireman Dad surprise experience" }, ];

return ( <div className="min-h-screen bg-white text-slate-900"> <header className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/90 text-white backdrop-blur"> <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4"> <div> <p className="text-xs font-bold uppercase tracking-[0.28em] text-red-300">Party Brigade</p> <p className="text-lg font-black">Kids Fire Truck Parties Sydney</p> </div>

<nav className="hidden items-center gap-6 text-sm font-medium xl:flex">
        <a href="#packages" className="transition hover:text-red-300">Packages</a>
        <a href="#experience" className="transition hover:text-red-300">Experience</a>
        <a href="#extras" className="transition hover:text-red-300">Extras</a>
        <a href="#safety" className="transition hover:text-red-300">Safety</a>
        <a href="#faq" className="transition hover:text-red-300">FAQ</a>
      </nav>

      <div className="flex items-center gap-3">
        <a href="tel:1300036469" className="hidden rounded-2xl border border-white/20 px-4 py-2 text-sm font-semibold md:inline-flex">
          1300 036 469
        </a>
        <a href="#contact" className="rounded-2xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:scale-[1.02]">
          Check Availability
        </a>
      </div>
    </div>
  </header>

  <section className="relative overflow-hidden bg-slate-950 text-white">
    <div className="absolute inset-0">
      <img src="/images/firetruck-ocean.jpg" alt="Kids fire truck parties Sydney" className="h-full w-full object-cover opacity-35" />
      <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/75 to-slate-950/40" />
    </div>

    <div className="relative mx-auto grid min-h-[85vh] max-w-7xl items-center gap-10 px-6 py-16 lg:grid-cols-[1.15fr_0.85fr] lg:py-24">
      <div>
        <div className="inline-flex rounded-full border border-red-300/30 bg-white/10 px-4 py-2 text-sm font-semibold text-red-200 backdrop-blur">
          Professional, fun and simple to book
        </div>
        <h1 className="mt-6 max-w-4xl text-5xl font-black leading-[0.95] md:text-7xl">
          The kids party website should feel as exciting as the fire truck.
        </h1>
        <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-200 md:text-xl">
          Give parents a premium booking experience and give kids the birthday they will never stop talking about. Party Brigade combines a real fire truck, music, lights, ride options, interactive fun and unforgettable family moments across Sydney.
        </p>

        <div className="mt-8 flex flex-wrap gap-4">
          <a href="#packages" className="rounded-2xl bg-red-600 px-6 py-4 font-semibold text-white shadow-2xl transition hover:scale-[1.02]">
            View Packages
          </a>
          <a href="#gallery" className="rounded-2xl border border-white/20 bg-white/10 px-6 py-4 font-semibold text-white backdrop-blur">
            See Real Parties
          </a>
        </div>

        <div className="mt-10 grid max-w-3xl grid-cols-2 gap-4 md:grid-cols-4">
          {[
            "Ages 0–12",
            "Up to 20 guests",
            "Available 7 days",
            "Sydney-wide parties",
          ].map((item) => (
            <div key={item} className="rounded-2xl border border-white/10 bg-white/10 p-4 text-sm font-semibold backdrop-blur">
              {item}
            </div>
          ))}
        </div>
      </div>

      <div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 shadow-2xl backdrop-blur">
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="rounded-2xl bg-white p-5 text-slate-900">
            <p className="text-sm font-bold uppercase tracking-[0.2em] text-red-600">Most popular</p>
            <h2 className="mt-3 text-3xl font-black">Yellow Package</h2>
            <p className="mt-2 text-sm text-slate-600">Up to 1 hour · 15 minute ride included</p>
            <p className="mt-4 text-sm leading-7 text-slate-700">The easy choice for parents who want the full fire truck wow-factor without overcomplicating the booking.</p>
          </div>
          <div className="rounded-2xl bg-red-600 p-5 text-white">
            <p className="text-sm font-bold uppercase tracking-[0.2em] text-red-100">Trust factor</p>
            <h2 className="mt-3 text-3xl font-black">Accredited & Insured</h2>
            <p className="mt-4 text-sm leading-7 text-red-50">Authorised drivers, accredited fleet, public liability cover, safety cameras, first aid kits and Working With Children Check clearance policy for children’s events.</p>
          </div>
        </div>
        <div className="mt-4 rounded-2xl bg-slate-950/70 p-5 text-sm leading-7 text-slate-200">
          "Don’t settle for anything less" becomes a stronger sales message when the site itself feels premium, trustworthy and easy to understand.
        </div>
      </div>
    </div>
  </section>

  <section className="border-y border-slate-200 bg-slate-50">
    <div className="mx-auto grid max-w-7xl gap-6 px-6 py-10 md:grid-cols-3 lg:grid-cols-6">
      {[
        "Real fire truck hire",
        "Kids birthday parties",
        "Music, lights and onboard fun",
        "Ride options included",
        "Extra party upgrades",
        "Fast booking flow",
      ].map((item) => (
        <div key={item} className="rounded-2xl bg-white p-4 text-center text-sm font-semibold shadow-sm">
          {item}
        </div>
      ))}
    </div>
  </section>

  <section id="packages" className="mx-auto max-w-7xl px-6 py-24">
    <div className="max-w-3xl">
      <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">Kids party packages</p>
      <h2 className="mt-3 text-4xl font-black md:text-6xl">Clear package cards that make booking feel easy.</h2>
      <p className="mt-5 text-lg leading-8 text-slate-600">
        Instead of making parents search through long pages, this redesign turns the old package information into a clean, premium comparison section that feels simple and high-end.
      </p>
    </div>

    <div className="mt-12 grid gap-6 xl:grid-cols-4">
      {packages.map((pkg) => (
        <div key={pkg.name} className={`flex h-full flex-col rounded-[2rem] border p-8 shadow-sm ${pkg.featured ? "border-red-600 bg-red-600 text-white shadow-xl" : "border-slate-200 bg-white"}`}>
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className={`text-sm font-bold uppercase tracking-[0.22em] ${pkg.featured ? "text-red-100" : "text-red-600"}`}>{pkg.name}</p>
              <h3 className="mt-3 text-4xl font-black">{pkg.price}</h3>
            </div>
            {pkg.featured ? (
              <span className="rounded-full bg-white px-3 py-1 text-xs font-black uppercase tracking-[0.15em] text-red-600">Popular</span>
            ) : null}
          </div>

          <div className={`mt-6 rounded-2xl p-4 ${pkg.featured ? "bg-white/10" : "bg-slate-50"}`}>
            <p className={`text-sm font-semibold ${pkg.featured ? "text-white" : "text-slate-900"}`}>{pkg.duration}</p>
            <p className={`mt-1 text-sm ${pkg.featured ? "text-red-50" : "text-slate-600"}`}>{pkg.ride}</p>
          </div>

          <p className={`mt-6 text-sm leading-7 ${pkg.featured ? "text-white" : "text-slate-700"}`}>{pkg.description}</p>

          <ul className={`mt-6 space-y-3 text-sm leading-6 ${pkg.featured ? "text-red-50" : "text-slate-600"}`}>
            {pkg.features.map((feature) => (
              <li key={feature}>• {feature}</li>
            ))}
          </ul>

          <a href="#contact" className={`mt-8 inline-flex rounded-2xl px-5 py-3 font-semibold ${pkg.featured ? "bg-white text-red-600" : "bg-slate-950 text-white"}`}>
            Enquire About {pkg.name}
          </a>
        </div>
      ))}
    </div>
  </section>

  <section id="gallery" className="bg-slate-950 text-white">
    <div className="mx-auto max-w-7xl px-6 py-24">
      <div className="max-w-3xl">
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-300">Real party gallery</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">Real photos sell the experience better than any paragraph ever will.</h2>
        <p className="mt-5 text-lg leading-8 text-slate-300">
          Your uploaded photos are the strongest marketing asset on the whole site. This gallery makes the business look active, trusted and premium from the first scroll.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {gallery.map((image, index) => (
          <div key={image.src} className={`overflow-hidden rounded-[1.75rem] ${index % 3 === 0 ? "xl:row-span-2" : ""}`}>
            <img src={image.src} alt={image.alt} className="h-full min-h-[260px] w-full object-cover transition duration-300 hover:scale-105" />
          </div>
        ))}
      </div>
    </div>
  </section>

  <section id="experience" className="mx-auto max-w-7xl px-6 py-24">
    <div className="grid gap-12 lg:grid-cols-[0.95fr_1.05fr]">
      <div className="flex items-center">
        <img src="/images/interior-seating.jpg" alt="Inside Party Brigade fire truck" className="rounded-[2rem] shadow-2xl" />
      </div>

      <div>
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">What’s included onboard</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">A premium party setup inside a real fire truck.</h2>
        <p className="mt-5 text-lg leading-8 text-slate-600">
          The old website had strong features but they were buried. This section turns them into a polished premium sales point that shows just how much fun is packed into every booking.
        </p>

        <div className="mt-8 grid gap-4 sm:grid-cols-2">
          {included.map((item) => (
            <div key={item} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
              <p className="font-medium leading-7">{item}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <section id="extras" className="bg-slate-50">
    <div className="mx-auto max-w-7xl px-6 py-24">
      <div className="max-w-3xl">
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">Add-ons and upgrades</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">Extras that raise the value of every booking.</h2>
        <p className="mt-5 text-lg leading-8 text-slate-600">
          The old site had great extras. This redesign gives them space to breathe so parents instantly understand the upgrade options.
        </p>
      </div>

      <div className="mt-12 grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
        {extras.map((extra) => (
          <div key={extra.title} className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm">
            <div className="flex items-start justify-between gap-4">
              <h3 className="text-2xl font-black">{extra.title}</h3>
              <span className="rounded-full bg-red-50 px-3 py-1 text-sm font-bold text-red-600">{extra.price}</span>
            </div>
            <p className="mt-4 leading-8 text-slate-600">{extra.copy}</p>
          </div>
        ))}
      </div>

      <div className="mt-12 rounded-[2rem] bg-slate-950 p-8 text-white md:p-10">
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-300">Special feature</p>
        <h3 className="mt-3 text-3xl font-black md:text-5xl">Fireman Dad deserves a premium spotlight.</h3>
        <p className="mt-5 max-w-4xl text-lg leading-8 text-slate-300">
          This is one of your most unique selling points. The new layout makes it a signature feature instead of a hidden extra: dad or another family member secretly joins the truck crew, arrives in authentic fireman gear and gets presented with the official Fireman Dan assistant certificate.
        </p>
        <div className="mt-8 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
          <img src="/images/fireman-dad.jpg" alt="Fireman Dad surprise experience" className="rounded-[1.5rem] object-cover" />
          <div className="rounded-[1.5rem] border border-white/10 bg-white/5 p-6">
            <p className="text-sm font-bold uppercase tracking-[0.2em] text-red-200">Certificate bonus</p>
            <h4 className="mt-3 text-2xl font-black">Official assistant certificate</h4>
            <p className="mt-4 leading-8 text-slate-300">Keep a downloadable certificate link here so families can preview it before booking or download it after the event.</p>
            <a href="https://enginenumber9.com.au/wp-content/uploads/2022/03/FiremanDanAssistantCertificate.pdf" className="mt-6 inline-flex rounded-2xl bg-white px-5 py-3 font-semibold text-slate-950">
              View Certificate
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="safety" className="bg-white">
    <div className="mx-auto max-w-7xl px-6 py-24">
      <div className="grid gap-12 lg:grid-cols-[0.95fr_1.05fr]">
        <div>
          <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">Why parents trust you</p>
          <h2 className="mt-3 text-4xl font-black md:text-6xl">Safety and professionalism should feel obvious.</h2>
          <p className="mt-5 text-lg leading-8 text-slate-600">
            This section takes the trust content from “Things You Should Know” and turns it into a serious, premium reassurance block that helps parents feel confident before they enquire.
          </p>
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          {trustPoints.map((item) => (
            <div key={item} className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
              <p className="font-medium leading-7 text-slate-800">{item}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <section className="bg-red-600 text-white">
    <div className="mx-auto max-w-7xl px-6 py-24">
      <div className="max-w-4xl">
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-100">SEO content block</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">Kids fire truck parties Sydney families remember.</h2>
        <p className="mt-5 text-lg leading-8 text-red-50">
          Party Brigade offers children’s fire truck parties in Sydney with real fire truck rides, onboard music and lights, interactive activities, fire hose fun, family photo moments and tailored extras for birthdays and special events. With package options for different party sizes and budgets, plus upgrades like Fireman Dan, Fireman Dad and birthday essentials, this page is designed to rank better in local search while making the booking journey simpler and more premium.
        </p>
      </div>
    </div>
  </section>

  <section className="mx-auto max-w-7xl px-6 py-24">
    <div className="grid gap-12 lg:grid-cols-[1fr_1fr]">
      <div>
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">Booking conditions</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">Keep the rules clear without making the page feel heavy.</h2>
        <div className="mt-8 space-y-4">
          {rules.map((item) => (
            <div key={item} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
              <p className="leading-7 text-slate-700">{item}</p>
            </div>
          ))}
        </div>
      </div>

      <div id="faq">
        <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-600">Frequently asked questions</p>
        <h2 className="mt-3 text-4xl font-black md:text-6xl">Quick answers for busy parents.</h2>
        <div className="mt-8 space-y-4">
          {[
            {
              q: "What ages are your kids party packages for?",
              a: "Children’s packages are for ages 0 to 12.",
            },
            {
              q: "How many people can come?",
              a: "The standard party maximum is 20 people, usually 18 children and 2 supervising adults.",
            },
            {
              q: "Do you need a deposit?",
              a: "Yes, a $250 deposit secures the booking.",
            },
            {
              q: "Can packages be customised?",
              a: "Yes. The business highlights flexibility and willingness to customise packages and extras.",
            },
            {
              q: "Do you offer extra entertainment?",
              a: "Yes. Add-ons include Fireman Dan, Fireman Dad, fire hose water blasting, birthday essentials and a kids photographer.",
            },
          ].map((item) => (
            <div key={item.q} className="rounded-[1.5rem] border border-slate-200 bg-slate-50 p-6">
              <h3 className="text-xl font-black">{item.q}</h3>
              <p className="mt-3 leading-8 text-slate-600">{item.a}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <section id="contact" className="px-6 pb-24">
    <div className="mx-auto max-w-6xl rounded-[2rem] bg-slate-950 p-10 text-white shadow-2xl md:p-14">
      <div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center">
        <div>
          <p className="text-sm font-bold uppercase tracking-[0.24em] text-red-300">Ready to book?</p>
          <h2 className="mt-3 max-w-3xl text-4xl font-black md:text-6xl">Turn your best photos into the best kids party website in your market.</h2>
          <p className="mt-5 max-w-2xl text-lg leading-8 text-slate-300">
            This redesigned site is built to look premium, feel trustworthy and convert more enquiries. Keep this final section simple with strong contact paths and a short enquiry form.
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <a href="tel:1300036469" className="rounded-2xl bg-red-600 px-6 py-4 font-semibold text-white">Call 1300 036 469</a>
            <a href="mailto:danny@enginenumber9.com.au" className="rounded-2xl border border-white/20 px-6 py-4 font-semibold text-white">Email Danny</a>
            <a href="https://enginenumber9.com.au/contact-us/" className="rounded-2xl border border-white/20 px-6 py-4 font-semibold text-white">Send Enquiry</a>
          </div>
        </div>

        <div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6 backdrop-blur">
          <p className="text-sm font-bold uppercase tracking-[0.2em] text-red-200">Suggested enquiry form</p>
          <div className="mt-6 grid gap-4">
            {[
              "Parent name",
              "Mobile number",
              "Suburb / venue",
              "Event date",
              "Child age",
              "Preferred package",
            ].map((field) => (
              <div key={field} className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-300">
                {field}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

); }