"use client"

// Gizemli arka plan desenleri - piramit, goz, geometrik sekliller
export function MysteriousBackground({ variant = "default" }: { variant?: "default" | "hero" | "subtle" }) {
  if (variant === "hero") {
    return (
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* Animated grid lines */}
        <div className="absolute inset-0 opacity-[0.08]" style={{
          backgroundImage: `
            linear-gradient(to right, oklch(0.75 0.15 195 / 0.3) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(0.75 0.15 195 / 0.3) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px'
        }} />
        
        {/* Large All-seeing eye - center */}
        <svg className="absolute left-1/2 -translate-x-1/2 top-6 w-40 h-40 opacity-[0.15]" viewBox="0 0 100 100" fill="none">
          {/* Eye outer shape */}
          <path d="M50 25 C25 25 10 50 10 50 C10 50 25 75 50 75 C75 75 90 50 90 50 C90 50 75 25 50 25Z" stroke="oklch(0.75 0.15 195)" strokeWidth="1.5" fill="none" />
          {/* Iris circle */}
          <circle cx="50" cy="50" r="15" stroke="oklch(0.75 0.15 195)" strokeWidth="1.5" fill="none" />
          {/* Pupil */}
          <circle cx="50" cy="50" r="6" fill="oklch(0.75 0.15 195)" />
          {/* Light reflection */}
          <circle cx="55" cy="45" r="3" fill="oklch(0.75 0.15 195)" opacity="0.5" />
          {/* Rays emanating from eye */}
          <g stroke="oklch(0.75 0.16 75)" strokeWidth="0.8" opacity="0.6">
            <line x1="50" y1="8" x2="50" y2="18" />
            <line x1="30" y1="12" x2="35" y2="21" />
            <line x1="70" y1="12" x2="65" y2="21" />
            <line x1="12" y1="35" x2="22" y2="40" />
            <line x1="88" y1="35" x2="78" y2="40" />
          </g>
        </svg>
        
        {/* Illuminati triangle - left */}
        <svg className="absolute left-[5%] top-[20%] w-28 h-28 opacity-[0.12]" viewBox="0 0 100 100" fill="none">
          <polygon points="50,10 90,85 10,85" stroke="oklch(0.75 0.16 75)" strokeWidth="1.5" fill="none" />
          <polygon points="50,30 70,70 30,70" stroke="oklch(0.75 0.16 75)" strokeWidth="1" fill="none" opacity="0.6" />
          {/* Eye in triangle */}
          <ellipse cx="50" cy="55" rx="10" ry="6" stroke="oklch(0.75 0.16 75)" strokeWidth="1" fill="none" />
          <circle cx="50" cy="55" r="3" fill="oklch(0.75 0.16 75)" />
        </svg>
        
        {/* Pyramid - right */}
        <svg className="absolute right-[5%] bottom-[10%] w-32 h-32 opacity-[0.1]" viewBox="0 0 100 100" fill="none">
          <polygon points="50,5 95,90 5,90" stroke="oklch(0.75 0.15 195)" strokeWidth="1.2" fill="none" />
          <line x1="50" y1="5" x2="50" y2="90" stroke="oklch(0.75 0.15 195)" strokeWidth="0.6" opacity="0.5" />
          <line x1="50" y1="5" x2="27" y2="90" stroke="oklch(0.75 0.15 195)" strokeWidth="0.6" opacity="0.5" />
          <line x1="50" y1="5" x2="73" y2="90" stroke="oklch(0.75 0.15 195)" strokeWidth="0.6" opacity="0.5" />
          {/* Horizontal lines */}
          <line x1="15" y1="55" x2="85" y2="55" stroke="oklch(0.75 0.15 195)" strokeWidth="0.5" opacity="0.3" />
          <line x1="25" y1="72" x2="75" y2="72" stroke="oklch(0.75 0.15 195)" strokeWidth="0.5" opacity="0.3" />
        </svg>
        
        {/* Masonic compass - bottom left */}
        <svg className="absolute left-[8%] bottom-[5%] w-24 h-24 opacity-[0.08]" viewBox="0 0 100 100" fill="none">
          <path d="M50 10 L30 90 M50 10 L70 90" stroke="oklch(0.6 0.02 260)" strokeWidth="2" />
          <path d="M25 50 Q50 20 75 50" stroke="oklch(0.6 0.02 260)" strokeWidth="2" fill="none" />
          <circle cx="50" cy="50" r="8" stroke="oklch(0.6 0.02 260)" strokeWidth="1" fill="none" />
          <text x="50" y="54" fontSize="10" fill="oklch(0.6 0.02 260)" textAnchor="middle" fontWeight="bold">G</text>
        </svg>

        {/* Hexagram - right middle */}
        <svg className="absolute right-[15%] top-[30%] w-20 h-20 opacity-[0.08]" viewBox="0 0 100 100" fill="none">
          <polygon points="50,10 90,70 10,70" stroke="oklch(0.75 0.15 195)" strokeWidth="1" fill="none" />
          <polygon points="50,90 10,30 90,30" stroke="oklch(0.75 0.15 195)" strokeWidth="1" fill="none" />
        </svg>
        
        {/* Glowing orbs */}
        <div className="absolute -right-20 -top-20 h-96 w-96 rounded-full bg-primary/20 blur-[100px]" />
        <div className="absolute -bottom-20 -left-20 h-72 w-72 rounded-full bg-accent/15 blur-[80px]" />
        <div className="absolute right-1/4 bottom-1/3 h-48 w-48 rounded-full bg-primary/10 blur-[60px]" />
      </div>
    )
  }
  
  if (variant === "subtle") {
    return (
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* Subtle grid */}
        <div className="absolute inset-0 opacity-[0.05]" style={{
          backgroundImage: `
            linear-gradient(to right, oklch(0.75 0.15 195 / 0.2) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(0.75 0.15 195 / 0.2) 1px, transparent 1px)
          `,
          backgroundSize: '40px 40px'
        }} />
        {/* Single eye watermark */}
        <svg className="absolute right-4 bottom-4 w-20 h-20 opacity-[0.06]" viewBox="0 0 100 100" fill="none">
          <path d="M50 30 C30 30 15 50 15 50 C15 50 30 70 50 70 C70 70 85 50 85 50 C85 50 70 30 50 30Z" stroke="oklch(0.75 0.15 195)" strokeWidth="2" fill="none" />
          <circle cx="50" cy="50" r="12" stroke="oklch(0.75 0.15 195)" strokeWidth="2" fill="none" />
          <circle cx="50" cy="50" r="5" fill="oklch(0.75 0.15 195)" />
        </svg>
      </div>
    )
  }
  
  // Default variant
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      <div className="absolute inset-0 opacity-[0.04]" style={{
        backgroundImage: `
          linear-gradient(to right, oklch(0.75 0.15 195 / 0.3) 1px, transparent 1px),
          linear-gradient(to bottom, oklch(0.75 0.15 195 / 0.3) 1px, transparent 1px)
        `,
        backgroundSize: '50px 50px'
      }} />
      <div className="absolute -right-32 -top-32 h-96 w-96 rounded-full bg-primary/10 blur-[120px]" />
      <div className="absolute -bottom-32 -left-32 h-80 w-80 rounded-full bg-accent/10 blur-[100px]" />
    </div>
  )
}

// Animated all-seeing eye logo
export function AllSeeingEyeLogo({ className = "", animated = true }: { className?: string, animated?: boolean }) {
  return (
    <svg className={`${className} ${animated ? 'animate-pulse' : ''}`} viewBox="0 0 100 100" fill="none">
      {/* Outer triangle */}
      <polygon 
        points="50,5 95,90 5,90" 
        stroke="currentColor" 
        strokeWidth="2" 
        fill="none"
        className="text-primary"
      />
      
      {/* Inner triangle */}
      <polygon 
        points="50,25 75,75 25,75" 
        stroke="currentColor" 
        strokeWidth="1" 
        fill="none"
        className="text-primary/50"
      />
      
      {/* Eye */}
      <ellipse cx="50" cy="55" rx="18" ry="10" stroke="currentColor" strokeWidth="2" fill="none" className="text-accent" />
      <circle cx="50" cy="55" r="6" className="fill-accent" />
      <circle cx="53" cy="52" r="2" className="fill-accent/30" />
      
      {/* Rays */}
      <g stroke="currentColor" strokeWidth="1" className="text-primary/50">
        <line x1="50" y1="5" x2="50" y2="-5" />
        <line x1="30" y1="12" x2="25" y2="5" />
        <line x1="70" y1="12" x2="75" y2="5" />
      </g>
    </svg>
  )
}
