imphnen-frontend-service/apps/landing/src/app/(frontend)/_components/hero.tsx

'use client';

import {
  Button,
  CodeIcon,
  SparklesIcon,
  UsersIcon,
} from '@imphnen-frontend-service/shadcn-ui/atoms';
import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
import { HeroSection } from 'apps/landing/src/payload-types';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { Fragment, useEffect, useState } from 'react';

export function Hero(props: HeroSection) {
  const {
    badgeText,
    buttons,
    description,
    highlight,
    title,
    stats,
    heroImage,
  } = props;

  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <section className="relative w-full py-20 md:py-32 lg:py-40 overflow-hidden">
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
        <div
          className="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl"
          style={{
            transform: `translate(${scrollY * 0.1}px, ${scrollY * -0.05}px)`,
            opacity: Math.max(0.2, 1 - scrollY * 0.001),
          }}
        />
        <div
          className="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl"
          style={{
            transform: `translate(${scrollY * -0.1}px, ${scrollY * 0.05}px)`,
            opacity: Math.max(0.2, 1 - scrollY * 0.001),
          }}
        />
        <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]" />
      </div>

      <div className="container px-4 md:px-6 relative">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
          <motion.div
            className="flex flex-col justify-center space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
              <SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
              <span>{badgeText}</span>
            </div>

            <div className="space-y-4">
              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
                {title} <br />
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                  {highlight}
                </span>
              </h1>
              <p className="max-w-[600px] text-muted-foreground md:text-xl">
                {description}
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4">
              <Button
                size="lg"
                className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
                onClick={() => window.open(buttons.primaryUrl, '_blank')}
              >
                {buttons.primaryLabel}
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="group relative overflow-hidden border-primary"
                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
              >
                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                <span className="relative">{buttons.secondaryLabel}</span>
              </Button>
            </div>

            <div className="flex items-center gap-8">
              {stats?.map(({ value, label }, i) => (
                <Fragment key={i}>
                  <div className="flex flex-col items-center">
                    <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                      {value}
                    </div>
                    <div className="text-xs text-muted-foreground">{label}</div>
                  </div>
                  {i < stats.length - 1 && (
                    <div className="h-10 border-r border-border mx-4" />
                  )}
                </Fragment>
              ))}
            </div>
          </motion.div>

          <motion.div
            className="relative mx-auto lg:ml-auto"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <div className="relative">
              <div className="absolute -top-6 -left-6 w-12 h-12 rounded-lg border border-primary/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
                <CodeIcon className="h-6 w-6 text-primary" />
              </div>
              <div className="absolute -bottom-6 -right-6 w-12 h-12 rounded-lg border border-blue-400/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
                <UsersIcon className="h-6 w-6 text-blue-400" />
              </div>
              <div className="relative z-10 rounded-2xl overflow-hidden border shadow-2xl">
                <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-400/10" />
                {(() => {
                  const media = formatCMSImageDataToMedia(heroImage);
                  if (!media) return null;
                  return (
                    <Image
                      src={media.url!}
                      alt={media.alt}
                      width={600}
                      height={500}
                      className="w-full h-auto object-cover"
                    />
                  );
                })()}
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}