'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';

export default function HeroSection() {
  const t = useTranslations('hero');

  return (
    <section className="relative flex flex-col h-[calc(100vh-57px)] lg:h-auto lg:flex-1">

      {/* Main content — vertically centred in the available space */}
      <div className="flex-1 flex items-center max-w-6xl mx-auto px-4 sm:px-6 w-full">
        <div className="max-w-xl">
          <h1 className="text-4xl font-bold text-gray-900 leading-tight mb-4">
            {t('headingPrefix')}{' '}
            <span className="gradient-text">{t('headingSpan')}</span>
          </h1>
          <p className="text-gray-500 text-base leading-relaxed mb-8">
            {t.rich('subheading', {
              highlight: () => (
                <span className="text-brand-purple font-medium">{t('subheadingHighlight')}</span>
              ),
            })}
          </p>

          <div className="flex flex-wrap items-center gap-3">
            <button
              onClick={() => {
                const el = document.getElementById('search-section');
                if (el) window.scrollTo({ top: el.offsetTop - 57, behavior: 'smooth' });
              }}
              className="bg-brand-yellow hover:bg-brand-yellow-dark text-gray-900 font-medium text-sm px-5 py-2.5 rounded-md transition-colors"
            >
              {t('ctaPrimary')}
            </button>

            <Link
              href="/signin"
              className="text-sm text-white bg-black hover:bg-gray-900 rounded-md px-5 py-2.5 transition-colors font-medium"
            >
              {t('ctaSignIn')}
            </Link>
          </div>
        </div>
      </div>

      {/* Save now — pinned to bottom */}
      <div className="flex justify-center pb-8 shrink-0">
        <button
          onClick={() => {
            const el = document.getElementById('search-section');
            if (el) window.scrollTo({ top: el.offsetTop - 57, behavior: 'smooth' });
          }}
          className="flex flex-col items-center gap-1 text-brand-purple hover:text-purple-700 transition-colors"
        >
          <span className="text-sm font-semibold tracking-wide">{t('scrollHint')}</span>
          <svg
            className="w-5 h-5 animate-bounce"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M12 5v14M5 12l7 7 7-7" />
          </svg>
        </button>
      </div>

    </section>
  );
}