"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Calendar } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="DTCGROWTH"
          navItems={[
            { name: "Work", id: "services" },
            { name: "Process", id: "process" },
            { name: "Why", id: "differentiators" }
          ]}
          button={{ text: "Book Call", href: "#cta" }}
          animateOnLoad={true}
          className="fixed top-0 left-0 right-0 z-50 backdrop-blur-sm bg-black/30 border-b border-white/5"
          navItemClassName="text-white/80 hover:text-white font-mono text-sm"
          buttonClassName="bg-white text-black px-4 py-2 rounded font-semibold hover:bg-white/90"
          buttonTextClassName="font-mono text-xs tracking-wider"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="More creatives. Better data. Faster scale."
          description="Direct-to-consumer businesses that move fast, test hard, and deliver results. One operator. Weekly rhythm. No excuses."
          tag="For DTC founders & operators"
          background={{ variant: "plain" }}
          mediaAnimation="none"
          useInvertedBackground={false}
          testimonials={[
            { name: "Metric", handle: "Avg ROAS", testimonial: "3.2x", rating: 5, imageSrc: "", imageAlt: "" },
            { name: "Metric", handle: "Concepts/Month", testimonial: "40–60", rating: 5, imageSrc: "", imageAlt: "" },
            { name: "Metric", handle: "Client Revenue", testimonial: "$100k–$5M", rating: 5, imageSrc: "", imageAlt: "" },
            { name: "Metric", handle: "Cadence", testimonial: "Weekly", rating: 5, imageSrc: "", imageAlt: "" }
          ]}
          buttons={[{ text: "Start Now", href: "#cta" }]}
          className="pt-32 pb-24"
          titleClassName="text-6xl md:text-8xl font-black tracking-tighter leading-none"
          descriptionClassName="text-lg md:text-xl text-white/70 font-mono"
          tagClassName="text-xs uppercase tracking-widest text-white/50 font-mono"
          testimonialCardClassName="bg-black/50 backdrop-blur border border-white/10 rounded-lg p-6 text-center"
          testimonialTextClassName="text-2xl md:text-4xl font-mono font-bold text-white"
          testimonialAuthorNameClassName="text-xs uppercase tracking-widest text-white/50 font-mono"
        />
      </div>

      <div id="marquee" data-section="marquee">
        <SocialProofOne
          names={["Meta Ads", "Creative Strategy", "Performance Optimization", "Shopify Operations", "Meta Ads", "Creative Strategy", "Performance Optimization", "Shopify Operations"]}
          title=""
          description=""
          textboxLayout="default"
          useInvertedBackground={true}
          speed={50}
          showCard={false}
          className="py-8 border-y border-white/10"
          logoTextClassName="text-white/60 font-mono text-sm tracking-wider px-8"
          contentClassName="flex items-center gap-4"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSix
          title="What I Do"
          description="Four core disciplines. One operator. Relentless execution."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Meta Ads",              description: "Campaign architecture, creative testing, audience optimization. Scaled from $0 to $5M+ spend.",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-fluid-technology-facebook-post_23-2149172002.jpg?_wi=1",              imageAlt: "Meta advertising interface"
            },
            {
              id: 2,
              title: "Creative Strategy",              description: "Concept ideation, script planning, production direction. 40–60 variations tested monthly.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=1",              imageAlt: "Creative performance metrics"
            },
            {
              id: 3,
              title: "Performance Optimization",              description: "ROAS tracking, margin analysis, spend reallocation. Data-driven decisions, no guessing.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=2",              imageAlt: "Performance optimization dashboard"
            },
            {
              id: 4,
              title: "Shopify Operations",              description: "Store setup, checkout optimization, fulfillment integration. Built for speed and scale.",              imageSrc: "http://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-336.jpg",              imageAlt: "Shopify e-commerce store"
            }
          ]}
          className="py-24"
          cardTitleClassName="text-2xl font-black tracking-tight flex items-center gap-3"
          stepNumberClassName="text-white/30 font-mono text-sm"
          cardDescriptionClassName="text-sm text-white/60 font-mono leading-relaxed"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSix
          title="Weekly Rhythm"
          description="The cadence that scales. Research → Creative → Launch → Report → Communicate."
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Research",              description: "Competitive analysis, trend monitoring, audience insights. Monday briefing.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=3",              imageAlt: "Research phase"
            },
            {
              id: 2,
              title: "Creative",              description: "Concept development, asset production, variation creation. Tuesday–Wednesday sprint.",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-fluid-technology-facebook-post_23-2149172002.jpg?_wi=2",              imageAlt: "Creative development"
            },
            {
              id: 3,
              title: "Launch",              description: "Campaign setup, A/B testing, bid optimization. Thursday deployment.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=4",              imageAlt: "Campaign launch"
            },
            {
              id: 4,
              title: "Report",              description: "Performance review, ROI analysis, margin tracking. Friday deep-dive.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=5",              imageAlt: "Performance reporting"
            },
            {
              id: 5,
              title: "Communicate",              description: "Weekly sync, action items, next-week strategy. Friday close-out.",              imageSrc: "http://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg?_wi=6",              imageAlt: "Communication sync"
            }
          ]}
          className="py-24"
          cardTitleClassName="text-xl font-black tracking-tight"
          cardDescriptionClassName="text-sm text-white/60 font-mono leading-relaxed"
        />
      </div>

      <div id="differentiators" data-section="differentiators">
        <MetricSplitMediaAbout
          title="Why me."
          description="Not an agency. Not a tool. One operator who lives in your data and moves faster than your internal team. While agencies take 6+ weeks for strategy and execution, I deliver optimized campaigns in weekly sprints—giving you a 6-8 week competitive advantage every month."
          tag="The difference"
          metrics={[
            { value: "8+ years", title: "DTC performance marketing" },
            { value: "$200M+", title: "Scaled in total client revenue" }
          ]}
          useInvertedBackground={false}
          mediaAnimation="none"
          metricsAnimation="none"
          imageSrc="http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg"
          imageAlt="Performance dashboard"
          className="py-24"
          titleClassName="text-5xl md:text-6xl font-black tracking-tighter"
          descriptionClassName="text-base text-white/70 font-mono"
          tagClassName="text-xs uppercase tracking-widest text-white/50 font-mono"
          metricValueClassName="text-4xl font-black font-mono"
          metricTitleClassName="text-sm text-white/60 font-mono"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactFaq
          ctaTitle="Ready to move fast?"
          ctaDescription="30-min discovery call to align on opportunity and test strategy."
          ctaButton={{ text: "Schedule Now", href: "https://calendly.com" }}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",              title: "What's the minimum spend?",              content: "I work best with brands at $50k+/month in ad spend. Below that, I recommend optimizing internally first."
            },
            {
              id: "2",              title: "How long until I see results?",              content: "Week 1 is research and strategy. Week 2, we launch optimized creatives. ROAS improves by week 3–4 if fundamentals are sound."
            },
            {
              id: "3",              title: "What's your engagement model?",              content: "Monthly retainer or performance-based. I prefer retainer so I can focus on your growth, not billable hours."
            },
            {
              id: "4",              title: "Do you manage the entire funnel?",              content: "Meta Ads + Creative + Shopify Operations. I stop where your internal team picks up. No handoff chaos."
            }
          ]}
          useInvertedBackground={true}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          className="py-24"
          ctaTitleClassName="text-4xl font-black tracking-tighter"
          ctaDescriptionClassName="text-sm text-white/70 font-mono"
          ctaButtonClassName="bg-white text-black px-6 py-3 rounded font-semibold hover:bg-white/90"
          accordionTitleClassName="text-base font-semibold"
          accordionContentClassName="text-sm text-white/70 font-mono leading-relaxed"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/scratched-metal-texture_1048-10281.jpg"
          imageAlt="Footer background"
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Work", href: "#services" },
                { label: "Process", href: "#process" },
                { label: "Why", href: "#differentiators" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Meta Ads", href: "#" },
                { label: "Creative Strategy", href: "#" },
                { label: "Optimization", href: "#" },
                { label: "Shopify Ops", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" }
              ]
            }
          ]}
          logoText="DTCGROWTH"
          copyrightText="© 2025 DTCGROWTH. One operator. Weekly rhythm. No excuses."
          className="bg-black border-t border-white/10"
          logoTextClassName="text-2xl font-black tracking-tighter"
          columnTitleClassName="text-xs uppercase tracking-widest text-white/50 font-mono mb-4"
          columnItemClassName="text-sm text-white/70 hover:text-white transition font-mono"
          copyrightTextClassName="text-xs text-white/40 font-mono"
        />
      </div>
    </ThemeProvider>
  );
}
