"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Briefcase, CalendarCheck, CheckCircle, Coffee, Key, Mail, MapPin, Repeat, Smile, Users, Wifi } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="inset"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Offices",          id: "#offers"},
        {
          name: "Hot Desks",          id: "#offers"},
        {
          name: "Meeting Room",          id: "#offers"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Virtual Office",          id: "#pricing"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="St Albans Office Space"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      imagePosition="right"
      title="Office space in St Albans from £75/week."
      description="Bills included. Flexible leases. City centre location."
      testimonials={[
        {
          name: "Sarah J.",          handle: "@MarketingPro",          testimonial: "St Albans Office Space transformed my workday. The hot-desking is perfect for my flexible schedule, and the environment is incredibly supportive and productive. Highly recommend for freelancers!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/agency-office-worker-virtual-remote-video-conference-with-accounting-manager-talking-about-business-plan-asian-team-leader-internet-online-call-conversation-with-agency-colleague_482257-38745.jpg",          imageAlt: "Professional woman smiling"},
        {
          name: "Mark D.",          handle: "@TechInnovate",          testimonial: "Our private office here is ideal. All bills included means no surprises, and the 24/7 access gives us the flexibility we need. Plus, the city centre location is a huge bonus for client meetings.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg",          imageAlt: "Man working at a desk"},
        {
          name: "Emily P.",          handle: "@CreativeHub",          testimonial: "The meeting room facilities are top-notch. We've used them for several client presentations and always received positive feedback. It’s professional, well-equipped, and easy to book.",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-his-laptop_53876-49293.jpg",          imageAlt: "Woman in a meeting"},
        {
          name: "David R.",          handle: "@LocalBizOwner",          testimonial: "Switching to a virtual office here was the best decision. A prestigious St Albans address and efficient mail handling has elevated our business presence without the overheads.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-with-copy-space_23-2148459721.jpg",          imageAlt: "Man looking thoughtfully"},
        {
          name: "Chloe S.",          handle: "@StartupFounder",          testimonial: "The team here is incredibly friendly and responsive. Any issue is dealt with quickly, making it a truly hassle-free experience. A fantastic place to grow your business!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-helping-center-design-icon_460848-8047.jpg",          imageAlt: "Woman on a laptop"},
      ]}
      buttons={[
        {
          text: "Book a viewing.",          href: "#contact"},
        {
          text: "See all pricing.",          href: "#pricing"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/handshake-3d-icon-with-check-mark_107791-15088.jpg",          alt: "Profile picture of a professional"},
        {
          src: "http://img.b2bpic.net/free-photo/green-check-mark-gold-circle_84443-94487.jpg",          alt: "Profile picture of a business person"},
        {
          src: "http://img.b2bpic.net/free-photo/flat-lay-yellow-arrows-blue-background-with-copy-space_23-2148459905.jpg",          alt: "Profile picture of an executive"},
        {
          src: "http://img.b2bpic.net/free-photo/still-life-illustrating-ethics-concept_23-2149412249.jpg",          alt: "Profile picture of an entrepreneur"},
        {
          src: "http://img.b2bpic.net/free-photo/domino-blocks-with-arrow_23-2148541995.jpg",          alt: "Profile picture of a team member"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/self-employed-analyst-working-financial-audits-budget-planning-laptop_482257-90911.jpg"
      imageAlt="Modern office space in St Albans"
      mediaAnimation="opacity"
      fixedMediaHeight={true}
      avatarText="Join our thriving community of businesses."
      marqueeItems={[
        {
          type: "text-icon",          text: "High-Speed Wi-Fi",          icon: Wifi,
        },
        {
          type: "text-icon",          text: "24/7 Access",          icon: Key,
        },
        {
          type: "text-icon",          text: "Flexible Terms",          icon: CalendarCheck,
        },
        {
          type: "text-icon",          text: "City Centre Location",          icon: MapPin,
        },
        {
          type: "text-icon",          text: "Professional Community",          icon: Users,
        },
      ]}
    />
  </div>

  <div id="offers" data-section="offers">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Offices to Rent",          description: "Private, secure offices for individuals and teams, starting from £200/week.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/man-working-wood-engraving-workshop_23-2149185403.jpg",            imageAlt: "Private office"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/city-lights-urban-scenic-view-buildings-concept_53876-139782.jpg",            imageAlt: "Private office"}
        },
        {
          title: "Hot Desks",          description: "Flexible drop-in desks for daily use, perfect for freelancers. From £75/week.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/crop-laptop-near-cacti_23-2147768833.jpg",            imageAlt: "Hot desk area"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-office-stretching-work-day_23-2150468538.jpg",            imageAlt: "Hot desk area"}
        },
        {
          title: "Meeting Room",          description: "Professional meeting space available by the hour or day. Ideal for client meetings. From £30/hour.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/black-businesswoman-having-conference-call-office_637285-12911.jpg",            imageAlt: "Meeting room"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-business-meeting-room-office-building_105762-2013.jpg",            imageAlt: "Meeting room"}
        },
      ]}
      showStepNumbers={false}
      title="Our Flexible Office Solutions"
      description="Discover a range of options tailored to your needs, all with clear pricing and terms."
    />
  </div>

  <div id="why-us" data-section="why-us">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "bills-included",          value: "All Bills",          title: "Always Included",          description: "No hidden fees, all utilities and internet included.",          icon: CheckCircle,
        },
        {
          id: "flexible-leases",          value: "Flexible",          title: "Short-Term Leases",          description: "Adapt your space as your business grows or changes.",          icon: Repeat,
        },
        {
          id: "city-centre",          value: "Prime",          title: "City Centre Location",          description: "Conveniently located with easy access to amenities.",          icon: MapPin,
        },
        {
          id: "friendly-landlords",          value: "Supportive",          title: "Friendly Landlords, 24/7",          description: "Dedicated support to ensure your workspace runs smoothly.",          icon: Smile,
        },
      ]}
      title="Why Choose St Albans Office Space?"
      description="We provide a practical and supportive environment for your business to thrive."
    />
  </div>

  <div id="the-spaces" data-section="the-spaces">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "space-1",          name: "Private Office",          price: "Spacious & Bright",          imageSrc: "http://img.b2bpic.net/free-photo/empty-home-office-belonging-small-business-owner-with-data-sales-reports_482257-90829.jpg",          imageAlt: "Clean private office with desk"},
        {
          id: "space-2",          name: "Flexible Hot Desks",          price: "Collaborative & Dynamic",          imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-young-web-developers-international-company-having-coffee-break_197531-4959.jpg",          imageAlt: "Hot desking area"},
        {
          id: "space-3",          name: "Modern Meeting Room",          price: "Equipped for Success",          imageSrc: "http://img.b2bpic.net/free-photo/person-presenting-information-meeting-white-board_23-2149085958.jpg",          imageAlt: "Professional meeting room"},
        {
          id: "space-4",          name: "Welcoming Reception",          price: "Your First Impression",          imageSrc: "http://img.b2bpic.net/free-photo/front-desk-hotel-reception-lobby_482257-76228.jpg",          imageAlt: "Office reception area"},
        {
          id: "space-5",          name: "Quiet Work Zones",          price: "Focus & Productivity",          imageSrc: "http://img.b2bpic.net/free-photo/focused-woman-using-laptop-while-sitting-spherical-chair_74855-4232.jpg",          imageAlt: "Quiet work zone"},
        {
          id: "space-6",          name: "Ergonomic Setups",          price: "Comfort All Day",          imageSrc: "http://img.b2bpic.net/free-photo/designer-work-office_158595-1207.jpg",          imageAlt: "Ergonomic desk setup"},
      ]}
      title="Our Inviting Workspaces"
      description="Explore our modern offices, comfortable hot desking areas, and fully equipped meeting rooms designed for productivity."
    />
  </div>

  <div id="location" data-section="location">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "loc-1",          title: "City Centre St Albans",          content: "Strategically positioned in the vibrant heart of the city."},
        {
          id: "loc-2",          title: "Minutes from the Maltings",          content: "Enjoy immediate access to shopping, dining, and leisure facilities."},
        {
          id: "loc-3",          title: "20–30 mins to London by Rail",          content: "Fast and frequent train services connect you to central London."},
        {
          id: "loc-4",          title: "M1 and M25 Nearby",          content: "Excellent road links for easy travel by car."},
        {
          id: "loc-5",          title: "Luton Airport Under 20 Miles",          content: "Quick access for national and international travel."},
        {
          id: "contact-phone",          title: "Call Us Today",          content: "Phone: 01727 400550 / Mobile: 07711 633987"},
        {
          id: "contact-email",          title: "Email Us",          content: "Email: info@stalbansofficespace.co.uk"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/aerial-view-from-helicopter-dubai-skyline-united-arab-emirates_231208-12526.jpg"
      imageAlt="Map showing St Albans city centre"
      mediaAnimation="opacity"
      mediaPosition="left"
      title="Find Us in the Heart of St Albans"
      description="Our city centre locations offer unparalleled convenience and connectivity, making your daily commute and business operations seamless."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "hot-desk",          tag: "Flexible",          tagIcon: Coffee,
          price: "£75",          period: "/week",          description: "Ideal for freelancers and those needing occasional workspace.",          button: {
            text: "Get a Hot Desk",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Access during business hours",            "High-speed Wi-Fi",            "Shared amenities",            "Flexible booking",            "City centre access"],
        },
        {
          id: "private-office",          tag: "Dedicated",          tagIcon: Briefcase,
          price: "£200",          period: "/week",          description: "Your own private, lockable office for maximum privacy and productivity.",          button: {
            text: "Book a Private Office",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Private, secure office",            "24/7 access",            "Dedicated high-speed internet",            "All bills included",            "Cleaning services"],
        },
        {
          id: "virtual-office",          tag: "Professional",          tagIcon: Mail,
          price: "£50",          period: "/month",          description: "Establish a professional presence without the need for a physical office.",          button: {
            text: "Setup Virtual Office",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Prestigious St Albans address",            "Mail handling & forwarding",            "Dedicated phone number",            "Message taking service",            "Discount on meeting rooms"],
        },
      ]}
      title="Flexible Pricing to Suit Your Business"
      description="Choose the perfect plan for your office space, hot desk, or virtual office needs. Transparent pricing, no surprises."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "St Albans Office Space",          items: [
            {
              label: "24 The Maltings",              href: "#"},
            {
              label: "St Albans",              href: "#"},
            {
              label: "AL1 3HL",              href: "#"},
            {
              label: "Phone: 01727 400550",              href: "tel:+441727400550"},
            {
              label: "Mobile: 07711 633987",              href: "tel:+447711633987"},
            {
              label: "Email: info@stalbansofficespace.co.uk",              href: "mailto:info@stalbansofficespace.co.uk"},
          ],
        },
        {
          title: "Quick Links",          items: [
            {
              label: "Home",              href: "#hero"},
            {
              label: "Offices",              href: "#offers"},
            {
              label: "Hot Desks",              href: "#offers"},
            {
              label: "Meeting Room",              href: "#offers"},
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "Virtual Office",              href: "#pricing"},
            {
              label: "Contact Us",              href: "#contact"},
          ],
        },
      ]}
      bottomLeftText="St Albans Office Space"
      bottomRightText="© 2023 St Albans Office Space. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
