import { Link } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import factory from "@/assets/factory.jpg";
import { SectionHeading } from "@/components/SectionHeading";

const points = [
  { k: "01", t: "Founded in 2021", d: "Rapid nationwide growth across Bangladesh." },
  { k: "02", t: "Modern technology", d: "European-grade manufacturing equipment." },
  { k: "03", t: "Research-driven", d: "In-house R&D and innovation laboratory." },
  { k: "04", t: "Import substitution", d: "Proudly engineered & made in Bangladesh." },
];

export function About() {
  return (
    <section className="py-24 md:py-32 border-t border-border">
      <div className="container-regent grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
        <motion.div
          initial={{ opacity: 0, x: -30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, amount: 0 }}
          transition={{ duration: 0.6 }}
        >
          <SectionHeading
            align="left"
            eyebrow="Who We Are"
            title={<>An art form, <span className="text-gradient-paint">backed by science.</span></>}
          />
          <p className="mt-6 text-muted-foreground leading-relaxed extralight">
            Classic Chemical Industries Limited — established in 2021 by Jamuna Spacetech
            Joint Venture Ltd. — is one of Bangladesh's fastest-growing paint manufacturers,
            blending artistic creativity with industrial precision.
          </p>

          <div className="mt-10 grid sm:grid-cols-2 gap-px bg-border border border-border">
            {points.map((p) => (
              <div key={p.k} className="bg-background p-5">
                <div className="eyebrow text-brand-red">{p.k}</div>
                <div className="mt-3 text-sm uppercase tracking-editorial extralight">{p.t}</div>
                <div className="mt-2 text-xs text-muted-foreground leading-relaxed extralight">{p.d}</div>
              </div>
            ))}
          </div>

          <Link to="/about" className="mt-10 inline-flex items-center gap-3 text-sm uppercase tracking-editorial extralight text-foreground hover:text-brand-red transition-colors group">
            <span className="h-px w-12 bg-foreground group-hover:bg-brand-red group-hover:w-16 transition-all" />
            Our Story
            <ArrowRight className="w-4 h-4" />
          </Link>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, x: 30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, amount: 0 }}
          transition={{ duration: 0.6 }}
          className="relative"
        >
          <div className="relative overflow-hidden border border-border">
            <img src={factory} alt="Classic Paints manufacturing facility" loading="lazy" className="w-full h-[560px] object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-background/60 to-transparent" />
          </div>
          <div className="absolute -bottom-px -left-px bg-background border border-border p-5 max-w-[220px]">
            <div className="display-lg text-brand-red" style={{ fontSize: "1.8rem" }}>ISO 9001</div>
            <div className="eyebrow mt-1">Quality Management</div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}