"use client";

import { useEffect, useRef, type CSSProperties } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, RefreshCcw, Smartphone, Users } from "lucide-react";
import heroDashboard from "../../public/images/hero-dashboard.png";

const STRIP = [
  { n: "01", title: "Product First", text: "Built around real user needs" },
  { n: "02", title: "Mobile Experience", text: "Designed for Android and iOS" },
  { n: "03", title: "Continuous Improvement", text: "Always getting better" },
];

/** translate driven by the --px / --py pointer vars set on the section (max ±`amount` px). */
function parallax(amount: number): CSSProperties {
  return {
    transform: `translate3d(calc(var(--px, 0) * ${amount}px), calc(var(--py, 0) * ${amount}px), 0)`,
    willChange: "transform",
    transition: "transform 0.5s ease-out",
  };
}

const delay = (s: number): CSSProperties => ({ animationDelay: `${s}s` });

const chip =
  "inline-flex items-center gap-2 rounded-full border border-slate-200/90 bg-white/85 px-3.5 py-2 text-xs font-semibold text-[#0F172A] shadow-card backdrop-blur-sm";

export default function Hero() {
  const sectionRef = useRef<HTMLElement>(null);

  // Very small pointer parallax on the background glows and chips (never the image) — fine pointers only, never with reduced motion.
  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const allowed = window.matchMedia(
      "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)",
    );
    if (!allowed.matches) return;

    let frame = 0;
    function onMove(e: PointerEvent) {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const rect = el!.getBoundingClientRect();
        el!.style.setProperty(
          "--px",
          (((e.clientX - rect.left) / rect.width - 0.5) * 2).toFixed(3),
        );
        el!.style.setProperty(
          "--py",
          (((e.clientY - rect.top) / rect.height - 0.5) * 2).toFixed(3),
        );
      });
    }
    el.addEventListener("pointermove", onMove);
    return () => {
      cancelAnimationFrame(frame);
      el.removeEventListener("pointermove", onMove);
    };
  }, []);

  return (
    <section
      id="top"
      ref={sectionRef}
      className="relative overflow-x-clip pt-28 pb-16 sm:pt-32 sm:pb-20 lg:pt-40 lg:pb-24"
    >
      <HeroBackground />

      <div className="container">
        <div className="grid grid-cols-[minmax(0,1fr)] items-center gap-14 lg:grid-cols-[minmax(0,46fr)_minmax(0,54fr)] lg:gap-8 xl:grid-cols-[minmax(0,38fr)_minmax(0,62fr)] xl:gap-10">
          {/* Message — left on desktop, centred when stacked */}
          <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
            <p
              className="inline-flex animate-fade-up items-center gap-2 whitespace-nowrap rounded-full border border-accent/20 bg-accent-50 px-3 py-1.5 text-[10.5px] font-semibold uppercase tracking-[0.12em] text-accent-600 sm:px-3.5 sm:text-xs sm:tracking-[0.18em] lg:tracking-[0.12em] xl:tracking-[0.18em]"
              style={delay(0.1)}
            >
              <span className="h-1.5 w-1.5 rounded-full bg-accent" />
              Products • Technology • Innovation
            </p>

            <h1 className="mt-6 font-display text-[2.5rem] font-extrabold leading-[1.05] tracking-tight text-[#0F172A] sm:text-6xl lg:text-[2.6rem] xl:text-[3.1rem] 2xl:text-[3.6rem]">
              <span className="block animate-fade-up" style={delay(0.2)}>
                We Build
              </span>
              <span className="block animate-fade-up" style={delay(0.25)}>
                Mobile Products
              </span>
              <span
                className="relative mx-auto mt-1 lg:mx-0 block w-fit animate-fade-up text-accent"
                style={delay(0.3)}
              >
                People Love to Use.
                <svg
                  viewBox="0 0 300 12"
                  preserveAspectRatio="none"
                  className="absolute -bottom-2 left-0 h-3 w-full text-accent/40"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M2 9C60 3 240 3 298 7"
                    stroke="currentColor"
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeDasharray="320"
                    className="animate-draw-line"
                  />
                </svg>
              </span>
            </h1>

            <p
              className="mt-8 max-w-136 animate-fade-up text-lg leading-[1.7] text-ink-300"
              style={delay(0.4)}
            >
              We design, build and continuously improve Android and iOS
              applications that solve real problems and create better everyday
              experiences.
            </p>

            <div
              className="mt-9 flex w-full animate-fade-up flex-col gap-3 sm:w-auto sm:flex-row sm:items-center"
              style={delay(0.5)}
            >
              <Link
                href="#work"
                className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-accent-600 px-7 py-3.5 text-sm font-semibold text-white shadow-glow-sm transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-accent-700 hover:shadow-[0_0_0_1px_rgba(0,148,238,0.2),0_14px_36px_-6px_rgba(0,148,238,0.5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 motion-reduce:hover:translate-y-0"
              >
                Explore Our Apps
                <ArrowRight
                  className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                  aria-hidden
                />
              </Link>
            </div>
          </div>

          {/* Product image — same row as the message on desktop, taking the wider column */}
          <ProductShowcase />
        </div>

        <FeatureStrip className="mt-14 lg:mt-20" />
      </div>
    </section>
  );
}

/** Numbered strip with thin separators — not cards. Stacks vertically on mobile. */
function FeatureStrip({ className = "" }: { className?: string }) {
  return (
    <ul
      className={`grid border-t border-slate-200/80 sm:grid-cols-3 sm:divide-x sm:divide-slate-200/80 ${className}`}
    >
      {STRIP.map((f, i) => (
        <li
          key={f.n}
          className="flex animate-fade-up items-start gap-4 border-b border-slate-200/70 py-5 last:border-b-0 sm:border-b-0 sm:px-8 sm:first:pl-0 sm:last:pr-0"
          style={delay(0.85 + i * 0.1)}
        >
          <span
            aria-hidden="true"
            className="font-display text-2xl font-bold leading-none text-accent-200"
          >
            {f.n}
          </span>
          <span>
            <span className="block text-sm font-semibold text-[#0F172A]">
              {f.title}
            </span>
            <span className="mt-1 block text-sm leading-snug text-ink-400">
              {f.text}
            </span>
          </span>
        </li>
      ))}
    </ul>
  );
}

/** Flat background: a soft white → very light blue wash. No shapes. */
function HeroBackground() {
  return <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-white via-accent-50/50 to-white" />;
}

/** Full-width dashboard image with three small positioning chips on its edges. */
function ProductShowcase({ className = "" }: { className?: string }) {
  return (
    <div className={`relative mx-auto w-full ${className}`}>
      {/* Dashboard image — never transformed by the pointer, so its text stays sharp */}
      <div className="animate-fade-up" style={delay(0.45)}>
        <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white p-1.5 shadow-[0_1px_3px_rgba(15,23,42,0.06)] sm:rounded-4xl sm:p-2.5 w-[90%] ms-auto">
          <Image
            src={heroDashboard}
            alt="Product analytics dashboard"
            quality={100}
            priority
            placeholder="blur"
            sizes="(min-width: 1660px) 880px, (min-width: 1400px) 820px, (min-width: 1200px) 700px, (min-width: 992px) 580px, 100vw"
            className="block h-auto w-full rounded-xl sm:rounded-3xl"
          />
        </div>
      </div>

      {/* Chips sit on the image's edges */}
      <div
        style={parallax(10)}
        className="absolute -top-4 left-4 z-10 hidden sm:block lg:-left-4"
      >
        <div className="animate-fade-up" style={delay(0.7)}>
          <span
            className={`${chip} animate-float-card-c motion-reduce:animate-none`}
          >
            <RefreshCcw className="h-3.5 w-3.5 text-accent" aria-hidden />
            Always Improving
          </span>
        </div>
      </div>
      <div
        style={parallax(10)}
        className="absolute -top-4 right-4 z-10 hidden sm:block lg:-right-4"
      >
        <div className="animate-fade-up" style={delay(0.8)}>
          <span
            className={`${chip} animate-float-card-b motion-reduce:animate-none`}
          >
            <Users className="h-3.5 w-3.5 text-accent" aria-hidden />
            Built for Users
          </span>
        </div>
      </div>
      <div
        style={parallax(10)}
        className="absolute -bottom-4 left-1/2 z-10 -translate-x-1/2"
      >
        <div className="animate-fade-up" style={delay(0.9)}>
          <span
            className={`${chip} animate-float-card-a motion-reduce:animate-none`}
          >
            <Smartphone className="h-3.5 w-3.5 text-accent" aria-hidden />
            Android + iOS
          </span>
        </div>
      </div>
    </div>
  );
}