"use client";

import { useEffect, useRef } from "react";
import Link from "next/link";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Linkedin, ArrowRight, Quote, Users } from "lucide-react";
import Header from "@/sections/Header";

gsap.registerPlugin(ScrollTrigger);

const VALUES = [
  { label: "Integrity" },
  { label: "Transparency" },
  { label: "Professionalism" },
] as const;

const CTA_GRADIENT =
  "linear-gradient(160deg, rgba(66, 139, 77, 0.09) 0%, rgba(250, 251, 252, 0.98) 40%, rgba(66, 139, 77, 0.05) 100%)";
const CTA_RADIAL =
  "radial-gradient(circle at 70% 30%, rgba(66, 139, 77, 0.08) 0%, transparent 50%)";

export default function AboutPage() {
  const breadcrumbRef = useRef<HTMLElement>(null);
  const introRef = useRef<HTMLDivElement>(null);
  const leaderRef = useRef<HTMLDivElement>(null);
  const valuesRef = useRef<HTMLDivElement>(null);
  const ctaRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const fromTo = (el: unknown, from: gsap.TweenVars, to: gsap.TweenVars) =>
      el && gsap.fromTo(el, from, to);

    const ctx = gsap.context(() => {
      fromTo(breadcrumbRef.current, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.65, ease: "power2.out" });
      fromTo(introRef.current, { y: 28, opacity: 0 }, {
        y: 0,
        opacity: 1,
        duration: 0.65,
        ease: "power2.out",
        scrollTrigger: { trigger: introRef.current, start: "top 85%" },
      });
      fromTo(leaderRef.current, { y: 28, opacity: 0 }, {
        y: 0,
        opacity: 1,
        duration: 0.65,
        ease: "power2.out",
        scrollTrigger: { trigger: leaderRef.current, start: "top 88%" },
      });
      gsap.utils.toArray<HTMLElement>(".about-value-pill").forEach((el, i) => {
        fromTo(el, { scale: 0.92, opacity: 0 }, {
          scale: 1,
          opacity: 1,
          duration: 0.4,
          ease: "back.out(1.2)",
          scrollTrigger: { trigger: valuesRef.current, start: "top 88%" },
          delay: i * 0.08,
        });
      });
      fromTo(ctaRef.current, { y: 24, opacity: 0 }, {
        y: 0,
        opacity: 1,
        duration: 0.6,
        ease: "power2.out",
        scrollTrigger: { trigger: ctaRef.current, start: "top 90%" },
      });
    });
    return () => ctx.revert();
  }, []);

  return (
    <div className="min-h-screen bg-white">
      <Header />

      <main className="site-main">
        <div className="h-16 lg:h-20" aria-hidden="true" />

        {/* Intro */}
        <section className="relative py-20 lg:py-24 bg-white overflow-hidden">
          <div
            className="absolute left-0 top-0 bottom-0 w-1 sm:w-1.5 rounded-r-full bg-gradient-to-b from-[#428b4d]/20 via-[#428b4d]/40 to-[#428b4d]/20 hidden sm:block"
            aria-hidden="true"
          />
          <div className="landing-container max-w-4xl relative">
            <div ref={introRef} className="pl-0 sm:pl-6">
              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-[#428b4d] mb-5">
                About OXYFINZ
              </p>
              <h2 className="font-heading font-bold text-3xl sm:text-4xl lg:text-5xl xl:text-[3rem] text-[#0a0a0a] leading-[1.15] tracking-tight mb-8">
                Bridging Visions with Capital
              </h2>
              <p className="text-slate-600 text-lg lg:text-xl leading-relaxed max-w-3xl">
                At OXYFINZ, we facilitate the business sphere by aligning diverse investment
                opportunities with end customers pursuing financial resources using our expertise
                and innovative connections. We aim to create a balanced financial environment that
                promotes growth for all involved parties, from investors to end customers.
              </p>
            </div>
          </div>
        </section>

        {/* Leadership card */}
        <section className="relative py-12 lg:py-16 bg-[#fafbfc] border-y border-slate-200/80">
          <div className="landing-container max-w-4xl">
            <div
              ref={leaderRef}
              className="relative rounded-2xl sm:rounded-3xl border border-slate-200/90 bg-white p-8 sm:p-10 lg:p-12 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-slate-200/60 hover:border-[#428b4d]/20 transition-all duration-300 overflow-hidden"
            >
              <div
                className="absolute top-0 right-0 w-64 h-64 rounded-full bg-[#428b4d]/[0.04] -translate-y-1/2 translate-x-1/2 pointer-events-none"
                aria-hidden="true"
              />
              <div className="absolute bottom-0 left-0 w-48 h-48 rounded-full bg-[#428b4d]/[0.03] translate-y-1/2 -translate-x-1/2 pointer-events-none" aria-hidden="true" />
              <div className="relative">
                <div className="flex items-start gap-4 mb-6">
                  <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-[#428b4d]/10 flex items-center justify-center">
                    <Quote className="w-6 h-6 text-[#428b4d]" aria-hidden />
                  </div>
                  <h3 className="font-heading font-bold text-2xl sm:text-3xl lg:text-4xl text-[#0a0a0a] pt-1">
                    Vedant Makhija
                  </h3>
                </div>
                <div className="space-y-5 text-slate-600 text-base lg:text-lg leading-relaxed">
                  <p>
                    Under the leadership of Oxyfinz, a distinguished fintech expert with a notable
                    track record. His proficiency covers an extensive range from payment processing
                    to investing in diverse debt instruments. Supported by an impressive team of over
                    23 professionals, Vedant&apos;s vision ensures Oxyfinz maintains its status as a
                    model of integrity, transparency, and professionalism within the finance
                    industry.
                  </p>
                  <a
                    href="https://www.linkedin.com/in/vedant-makhija"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-[#428b4d]/10 text-[#428b4d] font-semibold text-sm hover:bg-[#428b4d]/20 transition-colors"
                  >
                    <Linkedin className="h-5 w-5" aria-hidden />
                    Vedant Makhija
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Values strip */}
        <section ref={valuesRef} className="py-14 lg:py-16 bg-white">
          <div className="landing-container max-w-4xl">
            <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
              {VALUES.map((v, i) => (
                <span
                  key={i}
                  className="about-value-pill inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-slate-200 bg-slate-50/80 text-slate-700 font-medium text-sm"
                >
                  <Users className="w-4 h-4 text-[#428b4d]" aria-hidden />
                  {v.label}
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section
          ref={ctaRef}
          className="relative py-20 lg:py-24 border-t border-slate-200/80 overflow-hidden"
          style={{ background: CTA_GRADIENT }}
        >
          <div
            className="absolute inset-0 pointer-events-none opacity-40"
            style={{ backgroundImage: CTA_RADIAL }}
          />
          <div className="landing-container text-center relative z-10">
            <h2 className="font-heading font-bold text-2xl sm:text-3xl lg:text-4xl xl:text-5xl text-[#0a0a0a] mb-4 tracking-tight">
              Ready to get started?
            </h2>
            <p className="text-slate-600 text-lg mb-8 max-w-xl mx-auto">
              Let&apos;s build something great together. Get in touch with our team.
            </p>
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 px-8 py-4 rounded-2xl bg-[#428b4d] text-white font-semibold text-base shadow-xl shadow-[#428b4d]/25 hover:bg-[#3a7a42] hover:shadow-2xl hover:shadow-[#428b4d]/30 hover:-translate-y-0.5 transition-all duration-300"
            >
              Contact us
              <ArrowRight className="h-5 w-5" aria-hidden />
            </Link>
          </div>
        </section>
      </main>
    </div>
  );
}