import Image from 'next/image';
import { Play } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Container } from '@/components/ui/Container';
import { useMessages } from '@/i18n/client';

interface HeroSectionProps {
  onDiscoverClick: () => void;
  onWatchVideoClick: () => void;
}

const AVATARS = [
  'photo-1534528741775-53994a69daeb',
  'photo-1507003211169-0a1dd7228f2d',
  'photo-1517841905240-472988babdf9',
  'photo-1500648767791-00dcc994a43e',
];

export function HeroSection({ onDiscoverClick, onWatchVideoClick }: HeroSectionProps) {
  const t = useMessages().home.hero;
  return (
    <section
      id="home"
      className="relative isolate overflow-hidden bg-night-950 text-white [clip-path:ellipse(140%_100%_at_50%_0%)]"
    >
      {/* Portrait — mirrored so the subject faces the headline */}
      <div className="absolute inset-y-0 right-0 -z-10 w-full lg:w-[62%]">
        <Image
          src="/images/hero_profile.jpg"
          alt=""
          fill
          preload
          sizes="(max-width: 1024px) 100vw, 62vw"
          className="-scale-x-100 object-cover object-[30%_30%] opacity-45 lg:opacity-100"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-night-950 via-night-950/40 to-transparent lg:via-night-950/10" />
        <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-night-950 to-transparent" />
        <div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-night-950/80 to-transparent" />
      </div>

      <Container className="relative flex min-h-[640px] flex-col justify-center pt-32 pb-28 sm:min-h-[760px] lg:min-h-[820px]">
        <div className="max-w-[640px] animate-fade-up">
          <p className="eyebrow text-white/60">{t.eyebrow}</p>

          <h1 className="mt-6 text-[44px] font-semibold leading-[1.04] tracking-[-0.035em] sm:text-[60px] lg:text-[68px]">
            {t.title[0]}
            <br />
            {t.title[1]}
            <br />
            {t.title[2]}
          </h1>

          <p className="mt-6 max-w-[420px] text-[15px] leading-relaxed text-white/70 sm:text-base">
            {t.text}
          </p>

          <div className="mt-9 flex flex-wrap items-center gap-x-7 gap-y-4">
            <Button variant="light" withArrow onClick={onDiscoverClick}>
              {t.discover}
            </Button>
            <button
              type="button"
              onClick={onWatchVideoClick}
              className="group inline-flex items-center gap-3 text-sm font-medium text-white"
            >
              <span className="inline-flex size-12 items-center justify-center rounded-full border border-white/40 transition-colors group-hover:border-white group-hover:bg-white/10">
                <Play className="ml-0.5 size-4 fill-white" aria-hidden />
              </span>
              {t.watch}
            </button>
          </div>

          <div className="mt-12 flex items-center gap-4">
            <div className="flex -space-x-2.5">
              {AVATARS.map((id) => (
                <Image
                  key={id}
                  src={`https://images.unsplash.com/${id}?w=96&h=96&fit=crop&crop=faces`}
                  alt=""
                  width={36}
                  height={36}
                  className="size-9 rounded-full object-cover ring-2 ring-night-950"
                />
              ))}
            </div>
            <p className="text-[13px] leading-snug">
              <span className="block font-semibold text-white">{t.peopleCount}</span>
              <span className="text-white/55">{t.peopleText}</span>
            </p>
          </div>
        </div>

        {/* Vertical tagline */}
        <p
          aria-hidden
          className="absolute right-5 bottom-24 hidden text-[10px] leading-[2.1] font-medium tracking-[0.3em] text-white/60 uppercase sm:right-8 lg:block"
        >
          {t.vertical[0]}
          <br />
          {t.vertical[1]}
          <br />
          {t.vertical[2]}
          <br />
          {t.vertical[3]}
          <span className="mt-3 block h-px w-6 bg-white/60" />
        </p>
      </Container>
    </section>
  );
}