'use client';

import React from 'react';
import aboutAppImg from '../../public/about-app.png';
import { Sparkles, Headphones, BookOpen, TrendingUp, ShieldCheck } from 'lucide-react';

export default function AboutAppSection() {
  const highlights = [
    { icon: Headphones, label: 'Listening & Speaking' },
    { icon: BookOpen, label: 'Structured B1 Prep' },
    { icon: TrendingUp, label: 'Real-time Analytics' },
  ];

  return (
    <section id="about" className="w-full bg-[#FBCC04] bg-linear-to-b from-[#FECE00] via-[#F7C400] to-[#EDB800] py-16 sm:py-24 lg:py-28 overflow-hidden relative">
      {/* Background Decorative Ambient Circles */}
      <div className="absolute -top-32 -left-32 w-96 h-96 bg-white/10 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute -bottom-32 -right-32 w-96 h-96 bg-black/5 rounded-full blur-3xl pointer-events-none" />

      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 relative z-10">
        {/* Left Side: About Text & App Store Badges */}
        <div className="w-full lg:w-1/2 flex flex-col items-start text-left max-w-xl">
          {/* Top Tag Badge */}
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-black text-[#FECE00] text-xs font-black uppercase tracking-wider mb-4 shadow-sm">
            <Sparkles className="w-3.5 h-3.5 text-[#FECE00]" />
            <span>Official Mobile Application</span>
          </div>

          {/* Cursive Heading matching the reference image */}
          <h2 className="font-courgette text-4xl sm:text-5xl md:text-6xl text-gray-900 font-normal leading-tight mb-6 tracking-tight">
            About<br />
            Apka German School
          </h2>

          {/* Description Paragraph */}
          <p className="font-sans text-sm sm:text-base text-gray-900 font-medium leading-relaxed mb-6">
            Apka German School is dedicated to helping learners of all levels master
            the German language. Through engaging lessons in Listening, Reading,
            Writing, and Speaking, we make learning both fun and effective. With our
            user-friendly app and personalized progress tracking, you&apos;ll build
            confidence and fluency at your own pace. Join our community of
            learners and start your journey to mastering German today.
          </p>

          {/* Key Feature Highlight Chips */}
          {/* <div className="flex flex-wrap items-center gap-2.5 mb-8">
            {highlights.map((item, idx) => {
              const Icon = item.icon;
              return (
                <div
                  key={idx}
                  className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/80 backdrop-blur-xs border border-black/10 text-xs font-extrabold text-black shadow-xs hover:bg-white transition-all"
                >
                  <Icon className="w-3.5 h-3.5 text-black" />
                  <span>{item.label}</span>
                </div>
              );
            })}
          </div> */}

          {/* App Store Download Badges */}
          <div className="flex flex-wrap items-center gap-4">
            {/* Google Play Store Badge */}
            <button
              type="button"
              onClick={() => window.open('https://play.google.com/store/apps/details?id=com.apkagermanschool.apka_german_school&hl=en', '_blank', 'noopener,noreferrer')}
              className="inline-block transition-all duration-300 hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden cursor-pointer border-0 p-0 bg-transparent"
            >
              <div className="bg-black hover:bg-gray-900 text-white px-6 py-3 rounded-2xl border border-black flex items-center gap-3.5">
                <svg className="w-7 h-7 fill-current" viewBox="0 0 24 24">
                  <path d="M3.609 1.814L13.792 12 3.61 22.186a2.372 2.372 0 0 1-.61-1.586V3.4a2.37 2.37 0 0 1 .609-1.586zm11.597 11.597l2.42 2.42-12.012 6.935 9.592-9.355zm2.842-1.642l3.356 1.938c.797.46.797 1.208 0 1.668l-3.356 1.938-2.585-2.585 2.585-2.585zM3.609 2.819l12.012 6.935-2.42 2.42L3.609 2.819z" />
                </svg>
                <div className="flex flex-col text-left leading-none">
                  <span className="text-[10px] uppercase font-semibold text-gray-300 tracking-wider">
                    GET IT ON
                  </span>
                  <span className="text-base font-extrabold text-white tracking-tight mt-0.5">
                    Google Play
                  </span>
                </div>
              </div>
            </button>

            {/* Apple App Store Badge */}
            <a
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block transition-all duration-300 hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden"
            >
              <div className="bg-black hover:bg-gray-900 text-white px-6 py-3 rounded-2xl border border-black flex items-center gap-3.5">
                <svg className="w-7 h-7 fill-current" viewBox="0 0 24 24">
                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.32c.67-.82 1.12-1.96.99-3.1-.97.04-2.14.65-2.84 1.46-.62.72-1.16 1.88-1.01 3 .08.01.16.02.24.02 1.08 0 2.15-.65 2.62-1.38z" />
                </svg>
                <div className="flex flex-col text-left leading-none">
                  <span className="text-[10px] uppercase font-semibold text-gray-300 tracking-wider">
                    Download on the
                  </span>
                  <span className="text-base font-extrabold text-white tracking-tight mt-0.5">
                    App Store
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div>

        {/* Right Side: Dual Mobile App Mockups Image from Assets with Float Effect */}
        <div className="w-full lg:w-1/2 flex justify-center lg:justify-end items-center">
          <div className="relative max-w-[560px] w-full transform hover:scale-105 transition-transform duration-500">
            {/* Soft Ambient Shadow Underneath */}
            <div className="absolute inset-0 bg-black/15 rounded-full blur-2xl transform translate-y-8 pointer-events-none" />
            <img
              src={aboutAppImg.src}
              alt="Apka German School Mobile App Preview"
              className="w-full max-h-[720px] h-auto object-contain filter drop-shadow-2xl select-none relative z-10"
            />
          </div>
        </div>
      </div>
    </section>
  );
}