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

export default function AboutPage() {
  return (
    <div className="pt-32 pb-24 sm:pt-40 sm:pb-32 bg-white relative overflow-hidden">
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-purple-soft/40 rounded-full blur-3xl -z-10 translate-x-1/2 -translate-y-1/2 pointer-events-none" />
      
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <SectionHeader
          label="About Us"
          heading={
            <>
              We are Nearle
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                We build Neighbourhoods
              </span>
            </>
          }
          sub="Nearle is India's first hyper-local managed 'Neighbourhood living platform' which brings all the amenities and requirements of residents to their fingertips. We are redefining modern urban living by providing never before convenience."
          align="center"
          className="mb-16"
        />

        <div className="grid md:grid-cols-2 gap-8 mb-20">
          <GlassCard className="flex flex-col border-purple-lavender/50">
            <h3 className="font-display font-extrabold text-xl text-nearle-dark mb-4">Our Mission</h3>
            <p className="font-body text-nearle-mid leading-relaxed">
              To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.
            </p>
          </GlassCard>

          <GlassCard className="flex flex-col border-purple-lavender/50">
            <h3 className="font-display font-extrabold text-xl text-nearle-dark mb-4">Our Vision</h3>
            <p className="font-body text-nearle-mid leading-relaxed">
              Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.
            </p>
          </GlassCard>
        </div>

        <div className="mb-24">
          <SectionHeader
            heading="Why Nearle"
            sub="Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods."
            align="left"
            className="mb-10"
          />
          <div className="bg-nearle-bgsoft rounded-3xl p-8 sm:p-12 border border-nearle-border">
            <h3 className="font-display font-bold text-2xl text-nearle-dark mb-4">Don't miss to build your brand with Nearle</h3>
            <p className="font-body text-nearle-mid text-lg mb-10 max-w-2xl">
              Delight your neighbourhoods with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
            </p>

            <div className="grid grid-cols-3 gap-6">
              {[
                { label: 'Customers', val: 100 },
                { label: 'Business', val: 100 },
                { label: 'Neighbourhoods', val: 100 },
              ].map((stat) => (
                <div key={stat.label} className="text-center sm:text-left">
                  <div className="font-display font-extrabold text-4xl text-purple-deep mb-2">
                    <AnimatedCounter value={stat.val} suffix="+" />
                  </div>
                  <div className="font-body text-sm font-bold text-nearle-mid uppercase tracking-wider">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <SectionHeader
          label="Leadership"
          heading="Team Nearle"
          sub="Nearle is India's first hyper-local managed 'Neighbourhood living platform' which brings all the amenities and requirements of residents to their fingertips. With stores located within the neighbourhood. Successfully spreading your brand message to your Neighbourhood is the quickest way to generate new revenue stream. Nearle has blossomed into a proven business model Based on the core concept of 'Boost business by trust'."
          align="center"
        />
      </div>
    </div>
  )
}
