"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Award, TrendingUp } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get in Touch",            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Creative Designer & Developer"
          description="Crafting compelling digital experiences through thoughtful design and innovative solutions. Let's bring your vision to life."
          tag="Welcome to my portfolio"
          tagIcon={Sparkles}
          background={{ variant: "canvas-reveal" }}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Designer workspace"
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Contact Me", href: "contact" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "I'm a passionate designer with" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg", alt: "Professional portrait" },
            { type: "text", content: "10+ years of experience creating beautiful digital products" }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Download Resume", href: "#" },
            { text: "Connect on LinkedIn", href: "#" }
          ]}
        />
      </div>
      
      <div id="projects" data-section="projects">
        <FeatureCardOne
          title="Featured Projects"
          description="A selection of my best work showcasing different design disciplines and technical expertise"
          tag="Project Gallery"
          tagIcon={Award}
          textboxLayout="default"
          gridVariant="one-large-right-three-stacked-left"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "E-Commerce Platform Redesign",              description: "Modernized a legacy e-commerce interface, resulting in 45% increase in conversion rates",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-computer-desktop-workspace_53876-30381.jpg",              imageAlt: "E-commerce redesign"
            },
            {
              title: "Brand Identity System",              description: "Created comprehensive visual identity for tech startup including logo, color system, and guidelines",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg",              imageAlt: "Brand identity"
            },
            {
              title: "Mobile App Design",              description: "Designed and prototyped a fitness tracking app with intuitive user interface and seamless experience",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272908.jpg",              imageAlt: "Mobile app design"
            },
            {
              title: "Digital Campaign Assets",              description: "Developed comprehensive visual assets for multi-channel marketing campaign across social and web",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg",              imageAlt: "Campaign design"
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="By the Numbers"
          description="Measurable impact across diverse projects and satisfied clients worldwide"
          tag="Impact & Results"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "50+",              title: "Projects Completed",              description: "Successfully delivered across various industries and platforms",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-items-redecorating-house-with-color-palette_23-2148815773.jpg",              imageAlt: "Portfolio showcase"
            },
            {
              id: "2",              value: "30+",              title: "Happy Clients",              description: "Built lasting relationships with repeat business and referrals",              imageSrc: "https://img.b2bpic.net/free-photo/messy-office-desk-still-life_23-2150155616.jpg",              imageAlt: "Client satisfaction"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your next project? I'd love to hear about your ideas and help bring them to life."
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Send Email", href: "mailto:hello@example.com" },
            { text: "Schedule Call", href: "#" }
          ]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Portfolio"
          copyrightText="© 2025 Creative Designer. All rights reserved."
          columns={[
            {
              title: "Navigation",              items: [
                { label: "About", href: "about" },
                { label: "Work", href: "projects" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Social",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Dribbble", href: "https://dribbble.com" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Email Me", href: "mailto:hello@example.com" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}