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

export default function BusinessesPage() {
  return (
    <div className="pt-32 pb-24 sm:pt-40 sm:pb-32 bg-nearle-bgsoft relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <SectionHeader
          label="Nearle for Business"
          heading={
            <>
              Reach the right people
              <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. Nearle is built to help businesses like Yours. Get set in minutes and delight the Neighbourhood with a personalized online experience."
          align="center"
          className="mb-16"
        />

        <div className="bg-white rounded-3xl p-8 sm:p-12 shadow-nearle-md border border-purple-lavender/30 mb-20 text-center">
          <h3 className="font-display font-extrabold text-2xl text-purple-deep mb-4">Be a part of community</h3>
          <p className="font-body text-nearle-dark text-lg max-w-2xl mx-auto mb-8">
            Be a part of a community of like-minded people. Let's brand your businesses on Nearle and reach out to your neighbourhood with ease.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 font-mono uppercase tracking-widest text-sm font-bold text-purple-primary">
            <span>Get Online</span>
            <span className="hidden sm:block">•</span>
            <span>Get Noticed</span>
            <span className="hidden sm:block">•</span>
            <span>Get Simplified</span>
          </div>
        </div>

        <SectionHeader
          heading="Build your brand with Nearle"
          sub="Together, we'll move your business forward."
          align="left"
          className="mb-12"
        />

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-20">
          {[
            { t: 'Get Online', d: 'Establish a local online presence with Nearle and empower your customers to interact with you.' },
            { t: 'Become a Partner', d: 'Be part of a strong community of like-minded people. A Unified partner for all neighbourhood needs.' },
            { t: 'Build your brand', d: "Build your brand with Nearle. Let's brand your businesses on Nearle and reach-out to your community with ease." },
            { t: 'Huge Opportunity', d: 'Unlock revenue opportunities and marketing strategies that will take your business further.' },
            { t: 'Delight your customers', d: 'Delight your customers in the neighbourhood with a personalized online experience.' },
            { t: 'Unique model', d: "Business looks at Neighbourhood commerce as an Effective model to meet today's consumer needs." },
            { t: 'Reach right audience', d: 'We target your ideal customer — people in your neighborhood search for what you offer.' },
            { t: 'Increase your customers', d: 'Increase walk-in customers. We target your ideal customer — people in your neighborhood search for what you offer.' },
            { t: '...and more', d: 'Introduce your business to your Neighbourhood. Compete with online business through your offline store.' },
          ].map((feat) => (
            <GlassCard key={feat.t} className="flex flex-col border-purple-lavender/40 hover:border-purple-primary">
              <h4 className="font-display font-bold text-lg text-nearle-dark mb-3">{feat.t}</h4>
              <p className="font-body text-nearle-mid text-sm leading-relaxed">{feat.d}</p>
            </GlassCard>
          ))}
        </div>

        <div className="text-center bg-purple-deep text-white rounded-3xl p-12 shadow-cta">
          <h3 className="font-display font-extrabold text-3xl mb-4">Wanted to know how?</h3>
          <p className="font-body text-purple-soft text-lg mb-8">
            Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood.
          </p>
          <button className="bg-white text-purple-deep rounded-full px-8 py-3 font-bold hover:bg-nearle-bgsoft transition-colors shadow-nearle-md">
            Talk to our Neighbourhood Expert
          </button>
        </div>
      </div>
    </div>
  )
}
