"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { useTheme } from "next-themes";
import { FaChevronDown } from "react-icons/fa";

export default function AboutPage() {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  const isDark = resolvedTheme === "dark";

  const faqs = [
    { question: "What is Prima EV?", answer: "Prima EV is an innovative electric vehicle platform that connects future buyers with futuristic sports motor bike that emphasize advanced technology." },
    { question: "What types of motor bikes are avaliable on Prima EV?", answer: "We focus on high-tech sports motor bikes, ranging from high performance EVs to futuristic concept motor bikes with aerodynamics designs and intelligent systems." },
    { question: "Can I schedule a testdrive before purchasing?", answer: "Absolutly, we offer test drive options at selected locations that can be booked through our platform." },
    { question: "Are the motor bikes on Prima EV street-legal worldwide?", answer: "Our vehicles are designed to meet international standards, but regulations may vary by country. We recommened checking with your local authorities or contacting our support team for region-specific compliance details." },
    { question: "How does the motor bikes buying process work on Prima EV?", answer: "Simply choose your dream motor bike, submit a request through our platform, and our team will assist you through the entaire transaction and delivery process." },
    { question: "Is fainancing or installement avaliable?", answer: "Yes, we partner with various financial institutions to offer flexible financing option for buyers." },
    { question: "How long does delivery take after purchase?", answer: "Delivery times vary depending on the model and location. On average, delivery takes around 2-6 weeks." },
  ];

  const features = [
    { name: "Amanuel Teshome", description: "Co-founder & Business Strategist", img: "/photo1.jpg", link1: "https://www.linkedin.com/in/amanuel-teshome", link2: "https://twitter.com/amanuel_teshome" },
    { name: "Helina Damte", description: "Blockchain Advisor", img: "/photo2.jpg", link1: "https://www.linkedin.com/in/helina-damte", link2: "https://twitter.com/helina_damte" },
    { name: "Bezawit Semu", description: "Co-founder & Project Manager", img: "/photo3.jpg", link1: "https://www.linkedin.com/in/bezawit-semu", link2: "https://twitter.com/bezawit_se" },
    { name: "Yordanos Abay", description: "UI/UX Designer & Front-End Developer", img: "/photo4.jpg", link1: "https://www.linkedin.com/in/yordanos-abay", link2: "https://twitter.com/yordanos_abay" },
    { name: "Tsion Shimelis", description: "Backend Developer", img: "/photo5.jpg", link1: "https://www.linkedin.com/in/tsion-shimelis", link2: "https://twitter.com/tsion_sh" },
    { name: "Selamawit Shimelis", description: "Full-Stack Developer", img: "/photo6.jpg", link1: "https://www.linkedin.com/in/selamawit-shimelis", link2: "https://twitter.com/selamawit_sh" },
  ];

  const missions = [
    { title: "SUSTAINABILITY", img: "/mission1.jpg", desc: "Constant improvement in technology and performance." },
    { title: "INNOVATION", img: "/mission2.jpg", desc: "Commitment to a cleaner, greener future." },
    { title: "QUALITY", img: "/mission3.jpg", desc: "Premium craftsmanship in every detail." },
    { title: "CUSTOMER COMMITMENT", img: "/mission4.jpg", desc: "Long-term partnerships, not one-time sales." },
    { title: "IMPACT", img: "/mission5.jpg", desc: "Creating opportunities and supporting clean mobility ecosystems." },
  ];

  const toggleFAQ = (index: number) => setOpenIndex(openIndex === index ? null : index);

  return (
    <section className={`${isDark ? "bg-black/85 text-white" : "bg-emerald-100/40 text-emerald-900"} relative w-full overflow-hidden`}>

      {/* Responsive Styles */}
          <style>{`
  @media (max-width: 639px) {

    /* ----------- Reset Header Transforms ----------- */
    .-translate-y-160, .-translate-y-17, .-mb-180, .-translate-y-160 {
      transform: translateY(0) !important;
      margin-bottom: 1rem !important;
    }

    /* ----------- Mission & Vision Headers ----------- */
    h1.text-5xl, h3.text-3xl, h3.text-2xl {
      font-size: 1.8rem !important;
      line-height: 2.2rem !important;
    }

    /* ----------- Paragraph Text Scaling ----------- */
    p.text-xl, p.text-lg, p.text-base {
      font-size: 0.95rem !important;
      line-height: 1.5rem !important;
    }

    /* ----------- Padding & Container Adjustments ----------- */
    .px-47, .px-50, .px-12, .px-4 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    .max-w-7xl {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* ----------- Story Section ----------- */
    .max-w-7xl > .flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* ----------- Reduce spacing above sections ----------- */
    .mt-20, .mt-28, .mt-32 {
      margin-top: 2rem !important;
    }
  }
`}</style>

      {/* Header */}
      <div className={`relative z-10 max-w-7xl mx-auto px-12 py-32 text-center -translate-y-17 ${isDark ? "bg-emerald-950" : "bg-gradient-to-b from-emerald-400 to-emerald-100"}`}>
        <h1 className={`text-5xl ${isDark ? "text-emerald-50" : "text-emerald-950"}`}>About Prima EV Mobility</h1>
        <p className={`text-xl max-w-4xl mx-auto font-semibold leading-relaxed transform -translate-y-160 ${isDark ? "text-emerald-50" : "text-emerald-950"}`}>
          We are redefining electric mobility for Africa and beyond — blending innovation, sustainability, and elegant design to build the future of urban transport.
        </p>
        <div className="mt-5 flex justify-center transform -translate-y-160 -mb-180">
          <span className={`h-1 w-24 rounded-full ${isDark ? "bg-emerald-50" : "bg-emerald-950"}`}></span>
        </div>
      </div>

      {/* Video */}
      <div className="flex justify-center mt-10 px-4">
        <div className="group relative w-full max-w-5xl h-[350px]">
          <div className={`absolute inset-0 rounded-[20px] transition-transform duration-200 ${isDark ? "bg-gradient-to-r from-emerald-900 via-black to-emerald-900 opacity-20" : "bg-gradient-to-r from-emerald-300 via-emerald-400 to-emerald-300 opacity-20"}`}></div>
          <div className={`relative w-full h-full rounded-[20px] border-4 overflow-hidden cursor-pointer transition-all duration-500 ${isDark ? "border-emerald-500 shadow-2xl shadow-emerald-700/50" : "border-gray-300 shadow-2xl shadow-emerald-300/50"}`}>
            <iframe className="w-full h-full object-cover rounded-[20px]" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="Video" frameBorder="0" allowFullScreen></iframe>
          </div>
        </div>
      </div>

      {/* Our Story */}
      <div className={`max-w-7xl mx-auto mt-20 flex flex-col md:flex-row gap-6 p-6 rounded-[20px] ${isDark ? "bg-black border border-emerald-500" : "bg-white border border-emerald-200"}`}>
        <div className="flex-shrink-0 md:w-1/2">
          <img src="/scot1.jpg" alt="Prima EV" className="w-full h-80 object-cover rounded-xl"/>
        </div>
        <div className="md:w-1/2 flex flex-col justify-center">
          <h3 className={`text-3xl font-bold mb-4 ${isDark ? "text-emerald-900" : "text-emerald-700"}`}>Our Story</h3>
          <p className={`rounded-[20px] p-5 leading-relaxed ${isDark ? "bg-black text-emerald-50" : "bg-emerald-100/60 text-gray-700"}`}>
            Prima EV was founded with a clear vision: to accelerate the transition toward premium electric mobility in emerging and growing markets.<br/><br/>
            As part of AMT Business Group, Prima EV combines operational expertise, mobility innovation, and market insight to deliver world-class electric vehicles designed for both individual and commercial use.
          </p>
        </div>
      </div>

      {/* Missions */}
      {/* Missions */}
<div className="max-w-7xl mx-auto mt-20 text-center">
  <h3 className={`text-3xl md:text-5xl font-bold mb-5 ${isDark ? "text-emerald-900" : "text-emerald-700"}`}>Our Mission</h3>
  <p className={`text-lg md:text-xl mb-10 px-47 ${isDark ? "text-emerald-100" : "text-gray-700"}`}>To empower individuals and businesses with elegant, reliable, and intelligent electric mobility solutions that transform how cities move.</p>
  <div className="flex flex-wrap justify-center gap-7">
    {missions.map((mission, idx) => (
      <div key={idx} className="relative w-56 h-112 perspective group">
        <div className="relative w-full h-full transition-transform duration-500 transform-style preserve-3d group-hover:rotate-y-180 rounded-xl">
          
          {/* Front Side */}
          <img
            src={mission.img}
            alt={mission.title}
            className="absolute w-full h-full object-cover rounded-xl backface-hidden"
          />
          <p className="absolute w-full text-center font-bold text-xl top-24 backface-hidden text-emerald-600">{mission.title}</p>
          
          {/* Back Side */}
          <div
            className={`absolute w-full h-full rounded-xl flex items-center justify-center rotate-y-180 backface-hidden px-4 text-center transition-colors duration-500
              ${isDark ? "bg-emerald-600 text-white" : "bg-emerald-700 text-white"}
            `}
          >
            <span className="font-semibold">{mission.desc}</span>
          </div>

        </div>
      </div>
    ))}
  </div>
</div>
      

      {/* Our Vision */}
      <div className="max-w-7xl mx-auto mt-20 text-center">
        <h3 className={`text-3xl md:text-5xl font-bold mb-6 ${isDark ? "text-emerald-900" : "text-emerald-900"}`}>Our Vision</h3>
        <p className={`text-lg md:text-xl px-50 ${isDark ? "text-emerald-100" : "text-gray-700"}`}>
          To become a leading electric mobility brand across Africa and beyond, driving sustainability, innovation, and economic growth.
        </p>
      </div>

      {/* Why Choose */}
      <div className={`max-w-7xl mx-auto mt-10 p-8 rounded-[20px] ${isDark ? "bg-black border border-emerald-700" : "bg-white border border-emerald-200"}`}>
        <h3 className={`text-3xl md:text-5xl font-bold mb-6 ${isDark ? "text-emerald-900" : "text-emerald-900"}`}>Why Choose Prima EV?</h3>
        <ul className={`rounded-[20px] p-6 leading-relaxed space-y-3 ${isDark ? "bg-black text-emerald-100" : "bg-emerald-100/60 text-gray-700"}`}>
          <li>• Designed for African roads and urban environments</li>
          <li>• Business-ready fleet solutions</li>
          <li>• Reliable after-sales support</li>
          <li>• Flexible partnership and financing options</li>
          <li>• Built with global standards</li>
        </ul>
      </div>

      {/* FAQ Section */}
      <div className="max-w-3xl mx-auto px-6 py-20">
        <h2 className={`text-4xl font-bold mb-10 text-center ${isDark ? "text-emerald-900" : "text-emerald-700"}`}>Frequently Asked Questions</h2>
        <div className="space-y-4">
          {faqs.map((faq, index) => (
            <div key={index} className={`rounded-xl border overflow-hidden ${isDark ? "border-emerald-500 bg-black" : "border-emerald-200 bg-white"}`}>
              <button onClick={() => toggleFAQ(index)} className={`w-full flex justify-between items-center px-6 py-5 text-left font-semibold ${isDark ? "text-white" : "text-emerald-900"}`}>
                <span>{faq.question}</span>
                <FaChevronDown className={`transition-transform duration-300 ${openIndex === index ? "rotate-180" : ""}`} />
              </button>
              {openIndex === index && (
                <div className={`px-6 pb-5 leading-relaxed ${isDark ? "text-emerald-300" : "text-emerald-700"}`}>
                  {faq.answer}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Team Section */}
      <div className="max-w-7xl mx-auto mt-20 text-center">
        <h3 className={`text-2xl md:text-4xl font-bold mb-6 ${isDark ? "text-emerald-900" : "text-emerald-900"}`}><span className={`${isDark ? "text-emerald-50" : "text-emerald-950"}`}>Meet</span> Our Team</h3>
      <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-6 mb-20">
        {features.map((feature, idx) => (
          <div key={idx} className={`relative w-[360px] h-[300px] flex flex-col items-start justify-start rounded-[24px] border overflow-hidden transition-all duration-500 ${isDark ? "bg-black border-emerald-500 text-white" : "bg-white border-gray-300 text-emerald-900"}`}>
            <div className="px-7 py-5">
              <img src={feature.img} alt={feature.name} className="w-27 h-27 rounded-full object-cover" />
            </div>
            <div className="pb-6 mt-auto space-y-2 ml-6">
              <h3 className={`text-2xl font-semibold ${isDark ? "text-emerald-50" : "text-emerald-700"}`}>{feature.name}</h3>
              <p>{feature.description}</p>
              <span className="inline-flex flex-row space-x-2 mt-3">
                <Link href={feature.link1} target="_blank" className={`border px-3 w-20 h-7 rounded ${isDark ? "border-emerald-400" : "border-emerald-800"}`}>LinkedIn</Link>
                <Link href={feature.link2} target="_blank" className={`border px-3 w-20 h-7 rounded ${isDark ? "border-emerald-400" : "border-emerald-800"}`}>Twitter</Link>
              </span>
            </div>
          </div>
        ))}
      </div>
      </div>

    </section>
  );
}