
import React from 'react';
import { ShieldCheck, Snowflake, MapPin, Heart, Target, Users } from 'lucide-react';

const AboutPage: React.FC = () => {
  return (
    <div className="min-h-screen bg-white dark:bg-slate-900 pb-24 animate-fade-in-up">

      {/* Hero */}
      <section className="relative py-10 md:py-24 overflow-hidden">
        <div className="container mx-auto px-4 relative z-10 text-center">
          <span className="text-themePrimary font-black tracking-widest uppercase text-xs mb-3 block font-bangla">আমাদের গল্প</span>
          <h1 className="text-3xl md:text-6xl font-black mb-4 md:mb-8 font-bangla text-black dark:text-white leading-tight">
            খাঁটিত্বের ঐতিহ্য, <br /><span className="text-themePrimary">আমাদের শপ</span>
          </h1>
          <p className="text-sm md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto font-bangla leading-relaxed px-2">
            আমরা প্রতিটি ঘরে পৌঁছে দিচ্ছি বিশুদ্ধ এবং স্বাস্থ্যকর পণ্য।
          </p>
        </div>
        <div className="absolute top-0 right-0 w-72 h-72 bg-red-50 dark:bg-red-950/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
      </section>

      {/* Stats — 2×2 on mobile */}
      <section className="py-8 md:py-16 container mx-auto px-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-8">
          {[
            { label: 'সন্তুষ্ট গ্রাহক', value: '৫০,০০০+', icon: <Heart className="text-themePrimary" size={20} /> },
            { label: 'সফল ডেলিভারি', value: '১০,০০০+', icon: <MapPin className="text-themePrimary" size={20} /> },
            { label: 'সেরা প্রোডাক্ট', value: '২৫+', icon: <Snowflake className="text-themePrimary" size={20} /> },
            { label: 'বছরের অভিজ্ঞতা', value: '৫+', icon: <ShieldCheck className="text-themePrimary" size={20} /> },
          ].map((stat, i) => (
            <div key={i} className="p-5 md:p-10 bg-white dark:bg-slate-800 rounded-[24px] md:rounded-[40px] border border-slate-100 dark:border-slate-700 text-center shadow-sm hover:shadow-lg transition-all">
              <div className="w-10 h-10 md:w-12 md:h-12 bg-themePrimary/10 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-3 md:mb-6">
                {stat.icon}
              </div>
              <p className="text-2xl md:text-4xl font-black text-black dark:text-white mb-1">{stat.value}</p>
              <p className="text-slate-500 font-bangla font-bold uppercase tracking-widest text-[9px] md:text-[10px]">{stat.label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Why us */}
      <section className="py-8 md:py-20 bg-slate-50 dark:bg-slate-800/50">
        <div className="container mx-auto px-4 flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
          <div className="lg:w-1/2 w-full">
            <img
              src="https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&q=80&w=800"
              alt="Our Story"
              className="rounded-[32px] md:rounded-[60px] shadow-xl w-full object-cover"
            />
          </div>
          <div className="lg:w-1/2 space-y-5 md:space-y-8">
            <h2 className="text-2xl md:text-4xl font-black font-bangla text-black dark:text-white">কেন আমরা আলাদা?</h2>
            {[
              { icon: Target, title: 'আমাদের লক্ষ্য', desc: 'প্রাকৃতিক এবং নির্ভরযোগ্য পণ্য দেশের প্রতিটি প্রান্তে পৌঁছে দেওয়া।' },
              { icon: ShieldCheck, title: 'বিশুদ্ধতার গ্যারান্টি', desc: 'পণ্য সংগ্রহের ক্ষেত্রে আমরা সর্বোচ্চ সতর্কতা নিশ্চিত করি।' },
              { icon: Users, title: 'উন্নত পরিষেবা', desc: 'গ্রাহকদের সন্তুষ্টিই আমাদের প্রথম অগ্রাধিকার।' },
            ].map(({ icon: Icon, title, desc }) => (
              <div key={title} className="flex gap-4 md:gap-6 items-start">
                <div className="w-10 h-10 md:w-12 md:h-12 bg-themePrimary/10 rounded-xl md:rounded-2xl flex items-center justify-center shrink-0 text-themePrimary">
                  <Icon size={20} />
                </div>
                <div>
                  <h4 className="text-base md:text-xl font-black font-bangla mb-1 text-black dark:text-white">{title}</h4>
                  <p className="text-slate-500 dark:text-slate-400 font-bangla leading-relaxed text-sm">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default AboutPage;
