import React from 'react';

export default function Logo({ className = "w-12 h-12" }: { className?: string }) {
  return (
    <div className={`relative flex items-center justify-center select-none ${className}`}>
      {/* Outer maroon/gold badge circular ring */}
      <svg
        viewBox="0 0 100 100"
        className="w-full h-full drop-shadow-md animate-[spin_40s_linear_infinite]"
      >
        <defs>
          <path
            id="textPathTop"
            d="M 18,50 A 32,32 0 1,1 82,50"
            fill="none"
          />
          <path
            id="textPathBottom"
            d="M 82,50 A 32,32 0 0,1 18,50"
            fill="none"
          />
          <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#FFF2B2" />
            <stop offset="50%" stopColor="#D4AF37" />
            <stop offset="100%" stopColor="#AA7C11" />
          </linearGradient>
        </defs>

        {/* Outer Gold Border */}
        <circle cx="50" cy="50" r="46" fill="#6B2D2E" stroke="url(#goldGrad)" strokeWidth="3" />
        <circle cx="50" cy="50" r="41" fill="none" stroke="url(#goldGrad)" strokeWidth="1" strokeDasharray="2,2" />

        {/* Arched Text Top */}
        <text className="font-poppins fill-[#FDF9F2] text-[8.5px] font-bold tracking-[0.12em]">
          <textPath href="#textPathTop" startOffset="50%" textAnchor="middle">
            परम पवित्रम
          </textPath>
        </text>

        {/* Arched Text Bottom */}
        <text className="font-poppins fill-[#D4AF37] text-[6.5px] font-bold tracking-[0.1em]">
          <textPath href="#textPathBottom" startOffset="50%" textAnchor="middle">
            EDUCATION PLATFORM
          </textPath>
        </text>
      </svg>

      {/* Center "PP" initials overlay */}
      <div className="absolute flex flex-col items-center justify-center text-center">
        <span className="text-[#D4AF37] font-serif font-extrabold text-[15px] tracking-wide drop-shadow-sm leading-none mt-0.5">
          PP
        </span>
        <div className="w-4 h-0.5 bg-[#D4AF37] opacity-60 rounded-full mt-0.5" />
      </div>
    </div>
  );
}