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

"use client";

import { ArrowRight } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { cn } from "@/shared/utils";
import { useInView } from "@/features/landing-page/hooks";

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

export function HeroSection({ heroCTARef }: HeroSectionProps) {
  const [heroRef, heroInView] = useInView();

  return (
    <section
      ref={heroRef}
      className={cn(
        "full-bleed py-16 sm:py-20 lg:py-24 overflow-hidden transition-all duration-700",
        heroInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
      )}
    >
      {/* 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">
          <span className="block">A One Stop Solution</span>
          <span className="block text-primary mt-2">for Your IT Needs</span>
        </h1>
        <p className="mt-6 text-base sm:text-lg text-muted-foreground leading-relaxed font-semibold max-w-2xl mx-auto">
          Internet, phone, VPN and IT support — all in one place, with full English support in
          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>
    </section>
  );
}