import React from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { Container } from '@/components/ui';
import Scribble from '@/components/Scribble';

export default function Hero() {
  const t = useTranslations('Home.hero');

  return (
    <section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
      <div className="absolute inset-0 z-0">
        <video 
          className="w-full h-full object-cover"
          autoPlay 
          muted 
          loop 
          playsInline
          poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
        >
          <source src="/uploads/2025/02/header.webm" type="video/webm" />
          <source src="/uploads/2025/02/header.mp4" type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
      </div>
      
      <Container className="relative z-10 text-left text-white w-full">
        <div className="max-w-4xl">
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
            {t.rich('title', {
              green: (chunks) => (
                <span className="relative inline-block ml-4 mr-2">
                  <span className="relative z-10 text-white italic">{chunks}</span>
                  <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
                </span>
              )
            })}
          </h1>
          <div className="mt-8">
            <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
              {t('cta')}
              <span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
                &rarr;
              </span>
            </Link>
          </div>
        </div>
      </Container>
    </section>
  );
}