import Link from "next/link"
import { ArrowRight, Target, Eye, Heart, MapPin, Mail, Users, TrendingUp, Globe, Handshake } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

export default function AboutPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeader />

      {/* Hero Section */}
      <section className="relative pt-32 pb-16 lg:pt-40 lg:pb-24">
        <div className="absolute inset-0 bg-gradient-to-br from-muted/50 to-background -z-10" />
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-bold tracking-tight text-balance">
              About KWACCIMA
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed text-pretty">
              Building bridges between business, government, and communities for sustainable economic development in
              Kwara State.
            </p>
          </div>
        </div>
      </section>

      {/* History Section */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <div className="relative h-[400px] lg:h-[500px] rounded-lg overflow-hidden shadow-xl order-2 lg:order-1">
              <img
                src="/kwara-state-ilorin-cityscape.jpg"
                alt="Kwara State landscape"
                className="object-cover w-full h-full"
              />
            </div>
            <div className="space-y-6 order-1 lg:order-2">
              <h2 className="text-3xl md:text-4xl font-serif font-bold text-balance">Our History & Heritage</h2>
              <p className="text-muted-foreground leading-relaxed">
                The Kwara Chamber of Commerce, Industry, Mines and Agriculture (KWACCIMA) is a voluntary, non-governmental organization comprising of business and professionals who have joined together for 
                the purpose of promoting the civic, commercial and industrial progress of Kwara state.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                KACCIMA was established in 1965 and incorporated as an association in 1974. It was set up to promote and protect trade and industry; and to represent and express 
                the opinion of the business community on matters affecting trade and industry in Kwara State in particular and Nigeria in general.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                Today, KWACCIMA stands as a trusted voice in economic policy discussions, a catalyst for business
                development, and a bridge connecting local enterprises to national and international opportunities.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Mission, Vision, Values */}
      <section className="py-16 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Target className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Our Mission</h3>
                <p className="text-muted-foreground leading-relaxed">
                  To ensure an enabling business operating environment through advocacy towards deepening best business practices among members, to bring issues affecting business in the State to the public domain through sensitization and proper information dissemination and using appropriate channels 
                  acceptable to the best universal standards of chambers of commerce anywhere across the globe.
                </p>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Eye className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Our Vision</h3>
                <p className="text-muted-foreground leading-relaxed">
                  To promote and protect commerce, industry, mines and agriculture and represent and express the opinion of the organized private sector on 
                  issues affecting the growth of commerce, industry, mines and agriculture in Kwara state in particular and Nigeria in general.
                </p>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Heart className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Our Core Values</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• <strong>REPRESENTATION</strong> - To be the "Voice of Business" by being aware of and proactively addressing issues and opportunities (Advocating) through a united voice.</li>
                  <li>• <strong>INTEGRITY</strong> - Make objective and responsible decisions displaying accountability to the membership while concurrently maintaining consistency of the Chamber Brand.</li>
                  <li>• <strong>NETWORKING</strong> - Providing a variety of opportunity of members to connect and build their professional and social networks.</li>
                  <li>• <strong>COMMITMENT</strong> - To support and honor the mission, vision, and values of the Chamber.</li>
                  <li>• <strong>APPROACHABILITY</strong> - To promote the fact that the Chamber is here for everyone; no business will be seen as too small, all matters are important and all business and business related issues are welcomed by the Chamber.</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Location & Contact */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <div className="space-y-6">
              <h2 className="text-3xl md:text-4xl font-serif font-bold text-balance">Visit KWACCIMA House</h2>
              <div className="space-y-4">
                <div className="flex items-start gap-4">
                  <MapPin className="h-6 w-6 text-accent mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold">Location</h3>
                    <p className="text-muted-foreground">
                      Afon junction, along Ajase-ipo Road, Ganmo, Kwara State, Nigeria.
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <Mail className="h-6 w-6 text-accent mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold">Email</h3>
                    <p className="text-muted-foreground">Kwarachamber@gmail.com</p>
                  </div>
                </div>
              </div>
              <p className="text-muted-foreground leading-relaxed">
                KWACCIMA House serves as the central hub for business activities, meetings, and networking events in Kwara State. 
                We welcome visitors and members alike to our premises for business consultations, meetings, and collaborative sessions.
              </p>
            </div>
            <div className="relative h-[400px] lg:h-[500px] rounded-lg overflow-hidden shadow-xl">
              <img
                src="/logo.png"
                alt="KWACCIMA House"
                className="object-cover w-full h-full"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Membership Benefits */}
      <section className="py-16 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-12 lg:mb-16">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold mb-4 text-balance">
              Benefits of Being a Member
            </h2>
            <p className="text-muted-foreground leading-relaxed">
              KWACCIMA activities and operations are designed to support the vitality of all businesses within Kwara State. 
              It is the voice of business in Kwara State.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <TrendingUp className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Business Entrepreneurial Development</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• Introduction to Local and International facilities for small and medium scale enterprises</li>
                  <li>• Trade Promotion</li>
                  <li>• Participation in International Trade Fair</li>
                  <li>• Joining Trade delegations or Mission to Foreign Countries</li>
                  <li>• Trade Enquiries</li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Users className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Increase in Sales Opportunities</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• Increase Network and Contacts</li>
                  <li>• Member referral service</li>
                  <li>• KWACCIMA partnership with other business organizations</li>
                  <li>• Trade Group meetings</li>
                  <li>• Business Forum attendance</li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Target className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Reduced Cost of Doing Business</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• Current and reliable information</li>
                  <li>• Training and workshops relevant to the needs of your organization</li>
                  <li>• Business consulting services</li>
                  <li>• Manpower Development</li>
                  <li>• Access to Finance</li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Globe className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Increase in Global Outreach</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• International Exposure</li>
                  <li>• Worldwide publicity</li>
                  <li>• Membership Directory: Advertisement in Newsletter and our Website/whatsapp platforms</li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-none shadow-sm lg:col-span-2">
              <CardContent className="pt-8 pb-6 space-y-4">
                <div className="h-14 w-14 rounded-full bg-accent/10 flex items-center justify-center">
                  <Handshake className="h-7 w-7 text-accent" />
                </div>
                <h3 className="text-2xl font-serif font-semibold">Cordial Relationship with Government</h3>
                <ul className="text-muted-foreground leading-relaxed space-y-2">
                  <li>• Lobbying government for business interest</li>
                  <li>• Presentation of local opinion on commercial, industrial and economic matters</li>
                  <li>• Lobbying efforts at Federal, State, and Local Government levels</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* What We Do */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-12 lg:mb-16">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold mb-4 text-balance">What We Do</h2>
            <p className="text-muted-foreground leading-relaxed">
              KWACCIMA provides comprehensive support and services to our members and the broader business community
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Business Advocacy</h3>
              <p className="text-muted-foreground leading-relaxed">
                We represent the interests of our members in policy discussions with government agencies, advocating for
                business-friendly regulations and economic reforms.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Networking & Events</h3>
              <p className="text-muted-foreground leading-relaxed">
                We organize conferences, seminars, trade fairs, and networking events that connect businesses, foster
                partnerships, and facilitate knowledge sharing.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Capacity Building</h3>
              <p className="text-muted-foreground leading-relaxed">
                We provide training programs, workshops, and resources to help businesses develop skills, adopt best
                practices, and stay competitive.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Market Access</h3>
              <p className="text-muted-foreground leading-relaxed">
                We facilitate access to local, national, and international markets, helping businesses expand their
                reach and grow their operations.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Business Support Services</h3>
              <p className="text-muted-foreground leading-relaxed">
                We offer advisory services, business information, and support to help entrepreneurs start, manage, and
                grow successful enterprises.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-serif font-semibold">Sector Development</h3>
              <p className="text-muted-foreground leading-relaxed">
                We work to strengthen specific sectors including industry, commerce, mining, and agriculture through
                targeted initiatives and programs.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 lg:py-24 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-3xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-balance">Ready to Join Our Community?</h2>
            <p className="text-lg text-primary-foreground/80 leading-relaxed">
              Become a member of KWACCIMA and gain access to exclusive benefits, networking opportunities, and business
              support services.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Button asChild size="lg" variant="secondary">
                <Link href="/contact">Become a Member</Link>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10 bg-transparent"
              >
                <Link href="/exco">
                  Meet Our Leadership <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  )
}