"use client";

import { useEffect, useRef } from "react";
import Link from "next/link";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {
  LayoutDashboard,
  BarChart3,
  TrendingUp,
  Users,
  Globe,
  ArrowRight,
  Sparkles,
  Award,
  Headphones,
  Box,
  ChevronDown,
  Building2,
  ClipboardList,
  Home,
  ChevronRight,
} from "lucide-react";
import Header from "@/sections/Header";
import Security from "@/sections/Security";

gsap.registerPlugin(ScrollTrigger);

const highlights = [
  {
    icon: Sparkles,
    title: "Innovative Solutions",
    description:
      "We stay ahead of the curve, leveraging cutting-edge technologies and strategies to keep you competitive in a marketplace.",
    href: "/contact",
  },
  {
    icon: Award,
    title: "Award-Winning Expertise",
    description:
      "Recognized by industry leaders, our award-winning team has a proven record of delivering excellence across projects.",
    href: "/contact",
  },
  {
    icon: Headphones,
    title: "Dedicated Support",
    description:
      "Our team is always available to address your concerns, providing quick and effective solution to keep your business.",
    href: "/contact",
  },
];

const solutions = [
  {
    id: "complete-view",
    icon: LayoutDashboard,
    title: "A Complete View of Assets Across All Asset Classes",
    content: [
      "Get a consolidated, real-time view of investments across asset classes, currencies, and entities - all in one place. Oxyfinz continuously updates data for each client, eliminating silos and giving you a clear understanding of performance, allocation, and risk across your entire investment landscape.",
      "Easily view investments across custodial accounts to uncover opportunities for data-driven financial planning and holistic advice.",
    ],
  },
  {
    id: "metrics-kpis",
    icon: BarChart3,
    title: "Metrics, KPIs and Reports, Customized to Your Needs",
    content: [
      "Choose from an extensive list of metrics or create your own, whether financials, balance sheet items, or marketing/ESG metrics. Our system lets you track and predict growth patterns of your portfolio companies using both forecasted and actual KPI values that matter to you.",
      "Generate polished, professional reports designed for clients, teams, and stakeholders. Fully customize layouts and metrics to deliver insights that are clear, relevant, and ready to share.",
    ],
  },
  {
    id: "analyze-data",
    icon: TrendingUp,
    title: "Analyze Portfolio Data with Speed and Clarity",
    content: [
      "Turn complex portfolio data into actionable insights in seconds. Powerful analytics make it easy to explore performance, trends, and risk with intuitive tools designed for fast, confident decision making, helping portfolios stay aligned with target allocations using unified Oxyfinz data.",
    ],
  },
  {
    id: "client-experience",
    icon: Users,
    title: "A Client Experience Built on Trust and Simplicity",
    content: [
      "Deliver a seamless experience that puts clarity first. Instantly analyze and visualize portfolio data, communicate relevant insights on the fly, and create customized, branded reports in minutes. Industry-leading analytics and performance reporting help you tailor insights for each client and build long-lasting, trusted relationships.",
    ],
  },
  {
    id: "multi-currency",
    icon: Globe,
    title: "Evaluate Investments Across Multiple Currencies",
    content: [
      "Understand the impact of foreign exchange movements on your client's portfolio and analyze investments across currencies to gain clearer insights into global exposure, returns, and risk.",
    ],
  },
];

const whoWeServe = [
  {
    icon: BarChart3,
    title: "Asset Managers",
    description:
      "Track portfolio performance, optimize allocations, and make data-driven investment decisions, all from one platform.",
  },
  {
    icon: Users,
    title: "Wealth Managers",
    description:
      "Deliver comprehensive client insights, simplify reporting, and provide personalized investment strategies with ease.",
  },
  {
    icon: Building2,
    title: "Institutional Investors",
    description: "",
  },
  {
    icon: ClipboardList,
    title: "Investment Consultants",
    description:
      "Analyze client portfolios, benchmark performance, and offer strategic recommendations efficiently.",
  },
];

export default function ProductPage() {
  const breadcrumbRef = useRef<HTMLElement>(null);
  const heroRef = useRef<HTMLElement>(null);
  const chooseRef = useRef<HTMLElement>(null);
  const serviceRef = useRef<HTMLElement>(null);
  const whoWeServeRef = useRef<HTMLElement>(null);
  const ctaRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        breadcrumbRef.current,
        { y: 20, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.65, ease: "power2.out" }
      );
      gsap.utils.toArray<HTMLElement>(".h7-hero-title span").forEach((el, i) => {
        gsap.fromTo(el, { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: "power2.out", delay: 0.1 + i * 0.1 });
      });
      gsap.utils.toArray<HTMLElement>(".h7-choose-item").forEach((el, i) => {
        gsap.fromTo(el, { x: 40, opacity: 0 }, { x: 0, opacity: 1, duration: 0.6, ease: "power2.out", scrollTrigger: { trigger: chooseRef.current, start: "top 85%" }, delay: i * 0.1 });
      });
      gsap.utils.toArray<HTMLElement>(".h7-service-item").forEach((el, i) => {
        gsap.fromTo(el, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: "power2.out", scrollTrigger: { trigger: el, start: "top 90%" }, delay: i * 0.08 });
      });
      gsap.utils.toArray<HTMLElement>(".h7-serve-item").forEach((el, i) => {
        gsap.fromTo(el, { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: "power2.out", scrollTrigger: { trigger: whoWeServeRef.current, start: "top 85%" }, delay: i * 0.08 });
      });
      if (ctaRef.current) {
        gsap.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" />

        {/* Hero */}
        <section ref={heroRef} className="relative h7-hero overflow-hidden">
          <div className="h7-hero-inner relative min-h-[50vh] lg:min-h-[60vh] flex items-center">
            <div
              className="absolute inset-0 -z-10"
              style={{
                background:
                  "linear-gradient(135deg, rgba(66, 139, 77, 0.06) 0%, rgba(250, 251, 252, 0.95) 50%, rgba(66, 139, 77, 0.04) 100%)",
              }}
            />
            <div className="container mx-auto px-6 sm:px-8 lg:px-12 w-full">
              <div className="max-w-4xl">
                <h2 className="h7-hero-title font-heading font-bold text-4xl sm:text-5xl lg:text-6xl xl:text-7xl text-[#0a0a0a] leading-tight tracking-tight">
                  <span className="inline-block">Delivering</span>{" "}
                  <span className="inline-flex items-center gap-2 text-[#428b4d]">
                    Trusted
                    <span className="inline-flex h-8 w-8 lg:h-10 lg:w-10 rounded-full bg-[#428b4d]/15 items-center justify-center">
                      <Box className="h-4 w-4 lg:h-5 lg:w-5 text-[#428b4d]" aria-hidden />
                    </span>
                  </span>{" "}
                  <span className="inline-block">Solutions</span>
                </h2>
              </div>
            </div>
            <div className="absolute bottom-8 right-6 lg:right-12 flex items-center gap-2 text-sm text-slate-500">
              <span className="text-amber-500">★★★★★</span>
              <span className="font-medium text-slate-700">100+ happy customer.</span>
            </div>
          </div>
          <a
            href="#choose"
            className="absolute bottom-6 left-1/2 -translate-x-1/2 flex h-12 w-12 items-center justify-center rounded-full border-2 border-slate-300 text-slate-500 hover:border-[#428b4d] hover:text-[#428b4d] transition-colors"
            aria-label="Scroll to content"
          >
            <ChevronDown className="h-6 w-6" />
          </a>
        </section>

        {/* Choose section */}
        <section id="choose" ref={chooseRef} className="py-20 lg:py-28">
          <div className="container mx-auto px-6 sm:px-8 lg:px-12 max-w-7xl">
            <div className="text-center mb-14 lg:mb-16">
              <p className="landing-section-eyebrow inline-flex items-center gap-2 text-sm font-medium text-[#428b4d] mb-3">
                <Box className="h-4 w-4" aria-hidden />
                Choose the Best
              </p>
              <h2 className="sec-title font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-[#0a0a0a]">
                Empowering Business with Expertise.
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
              {highlights.map((item, i) => {
                const Icon = item.icon;
                return (
                  <div
                    key={i}
                    className="h7-choose-item choose-box rounded-2xl border border-slate-200 bg-white p-8 shadow-sm hover:shadow-md hover:border-[#428b4d]/20 transition-all duration-300"
                  >
                    <div className="choose-icon w-14 h-14 rounded-xl bg-[#428b4d]/10 flex items-center justify-center mb-5">
                      <Icon className="w-7 h-7 text-[#428b4d]" aria-hidden />
                    </div>
                    <h4 className="font-heading font-bold text-xl text-[#0a0a0a] mb-3">{item.title}</h4>
                    <p className="text-slate-600 leading-relaxed mb-6">{item.description}</p>
                    <Link href={item.href} className="text-btn inline-flex items-center gap-2 text-[#428b4d] font-semibold text-sm hover:gap-3 transition-all">
                      <span>Read More</span>
                      <ArrowRight className="h-4 w-4" aria-hidden />
                    </Link>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Service section */}
        <section ref={serviceRef} className="py-20 lg:py-28 bg-[#fafbfc] border-t border-slate-200">
          <div className="container mx-auto px-6 sm:px-8 lg:px-12 max-w-7xl">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16">
              <div className="lg:col-span-4 xl:col-span-3">
                <div className="lg:sticky lg:top-28">
                  <p className="landing-section-eyebrow inline-flex items-center gap-2 text-sm font-medium text-[#428b4d] mb-3">
                    <Box className="h-4 w-4" aria-hidden />
                    Our Solutions
                  </p>
                  <h2 className="sec-title font-heading font-bold text-2xl lg:text-3xl xl:text-4xl text-[#0a0a0a] mb-4 leading-tight">
                    Tailor Business Solutions for Corporates.
                  </h2>
                  <p className="text-slate-600 leading-relaxed mb-8">
                    Recognized by industry leaders, our award winning team has a proven record.
                  </p>
                  <Link
                    href="/contact"
                    className="tj-primary-btn inline-flex items-center gap-2 bg-[#428b4d] text-white px-6 py-3.5 rounded-lg font-semibold text-sm shadow-lg shadow-[#428b4d]/20 hover:bg-[#3a7a42] transition-colors"
                  >
                    <span>More services</span>
                    <ArrowRight className="h-4 w-4" aria-hidden />
                  </Link>
                </div>
              </div>
              <div className="lg:col-span-8 xl:col-span-9 space-y-4">
                {solutions.map((solution) => {
                  const Icon = solution.icon;
                  return (
                    <div
                      key={solution.id}
                      className="h7-service-item service-content-wrap flex items-center justify-between gap-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-[#428b4d]/20 transition-all duration-300 group"
                    >
                      <div className="service-title flex items-center gap-4 min-w-0">
                        <div className="service-icon flex-shrink-0 w-12 h-12 rounded-lg bg-[#428b4d]/10 flex items-center justify-center">
                          <Icon className="w-6 h-6 text-[#428b4d]" aria-hidden />
                        </div>
                        <h4 className="font-heading font-bold text-lg lg:text-xl text-[#0a0a0a]">
                          <a href={`#${solution.id}`} className="hover:text-[#428b4d] transition-colors">
                            {solution.title}
                          </a>
                        </h4>
                      </div>
                      <a
                        href={`#${solution.id}`}
                        className="h7-service-action flex-shrink-0 w-10 h-10 rounded-full border border-slate-200 flex items-center justify-center text-slate-500 group-hover:border-[#428b4d] group-hover:text-[#428b4d] group-hover:bg-[#428b4d]/5 transition-all"
                        aria-label={`View ${solution.title}`}
                      >
                        <ArrowRight className="h-5 w-5" />
                      </a>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="mt-20 lg:mt-28 space-y-16">
              {solutions.map((solution, index) => {
                const Icon = solution.icon;
                return (
                  <article
                    key={solution.id}
                    id={solution.id}
                    className="scroll-mt-28 flex flex-col sm:flex-row gap-6 lg:gap-10 items-start"
                  >
                    <div className="flex-shrink-0 flex items-center gap-4 sm:block sm:w-24">
                      <span className="font-heading font-bold text-4xl text-[#428b4d]/20 tabular-nums">
                        {String(index + 1).padStart(2, "0")}.
                      </span>
                      <div className="w-12 h-12 rounded-xl bg-[#428b4d]/10 flex items-center justify-center">
                        <Icon className="w-6 h-6 text-[#428b4d]" aria-hidden />
                      </div>
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-heading font-bold text-xl sm:text-2xl text-[#0a0a0a] mb-4 leading-snug">
                        {solution.title}
                      </h3>
                      <div className="space-y-4">
                        {solution.content.map((paragraph, i) => (
                          <p key={i} className="text-slate-600 leading-relaxed">
                            {paragraph}
                          </p>
                        ))}
                      </div>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        {/* Who We Serve */}
        <section id="who-we-serve" ref={whoWeServeRef} className="py-20 lg:py-28 bg-white border-t border-slate-200">
          <div className="container mx-auto px-6 sm:px-8 lg:px-12 max-w-7xl">
            <div className="text-center mb-14 lg:mb-16">
              <p className="landing-section-eyebrow inline-flex items-center gap-2 text-sm font-medium text-[#428b4d] mb-3">
                <Box className="h-4 w-4" aria-hidden />
                Section 3
              </p>
              <h2 className="sec-title font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-[#0a0a0a]">
                Who We Serve
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
              {whoWeServe.map((item, i) => {
                const Icon = item.icon;
                return (
                  <div
                    key={i}
                    className="h7-serve-item rounded-2xl border border-slate-200 bg-[#fafbfc] p-8 shadow-sm hover:shadow-md hover:border-[#428b4d]/20 transition-all duration-300"
                  >
                    <div className="flex items-start gap-5">
                      <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-[#428b4d]/10 flex items-center justify-center">
                        <Icon className="w-7 h-7 text-[#428b4d]" aria-hidden />
                      </div>
                      <div className="min-w-0">
                        <h4 className="font-heading font-bold text-xl text-[#0a0a0a] mb-2">{item.title}</h4>
                        {item.description ? (
                          <p className="text-slate-600 leading-relaxed">{item.description}</p>
                        ) : null}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <Security />

        {/* CTA */}
        <section
          ref={ctaRef}
          className="tj-cta-section h7-cta py-20 lg:py-28 relative overflow-hidden"
        >
          <div
            className="absolute inset-0 pointer-events-none opacity-30"
            style={{
              backgroundImage: "radial-gradient(circle at 50% 50%, rgba(66, 139, 77, 0.15) 0%, transparent 70%)",
            }}
          />
          <div className="container mx-auto px-6 sm:px-8 lg:px-12 max-w-4xl relative z-10 text-center">
            <h2 className="font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-[#0a0a0a] mb-6">
              Reach Out To Our Support Team?
            </h2>
            <Link
              href="/contact"
              className="tj-primary-btn tj-primary-btn-lg inline-flex items-center gap-2 bg-[#428b4d] text-white px-8 py-4 rounded-lg font-semibold text-base shadow-xl shadow-[#428b4d]/25 hover:bg-[#3a7a42] transition-all duration-300"
            >
              <span>Contact us</span>
              <ArrowRight className="h-5 w-5" aria-hidden />
            </Link>
          </div>
        </section>
      </main>
    </div>
  );
}