'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import Link from 'next/link';

const navItems = [{ name: 'Home', id: '/' }];

export default function Home() {
  return (
    <ThemeProvider>
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          logoText="Oltre Studios"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboard
          background={{ variant: 'plain' }}
          title="Your brand looks smaller than it is. We fix that."
          description="Premium brand playbooks and monthly social media retainers for small businesses and startups."
          buttons={[{ text: 'Book a Free Call', href: '#contact' }]}
          imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-black-torn-paper_23-2151866954.jpg"
          mediaAnimation="blur-reveal"
          avatars={[
            { src: 'http://img.b2bpic.net/free-photo/pregnant-woman-black-clothes-stands-grey-wall_8353-7850.jpg', alt: 'Team member' },
            { src: 'http://img.b2bpic.net/free-photo/3d-rendering-black-torn-paper_23-2151866954.jpg', alt: 'Team member' },
            { src: 'http://img.b2bpic.net/free-photo/pregnant-woman-black-clothes-stands-grey-wall_8353-7850.jpg', alt: 'Team member' },
            { src: 'http://img.b2bpic.net/free-photo/3d-rendering-black-torn-paper_23-2151866954.jpg', alt: 'Team member' },
            { src: 'http://img.b2bpic.net/free-photo/pregnant-woman-black-clothes-stands-grey-wall_8353-7850.jpg', alt: 'Team member' }
          ]}
          marqueeItems={[
            { type: 'text', text: 'Strategy' },
            { type: 'text', text: 'Design' },
            { type: 'text', text: 'Growth' },
            { type: 'text', text: 'Content' },
            { type: 'text', text: 'Identity' }
          ]}
        />
      </div>
      <div id="about" data-section="about">
        <TextAbout
          useInvertedBackground={false}
          title="Oltre means beyond. That is exactly where we take your brand."
          tag="Our Philosophy"
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardTwentyThree
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={true}
          features={[
            { id: '1', title: 'Brand Playbooks', tags: ['Strategy', 'Visual Identity'], imageSrc: 'http://img.b2bpic.net/free-photo/3d-rendering-black-torn-paper_23-2151866954.jpg' },
            { id: '2', title: 'Monthly Social Media Retainers', tags: ['Content', 'Growth'], imageSrc: 'http://img.b2bpic.net/free-photo/pregnant-woman-black-clothes-stands-grey-wall_8353-7850.jpg' }
          ]}
          title="What we do"
          description="Dedicated to elevating brands through strategy and consistency."
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Ready to go beyond?"
          title="Book a Free Call"
          description="Ready to scale? Call us at +91 91366 64922 to discuss your brand."
          useInvertedBackground={false}
          background={{ variant: 'plain' }}
          imageSrc="http://img.b2bpic.net/free-photo/pregnant-woman-black-clothes-stands-grey-wall_8353-7850.jpg"
          mediaAnimation="slide-up"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            { title: 'Navigation', items: [{ label: 'Services', href: '#services' }, { label: 'About', href: '#about' }, { label: 'Contact', href: '#contact' }] },
            { title: 'Legal', items: [{ label: 'Privacy Policy', href: '#' }, { label: 'Terms of Service', href: '#' }] }
          ]}
          logoText="Oltre Studios"
        />
      </div>
    </ThemeProvider>
  );
}