LandingPage-Fnet/src/pages/Home.jsx

import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { MapPin, Wifi, Network, Cog } from "lucide-react";
import { motion } from "framer-motion";

export default function Home() {
  const footerRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    if (location.hash === "#footer") {
      footerRef.current?.scrollIntoView({ behavior: "smooth" });
    }
  }, [location]);

  return (
    <div className="font-sans">
      {/* Navbar */}
      <Navbar />

      {/* Hero Section */}
      <section className="relative h-screen w-full overflow-hidden">
        <video
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        >
          <source src="/bg-video.mp4" type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-black/50"></div>

        <div className="relative z-10 flex flex-col justify-center h-full px-6 lg:px-20 text-white max-w-3xl">
          <p className="text-lg">Mari menjadi bagian dari kami</p>
          <h1 className="text-4xl md:text-6xl font-bold leading-tight mt-2">
            WALANJA <br /> TELEKOMUNIKASI
          </h1>
          <p className="mt-4 text-lg">
            Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
          </p>
        </div>
      </section>

      {/* Produk Section */}
      <section
        id="produk"
        className="relative py-20 overflow-hidden text-center"
      >
        {/* Animated Background */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 animate-gradient bg-[length:400%_400%]"></div>
        <div className="absolute inset-0 bg-white/90"></div>

        <div className="relative z-10">
          <h2 className="text-3xl font-bold mb-3 text-blue-900">Produk</h2>
          <p className="text-gray-700 max-w-3xl mx-auto mb-12">
            Solusi layanan jaringan kabel serat optik Point to Point dan Point
            to Multi Point dengan kapasitas tinggi, didukung infrastruktur yang
            handal melalui jaringan kabel serat optik kami.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-6">
            {/* Card 1 */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/10 to-transparent"></div>
              <Wifi className="w-12 h-12 mb-4 text-blue-600 mx-auto relative z-10" />
              <h3 className="text-xl font-bold mb-3 relative z-10">
                WTELL LastMile Connection
              </h3>
              <p className="relative z-10">
                Solusi bagi penyedia layanan internet untuk melayani pelanggan
                Last Mile tanpa harus membangun jaringan fiber optic sendiri.
              </p>
            </motion.div>

            {/* Card 2 */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7 }}
              viewport={{ once: true }}
              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-yellow-200/40 to-transparent"></div>
              <Network className="w-12 h-12 mb-4 text-yellow-500 mx-auto relative z-10" />
              <h3 className="text-xl font-bold mb-3 relative z-10">
                WTELL Metro Link
              </h3>
              <p className="relative z-10">
                Layanan jaringan serat optik Point to Point dan Point to Multi
                Point dengan kapasitas tinggi dan infrastruktur handal.
              </p>
            </motion.div>

            {/* Card 3 */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-blue-300/30 to-transparent"></div>
              <Cog className="w-12 h-12 mb-4 text-blue-600 mx-auto relative z-10" />
              <h3 className="text-xl font-bold mb-3 relative z-10">
                WTELL EPC Solution
              </h3>
              <p className="relative z-10">
                Menyediakan layanan Engineering, Procurement, Construction:
                Survey, Design, Deployment, Operation & Maintenance, FTIX.
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Cakupan Area Section */}
      <section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
        {/* Animated Overlay */}
        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 via-white to-blue-50 animate-gradient bg-[length:300%_300%]"></div>

        <div className="relative z-10">
          {/* Title */}
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold flex items-center justify-center gap-2 text-blue-900">
              <MapPin className="w-8 h-8 text-blue-600" />
              Cakupan Area
            </h2>
            <p className="mt-3 text-gray-600 max-w-2xl mx-auto">
              Saat ini jaringan dan layanan{" "}
              <span className="font-semibold">WTELL</span> telah berhasil
              menghadirkan internet di berbagai daerah di Kota Bandung hingga
              Desa 3T (Tertinggal, Terdepan, Terluar).
            </p>
          </div>

          {/* Content */}
          <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
            {/* Map with hover animation */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="flex-1 flex justify-center"
            >
              <img
                src="/map-bandung.jpg"
                alt="Map Bandung"
                className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100"
              />
            </motion.div>

            {/* List Area */}
            <div className="flex-1 bg-white/70 p-6 rounded-2xl shadow-lg">
              <h3 className="text-xl font-semibold mb-4 text-blue-600">
                Fokus Layanan
              </h3>
              <ul className="space-y-3 text-gray-700">
                <li>📍 Bandung Kota</li>
                <li>📍 Cimahi</li>
                <li>📍 Cileunyi</li>
                <li>📍 Ngamprah</li>
                <li>📍 Desa 3T sekitar Bandung</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <Footer footerRef={footerRef} />
    </div>
  );
}