"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { CheckCircle2, FileBadge, MapPin, Building, ShieldCheck, Target, Award } from "lucide-react";
import { SectionHeading } from "./section-heading";
import { Reveal } from "./reveal";
import { COMPANY } from "./site-data";

const TABS = [
  { id: "overview", label: "Company Overview", icon: Building },
  { id: "governance", label: "Registration & Compliance", icon: FileBadge },
  { id: "strengths", label: "Core Strengths", icon: ShieldCheck },
  { id: "vision", label: "Mission & Standards", icon: Target },
];

export function About() {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <section id="about" className="section-pad bg-background">
      <div className="mx-auto max-w-7xl px-4 md:px-6">
        <div className="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
          {/* Left Column: Visual Card */}
          <Reveal className="lg:col-span-5 order-2 lg:order-1">
            <div className="relative group">
              <div className="overflow-hidden rounded-2xl border border-border shadow-2xl">
                <img
                  src="/images/about.jpg"
                  alt="BECS engineers reviewing project blueprints on site"
                  className="aspect-[4/3] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                />
              </div>

              {/* Floating Registration Badge */}
              <div className="absolute -bottom-6 right-4 left-4 sm:left-auto sm:right-6 rounded-xl border border-border bg-card/95 p-4 shadow-xl backdrop-blur-md">
                <div className="flex items-center gap-3.5">
                  <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <FileBadge className="h-6 w-6" />
                  </div>
                  <div>
                    <div className="text-[10px] font-bold uppercase tracking-[0.18em] text-muted-foreground">
                      Reg. No. {COMPANY.registrationNo}
                    </div>
                    <div className="text-xs font-semibold text-foreground">
                      {COMPANY.authority}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Right Column: Interactive Content */}
          <div className="lg:col-span-7 order-1 lg:order-2">
            <SectionHeading
              eyebrow="About BECS"
              title="An infrastructure partner built on engineering discipline"
              align="left"
            />

            {/* Interactive Tab Headers */}
            <div className="mt-8 flex flex-wrap gap-2 border-b border-border pb-3">
              {TABS.map((tab) => {
                const Icon = tab.icon;
                const active = activeTab === tab.id;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold transition-all ${
                      active
                        ? "bg-primary text-primary-foreground shadow-md shadow-primary/20"
                        : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground"
                    }`}
                  >
                    <Icon className="h-4 w-4" />
                    {tab.label}
                  </button>
                );
              })}
            </div>

            {/* Tab Body Content */}
            <div className="mt-6 min-h-[220px]">
              <AnimatePresence mode="wait">
                {activeTab === "overview" && (
                  <motion.div
                    key="overview"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.25 }}
                    className="space-y-4"
                  >
                    <p className="text-base leading-relaxed text-muted-foreground">
                      {COMPANY.name} {COMPANY.legalSuffix} ({COMPANY.shortName}) is a premier infrastructure development company incorporated on {COMPANY.incorporatedDate}. We specialize in comprehensive civil engineering, hydropower plants, highway works, and municipal water projects.
                    </p>
                    <p className="text-sm leading-relaxed text-muted-foreground">
                      By integrating surveying, feasibility studies, detailed architectural design, and heavy equipment deployment under one roof, we eliminate vendor friction and ensure high-integrity delivery across Nepal.
                    </p>

                    <div className="pt-3 grid grid-cols-2 gap-3 text-xs font-semibold text-foreground">
                      <div className="flex items-center gap-2 rounded-md bg-muted/60 p-2.5">
                        <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
                        Integrated EPC Capabilities
                      </div>
                      <div className="flex items-center gap-2 rounded-md bg-muted/60 p-2.5">
                        <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
                        In-House Heavy Machinery
                      </div>
                    </div>
                  </motion.div>
                )}

                {activeTab === "governance" && (
                  <motion.div
                    key="governance"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.25 }}
                    className="space-y-4"
                  >
                    <p className="text-base leading-relaxed text-muted-foreground">
                      Operating under strict legal compliance with the Companies Act, 2006 (Government of Nepal), BECS maintains full regulatory standing across all government tenders and private development projects.
                    </p>

                    <div className="rounded-xl border border-border bg-card p-4 space-y-2.5 text-xs">
                      <div className="flex justify-between border-b border-border pb-2">
                        <span className="text-muted-foreground">Legal Entity:</span>
                        <span className="font-bold text-foreground">{COMPANY.name} {COMPANY.legalSuffix}</span>
                      </div>
                      <div className="flex justify-between border-b border-border pb-2">
                        <span className="text-muted-foreground">Registration Number:</span>
                        <span className="font-bold text-primary">{COMPANY.registrationNo}</span>
                      </div>
                      <div className="flex justify-between border-b border-border pb-2">
                        <span className="text-muted-foreground">Incorporation Date:</span>
                        <span className="font-bold text-foreground">{COMPANY.incorporatedDate}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Registering Authority:</span>
                        <span className="font-bold text-foreground">{COMPANY.authority}</span>
                      </div>
                    </div>
                  </motion.div>
                )}

                {activeTab === "strengths" && (
                  <motion.div
                    key="strengths"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.25 }}
                    className="grid gap-3 sm:grid-cols-2"
                  >
                    {[
                      "Fully owned excavators, dozers, cranes & rollers",
                      "Certified structural & environmental engineers",
                      "Complete EIA & IEE environmental compliance",
                      "On-time project handover with zero compromise",
                    ].map((item) => (
                      <div key={item} className="flex items-start gap-2.5 rounded-lg border border-border bg-card p-3.5">
                        <Award className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                        <span className="text-xs font-semibold text-foreground">{item}</span>
                      </div>
                    ))}
                  </motion.div>
                )}

                {activeTab === "vision" && (
                  <motion.div
                    key="vision"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.25 }}
                    className="space-y-4"
                  >
                    <p className="text-base leading-relaxed text-muted-foreground">
                      Our mission is to engineer sustainable, resilient infrastructure that connects communities, powers economic growth, and stands firm against natural and seismic forces.
                    </p>
                    <div className="rounded-lg border-l-4 border-primary bg-muted/60 p-4 text-xs font-medium italic text-foreground">
                      "Delivering engineering excellence from mountain highways to hydropower grids — built responsibly for Nepal's future."
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            <div className="mt-6 flex items-center gap-2.5 border-t border-border pt-4 text-xs text-muted-foreground">
              <MapPin className="h-4 w-4 shrink-0 text-primary" />
              <span>Headquartered in {COMPANY.address} · Operating Nationwide across Nepal</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}