import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { AnimatedCounter } from '@/components/ui/AnimatedCounter'

export default function CommunitiesPage() {
  return (
    <div className="pt-32 pb-24 sm:pt-40 sm:pb-32 bg-white relative overflow-hidden">
      <div className="absolute top-1/4 left-0 w-[500px] h-[500px] bg-blue-100 rounded-full blur-3xl -z-10 -translate-x-1/2 pointer-events-none" />

      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <SectionHeader
          label="Nearle for People"
          heading={
            <>
              Just a Click
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                India's #1 Neighbourhood Commerce app
              </span>
            </>
          }
          sub="Join the futuristic community lifestyle living. Be a part of a neighbourhood of like-minded people. Enjoy the comfort of elegant living with Nearle."
          align="center"
          className="mb-16"
        />

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
          {[
            { t: 'Awareness at a Touch', d: 'Pick hot deals within your neighbourhood.', cat: 'Gadgets' },
            { t: 'Best of Both Worlds', d: 'Ease of World Wide Web, fulfilled by local business.', cat: 'Attractions' },
            { t: 'Lifestyle', d: 'Enjoy the privilege of upmarket shopping.', cat: 'Fashion & Shopping' },
            { t: 'Join the #1 Neighbourhood app', d: 'Its just a Click – For All your needs in your neighbourhood.', cat: 'Fun Things' },
            { t: 'Amazingly Fresh', d: 'Get your fruits, vegetables and daily essentials instantly.', cat: 'Drinks & Summer' },
            { t: 'Restaurants, Take aways', d: 'You choose your best all within your reach.', cat: 'Food' },
            { t: 'Never Before Experience', d: 'Customized services for neighbourhood.', cat: 'Tips' },
            { t: 'Home Services @ your convenience', d: 'Home services at your convenience - Like never experienced before.', cat: 'Friends' },
          ].map((item) => (
            <GlassCard key={item.t} className="border-purple-lavender/30">
              <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-purple-primary block mb-2">{item.cat}</span>
              <h4 className="font-display font-bold text-lg text-nearle-dark mb-2">{item.t}</h4>
              <p className="font-body text-nearle-mid text-sm leading-relaxed">{item.d}</p>
            </GlassCard>
          ))}
        </div>

        <div className="bg-nearle-bgsoft rounded-3xl p-10 text-center border border-purple-lavender/30">
          <SectionHeader
            heading="Join the #1 Neighbourhood app"
            sub="Get all your needs - delivered at your fingertips - from your local store to your home - Instantly!"
            align="center"
            className="mb-12"
          />

          <div className="grid grid-cols-2 sm:grid-cols-4 gap-8 mb-12">
            {[
              { val: 100, lbl: 'Restaurants' },
              { val: 100, lbl: 'Green grocers' },
              { val: 100, lbl: 'Home etailers' },
              { val: 100, lbl: 'Service Providers' },
            ].map((stat) => (
              <div key={stat.lbl}>
                <div className="font-display font-extrabold text-3xl sm:text-4xl text-purple-deep mb-2">
                  <AnimatedCounter value={stat.val} suffix="+" />
                </div>
                <div className="font-body text-xs sm:text-sm font-bold text-nearle-mid uppercase tracking-wider">{stat.lbl}</div>
              </div>
            ))}
          </div>

          <div className="inline-block p-6 bg-white rounded-2xl shadow-nearle-sm border border-purple-lavender/40">
            <h4 className="font-display font-bold text-xl text-nearle-dark mb-2">GET READY NOW</h4>
            <p className="font-body text-nearle-mid mb-6">Download Nearle. Enjoy the benefits of Neighbourhood Living.</p>
            <button className="bg-purple-deep text-white rounded-full px-8 py-3 font-bold hover:bg-purple-primary transition-colors shadow-cta">
              Proudly Support your neighbourhood business
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
