"use client";

import Image from "next/image";
import { motion, useReducedMotion, useScroll, useTransform } from "motion/react";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import { firstPhoto } from "@/lib/photos";

/**
 * Homepage hero — photo bleeds in from the right with a soft white fade so
 * the left-aligned copy stays legible. Uses motion/react for stagger entrance
 * and parallax on the background ornament.
 *
 * `signedIn` swaps the "Join the collaborative" CTA for "Go to my account" so
 * existing members land on something useful. Passed in from the server-side
 * HomePage so there's no auth flicker on first paint.
 */
export function HeroSection({ signedIn = false }: { signedIn?: boolean }) {
  const shouldReduceMotion = useReducedMotion();

  // Window scroll → subtle parallax on the background ornament.
  const { scrollY } = useScroll();
  const ornamentY = useTransform(scrollY, [0, 600], [0, 120]);
  const ornamentOpacity = useTransform(scrollY, [0, 600], [1, 0.25]);

  // Prefer a surgery image for the hero; fall back to training if unavailable.
  const heroPhoto = firstPhoto("surgery") ?? firstPhoto("training");

  const container = shouldReduceMotion
    ? { hidden: {}, show: {} }
    : {
        hidden: {},
        show: {
          transition: {
            staggerChildren: 0.08,
            delayChildren: 0.05,
          },
        },
      };

  const item = shouldReduceMotion
    ? { hidden: {}, show: {} }
    : {
        hidden: { opacity: 0, y: 16 },
        show: {
          opacity: 1,
          y: 0,
          transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] as const },
        },
      };

  return (
    <section className="relative overflow-hidden bg-white py-14 md:py-20">
      {/* Background ornament — soft gradient blob with subtle parallax */}
      <motion.div
        aria-hidden
        style={shouldReduceMotion ? undefined : { y: ornamentY, opacity: ornamentOpacity }}
        className="pointer-events-none absolute -top-40 right-[-10%] h-[520px] w-[520px] rounded-full bg-[radial-gradient(circle_at_center,rgba(30,64,255,0.12),transparent_65%)] blur-2xl"
      />
      <motion.div
        aria-hidden
        style={shouldReduceMotion ? undefined : { y: ornamentY }}
        className="pointer-events-none absolute inset-0 -z-0 bg-[linear-gradient(to_bottom,transparent,rgba(30,64,255,0.02))]"
      />

      {/* Right-side hero image — tucked behind a white-fade so text stays
          readable. Hidden on mobile; appears from the right half on lg+. */}
      {heroPhoto ? (
        <motion.div
          aria-hidden
          initial={shouldReduceMotion ? false : { opacity: 0, scale: 1.04 }}
          animate={shouldReduceMotion ? undefined : { opacity: 1, scale: 1 }}
          transition={{ duration: 1.1, ease: [0.22, 1, 0.36, 1] }}
          className="pointer-events-none absolute inset-y-0 right-0 hidden w-[58%] lg:block"
        >
          <Image
            src={heroPhoto.path}
            alt=""
            fill
            priority
            sizes="58vw"
            className="object-cover object-center"
          />
          {/* White fade from the left so the headline sits on clean background,
              and a subtle blue tint on the right edge to match brand. */}
          <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.98)_0%,rgba(255,255,255,0.92)_28%,rgba(255,255,255,0.55)_55%,rgba(255,255,255,0.15)_100%)]" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_right,rgba(30,64,255,0.08),transparent_60%)]" />
        </motion.div>
      ) : null}

      <Container>
        <motion.div
          variants={container}
          initial="hidden"
          animate="show"
          className="relative max-w-4xl"
        >
          <motion.div
            variants={item}
            className="inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1.5 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]"
          >
            <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-blue)]" />
            International Orthopaedic Charity Collaboration
          </motion.div>
          <motion.h1
            variants={item}
            className="mt-6 font-display text-[44px] md:text-[68px] font-extrabold leading-[1.05] tracking-[-0.025em] text-[var(--color-ink)]"
          >
            Advancing global orthopaedics,{" "}
            <span className="text-[var(--color-blue)]">together.</span>
          </motion.h1>
          <motion.p
            variants={item}
            className="mt-7 max-w-2xl text-[18px] md:text-[20px] leading-relaxed text-[var(--color-slate)]"
          >
            OrthoGlobe is a vetted community of orthopaedic surgeons, researchers, and trainees
            building open atlases, consent tools, exam prep, and academy courses — together.
          </motion.p>
          <motion.div variants={item} className="mt-10 flex flex-wrap items-center gap-4">
            {signedIn ? (
              <Button href="/account">Go to my account</Button>
            ) : (
              <Button href="/join">Join the collaboration</Button>
            )}
            <Button href="#products" variant="ghost">
              Explore initiatives
            </Button>
          </motion.div>
        </motion.div>
      </Container>
    </section>
  );
}
