"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Star, HelpCircle } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
          brandName="ArbUz"
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <div className="py-16 md:py-24">
          <div className="max-w-4xl mx-auto px-4 text-center">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              About ArbUz AI Platform
            </h1>
            <p className="text-xl text-gray-600 mb-8">
              We're revolutionizing the advertising industry with cutting-edge artificial intelligence, 
              helping media buyers achieve unprecedented results through data-driven insights and automated optimization.
            </p>
            <div className="grid md:grid-cols-3 gap-8 mt-12">
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">500+</div>
                <p className="text-gray-600">Media Buyers Trust Us</p>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">$50M+</div>
                <p className="text-gray-600">Ad Spend Optimized</p>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">40%</div>
                <p className="text-gray-600">Average ROI Improvement</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="our-story" data-section="our-story">
        <div className="py-16 bg-gray-50">
          <div className="max-w-6xl mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold mb-6">Our Story</h2>
                <p className="text-gray-600 mb-4">
                  Founded by a team of data scientists and advertising veterans, ArbUz was born from the frustration 
                  of seeing brilliant campaigns fail due to inefficient manual processes and outdated optimization methods.
                </p>
                <p className="text-gray-600 mb-4">
                  Our mission is simple: democratize advanced AI technology for media buyers of all sizes, 
                  from independent consultants to enterprise agencies. We believe that intelligent automation 
                  should amplify human creativity, not replace it.
                </p>
                <p className="text-gray-600">
                  Today, ArbUz powers campaigns across Google Ads, Facebook, YouTube, and programmatic platforms, 
                  delivering measurable results for our growing community of forward-thinking advertisers.
                </p>
              </div>
              <div>
                <img 
                  src="http://img.b2bpic.net/free-photo/employees-discussing-project-strategies_482257-120275.jpg"
                  alt="Team collaborating on AI strategy"
                  className="rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="team-testimonials" data-section="team-testimonials">
        <TestimonialCardTwo
          testimonials={[
            {
              id: "team-1",
              name: "Dr. Alex Chen",
              role: "Chief Technology Officer & Co-Founder",
              testimonial: "Our AI models process over 10 billion data points daily to deliver insights that were impossible just five years ago. The future of advertising is intelligent, and we're building it today.",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Dr. Alex Chen, CTO and Co-Founder",
              icon: Star
            },
            {
              id: "team-2",
              name: "Sarah Martinez",
              role: "VP of Product Strategy",
              testimonial: "Every feature we build is tested with real campaigns managing real budgets. We don't just theorize about AI optimization - we prove it works in the market every single day.",
              imageSrc: "http://img.b2bpic.net/free-photo/image-young-saleswoman-suit-working-laptop-sitting-her-office-with-smartphone-answering_1258-194585.jpg",
              imageAlt: "Sarah Martinez, VP of Product Strategy",
              icon: Star
            }
          ]}
          title="Meet Our Leadership Team"
          description="Industry veterans and AI pioneers working together to transform digital advertising through intelligent automation and data-driven insights."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "About", href: "/about" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Documentation", href: "/about" },
              { label: "Blog", href: "/about" },
              { label: "Guides", href: "/contact" },
              { label: "Support", href: "/contact" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "/features" },
              { label: "Contact", href: "/contact" },
              { label: "Partners", href: "/features" }
            ]
          }
        ]}
        copyrightText="© 2023 ArbUz. All rights reserved."
      />
    </ThemeProvider>
  );
}