'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { Target, Eye, Heart, Award, Globe, ArrowRight } from 'lucide-react';
import { CounterAnimation } from '@/components/counter-animation';

const values = [
  { icon: Target, title: 'Precision', desc: 'Every number matters. We ensure meticulous accuracy in all financial records and filings.', color: 'text-blue-600', bg: 'bg-blue-50' },
  { icon: Eye, title: 'Transparency', desc: 'Clear communication and honest advice — no hidden fees, no surprises.', color: 'text-emerald-600', bg: 'bg-emerald-50' },
  { icon: Heart, title: 'Integrity', desc: 'We uphold the highest ethical standards in every client engagement.', color: 'text-rose-600', bg: 'bg-rose-50' },
  { icon: Award, title: 'Excellence', desc: 'Continuously improving our services and staying ahead of regulatory changes.', color: 'text-amber-600', bg: 'bg-amber-50' },
];

export function AboutContent() {
  return (
    <>
      {/* Hero */}
      <section className="relative py-20 sm:py-28 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
        <div className="absolute inset-0 bg-mesh" />
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }} />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <span className="inline-block px-4 py-1.5 bg-white/[0.06] backdrop-blur-md border border-white/10 text-[var(--gold-light)] text-sm font-semibold rounded-full mb-4">About Us</span>
            <h1 className="font-display text-4xl sm:text-5xl font-bold text-white tracking-tight mb-4">
              Your Trusted Financial <span className="text-gradient-gold">Partner</span>
            </h1>
            <p className="text-white/60 text-lg max-w-2xl mx-auto">Building lasting relationships through exceptional financial services and unwavering commitment to client success.</p>
          </motion.div>
        </div>
      </section>

      {/* Story */}
      <section className="py-24 sm:py-32 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <motion.div initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
              <span className="inline-block px-4 py-1.5 bg-[var(--gold)]/10 text-[var(--gold)] text-sm font-semibold rounded-full mb-4">Our Story</span>
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-[var(--navy)] tracking-tight mb-6">
                Building Financial <span className="text-gradient-gold">Confidence</span> Since Day One
              </h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>
                  Alpha CPA Consulting LLC was founded with a clear mission: to provide accessible, high-quality accounting and tax services to businesses and individuals who deserve professional financial guidance.
                </p>
                <p>
                  With offices in Erie, Pennsylvania and Narayanganj, Bangladesh, we serve a diverse global clientele. Our team of certified professionals brings decades of combined experience in tax planning, bookkeeping, payroll management, and financial consulting.
                </p>
                <p>
                  We believe that every business — from a local startup to a growing corporation — deserves the same level of financial expertise and attention to detail.
                </p>
              </div>
            </motion.div>

            <motion.div initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
              <div className="grid grid-cols-2 gap-4">
                {[
                  { value: 500, suffix: '+', label: 'Clients Served' },
                  { value: 15, suffix: '+', label: 'Years Experience' },
                  { value: 2, suffix: '', label: 'Global Offices' },
                  { value: 98, suffix: '%', label: 'Client Retention' },
                ]?.map((s: any, i: number) => (
                  <div key={i} className="card-3d bg-[hsl(var(--muted))] rounded-2xl p-6 text-center">
                    <div className="text-3xl font-bold text-[var(--navy)] mb-1">
                      <CounterAnimation end={s?.value ?? 0} suffix={s?.suffix ?? ''} />
                    </div>
                    <p className="text-muted-foreground text-sm">{s?.label ?? ''}</p>
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-20 bg-[hsl(var(--muted))]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }}
              className="card-3d bg-white rounded-2xl p-10 shadow-[var(--shadow-md)]"
            >
              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--navy)] to-[var(--navy-light)] flex items-center justify-center mb-6 shadow-lg shadow-[var(--navy)]/20">
                <Target className="w-7 h-7 text-[var(--gold)]" />
              </div>
              <h3 className="font-display text-2xl font-bold text-[var(--navy)] mb-4">Our Mission</h3>
              <p className="text-muted-foreground leading-relaxed">
                To empower businesses and individuals with accurate, timely, and personalized financial services that drive growth, ensure compliance, and build lasting financial confidence.
              </p>
            </motion.div>

            <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }}
              className="card-3d bg-white rounded-2xl p-10 shadow-[var(--shadow-md)]"
            >
              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--gold)] to-[#d4b060] flex items-center justify-center mb-6 shadow-lg shadow-[var(--gold)]/20">
                <Eye className="w-7 h-7 text-white" />
              </div>
              <h3 className="font-display text-2xl font-bold text-[var(--navy)] mb-4">Our Vision</h3>
              <p className="text-muted-foreground leading-relaxed">
                To be the most trusted and accessible CPA firm, recognized globally for delivering excellence in accounting services while maintaining the personal touch of a boutique practice.
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-24 sm:py-32 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-16">
            <h2 className="font-display text-3xl sm:text-4xl font-bold text-[var(--navy)] tracking-tight mb-4">Our Core <span className="text-gradient-gold">Values</span></h2>
          </motion.div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {values?.map((v: any, i: number) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
                className="card-3d text-center bg-[hsl(var(--muted))] rounded-2xl p-8 shadow-[var(--shadow-sm)]"
              >
                <div className={`w-14 h-14 rounded-2xl ${v.bg} flex items-center justify-center mx-auto mb-4`}>
                  <v.icon className={`w-7 h-7 ${v.color}`} />
                </div>
                <h3 className="font-display font-bold text-[var(--navy)] mb-2">{v?.title ?? ''}</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">{v?.desc ?? ''}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Global Presence */}
      <section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
        <div className="absolute inset-0 bg-mesh" />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-12">
            <h2 className="font-display text-2xl sm:text-3xl font-bold text-white tracking-tight mb-2">
              <Globe className="inline w-6 h-6 text-[var(--gold)] mr-2 -mt-1" />
              Global Presence
            </h2>
            <p className="text-white/50">Serving clients from two strategic locations</p>
          </motion.div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {[
              { office: 'United States', address: '502 West 7th Street, Suite 100, Erie, PA 16502', phone: '+1 570-7553-434' },
              { office: 'Bangladesh', address: 'Sayedpur West, Holding 56, Narayanganj Sadar-1400', phone: '+88 01928802438' },
            ]?.map((loc: any, i: number) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
                className="glass-dark rounded-2xl p-8"
              >
                <h3 className="font-display font-bold text-white text-lg mb-3">{loc?.office ?? ''}</h3>
                <p className="text-white/50 text-sm mb-2">{loc?.address ?? ''}</p>
                <a href={`tel:${(loc?.phone ?? '')?.replace?.(/\s/g, '')}`} className="text-[var(--gold-light)] text-sm hover:underline">{loc?.phone ?? ''}</a>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
            <h2 className="font-display text-2xl sm:text-3xl font-bold text-[var(--navy)] tracking-tight mb-4">Ready to Work Together?</h2>
            <p className="text-muted-foreground text-lg mb-8">Get in touch and let&apos;s discuss how we can support your financial goals.</p>
            <Link href="/contact" className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--navy)] to-[var(--navy-light)] text-white font-bold rounded-xl hover:shadow-lg hover:shadow-[var(--navy)]/20 transition-all duration-300 hover:-translate-y-0.5">
              Contact Us <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>
    </>
  );
}