import { cn } from "@/lib/utils";

import { Button } from "@/components/ui/button";

interface Hero28Props {
  className?: string;
  title?: string;
  description?: string;
  showButton?: boolean;
}

const Hero28 = ({
  className,
  title = "Welcome to Our Website",
  description = "Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur.",
  showButton = true,
}: Hero28Props) => {
  return (
    <section className={cn("relative py-32 overflow-visible", className)}>
      {/* Background pattern */}
      <div className="absolute inset-x-0 top-0 container mx-auto hidden h-full overflow-visible lg:block pointer-events-none">
        <div className="flex flex-col items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 520" className="w-full h-auto">
            <defs>
              <radialGradient id="text-backgroud" cx="50%" cy="50%" r={0.6}>
                <stop stopColor="black" offset={0.4} />
                <stop stopColor="black" offset={1} stopOpacity={0} />
              </radialGradient>
              <linearGradient id="icon-backgroud" x1="0" y1="0" x2="1" y2="1">
                <stop stopColor="var(--color-accent)" offset={0} />
                <stop stopColor="var(--color-background)" offset={1} />
              </linearGradient>
              <linearGradient id="gold-coin-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="var(--gold-300)" />
                <stop offset="50%" stopColor="var(--gold-500)" />
                <stop offset="100%" stopColor="var(--gold-700)" />
              </linearGradient>
              <linearGradient id="gold-bar-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="var(--gold-300)" />
                <stop offset="50%" stopColor="var(--gold-500)" />
                <stop offset="100%" stopColor="var(--gold-700)" />
              </linearGradient>
              <mask id="mask">
                <rect
                  x="0"
                  y="0"
                  width="100%"
                  height="100%"
                  stroke="none"
                  fill="black"
                />
                <rect
                  x="80"
                  y="40"
                  width="1260"
                  height="380"
                  rx="140"
                  stroke="none"
                  filter="url(#blur)"
                  fill="white"
                />
                <rect
                  x="40"
                  y="-120"
                  width="1320"
                  height="600"
                  stroke="none"
                  fill="url(#text-backgroud)"
                />
              </mask>
              <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="40" />
              </filter>
            </defs>
            <path
              stroke="var(--border)"
              strokeWidth={1}
              d="M0,40H1400M0,120H1400M0,200H1400M0,280H1400M0,360H1400M0,440H1400M60,0V520M140,0V520M220,0V520M300,0V520M380,0V520M460,0V520M540,0V520M620,0V520M700,0V520M780,0V520M860,0V520M940,0V520M1020,0V520M1100,0V520M1180,0V520M1260,0V520M1340,0V520"
              mask="url(#mask)"
            />
            {/* سکه طلا */}
            <rect
              x={140}
              y={120}
              width={80}
              height={80}
              stroke="var(--border)"
              fill="url(#icon-backgroud)"
            />
            <svg x={160} y={140} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
              <circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
              <circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
            </svg>
            {/* شمش طلا */}
            <rect
              x={60}
              y={280}
              width={80}
              height={80}
              stroke="var(--border)"
              fill="url(#icon-backgroud)"
            />
            <svg x={80} y={300} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
              <rect x={6} y={12} width={28} height={16} rx={3} fill="url(#gold-bar-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
              <rect x={10} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
              <rect x={26} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
            </svg>
            {/* سکه طلا */}
            <rect
              x={300}
              y={360}
              width={80}
              height={80}
              stroke="var(--border)"
              fill="url(#icon-backgroud)"
            />
            <svg x={320} y={380} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
              <circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
              <circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
            </svg>
            {/* شمش طلا */}
            <rect
              x={1180}
              y={40}
              width={80}
              height={80}
              stroke="var(--border)"
              fill="url(#icon-backgroud)"
            />
            <svg x={1200} y={60} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
              <rect x={6} y={12} width={28} height={16} rx={3} fill="url(#gold-bar-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
              <rect x={10} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
              <rect x={26} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
            </svg>
            {/* سکه طلا */}
            <rect
              x={1260}
              y={280}
              width={80}
              height={80}
              stroke="var(--border)"
              fill="url(#icon-backgroud)"
            />
            <svg x={1280} y={300} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
              <circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
              <circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
            </svg>
          </svg>
        </div>
      </div>
      <div className="relative z-10 container mx-auto flex flex-col items-center text-center px-4 md:px-6 min-h-[400px]">
        <h1 className="text-heading-1 my-6 font-bold text-pretty">
          {title}
        </h1>
        <p className="text-body mb-8 max-w-3xl leading-relaxed text-muted-foreground">
          {description}
        </p>
        {showButton && (
        <div className="mb-8">
          <Button variant="primary">Primary</Button>
        </div>
        )}
      </div>
    </section>
  );
};

export { Hero28 };