"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import TextAbout from "@/components/sections/about/TextAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Sparkles,
  Send,
  LayoutDashboard,
  Users,
  FileText,
  Calendar,
  History,
  Share2,
  Compass,
  Settings,
  Zap,
  MessageSquare,
  Package,
  TrendingUp,
  Rocket,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Features", id: "features" },
            { name: "How it works", id: "how-it-works" },
          ]}
          brandName="PR Cafe"
          bottomLeftText="Discord embed builder"
          bottomRightText="webhook.cafe"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="The platform for Discord embed management"
          description="Build, personalize, and send professional Discord embeds at scale. One dashboard for your entire team."
          tag="Discord Embeds"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Started", href: "/login" },
            { text: "Learn more", href: "#how-it-works" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Calendar & Embed Management",            logoIcon: Send,
            searchPlaceholder: "Search embeds...",            imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel_52683-29589.jpg?_wi=1",            imageAlt: "PR Cafe dashboard with calendar view",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export", href: "#" },
            ],
            sidebarItems: [
              { icon: LayoutDashboard, active: false },
              { icon: Users, active: false },
              { icon: FileText, active: false },
              { icon: Calendar, active: true },
              { icon: History, active: false },
              { icon: Share2, active: false },
              { icon: Compass, active: false },
              { icon: Settings, active: false },
            ],
            stats: [
              {
                title: "Embeds Sent",                values: [500, 750, 1200],
                description: "This month"},
              {
                title: "Active Teams",                values: [25, 35, 50],
                description: "Collaborating"},
              {
                title: "Languages",                values: [12, 16, 20],
                description: "Supported"},
            ],
            chartTitle: "Send Volume",            chartData: [
              { value: 45 },
              { value: 60 },
              { value: 55 },
              { value: 75 },
              { value: 80 },
            ],
            listTitle: "Recent Events",            listItems: [
              { icon: Calendar, title: "Partner Offer", status: "Scheduled" },
              { icon: Zap, title: "Groupbuy Launch", status: "Active" },
              {
                icon: MessageSquare,
                title: "Weekly Recap",                status: "Scheduled"},
              { icon: Package, title: "Product Drop", status: "Delivered" },
              { icon: TrendingUp, title: "Monthly Report", status: "Pending" },
            ],
          }}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardSeven
          title="Trusted by Teams Worldwide"
          description="Join growing teams managing their Discord presence with PR Cafe"
          textboxLayout="default"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "500+",              title: "Embeds Delivered",              items: ["Reliable delivery to webhooks", "Real-time tracking"],
            },
            {
              id: "2",              value: "50+",              title: "Active Teams",              items: ["Collaborative features", "Team permissions"],
            },
            {
              id: "3",              value: "20+",              title: "Supported Languages",              items: ["AI-powered translation", "Formatting preserved"],
            },
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          tag="FEATURES"
          title="Everything you need, nothing you don't"
          description="A focused toolkit for building, personalizing, and sending Discord embeds at scale."
          textboxLayout="default"
          animationType="slide-up"
          features={[
            {
              id: "1",              tag: "Visual Editor",              title: "Visual Editor",              description:
                "Build rich Discord embeds with a live preview. Fields, buttons, colors, and timestamps — all in one editor.",              imageSrc:
                "http://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "Visual editor interface"},
            {
              id: "2",              tag: "Smart Tags",              title: "Smart Tags",              description:
                "Personalize every message with dynamic tags that auto-resolve per partner on send.",              imageSrc:
                "http://img.b2bpic.net/free-vector/flat-design-science-invoice_23-2149168472.jpg",              imageAlt: "Tag resolution example"},
            {
              id: "3",              tag: "Batch Send",              title: "Batch Send",              description:
                "Send personalized embeds to hundreds of partner channels in one click.",              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-man-holding-smartphone_23-2148943302.jpg",              imageAlt: "Sending progress UI"},
            {
              id: "4",              tag: "Calendar",              title: "Calendar",              description:
                "Schedule sends in advance and manage your content pipeline on a shared calendar.",              imageSrc:
                "http://img.b2bpic.net/free-vector/dashboard-user-panel_52683-29589.jpg?_wi=2",              imageAlt: "Calendar view"},
            {
              id: "5",              tag: "AI Translation",              title: "AI Translation",              description:
                "Translate embeds into 20+ languages with one click. Tags and formatting are preserved.",              imageSrc:
                "http://img.b2bpic.net/free-vector/hand-drawn-translation-services-landing-page_23-2151165828.jpg",              imageAlt: "Translation preview"},
            {
              id: "6",              tag: "Team Permissions",              title: "Team Permissions",              description:
                "Granular role-based access for owners, members, and PR partners across every feature.",              imageSrc:
                "http://img.b2bpic.net/free-vector/dashboard-user-panel_52683-29589.jpg?_wi=3",              imageAlt: "Team settings"},
          ]}
        />
      </div>

      <div id="distribution" data-section="distribution">
        <TextAbout
          tag="DISTRIBUTION"
          title="Send once, reach every partner"
          useInvertedBackground={false}
        />
      </div>

      <div id="translation" data-section="translation">
        <TextAbout
          tag="TRANSLATION"
          title="One embed, every language"
          useInvertedBackground={false}
        />
      </div>

      <div id="personalization" data-section="personalization">
        <TextAbout
          tag="PERSONALIZATION"
          title="Dynamic tags, zero manual work"
          useInvertedBackground={false}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <MetricCardSeven
          tag="HOW IT WORKS"
          title="Up and running in minutes"
          description="Get started with PR Cafe in three simple steps"
          textboxLayout="default"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "1",              title: "Sign in with Discord",              items: ["Connect your Discord account", "No credit card required"],
            },
            {
              id: "2",              value: "2",              title: "Build your embed",              items: ["Use the visual editor", "Add smart tags and preview"],
            },
            {
              id: "3",              value: "3",              title: "Send at scale",              items: ["Select partners", "Preview and send personalized messages"],
            },
          ]}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <ContactCTA
          tag="GET STARTED"
          tagIcon={Rocket}
          title="Start managing your Discord embeds today"
          description="Join teams already using PR Cafe to build and send professional embeds at scale. Free to get started."
          buttons={[
            { text: "Get Started", href: "/login" },
            { text: "View Docs", href: "https://docs.webhook.cafe" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="PR Cafe"
          leftLink={{ text: "Features", href: "#features" }}
          rightLink={{ text: "Discord", href: "https://discord.gg/SCUpCXkkmX" }}
        />
      </div>
    </ThemeProvider>
  );
}
