Assist_Design/apps/portal/src/features/landing-page/components/HeroSection.tsx

"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/atoms/button";

interface HeroSectionProps {
  heroCTARef: React.RefObject<HTMLDivElement | null>;
}

export function HeroSection({ heroCTARef }: HeroSectionProps) {
  const heroRef = useRef<HTMLDivElement>(null);
  const heroInView = useInView(heroRef, { once: true, amount: 0.1 });

  return (
    <motion.div
      ref={heroRef}
      initial={{ opacity: 0, y: 32 }}
      animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
      transition={{ duration: 0.7, ease: "easeOut" as const }}
      className="relative flex-1 flex items-center py-16 sm:py-20 lg:py-24 overflow-hidden"
    >
      {/* Gradient Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-surface-sunken via-background to-info-bg/80" />

      {/* Dot Grid Pattern Overlay */}
      <div
        className="absolute inset-0 pointer-events-none"
        aria-hidden="true"
        style={{
          backgroundImage: `radial-gradient(circle at center, color-mix(in oklch, var(--primary) 15%, transparent) 1px, transparent 1px)`,
          backgroundSize: "24px 24px",
        }}
      />

      {/* Subtle gradient accent in corner */}
      <div
        className="absolute -top-32 -right-32 w-96 h-96 rounded-full pointer-events-none"
        aria-hidden="true"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklch, var(--info) 25%, transparent) 0%, transparent 70%)",
        }}
      />

      <div className="relative mx-auto max-w-3xl px-6 sm:px-10 lg:px-14 text-center">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight text-foreground font-heading">
          <span className="block">Seamless IT Solutions</span>
          <span className="block text-primary mt-2">Built for Your Business</span>
        </h1>
        <p className="mt-6 text-base sm:text-lg text-muted-foreground leading-relaxed font-semibold max-w-2xl mx-auto">
          From connectivity to communication, we handle the complexity so you can focus on what
          matters — with dedicated English support across Japan.
        </p>
        <div
          ref={heroCTARef}
          className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4"
        >
          <Button
            as="a"
            href="/services"
            variant="pill"
            size="lg"
            rightIcon={<ArrowRight className="h-5 w-5" />}
          >
            Find Your Plan
          </Button>
          <Button as="a" href="#contact" variant="pillOutline" size="lg">
            Talk to Us
          </Button>
        </div>
      </div>
    </motion.div>
  );
}