"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';

export default function InsightsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Insights", id: "/insights" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Next Year"
        />
      </div>

      <div id="insights-hero" data-section="insights-hero">
        <HeroLogoBillboardSplit
          logoText="INSIGHTS"
          description="Market analysis, investment strategies, and financial insights to guide your wealth journey."
          buttons={[
            { text: "Read Our Blog", href: "#blog" },
            { text: "Back to Home", href: "/" }
          ]}
          layoutOrder="default"
          background={{ variant: "radial-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/investment-economy-finance-business-trade-concept_53876-125582.jpg"
          imageAlt="Market insights and analysis"
          frameStyle="card"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree
          title="Latest Articles"
          description="Expert perspectives on market trends, investment strategies, and wealth management"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          blogs={[
            {
              id: "1",
              category: "Investment Strategy",
              title: "The Power of Diversification in Today's Markets",
              excerpt: "Understanding how strategic asset allocation protects wealth during market volatility and uncertainty.",
              imageSrc: "https://img.b2bpic.net/free-photo/co-workers-comparing-graphics_1098-1849.jpg",
              imageAlt: "Diversification strategy article",
              authorName: "James Richardson",
              date: "Jan 15, 2025"
            },
            {
              id: "2",
              category: "Wealth Management",
              title: "Tax-Efficient Investing: Maximize Your Returns",
              excerpt: "Practical strategies to minimize tax impact and enhance net returns on your investment portfolio.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",
              imageAlt: "Tax-efficient investing guide",
              authorName: "Sarah Mitchell",
              date: "Jan 10, 2025"
            },
            {
              id: "3",
              category: "Market Trends",
              title: "2025 Market Outlook: Navigating Economic Headwinds",
              excerpt: "Our comprehensive analysis of global economic trends and market opportunities for the year ahead.",
              imageSrc: "https://img.b2bpic.net/free-photo/coin-wooden-table-blurred-nature_1150-17703.jpg",
              imageAlt: "Market trends analysis",
              authorName: "David Park",
              date: "Jan 5, 2025"
            }
          ]}
        />
      </div>

      <footer className="bg-foreground text-background py-12">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-2">
              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
              <p className="text-background/80 mb-4">
                Transforming wealth through intelligent investment strategies and expert guidance.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Navigation</h4>
              <nav className="space-y-2">
                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
                  Home
                </Link>
                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
                  Services
                </Link>
                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
                  Team
                </Link>
                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
                  Insights
                </Link>
                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
                  Contact
                </Link>
              </nav>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact</h4>
              <div className="text-background/80">
                <p>Schedule a consultation to discuss your investment goals.</p>
              </div>
            </div>
          </div>
          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </ThemeProvider>
  );
}