import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
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="text-center"
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            viewport={{ once: true }}
          >
            <img
              src="/WTell.png"
              alt="Logo Walanja"
              className="mx-auto w-32 mb-6"
            />
            <p className="text-gray-700 max-w-3xl mx-auto leading-relaxed">
              <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="mt-4 text-gray-700 max-w-3xl mx-auto 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>
          </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"
              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"
              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>
  );
}
