"use client"; // kalau pakai Next.js, taruh di baris paling atas

import Navbar from "../components/Navbar";
import Footer from "../components/Footer"; // <- tambahkan ini
import { motion } from "framer-motion";
import { CheckCircle } from "lucide-react";

export default function About() {
  return (
    <div className="font-sans">
      {/* Navbar */}
      <Navbar />

      {/* About Section */}
      <section className="py-20 bg-gray-50 min-h-screen">
        <div className="max-w-6xl mx-auto px-6 lg:px-20">
          {/* Logo & Deskripsi */}
          <motion.section
            className="grid grid-cols-1 md:grid-cols-2 items-center gap-10"
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            viewport={{ once: true }}
            >
            {/* Logo di kiri */}
            <div className="flex justify-center md:justify-start">
              <img
                src="/WTell_logo.png"
                alt="Logo Walanja"
                className="w-45 md:w-45"
              />
            </div>

            {/* Deskripsi di kanan */}
            <div>
              <p className="text-gray-700 leading-relaxed mb-4">
                <span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
                adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
                Teknologi Telekomunikasi Berbasis Fiber Optic.
              </p>
              <p className="text-gray-700 leading-relaxed">
                Berdiri sejak tahun 2018,{" "}
                <span className="font-semibold text-blue-700">WTELL</span>{" "}
                berkomitmen menjadi{" "}
                <span className="font-bold">
                  Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
                  yang Handal dan Profesional.
                </span>
              </p>
            </div>
          </motion.section>
          {/* Visi & Misi */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
            {/* Visi */}
            <motion.section
              className="bg-white shadow-lg rounded-2xl p-8"
              whileHover={{ scale: 1.05 }}
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.7 }}
              viewport={{ once: true }}
            >
              <h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
              <p className="text-gray-700 text-center leading-relaxed">
                Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
                Menghubungkan Seluruh Wilayah di Indonesia.
              </p>
            </motion.section>

            {/* Misi */}
            <motion.section
              className="bg-white shadow-lg rounded-2xl p-8"
              whileHover={{ scale: 1.05 }}
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.7 }}
              viewport={{ once: true }}
            >
              <h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
              <ul className="space-y-4 text-gray-700">
                <li className="flex items-start gap-2">
                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
                  Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang
                  Handal, Terpercaya dan Up To Date dengan Tenaga Profesional.
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
                  Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber
                  Optic diseluruh Indonesia.
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
                  Memberikan nilai tambah dan sinergi dalam industri jaringan
                  Fiber Optic.
                </li>
              </ul>
            </motion.section>
          </div>
        </div>
      </section>

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