"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="medium"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Office Space",          id: "#office-space"},
        {
          name: "Meeting Room",          id: "#office-space"},
        {
          name: "Virtual Office",          id: "#office-space"},
        {
          name: "Locations",          id: "#locations"},
        {
          name: "Contact",          id: "#contact-section"},
      ]}
      brandName="St Albans Office Space"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="WORK SOMEWHERE WORTH IT."
      description="Newly refurbished offices, meeting rooms and virtual address services in the heart of historic St Albans. Flexible terms. Inclusive pricing from £75 per week."
      buttons={[
        {
          text: "Enquire about availability",          href: "#contact-section"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/empty-professional-psychotherapy-office-with-modern-couch-furniture_482257-124895.jpg?_wi=1"
      imageAlt="Warm and characterful interior of a coworking office space"
      showDimOverlay={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-excited-businesswoman-sitting-with-laptop-makes-crossed-fingers-gesture-make_1258-125410.jpg",          alt: "Portrait of smiling and excited businesswoman sitting with laptop makes crossed fingers gesture make"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-young-asian-woman-winning-laptop-receive-good-news-achieve-goal-work-triumphing_1258-199179.jpg",          alt: "Happy young asian woman winning on laptop receive good news achieve goal at work triumphing and"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-businesswoman-manager-talking-coworker-office-sitting-with-laptop_1258-194648.jpg",          alt: "Portrait of businesswoman manager talking to a coworker in an office sitting with laptop and"},
        {
          src: "http://img.b2bpic.net/free-photo/young-happy-redhead-businesswoman-holding-headphones-looking-camera-while-sitting-her-desk-office-her-colleagues-are-working-background_637285-36.jpg",          alt: "Young happy redhead businesswoman holding headphones and looking at camera while sitting at her desk in the office Her colleagues are working in the background"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-cafe-bar-with-his-laptop-computer_342744-944.jpg",          alt: "Portrait of smiling man sitting in a cafe bar with his laptop computer"},
      ]}
    />
  </div>

  <div id="heritage-detail" data-section="heritage-detail">
      <HeroOverlay
      title="IN THE HEART OF HISTORIC ST. ALBANS "
      description="A modern functional workspace in the centre of the thriving town of St. Albans, just 20 mins by train from Central London"
      imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-inside-dome-inside-barcelona-s-cathedral_181624-4419.jpg"
      imageAlt="Architectural detail of St Albans Office Space with natural light"
      showDimOverlay={false}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/man-having-short-break-work-home_329181-14567.jpg",          alt: "Man having short break during the work at home"},
        {
          src: "http://img.b2bpic.net/free-photo/young-stylish-smiling-man-co-working-office-startup-freelancer-holding-using-tablet_285396-9048.jpg",          alt: "Young stylish smiling man in co-working office, startup freelancer holding using tablet"},
        {
          src: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg",          alt: "Company worker browsing internet to do research project, using computer to create business report with charts data. Analyzing network information for web presentation. Handheld shot."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",          alt: "Portrait of young woman with long brown hair  in black t shirt and white jacket."},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-natural-pretty-woman-with-curly-hairstyle_285396-4374.jpg",          alt: "Close up portrait of young natural pretty woman with curly hairstyle"},
      ]}
    />
  </div>

  <div id="introduction" data-section="introduction">
      <TextSplitAbout
      useInvertedBackground={true}
      title="INDEPENDENT. FLEXIBLE. PERSONAL."
      description={[
        "We're not a chain. We're private landlords who care about the people in our building. If you need something, we pick up the phone." ]}
      showBorder={false}
    />
  </div>

  <div id="office-space" data-section="office-space">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "OFFICES TO RENT",          description: "Flexible private offices tailored for individuals and small teams. Ready to move in.",          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-using-her-phone_23-2147601413.jpg",          imageAlt: "Modern private office interior",          button: {
            text: "Find out more",            href: "#"}},
        {
          title: "MEETING ROOM",          description: "Professional, fully equipped meeting space available by the hour or day.",          imageSrc: "http://img.b2bpic.net/free-photo/business-executive-applauding-video-conference_1170-1921.jpg",          imageAlt: "Stylish meeting room with large screen",          button: {
            text: "Find out more",            href: "#"}},
        {
          title: "VIRTUAL OFFICE",          description: "Establish a credible St Albans presence with our virtual address services.",          imageSrc: "http://img.b2bpic.net/free-photo/man-talking-with-cashier-store_482257-79308.jpg",          imageAlt: "Professional business mailbox and reception",          button: {
            text: "Find out more",            href: "#"}},
      ]}
      title="THE SPACES"
      description="Discover our range of flexible workspace solutions designed to suit your needs."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "hot-desk",          badge: "Flexi-Desk",          price: "£75 / week",          subtitle: "Great for individuals",          features: [
            "Access to shared workspace",            "Superfast broadband",            "All bills included",            "Flexible daily rates"]},
        {
          id: "private-office",          badge: "Dedicated Space",          price: "From £300 / week",          subtitle: "Ideal for growing teams",          features: [
            "Private, lockable office",            "Superfast broadband",            "All bills included",            "Furnished workspace",            "Flexible monthly terms"]},
        {
          id: "virtual-office-plan",          badge: "Business Address",          price: "From £35 / month",          subtitle: "Professional local presence",          features: [
            "Prestigious St Albans address",            "Mail handling & forwarding",            "Dedicated phone number (optional)",            "Professional image"]},
      ]}
      title="CLEAR, INCLUSIVE PRICING."
      description="Choose the perfect workspace solution for your business. Our flexible terms mean you only pay for what you need."
    />
  </div>

  <div id="locations" data-section="locations">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      features={[
        {
          title: "OUR LOCATION",          description: "An embedded map showing our prime location in St Albans city centre.",          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-traditional-terraced-houses-streets-dundee-scotland_1308-189586.jpg",          imageAlt: "Map showing St Albans Office Space location"},
        {
          title: "IN THE HEART OF ST ALBANS",          description: "St Albans Office Space is ideally situated in the vibrant city centre, just a short walk from St Albans City station with fast connections to London in 20-30 minutes. We're moments from the Maltings shopping centre and have excellent access to major motorways, making your commute and client visits effortless.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-professional-psychotherapy-office-with-modern-couch-furniture_482257-124895.jpg?_wi=2",          imageAlt: "map of St Albans city centre"},
      ]}
      title="OUR CITY CENTRE HOME"
      description="Discover the convenience of working in a historic city with modern amenities."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          imageSrc: "http://img.b2bpic.net/free-photo/business-young-entrepreneurs-concept-young-woman-video-chats-has-online-meeting-uses-wireless_1258-195293.jpg",          imageAlt: "Sarah Johnson, satisfied member"},
        {
          id: "2",          name: "Michael C.",          imageSrc: "http://img.b2bpic.net/free-photo/successful-leader_1098-14310.jpg",          imageAlt: "Michael Chen, happy client"},
        {
          id: "3",          name: "Emily R.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-brunette-woman-dressed-gray-elegant-jacket-posing-with-hands-pockets-while-leaning-table-room-with-loft-interior-looking-camera_613910-18669.jpg",          imageAlt: "Emily Rodriguez, praising the space"},
        {
          id: "4",          name: "David L.",          imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg",          imageAlt: "David Lee, enjoying the coworking"},
        {
          id: "5",          name: "Jessica A.",          imageSrc: "http://img.b2bpic.net/free-photo/people-job-occupation-hobby-creativity-concept-picture-positive-red-haired-young-woman-creative-profession-wearing-apron-striped-top_273609-922.jpg",          imageAlt: "Jessica Allen, recommending the office"}
      ]}
      cardTitle="GOOD COMPANY."
      cardTag="Hear from our members"
      cardAnimation="slide-up"
    />
  </div>

  <div id="contact-section" data-section="contact-section">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="CONTACT US"
      title="Enquire About Availability"
      description="Ready to discover your new workspace? Get in touch with us today to learn more about our flexible office solutions and community."
      buttons={[
        {
          text: "Call Us",          href: "tel:01727400550"},
        {
          text: "Email Us",          href: "mailto:info@stalbansofficespace.co.uk"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="St Albans Office Space"
      copyrightText="© 2024 St Albans Office Space. All rights reserved.\n2 Chequer Street, St Albans, Hertfordshire, AL1 3XT.\nT: 01727 400550 | M: 07711 633987 | E: info@stalbansofficespace.co.uk"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}