"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import ContactText from "@/components/sections/contact/ContactText";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import RadialGradientBackground from "@/components/background/RadialGradientBackground";
import { Database, Globe, Shield, Sparkles, Zap, ArrowRight, Check } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="large"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Terrivio"
          navItems={[
            { name: "Features", id: "#features" },
            { name: "How it works", id: "#how-it-works" },
            { name: "Markets", id: "#markets" },
            { name: "Pricing", id: "#pricing" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="130% 130%"
            position="50% 15%"
          />
          <HeroBillboardRotatedCarousel
            title="The investment analysis platform Europe's property market deserves."
            description="Paste any European property listing URL. Get a full investment report in 60 seconds — net yield, tax breakdown, risk score, three scenarios."
            tag="Private beta · 847 investors waiting"
            tagIcon={Zap}
            background={{ variant: "radial-gradient" }}
            buttons={[{ text: "Get early access →", href: "#waitlist" }]}
            carouselItems={[
              {
                id: "1",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=1",                imageAlt: "Investment analysis dashboard showing metrics"
              },
              {
                id: "2",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=1",                imageAlt: "Property investment report interface"
              },
              {
                id: "3",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=1",                imageAlt: "Real estate market analysis dashboard"
              },
              {
                id: "4",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=1",                imageAlt: "Investment scenario comparison view"
              },
              {
                id: "5",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=2",                imageAlt: "Tax breakdown and yield calculation"
              },
              {
                id: "6",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=2",                imageAlt: "Risk assessment and scoring interface"
              }
            ]}
            autoPlay={true}
            autoPlayInterval={5000}
          />
        </div>
      </div>

      <div id="social-proof" data-section="social-proof">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="140% 140%"
            position="50% 20%"
          />
          <SocialProofOne
            title="Trusted by investors across Europe"
            description="Join hundreds of property investors already using Terrivio"
            textboxLayout="default"
            useInvertedBackground={false}
            names={[
              "Dutch Investors",              "German Analysts",              "French Partners",              "Spanish Funds",              "Italian Groups",              "Swiss Wealth",              "Belgian Teams"
            ]}
            speed={40}
            showCard={true}
          />
        </div>
      </div>

      <div id="metrics" data-section="metrics">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="135% 135%"
            position="50% 25%"
          />
          <MetricCardThree
            title="Why Terrivio Stands Out"
            description="Powerful metrics that drive investor confidence"
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="slide-up"
            metrics={[
              { id: "1", icon: Globe, title: "European Markets", value: "13" },
              { id: "2", icon: Database, title: "Data Sources", value: "8" },
              { id: "3", icon: Zap, title: "Report Time", value: "~60s" },
              { id: "4", icon: Shield, title: "Gross Margin", value: "96%" }
            ]}
          />
        </div>
      </div>

      <div id="features" data-section="features">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="130% 130%"
            position="50% 30%"
          />
          <FeatureCardTwentyOne
            title="From URL to investment decision."
            description="No account needed. No spreadsheets. No guesswork."
            tag="HOW IT WORKS"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=2"
            imageAlt="Three-step process visualization"
            mediaAnimation="slide-up"
            useInvertedBackground={false}
            mediaPosition="right"
            accordionItems={[
              {
                id: "1",                title: "Paste a property URL",                content: "Copy any listing from Idealista, Funda, Green-Acres, Immobiliare, or 10+ platforms. Terrivio fetches all data automatically."
              },
              {
                id: "2",                title: "AI analyzes everything",                content: "Our engine extracts specs, calculates gross and net yield, scores location risk, and models three investment scenarios in seconds."
              },
              {
                id: "3",                title: "Make your decision",                content: "Net yield, risk score, tax breakdown per country, break-even occupancy and DSCR — everything you need to invest with confidence."
              }
            ]}
          />
        </div>
      </div>

      <div id="demo" data-section="demo">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="125% 125%"
            position="50% 35%"
          />
          <ContactText
            text="Try it yourself. Paste any real listing URL. No account needed."
            animationType="reveal-blur"
            background={{ variant: "radial-gradient" }}
            useInvertedBackground={false}
            buttons={[{ text: "Analyze →", href: "#analyze" }]}
          />
        </div>
      </div>

      <div id="markets" data-section="markets">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="140% 140%"
            position="50% 40%"
          />
          <TestimonialAboutCard
            tag="COVERAGE"
            title="13 European markets."
            description="Local expertise in every region"
            subdescription="Local tax rules, STR regulations, rental yield data and price history — built in for every market."
            icon={Globe}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=2"
            imageAlt="European market map coverage"
            mediaAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>
      </div>

      <div id="pricing" data-section="pricing">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="135% 135%"
            position="50% 45%"
          />
          <PricingCardTwo
            title="Simple, transparent pricing."
            description="Founding Member pricing locked in at signup. Price increases after launch."
            textboxLayout="default"
            animationType="slide-up"
            useInvertedBackground={false}
            plans={[
              {
                id: "1",                badge: "Pay per report",                price: "€3,20",                subtitle: "per analysis",                buttons: [{ text: "Join waitlist", href: "#waitlist" }],
                features: [
                  "No subscription",                  "Buy when you need it",                  "Cancel anytime",                  "Instant access"
                ]
              },
              {
                id: "2",                badge: "Lite",                price: "€29",                subtitle: "/month",                buttons: [{ text: "Join waitlist", href: "#waitlist" }],
                features: [
                  "50 analyses per month",                  "All market data",                  "Email support",                  "Founding pricing"
                ]
              },
              {
                id: "3",                badge: "Pro",                badgeIcon: Sparkles,
                price: "€59",                subtitle: "/month",                buttons: [
                  { text: "Get early access", href: "#waitlist" },
                  { text: "Contact sales", href: "#contact" }
                ],
                features: [
                  "200 analyses per month",                  "All features included",                  "Priority support",                  "Custom integrations",                  "Locked founding price"
                ]
              }
            ]}
          />
        </div>
      </div>

      <div id="final-cta" data-section="final-cta">
        <div className="relative">
          <RadialGradientBackground
            centerColor="var(--background)"
            edgeColor="var(--color-background-accent)"
            size="130% 130%"
            position="50% 50%"
          />
          <ContactText
            text="847 investors are already waiting. Join them. Founding Member pricing is limited."
            animationType="entrance-slide"
            background={{ variant: "animated-grid" }}
            useInvertedBackground={true}
            buttons={[
              { text: "Join waitlist", href: "#waitlist" },
              { text: "Learn more", href: "#features" }
            ]}
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "How it works", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Markets", href: "#markets" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Terrivio. All rights reserved."
          bottomRightText="Made with precision for European investors"
        />
      </div>
    </ThemeProvider>
  );
}