import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { ArrowRight, Globe, Users, Target, Award, Heart, TrendingUp, Shield, CheckCircle2 } from "lucide-react"

const whatsappUrl =
  "https://wa.me/918796625333?text=Hello%2C%20I%20am%20interested%20in%20Agmont%20Advisory%27s%20services.%20Please%20guide%20me."

const calendarUrl = "https://advisory-in.youcanbook.me/"

export const metadata = {
  title: "Why Choose Agmont Advisory | Certified Experts",
  description: "Discover why 500+ businesses trust Agmont Advisory. Global presence, certified experts, one-stop solution for all your advisory needs.",
}

export default function WhyChooseUsPage() {
  const reasons = [
    {
      icon: Globe,
      title: "Global Presence",
      description:
        "Active across Europe, Asia, and North America with partnerships in England. We bring international expertise to your doorstep.",
    },
    {
      icon: Users,
      title: "Expert Team",
      description:
        "CA, CMA, CS, and CISA-certified professionals dedicated to your success with deep industry knowledge.",
    },
    {
      icon: Target,
      title: "One-Stop Solution",
      description:
        "All business-related services available under one roof. From setup to scaling, we cover everything.",
    },
    {
      icon: Award,
      title: "Industry Expertise",
      description:
        "Serving 10+ industries with specialized knowledge and sector-specific solutions tailored to your needs.",
    },
    {
      icon: Heart,
      title: "Client-Focused",
      description: "Customized solutions tailored to your unique business needs. Your success is our priority.",
    },
    {
      icon: TrendingUp,
      title: "Proven Track Record",
      description: "Growing daily thanks to client confidence and satisfaction. Our results speak for themselves.",
    },
    {
      icon: Shield,
      title: "Trust & Transparency",
      description: "Long-term relationships based on trust, transparency, and measurable results.",
    },
    {
      icon: CheckCircle2,
      title: "Compliance Excellence",
      description: "Stay compliant with changing regulations. We keep you updated and protected.",
    },
  ]

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="py-24 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-5xl md:text-6xl font-bold text-balance">{"Why Choose Agmont Advisory?"}</h1>
            <p className="text-xl text-slate-300 leading-relaxed">
              {
                "We build long-term relationships based on trust, transparency, and measurable results. Discover what sets us apart."
              }
            </p>
          </div>
        </div>
      </section>

      {/* Reasons Grid */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
            {reasons.map((reason, i) => {
              const Icon = reason.icon
              return (
                <Card key={i} className="border-2">
                  <CardContent className="p-6 space-y-4">
                    <div className="w-14 h-14 rounded-xl bg-slate-900 flex items-center justify-center">
                      <Icon className="h-7 w-7 text-white" />
                    </div>
                    <h3 className="text-xl font-bold text-slate-900">{reason.title}</h3>
                    <p className="text-muted-foreground leading-relaxed">{reason.description}</p>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Value Proposition */}
      <section className="py-24 bg-slate-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight text-balance">
                {"Dedicated to Your Success"}
              </h2>
              <div className="space-y-4 text-lg text-slate-700 leading-relaxed">
                <p>
                  {
                    "Agmont Advisory continues to grow daily thanks to client confidence. We work across many industries including financial, energy, business services, and consumer products."
                  }
                </p>
                <p>
                  {
                    "Our team delivers practical, actionable recommendations that drive growth, operational excellence, and compliance accuracy. We work closely with clients to understand their challenges and offer customized solutions."
                  }
                </p>
                <p>
                  {
                    "With a presence across three continents and partnerships with leading institutions, we bring global expertise to solve your local business challenges."
                  }
                </p>
              </div>
              <Button asChild size="lg" className="bg-slate-900 hover:bg-slate-800 text-lg h-14">
                <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
                  {"Partner With Us"} <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
            </div>
            <div className="relative h-[500px] rounded-2xl overflow-hidden">
              <img
                src="/placeholder.svg?height=600&width=800"
                alt="Professional team collaboration"
                className="object-cover w-full h-full"
              />
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-slate-900 text-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-4xl mx-auto text-center space-y-8">
            <h2 className="text-4xl md:text-5xl font-bold text-balance">{"Experience the Difference"}</h2>
            <p className="text-xl text-slate-300 leading-relaxed">
              {"Join hundreds of satisfied clients who have transformed their businesses with our expert guidance."}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Button asChild size="lg" className="bg-white text-slate-900 hover:bg-slate-100 text-lg px-8 h-14">
                <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
                  {"Get Started Today"} <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white/10 text-lg px-8 h-14 bg-transparent"
              >
                <Link href="/contact">{"Contact Us"}</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}