"use client";

import { motion } from "framer-motion";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import AnimatedButton from "../components/AnimatedButton";
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
import {
  ArrowRightIcon,
  HeartIcon,
  UsersIcon,
  StarIcon,
  TargetIcon,
} from "../components/Icons";

const coreValues = [
  {
    icon: HeartIcon,
    title: "Family",
    description:
      "To serve our employees and their families by establishing a work environment and company policies that build character, strengthen individuals, and nurture families.",
    color: "from-rose-500 to-pink-500",
    bgColor: "bg-rose-50 dark:bg-rose-950/20",
  },
  {
    icon: StarIcon,
    title: "Character",
    description:
      "Every employee at TCM Sales & Marketing is to conduct themselves with an attitude of selflessness, servanthood, and confident humility.",
    color: "from-amber-500 to-orange-500",
    bgColor: "bg-amber-50 dark:bg-amber-950/20",
  },
  {
    icon: UsersIcon,
    title: "Giving Back",
    description:
      "We encourage a spirit of giving back to those in need. We believe that we have an obligation to serve others because we have been given so much.",
    color: "from-emerald-500 to-teal-500",
    bgColor: "bg-emerald-50 dark:bg-emerald-950/20",
  },
  {
    icon: TargetIcon,
    title: "Encouragement",
    description:
      "We want all employees to encourage one another at all times and help each other reach their full potential.",
    color: "from-blue-500 to-indigo-500",
    bgColor: "bg-blue-50 dark:bg-blue-950/20",
  },
];

const principles = [
  "Faithful stewardship",
  "Professional integrity",
  "Ethical representation",
  "Symbiotic growth",
  "Positive impact",
  "Service excellence",
];

export default function CulturePage() {
  return (
    <main className="relative">
      <Navigation />

      {/* Hero Section */}
      <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[150px] opacity-15"
            animate={{
              scale: [1, 1.2, 1],
              x: [0, 50, 0],
            }}
            transition={{
              duration: 10,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-amber-500 rounded-full filter blur-[180px] opacity-10"
            animate={{
              scale: [1.2, 1, 1.2],
              y: [0, -50, 0],
            }}
            transition={{
              duration: 12,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        {/* Decorative elements */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {[...Array(4)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute w-64 h-64 border border-white/5 rounded-full"
              style={{
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
              }}
              initial={{ scale: 0.5 + i * 0.3, opacity: 0 }}
              animate={{
                scale: [0.5 + i * 0.3, 0.7 + i * 0.3, 0.5 + i * 0.3],
                opacity: [0.1, 0.3, 0.1],
              }}
              transition={{
                duration: 4 + i,
                repeat: Infinity,
                ease: "easeInOut",
                delay: i * 0.5,
              }}
            />
          ))}
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/10 mb-8"
          >
            <HeartIcon size={16} className="text-[hsl(0,100%,60%)]" />
            <span className="text-sm font-medium text-white/80">
              Who We Are
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.1 }}
            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6"
          >
            Our{" "}
            <span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(30,100%,60%)] bg-clip-text text-transparent">
              Culture
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-300 mb-10 leading-relaxed"
          >
            Built on faith, driven by purpose, and committed to making a
            positive impact on everyone we serve.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          >
            <AnimatedButton
              href="/contact"
              size="lg"
              icon={<ArrowRightIcon size={18} />}
            >
              Join Our Team
            </AnimatedButton>
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
          className="absolute bottom-12 left-1/2 -translate-x-1/2"
        >
          <motion.div
            animate={{ y: [0, 10, 0] }}
            transition={{ duration: 1.5, repeat: Infinity }}
            className="w-6 h-10 rounded-full border-2 border-white/30 flex items-start justify-center p-2"
          >
            <motion.div
              animate={{ y: [0, 12, 0] }}
              transition={{ duration: 1.5, repeat: Infinity }}
              className="w-1.5 h-1.5 rounded-full bg-[hsl(0,100%,50%)]"
            />
          </motion.div>
        </motion.div>
      </section>

      {/* Mission & Purpose Section */}
      <section className="section-padding bg-white dark:bg-neutral-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
            {/* Mission */}
            <FadeIn>
              <motion.div
                whileHover={{ y: -5 }}
                className="relative bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(0,50%,95%)] dark:from-[hsl(0,100%,10%)] dark:to-neutral-900 p-10 rounded-3xl border border-[hsl(0,100%,90%)] dark:border-[hsl(0,100%,20%)] h-full"
              >
                <motion.div
                  whileHover={{ rotate: 360, scale: 1.1 }}
                  transition={{ duration: 0.5 }}
                  className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
                >
                  <HeartIcon size={32} />
                </motion.div>
                <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
                  Our Mission
                </h2>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
                  To glorify God by being faithful stewards of all that is
                  entrusted to us. To serve our employees and families well,
                  using our resources to positively impact and help others.
                </p>
                <motion.div
                  className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,60%)] rounded-b-3xl"
                  initial={{ scaleX: 0 }}
                  whileInView={{ scaleX: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.8, delay: 0.3 }}
                />
              </motion.div>
            </FadeIn>

            {/* Purpose */}
            <FadeIn delay={0.2}>
              <motion.div
                whileHover={{ y: -5 }}
                className="relative bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-10 rounded-3xl border border-amber-100 dark:border-amber-900/50 h-full"
              >
                <motion.div
                  whileHover={{ rotate: 360, scale: 1.1 }}
                  transition={{ duration: 0.5 }}
                  className="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white mb-6"
                >
                  <TargetIcon size={32} />
                </motion.div>
                <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
                  Our Purpose
                </h2>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
                  To provide professional and ethical representation for both
                  our manufacturers and distributor partners with a vision of
                  symbiotically beneficial growth.
                </p>
                <motion.div
                  className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-b-3xl"
                  initial={{ scaleX: 0 }}
                  whileInView={{ scaleX: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.8, delay: 0.5 }}
                />
              </motion.div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Guiding Principles */}
      <section className="py-16 bg-neutral-50 dark:bg-neutral-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="text-center mb-10">
              <span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium">
                Guiding Principles
              </span>
            </div>
          </FadeIn>
          <div className="flex flex-wrap justify-center gap-4">
            {principles.map((principle, index) => (
              <FadeIn key={principle} delay={index * 0.1}>
                <motion.div
                  whileHover={{ scale: 1.05, y: -5 }}
                  whileTap={{ scale: 0.95 }}
                  className="px-6 py-3 bg-white dark:bg-neutral-900 rounded-full shadow-md hover:shadow-lg transition-shadow border border-neutral-100 dark:border-neutral-800 cursor-default"
                >
                  <span className="font-medium text-neutral-800 dark:text-neutral-200">
                    {principle}
                  </span>
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Core Values Section */}
      <section className="section-padding bg-white dark:bg-neutral-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <FadeIn>
              <span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                What Drives Us
              </span>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
                Our Core{" "}
                <span className="text-[hsl(0,100%,40%)]">Values</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
                These values guide everything we do and shape how we interact
                with our team, partners, and community.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {coreValues.map((value) => (
              <StaggerItem key={value.title}>
                <motion.div
                  whileHover={{ y: -10 }}
                  className={`group relative ${value.bgColor} p-8 rounded-3xl h-full border border-neutral-100 dark:border-neutral-800 overflow-hidden`}
                >
                  {/* Gradient overlay on hover */}
                  <motion.div
                    className={`absolute inset-0 bg-gradient-to-br ${value.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
                  />

                  <motion.div
                    whileHover={{ rotate: 360, scale: 1.1 }}
                    transition={{ duration: 0.5 }}
                    className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white mb-6`}
                  >
                    <value.icon size={24} />
                  </motion.div>

                  <h3 className="relative text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
                    {value.title}
                  </h3>
                  <p className="relative text-neutral-600 dark:text-neutral-400 leading-relaxed text-sm">
                    {value.description}
                  </p>

                  <motion.div
                    className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${value.color} origin-left`}
                    initial={{ scaleX: 0 }}
                    whileHover={{ scaleX: 1 }}
                    transition={{ duration: 0.3 }}
                  />
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* Visual Culture Section */}
      <section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            {/* Visual */}
            <FadeIn>
              <div className="relative">
                <div className="relative aspect-square">
                  {/* Animated rings */}
                  <motion.div
                    className="absolute inset-0"
                    animate={{ rotate: 360 }}
                    transition={{
                      duration: 30,
                      repeat: Infinity,
                      ease: "linear",
                    }}
                  >
                    {[...Array(3)].map((_, i) => (
                      <div
                        key={i}
                        className="absolute inset-0 rounded-full border border-dashed border-white/10"
                        style={{
                          transform: `scale(${0.6 + i * 0.2})`,
                        }}
                      />
                    ))}
                  </motion.div>

                  {/* Center content */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      whileHover={{ scale: 1.05 }}
                      className="text-center"
                    >
                      <motion.div
                        animate={{
                          scale: [1, 1.1, 1],
                        }}
                        transition={{
                          duration: 3,
                          repeat: Infinity,
                          ease: "easeInOut",
                        }}
                        className="w-32 h-32 rounded-full bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center mx-auto mb-6 shadow-2xl shadow-[hsl(0,100%,40%)]/30"
                      >
                        <span className="text-5xl">🤝</span>
                      </motion.div>
                      <h3 className="text-2xl font-bold mb-2">
                        Stronger Together
                      </h3>
                      <p className="text-neutral-400">Since 2005</p>
                    </motion.div>
                  </div>

                  {/* Floating value icons */}
                  {coreValues.map((value, i) => {
                    const positions = [
                      { top: "10%", left: "10%" },
                      { top: "10%", right: "10%" },
                      { bottom: "10%", left: "10%" },
                      { bottom: "10%", right: "10%" },
                    ];
                    return (
                      <motion.div
                        key={value.title}
                        className="absolute"
                        style={positions[i]}
                        initial={{ opacity: 0, scale: 0 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ delay: i * 0.2 }}
                        whileHover={{ scale: 1.2 }}
                      >
                        <div
                          className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center shadow-lg`}
                        >
                          <value.icon size={24} className="text-white" />
                        </div>
                      </motion.div>
                    );
                  })}
                </div>
              </div>
            </FadeIn>

            {/* Content */}
            <FadeIn direction="right" delay={0.2}>
              <div>
                <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
                  Our Community
                </span>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                  More Than a{" "}
                  <span className="text-[hsl(0,100%,55%)]">Workplace</span>
                </h2>
                <p className="text-lg text-neutral-400 mb-8 leading-relaxed">
                  At TCM Sales & Marketing, we&apos;re not just colleagues—we&apos;re
                  a family. We believe in creating an environment where everyone
                  can thrive, grow, and make a meaningful impact.
                </p>

                <div className="space-y-4">
                  {[
                    "Supportive work environment",
                    "Opportunities for growth",
                    "Work-life balance",
                    "Community involvement",
                  ].map((item, index) => (
                    <motion.div
                      key={item}
                      initial={{ opacity: 0, x: -20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: index * 0.1 }}
                      whileHover={{ x: 10 }}
                      className="flex items-center gap-4 group cursor-default"
                    >
                      <motion.div
                        whileHover={{ scale: 1.2, rotate: 360 }}
                        transition={{ duration: 0.3 }}
                        className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                      >
                        <StarIcon
                          size={14}
                          className="text-[hsl(0,100%,55%)] group-hover:text-white transition-colors"
                        />
                      </motion.div>
                      <span className="text-neutral-300 font-medium group-hover:text-white transition-colors">
                        {item}
                      </span>
                    </motion.div>
                  ))}
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Quote Section */}
      <section className="py-20 bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(30,100%,97%)] dark:from-neutral-900 dark:to-neutral-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <motion.div
              initial={{ scale: 0 }}
              whileInView={{ scale: 1 }}
              viewport={{ once: true }}
              className="text-6xl mb-8"
            >
              💬
            </motion.div>
          </FadeIn>
          <FadeIn delay={0.1}>
            <blockquote className="text-2xl sm:text-3xl lg:text-4xl font-medium text-neutral-800 dark:text-neutral-200 leading-relaxed mb-8">
              &ldquo;We believe that we have an obligation to serve others
              because we have been given so much.&rdquo;
            </blockquote>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="flex items-center justify-center gap-3">
              <div className="w-12 h-0.5 bg-[hsl(0,100%,40%)]" />
              <span className="text-neutral-500 dark:text-neutral-400 font-medium">
                TCM Sales & Marketing
              </span>
              <div className="w-12 h-0.5 bg-[hsl(0,100%,40%)]" />
            </div>
          </FadeIn>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
        {/* Background pattern */}
        <div className="absolute inset-0 opacity-10">
          <svg
            className="w-full h-full"
            viewBox="0 0 100 100"
            preserveAspectRatio="none"
          >
            <pattern
              id="grid-culture"
              width="10"
              height="10"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 10 0 L 0 0 0 10"
                fill="none"
                stroke="white"
                strokeWidth="0.5"
              />
            </pattern>
            <rect width="100%" height="100%" fill="url(#grid-culture)" />
          </svg>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
              Want to Be Part of Our Story?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              We&apos;re always looking for passionate individuals who share our
              values and want to make a difference.
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <AnimatedButton
                href="/contact"
                variant="secondary"
                size="lg"
                icon={<ArrowRightIcon size={18} />}
              >
                Get in Touch
              </AnimatedButton>
              <AnimatedButton href="/what-we-do" variant="outline" size="lg">
                <span className="text-white">Learn What We Do</span>
              </AnimatedButton>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}