export default function AboutPage() {
  const values = [
    {
      icon: "🎯",
      title: "Mission-Driven",
      description: "Making estate planning accessible and understandable for everyone through comprehensive education.",
    },
    {
      icon: "🏆",
      title: "Excellence",
      description: "Delivering high-quality webinars and resources from industry-leading experts.",
    },
    {
      icon: "🤝",
      title: "Community",
      description: "Building a supportive community where people can learn and share their experiences.",
    },
    {
      icon: "💡",
      title: "Innovation",
      description: "Continuously improving our platform and educational approach based on feedback.",
    },
  ];

  const team = [
    {
      name: "Sarah Johnson",
      role: "Founder & CEO",
      bio: "20+ years of experience in estate planning and financial advisory.",
      icon: "👩‍💼",
    },
    {
      name: "Michael Chen",
      role: "Chief Educational Officer",
      bio: "Expert educator with a passion for making complex topics simple.",
      icon: "👨‍🏫",
    },
    {
      name: "Emily Rodriguez",
      role: "Community Manager",
      bio: "Dedicated to building and nurturing our thriving community.",
      icon: "👩‍💻",
    },
    {
      name: "David Thompson",
      role: "Lead Consultant",
      bio: "Certified financial planner with specialized estate planning expertise.",
      icon: "👨‍⚖️",
    },
  ];

  return (
    <main className="relative overflow-hidden">
      {/* Background gradients */}
      <div className="absolute inset-0 bg-gradient-to-b from-slate-50 via-white to-slate-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900" />
      <div className="absolute -top-24 right-0 h-64 w-64 rounded-full bg-primary/15 blur-3xl" />
      <div className="absolute -bottom-24 left-0 h-64 w-64 rounded-full bg-secondary/15 blur-3xl" />
      <div className="absolute top-1/2 right-1/4 h-48 w-48 rounded-full bg-cyan-400/10 blur-3xl" />

      <div className="relative max-w-6xl mx-auto px-6 py-16 lg:py-20">
        {/* Header Section */}
        <div className="text-center mb-16">
          <p className="inline-flex items-center gap-2 text-sm font-semibold tracking-wide uppercase text-primary/80 bg-primary/10 px-3 py-1 rounded-full">
            Learn our story
          </p>
          <h1 className="mt-4 text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">
            About Estate Planning Hub
          </h1>
          <p className="mt-3 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            Empowering individuals to make informed decisions about their financial future and legacy through expert-led education.
          </p>
        </div>

        {/* Mission & Vision Section */}
        <div className="grid lg:grid-cols-2 gap-8 mb-16">
          <div className="rounded-2xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 backdrop-blur-md p-8 shadow-lg hover:shadow-xl transition-shadow">
            <div className="flex items-center gap-3 mb-4">
              <div className="h-12 w-12 rounded-lg bg-primary/15 text-primary flex items-center justify-center text-2xl">
                🎯
              </div>
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Our Mission</h2>
            </div>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
              We are dedicated to making estate planning accessible and understandable for everyone. Through our comprehensive webinars and educational resources, we empower individuals to make informed decisions about their financial future and legacy. We believe that proper estate planning shouldn't be intimidating or exclusive.
            </p>
          </div>

          <div className="rounded-2xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 backdrop-blur-md p-8 shadow-lg hover:shadow-xl transition-shadow">
            <div className="flex items-center gap-3 mb-4">
              <div className="h-12 w-12 rounded-lg bg-secondary/15 text-secondary flex items-center justify-center text-2xl">
                ✨
              </div>
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Our Vision</h2>
            </div>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
              We envision a world where everyone has access to the knowledge and tools needed to plan their estate with confidence. Our platform brings together expert advisors, comprehensive educational content, and a supportive community to guide you through every step of the estate planning process.
            </p>
          </div>
        </div>

        {/* What We Offer Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">
              What We Offer
            </h2>
            <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              Comprehensive resources and expert guidance to support your estate planning journey
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 hover:shadow-lg transition-shadow">
              <div className="text-4xl mb-3">📚</div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Expert-Led Webinars</h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Learn from experienced estate planning professionals and financial advisors.
              </p>
            </div>

            <div className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 hover:shadow-lg transition-shadow">
              <div className="text-4xl mb-3">💡</div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Comprehensive Resources</h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Access guides, templates, checklists, and educational materials.
              </p>
            </div>

            <div className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 hover:shadow-lg transition-shadow">
              <div className="text-4xl mb-3">🤝</div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Community Support</h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Connect with others on their estate planning journey and share experiences.
              </p>
            </div>

            <div className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 hover:shadow-lg transition-shadow">
              <div className="text-4xl mb-3">🎁</div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Legacy Planning Tools</h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Tools to help you plan and organize your legacy effectively.
              </p>
            </div>
          </div>
        </div>

        {/* Core Values Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">
              Our Core Values
            </h2>
            <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              The principles that guide everything we do
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {values.map((value, index) => (
              <div
                key={index}
                className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 hover:shadow-lg transition-shadow"
              >
                <div className="flex items-start gap-4">
                  <div className="text-4xl flex-shrink-0">{value.icon}</div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                      {value.title}
                    </h3>
                    <p className="text-gray-600 dark:text-gray-400">
                      {value.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Team Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">
              Meet Our Team
            </h2>
            <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              Experienced professionals dedicated to your estate planning success
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {team.map((member, index) => (
              <div
                key={index}
                className="rounded-xl border border-gray-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-900/70 p-6 text-center hover:shadow-lg transition-shadow"
              >
                <div className="text-5xl mb-4 flex justify-center">{member.icon}</div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {member.name}
                </h3>
                <p className="text-sm font-medium text-primary dark:text-primary/80 mb-2">
                  {member.role}
                </p>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {member.bio}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Why Choose Us Section */}
        <div className="rounded-2xl border border-gray-200/70 dark:border-slate-800/70 bg-gradient-to-br from-primary/10 via-transparent to-secondary/10 dark:from-primary/20 dark:via-transparent dark:to-secondary/20 p-10 md:p-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-8 text-center">
            Why Choose Estate Planning Hub?
          </h2>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="flex gap-4">
              <div className="flex-shrink-0 flex items-start justify-center">
                <div className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/20 text-primary">
                  ✓
                </div>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  Trusted Expertise
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  Learn from seasoned professionals with decades of combined experience.
                </p>
              </div>
            </div>

            <div className="flex gap-4">
              <div className="flex-shrink-0 flex items-start justify-center">
                <div className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/20 text-primary">
                  ✓
                </div>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  Accessible Learning
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  Complex topics explained in simple, easy-to-understand language.
                </p>
              </div>
            </div>

            <div className="flex gap-4">
              <div className="flex-shrink-0 flex items-start justify-center">
                <div className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/20 text-primary">
                  ✓
                </div>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  Practical Tools
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  Real-world templates and resources you can use immediately.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}