"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Target } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
        <NavbarStyleApple
          brandName="AlphaBlendr"
          navItems={[
            { name: "Home", id: "#home" },
            { name: "Product", id: "#product" },
            { name: "Features", id: "#features" },
            { name: "Performance", id: "#performance" },
            { name: "About", id: "#about" },
            { name: "FAQ", id: "#faq" },
            { name: "Contact", id: "#contact" }
          ]}
        />
      </div>

      <div id="home" data-section="home" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="AlphaBlendr: Uncover True Portfolio Performance."
          description="Beyond the surface: experience the future of retail investing with our AI-powered analytics, revealing hidden overlaps and optimizing your financial journey. A scroll-driven story for serious investors."
          background={{ variant: "gradient-bars" }}
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/businessman-suit-arriving-home-checking-if-stock-market-is-crashing_482257-29631.jpg", imageAlt: "Futuristic financial dashboard UI showcasing portfolio assembly" },
            { imageSrc: "http://img.b2bpic.net/free-photo/modern-businessman-employs-virtual-reality-headset-digital-environment-focused-performance_482257-136139.jpg", imageAlt: "Dynamic visualization of assets cascading into a portfolio" },
            { imageSrc: "http://img.b2bpic.net/free-photo/millennial-young-chinese-businesswoman-working-late-night-stress-out-with-project-research-problem-laptop-meeting-room-small-modern-office-asia-people-occupational-burnout-syndrome-concept_7861-2385.jpg", imageAlt: "X-Ray pass effect revealing underlying stocks in ETFs" },
            { imageSrc: "http://img.b2bpic.net/free-photo/graph-business-financial-investment-risk-word_53876-122497.jpg", imageAlt: "Stylized graphic showing diversification analysis and hidden overlaps" },
            { imageSrc: "http://img.b2bpic.net/free-photo/computer-monitors-office-desk-showing-data-analytics-dashboards_482257-126705.jpg", imageAlt: "Evolving portfolio dashboard with real-time asset allocation" },
            { imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg", imageAlt: "Abstract representation of market data flowing into AI analysis engine" }
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="product" data-section="product" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="The Diversification Lie Detector"
          description="ETFs often mask hidden overlaps, undermining your diversification. AlphaBlendr’s X-Ray Pass dissolves funds into their underlying stocks, exposing true exposure and helping you build a genuinely resilient portfolio."
          tag="Deep Dive"
          gridVariant="bento-grid-inverted"
          animationType="slide-up"
          useInvertedBackground={true}
          textboxLayout="default"
          products={[
            { id: "p1", name: "ETF Breakdown: Tech Sector", price: "Hidden Overlap: 45%", variant: "X-Ray Pass Enabled", imageSrc: "http://img.b2bpic.net/free-photo/abstract-still-life-universe-composition_23-2149101773.jpg", imageAlt: "UI screenshot of ETF dissolving into underlying tech stocks" },
            { id: "p2", name: "Overlap Analysis: Global Funds", price: "Exposure Duplication: 30%", variant: "True Diversification View", imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761041.jpg", imageAlt: "Visual comparing two global ETFs with highlighted stock overlap" },
            { id: "p3", name: "Sector Insight: Before & After", price: "Revealed Risk: High", variant: "X-Ray Impact", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-pressure-feeling-frustrated-with-her-coworker_482257-131902.jpg", imageAlt: "Interactive chart showing sector exposure before and after X-Ray" },
            { id: "p4", name: "Portfolio Resilience Check", price: "True vs. Perceived Risk", variant: "Diversification Score", imageSrc: "http://img.b2bpic.net/free-photo/business-desktop-with-office-elements_23-2148194691.jpg", imageAlt: "Split-screen comparing traditional vs AlphaBlendr's diversification view" },
            { id: "p5", name: "Risk Contributor Breakdown", price: "Concentration Identified", variant: "Top Risk Factors", imageSrc: "http://img.b2bpic.net/free-vector/patent-idea-protection-infographics_1284-5629.jpg", imageAlt: "Infographic breaking down top contributors to portfolio risk" },
            { id: "p6", name: "Redundancy Heatmap", price: "Optimized Allocation", variant: "Asset Overlap Visual", imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-pin-location_23-2151642231.jpg", imageAlt: "Investment product overlap heatmap" }
          ]}
        />
      </div>

      <div id="features" data-section="features" className="mx-auto px-4 md:px-6">
        <FeatureCardSeven
          title="Intelligent Forecasting & Optimization"
          description="Watch your financial future unfold. Our platform dynamically projects outcomes, simulates scenarios, and continuously refines your strategy with an AI Co-Pilot that learns and adapts to market shifts."
          tag="Next-Gen Analytics"
          features={[
            { title: "Monte Carlo Goal Fans", description: "Visualize your financial goals with probability-driven projections. Understand the likelihood of achieving your targets under various market conditions, empowering confident decision-making.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996795.jpg", imageAlt: "Monte Carlo simulation chart with fan-like projections" },
            { title: "Precise Dividend Forecasts", description: "Anticipate your future income with highly accurate dividend projections. Plan for passive income streams and reinvestment opportunities with unparalleled clarity.", imageSrc: "http://img.b2bpic.net/free-photo/business-growth-graph-ai-generated_268835-11305.jpg", imageAlt: "Rising bar chart showing dividend forecasts" },
            { title: "AI Co-Pilot Portfolio Optimization", description: "Let our AI Co-Pilot continuously analyze and suggest optimizations for your portfolio. It learns from market shifts and your financial objectives to keep you on track.", imageSrc: "http://img.b2bpic.net/free-photo/international-day-education-futuristic-style_23-2150998745.jpg", imageAlt: "AI assistant interface composing a portfolio live" }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="performance" data-section="performance" className="mx-auto px-4 md:px-6">
        <MetricCardTwo
          title="Quantifiable Results, Real Growth"
          description="Our institutional-grade analytics deliver insights that drive performance. See how AlphaBlendr members are achieving superior returns and stronger, more diversified portfolios."
          tag="Proven Impact"
          metrics={[
            { id: "m1", value: "+18.7%", description: "Average Portfolio Alpha" },
            { id: "m2", value: "2.5x", description: "Increased Diversification Score" },
            { id: "m3", value: "92%", description: "Client Satisfaction" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="depth-3d"
          useInvertedBackground={true}
          textboxLayout="default"
        />
      </div>

      <div id="insights" data-section="insights" className="mx-auto px-4 md:px-6">
        <TestimonialCardTen
          title="Calm Confidence, Clear Strategy"
          description="Hear from serious retail investors who have transformed their approach and achieved their financial goals with AlphaBlendr’s precision and clarity."
          tag="Trusted by Investors"
          testimonials={[
            { id: "t1", title: "AlphaBlendr changed my investment game.", quote: "I've always struggled with understanding true diversification. AlphaBlendr's X-Ray Pass revealed hidden overlaps I never knew existed, giving me immense confidence in my portfolio. It's truly a game-changer for serious investors.", name: "Sarah J.", role: "Retail Investor", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg", imageAlt: "professional headshot diverse person" },
            { id: "t2", title: "Institutional-grade tools, finally accessible.", quote: "As someone who's always sought sophisticated analytics, AlphaBlendr delivers. The AI Co-Pilot is surprisingly intuitive and has helped me uncover new opportunities. This platform is a must-have.", name: "Michael C.", role: "Tech Executive", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-surprised-expression_1194-3809.jpg", imageAlt: "confident tech executive headshot" },
            { id: "t3", title: "Clarity and confidence, delivered.", quote: "The Monte Carlo simulations alone are worth it. Knowing the probabilities of my financial goals helps me sleep better at night. AlphaBlendr demystifies complex financial planning.", name: "Emily R.", role: "Financial Consultant", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businessman-entrepreneur-sitting-workspace-looking-camera_482257-8143.jpg", imageAlt: "experienced financial analyst headshot" },
            { id: "t4", title: "My portfolio has never been smarter.", quote: "I used to spend hours on research, but AlphaBlendr's AI streamlines everything. It's like having a team of analysts working for me, identifying risks and suggesting optimal allocations. Truly brilliant.", name: "David K.", role: "Entrepreneur", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-smiling-standing-near-business-centre_176420-16777.jpg", imageAlt: "young ambitious entrepreneur headshot" },
            { id: "t5", title: "A new era of investing for everyone.", quote: "AlphaBlendr provides a depth of insight I previously thought was only for hedge funds. It’s powerful, yet easy to use, making advanced strategies accessible to the everyday investor.", name: "Jessica L.", role: "Seasoned Investor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bald-senior-dressed-stylish-suit-posing-against-dark-background_613910-17578.jpg", imageAlt: "seasoned investor headshot wise" }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about" className="mx-auto px-4 md:px-6">
        <TestimonialAboutCard
          tag="Our Vision"
          title="Empowering the Modern Investor"
          description="We blend deep quantitative analysis with intuitive design, providing a powerful yet accessible platform to navigate market complexities, identify opportunities, and mitigate risks with unprecedented clarity."
          subdescription="AlphaBlendr was built on the belief that retail investors deserve the same sophisticated tools and insights previously reserved for institutions. We democratize advanced portfolio analytics."
          icon={Target}
          imageSrc="http://img.b2bpic.net/free-photo/angry-senior-businessman-reading-message-phone_1262-2949.jpg"
          imageAlt="Confident investor looking at holographic financial display"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqSplitText
          sideTitle="Your Questions, Answered"
          sideDescription="Browse our frequently asked questions to quickly find the information you need about AlphaBlendr’s platform, features, and security."
          faqs={[
            { id: "q1", title: "What is AlphaBlendr's X-Ray Pass?", content: "The X-Ray Pass is a unique feature that dissects ETFs and mutual funds, revealing their underlying stock holdings and any hidden overlaps, helping you achieve true diversification." },
            { id: "q2", title: "How does the AI Co-Pilot work?", content: "Our AI Co-Pilot leverages machine learning to analyze market data, predict trends, and suggest real-time portfolio optimizations tailored to your financial goals and risk tolerance." },
            { id: "q3", title: "Is my data secure with AlphaBlendr?", content: "Absolutely. We employ institutional-grade encryption and security protocols to protect your personal and financial data, ensuring privacy and peace of mind." }
          ]}
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
        <ContactCTA
          tag="Ready to Invest Smarter?"
          title="Unlock Your Portfolio's True Potential."
          description="Join AlphaBlendr today and gain the precision, clarity, and confidence you need to master the markets. Start your journey with institutional-grade insights."
          buttons={[{ text: "Sign Up Now", href: "#" }]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <FooterBase
          logoText="AlphaBlendr"
          columns={[
            { title: "Product", items: [{ label: "Overview", href: "#home" }, { label: "Features", href: "#features" }, { label: "Analytics", href: "#performance" }] },
            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#insights" }] },
            { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
          ]}
          copyrightText="© 2024 AlphaBlendr. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}