import { Mail, Linkedin } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

const executiveMembers = [
  {
    id: 1,
    name: "Engr. Abu Salami, FNSE",
    position: "President",
    bio: "Zain Travels & Tour Ltd.",
    image: "/president.jpeg",
    email: "president@KWACCIMA.org",
  },
  {
    id: 2,
    name: "Mr. Anaekwe Gideon Kodir",
    position: "Vice President Commerce",
    bio: "Honours International Concept Ltd.",
    image: "/vp-president-c.jpeg",
    email: "vicepresident@KWACCIMA.org",
  },
  {
    id: 3,
    name: "Dr. Ibrahim Sani PhD",
    position: "1st Deputy President",
    bio: "Shelter Setter ALuminum & Expert Nig. Ltd.",
    image: "/1dp.jpeg",
    email: "dg@KWACCIMA.org",
  },
  {
    id: 4,
    name: "Mr. Ayeni Rapheal FCA",
    position: "Vice President Industry",
    bio: "Int'l Tobacco Company Ltd.",
    image: "/vp-i.jpeg",
    email: "treasurer@KWACCIMA.org",
  },
  {
    id: 5,
    name: "Engr. Oladimeji Nelson Olasupo FNSR, FNiMechE, MASME",
    position: "2nd Deputy President",
    bio: "GMD Hery George Hotel Limited",
    image: "/2dp.jpeg",
    email: "secretary@KWACCIMA.org",
  },
  {
    id: 6,
    name: "Hajia Ramat Remi Sulyman",
    position: "Vice President Finance & Professional Pratices",
    bio: "Ramat Remi Sulyman & Associates",
    image: "/vp-f.jpeg",
    email: "industry@KWACCIMA.org",
  },
  {
    id: 7,
    name: "Alhaji Ibrahim Adebayo",
    position: "Vice President Agriculture ",
    bio: "AWAZAB Nigeria Ltd.",
    image: "/vp-agric.jpeg",
    email: "commerce@KWACCIMA.org",
  },
  {
    id: 8,
    name: "Alhaji (Dr) Akeem Salawudeen ",
    position: "Vice President Mines",
    bio: "TASCON Plastics Industry Ltd.",
    image: "/vp-mine.jpeg",
    email: "agriculture@KWACCIMA.org",
  },
  {
    id: 10,
    name: "Hajia Zururat Romoke Zubair",
    position: "Vice President Cooperatives & Informal Sector",
    bio: "RAMAS Wajadina Internation Company",
    image: "/vp-cor.jpeg",
    email: "membership@KWACCIMA.org",
  },
  {
    id: 9,
    name: "Hajia Alaaya Rukayat Morenikeji",
    position: "Public Relations Officer",
    bio: "CORASS Nigeria Ltd.",
    image: "/pro.jpeg",
    email: "membership@KWACCIMA.org",
  },
  {
    id: 11,
    name: "Mrs. Sadiq Bolarinwa Abiodun",
    position: "Tresurer",
    bio: "ABBO STORES",
    image: "/tresuer.jpeg",
    email: "membership@KWACCIMA.org",
  },
  {
    id: 12,
    name: "Barr. Rotimi Oyegbola",
    position: "Legal Adviser",
    bio: "Real CheaterField Ltd",
    image: "/legal.jpeg",
    email: "membership@KWACCIMA.org",
  },
  {
    id: 13,
    name: "Alhaji Yinka Ibraheem Yahaya",
    position: "Internal Auditor",
    bio: "Y.Y Oil & Gas Nig. Ltd.",
    image: "/auditor.jpeg",
    email: "membership@KWACCIMA.org",
  },
]

export default function ExcoPage() {
  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">
              Executive Committee
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed text-pretty">
              Meet the dedicated leaders driving KWACCIMA's mission to foster economic growth and business development in
              Kwara State.
            </p>
          </div>
        </div>
      </section>

      {/* Executive Members */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
            {executiveMembers.map((member) => (
              <Card key={member.id} className="border-none shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                <div className="relative h-80 overflow-hidden bg-muted">
                  <img
                    src={member.image || "/placeholder.svg"}
                    alt={member.name}
                    className="object-cover w-full h-full"
                  />
                </div>
                <CardContent className="pt-6 pb-6 space-y-4">
                  <div>
                    <h3 className="text-xl font-serif font-semibold mb-1">{member.name}</h3>
                    <p className="text-sm font-medium text-accent">{member.position}</p>
                  </div>
                  <p className="text-sm text-muted-foreground leading-relaxed">{member.bio}</p>
                  {/* <div className="flex items-center gap-3 pt-2">
                    <a
                      href={`mailto:${member.email}`}
                      className="h-9 w-9 rounded-full bg-muted hover:bg-accent/10 flex items-center justify-center transition-colors"
                      aria-label={`Email ${member.name}`}
                    >
                      <Mail className="h-4 w-4" />
                    </a>
                    <a
                      href="#"
                      className="h-9 w-9 rounded-full bg-muted hover:bg-accent/10 flex items-center justify-center transition-colors"
                      aria-label={`${member.name} on LinkedIn`}
                    >
                      <Linkedin className="h-4 w-4" />
                    </a>
                  </div> */}
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Leadership Message */}
      <section className="py-16 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-serif font-bold mb-4">Message from the President</h2>
            </div>
            <Card className="border-none shadow-sm">
              <CardContent className="pt-8 pb-8 space-y-6">
                <p className="text-muted-foreground leading-relaxed">Dear Members and Stakeholders,</p>
                <p className="text-muted-foreground leading-relaxed">
                  It is with great pride and enthusiasm that I welcome you to the Kwara Chamber of Commerce Industry,
                  Mine & Agriculture. Our chamber stands as a beacon of economic progress, bringing together diverse
                  sectors to create a thriving business ecosystem in Kwara State.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  Under the guidance of our dedicated executive committee, we are committed to advocating for policies
                  that promote business growth, facilitating partnerships that drive innovation, and providing resources
                  that empower entrepreneurs across all sectors. Together, we are building a prosperous future for Kwara
                  State.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  I invite you to join us in this journey of economic transformation. Whether you are an established
                  business or an aspiring entrepreneur, KWACCIMA is here to support your success and amplify your voice in
                  shaping the economic landscape of our great state.
                </p>
                <p className="text-muted-foreground leading-relaxed font-medium">
                  Engr. Abu Salami, FNSE
                  <br />
                  President, KWACCIMA
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  )
}