<template>
  <div class="min-h-screen">
    <!-- Hero Section -->
    <section
      class="relative h-[90vh] flex items-center justify-center text-center text-white overflow-hidden"
    >
      <!-- Background images (slideshow) -->
      <div class="absolute inset-0">
        <div
          class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
          :class="currentBg === 0 ? 'opacity-100' : 'opacity-0'"
          style="
            background-image: url('https://images.unsplash.com/photo-1553775927-a071d5a6a39a?w=2000&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YmxhY2slMjB3b21lbiUyMHdvcmt8ZW58MHx8MHx8fDA%3D');
          "
        ></div>
        <div
          class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
          :class="currentBg === 1 ? 'opacity-100' : 'opacity-0'"
          style="
            background-image: url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=2000&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHJlbmV3YWJsZSUyMGVuZXJneXxlbnwwfHwwfHx8MA%3D%3D');
          "
        ></div>
        <div
          class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
          :class="currentBg === 2 ? 'opacity-100' : 'opacity-0'"
          style="
            background-image: url('https://images.unsplash.com/photo-1492496913980-501348b61469?w=2000&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWdyaWN1bHR1cmV8ZW58MHx8MHx8fDA%3D');
          "
        ></div>
      </div>

      <!-- Overlay -->
      <div
        class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/70"
      ></div>

      <!-- Content -->
      <div class="relative z-10 max-w-5xl px-6">
        <h1 class="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
          Financing
          <span class="text-emerald-400 drop-shadow-lg"
            >Africa’s Green Future</span
          >
        </h1>
        <p class="text-lg md:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto">
          Empowering communities through climate finance, renewable energy,
          sustainable agriculture, and women’s economic inclusion.
        </p>

        <!-- Buttons -->
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <router-link
            to="/apply"
            class="px-10 py-4 rounded-xl text-lg font-semibold bg-emerald-600 hover:bg-emerald-400 text-gray-200 shadow-lg transition-all duration-300"
          >
            Get Started
          </router-link>
          <router-link
            to="/about"
            class="px-10 py-4 rounded-xl text-lg font-semibold border-2 border-white hover:bg-white hover:text-emerald-700 transition-all duration-300"
          >
            Learn More
          </router-link>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Who We Are
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            {{ aboutData.description }}
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 lg:gap-12">
          <div class="text-center p-8 bg-green-50 rounded-2xl">
            <div
              class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <Target class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
            <p class="text-gray-700 leading-relaxed">{{ aboutData.mission }}</p>
          </div>

          <div class="text-center p-8 bg-blue-50 rounded-2xl">
            <div
              class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <Eye class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Vision</h3>
            <p class="text-gray-700 leading-relaxed">{{ aboutData.vision }}</p>
          </div>

          <div class="text-center p-8 bg-emerald-50 rounded-2xl">
            <div
              class="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <Heart class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Motto</h3>
            <p class="text-gray-700 leading-relaxed font-medium">
              {{ aboutData.motto }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Our Service Pathways
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Financing is not just about money — it's about impact pathways that
            transform lives, strengthen communities, and protect our planet.
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
            v-for="service in services"
            :key="service.id"
            class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100"
          >
            <div class="flex items-center justify-between mb-4">
              <div
                :class="[
                  service.iconBg,
                  'w-12 h-12 rounded-lg flex items-center justify-center',
                ]"
              >
                <component
                  :is="service.icon"
                  :class="[service.iconColor, 'w-6 h-6']"
                />
              </div>
              <span class="text-sm font-semibold text-green-600">{{
                service.range
              }}</span>
            </div>

            <h3 class="text-xl font-bold text-gray-900 mb-3">
              {{ service.title }}
            </h3>
            <p class="text-gray-600 mb-4 text-sm leading-relaxed">
              {{ service.description }}
            </p>

            <div class="space-y-2 mb-6">
              <div class="flex items-start">
                <div
                  class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"
                ></div>
                <p class="text-sm text-gray-700">
                  {{ service.shortTermImpact }}
                </p>
              </div>
              <div class="flex items-start">
                <div
                  class="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"
                ></div>
                <p class="text-sm text-gray-700">
                  {{ service.longTermImpact }}
                </p>
              </div>
            </div>

            <router-link
              to="/apply"
              class="w-full bg-green-600 text-white py-3 px-4 rounded-lg font-semibold text-sm hover:bg-green-700 transition-colors duration-300 inline-flex items-center justify-center"
            >
              Apply Now
              <ArrowRight class="w-4 h-4 ml-2" />
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- Partnerships Section -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Our Strategic Partnerships
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            We build strong alliances with global initiatives, investors, and
            local communities—driving solutions that deliver measurable impact.
          </p>
        </div>

        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div
            v-for="partner in partnerships"
            :key="partner.name"
            class="text-center p-8 bg-gray-50 rounded-2xl"
          >
            <div
              class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg"
            >
              <Globe class="w-10 h-10 text-blue-600" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">
              {{ partner.name }}
            </h3>
            <p class="text-gray-700 leading-relaxed mb-6">
              {{ partner.description }}
            </p>
            <a
              :href="partner.website"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center text-blue-600 hover:text-blue-700 font-semibold"
            >
              Visit Website
              <ExternalLink class="w-4 h-4 ml-2" />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Call to Action Section -->
    <section class="py-20 bg-gradient-to-r from-green-600 to-emerald-600">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
          Ready to Make an Impact?
        </h2>
        <p class="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
          Join us in building a sustainable future for Africa. Whether you're an
          investor, partner, or community member, we have opportunities for you.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <router-link
            to="/apply"
            class="bg-white text-green-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-green-50 transition-colors duration-300 inline-flex items-center justify-center"
          >
            <Users class="w-5 h-5 mr-2" />
            Apply for Financing
          </router-link>
          <router-link
            to="/contact"
            class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-green-600 transition-colors duration-300 inline-flex items-center justify-center"
          >
            <Mail class="w-5 h-5 mr-2" />
            Partner with Us
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useSEO, seoConfigs } from '../composables/useSEO.js';

// SEO Configuration
useSEO(seoConfigs.home);
import {
  Leaf,
  Target,
  Eye,
  Heart,
  ArrowRight,
  Globe,
  ExternalLink,
  Users,
  Mail,
  Sun,
  Sprout,
  Factory,
  Wheat,
  Store,
  UsersRound,
  TreePine,
} from "lucide-vue-next";

const currentBg = ref(0);

const aboutData = {
  description:
    "Kulika Africa Holdings Limited is a licensed and accredited microfinance and development institution dedicated to building inclusive, climate-resilient, and sustainable communities across Uganda and Africa.",
  mission:
    "We Finance Climate-smart solutions, Renewable energy, Carbon credits and Green Enterprises that Regenerate Ecosystems, uplift livelihoods, and deliver long-term value for investors and society.",
  vision:
    "To be Africa's leading catalyst for climate finance and Green innovation—empowering communities, advancing Renewable energy, and creating sustainable prosperity.",
  motto: "Helping People to Grow and Succeed",
};

const services = [
  {
    id: 1,
    title: "Climate Finance",
    description:
      "Supporting grassroots climate adaptation and mitigation projects that build resilience against floods, droughts, and unpredictable weather.",
    shortTermImpact:
      "Access to resilient seeds, water harvesting, and energy-saving solutions.",
    longTermImpact:
      "Climate-resilient households and sustainable local economies.",
    range: "$5,000-$15,000",
    icon: Sun,
    iconBg: "bg-yellow-100",
    iconColor: "text-yellow-600",
  },
  {
    id: 2,
    title: "Green Finance",
    description:
      "Investing in eco-friendly enterprises — from sustainable agribusiness to waste recycling — that reduce degradation while creating green jobs.",
    shortTermImpact: "Launch of green enterprises tackling local challenges.",
    longTermImpact: "Strong green economies that preserve biodiversity.",
    range: "$5,000-$15,000",
    icon: Sprout,
    iconBg: "bg-green-100",
    iconColor: "text-green-600",
  },
  {
    id: 3,
    title: "Renewable Energy Finance",
    description:
      "Providing tailored financing for solar systems, biogas projects, and clean cook stoves to expand energy access and cut emissions.",
    shortTermImpact: "Families access safe, affordable energy.",
    longTermImpact: "A just energy transition with universal clean energy.",
    range: "$5,000-$15,000",
    icon: Factory,
    iconBg: "bg-blue-100",
    iconColor: "text-blue-600",
  },
  {
    id: 4,
    title: "Agricultural Finance",
    description:
      "Financing smallholder farmers with credit for seeds, irrigation, mechanization, and storage to boost productivity.",
    shortTermImpact: "Higher yields and incomes for farmers.",
    longTermImpact: "Food security and resilient agro-systems.",
    range: "$5,000-$15,000",
    icon: Wheat,
    iconBg: "bg-amber-100",
    iconColor: "text-amber-600",
  },
  {
    id: 5,
    title: "Market Linkage Finance",
    description:
      "Connecting farmers with buyers, processors, and exporters, ensuring fair markets and reducing losses.",
    shortTermImpact: "Increased incomes through market access.",
    longTermImpact: "Strong value chains and vibrant rural economies.",
    range: "$5,000-$10,000",
    icon: Store,
    iconBg: "bg-purple-100",
    iconColor: "text-purple-600",
  },
  {
    id: 6,
    title: "Women Group Finance",
    description:
      "Empowering women with group loans and entrepreneurship support, building equality and independence.",
    shortTermImpact: "Women-led ventures uplift households.",
    longTermImpact: "Intergenerational change and community leadership.",
    range: "$2,000-$5,000",
    icon: UsersRound,
    iconBg: "bg-pink-100",
    iconColor: "text-pink-600",
  },
  {
    id: 7,
    title: "Carbon Finance",
    description:
      "Incentivizing tree planting, land restoration, and low-emission enterprises through carbon credit models.",
    shortTermImpact: "Communities plant trees and adopt clean enterprises.",
    longTermImpact:
      "Income streams from carbon credits and healthier ecosystems.",
    range: "$5,000-$15,000",
    icon: TreePine,
    iconBg: "bg-emerald-100",
    iconColor: "text-emerald-600",
  },
  {
    id: 8,
    title: "Soil Charter Finance",
    description:
      "Financing regenerative farming and land management practices that restore degraded soils. Global First-Mover initiative.",
    shortTermImpact: "Farmers adopt mulching, composting, and agroforestry.",
    longTermImpact:
      "Fertile soils, higher yields, and sustainable food systems.",
    range: "$3,000-$5,000",
    icon: Leaf,
    iconBg: "bg-teal-100",
    iconColor: "text-teal-600",
  },
];

const partnerships = [
  {
    name: "UN Global Compact Network",
    description:
      "We are proud participants in the United Nations Global Compact, the world's largest corporate sustainability initiative. We align with the Ten Principles and contribute to achieving the UN Sustainable Development Goals (SDGs).",
    website: "https://www.globalcompactkenya.org/",
  },
  {
    name: "4 per 1000 Initiative",
    description:
      "As a proud partner of the '4 per 1000' Initiative, we support the global movement to enhance soil carbon sequestration through regenerative farming, creating carbon credits and green income streams for communities.",
    website: "https://www.4p1000.org/",
  },
];

onMounted(() => {
  setInterval(() => {
    currentBg.value = (currentBg.value + 1) % 3;
  }, 4000); // every 4 seconds
});
</script>
