import { SankofaMark } from '@/components/brand';

const GOLD = '#D4A64A';
const MIDNIGHT = '#0D1B2A';
const IVORY = '#F5F1E8';

/** Hero illustration: sovereign trinity stack with protected node mesh. */
export function HeroEcosystemGraphic({ className = '' }: { className?: string }) {
  return (
    <div
      className={`relative mx-auto aspect-square w-full max-w-lg ${className}`}
      aria-hidden
    >
      <div className="absolute inset-4 rounded-3xl border border-sovereign-gold/20 bg-sovereign-midnight/80 shadow-2xl backdrop-blur-sm" />

      <div className="relative flex h-full flex-col items-center justify-center p-8">
        <SankofaMark size={72} className="relative z-10" />

        <svg
          viewBox="0 0 360 200"
          className="absolute inset-x-6 bottom-16 h-auto w-[calc(100%-3rem)]"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Sovereign ecosystem stack"
        >
          {/* Protection ring */}
          <circle cx="180" cy="100" r="78" fill="none" stroke={GOLD} strokeOpacity="0.25" strokeWidth="1" />

          {/* Phoenix layer */}
          <g transform="translate(180 36)">
            <rect x="-64" y="-18" width="128" height="36" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.35" strokeWidth="1" />
            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="10" fontWeight="600">
              Phoenix Cloud
            </text>
          </g>

          {/* PanTel layer */}
          <g transform="translate(72 100)">
            <rect x="-52" y="-16" width="104" height="32" rx="8" fill={MIDNIGHT} stroke="#C56B2C" strokeOpacity="0.45" strokeWidth="1" />
            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="9" fontWeight="600">
              PanTel
            </text>
          </g>

          {/* Chain hub */}
          <g transform="translate(288 100)">
            <rect x="-52" y="-16" width="104" height="32" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.35" strokeWidth="1" />
            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="9" fontWeight="600">
              Chain 138
            </text>
          </g>

          {/* Settlement rail */}
          <g transform="translate(180 164)">
            <rect x="-72" y="-14" width="144" height="28" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.25" strokeWidth="1" />
            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="8" fontWeight="500" opacity="0.8">
              Trust · Ledger · CCIP
            </text>
          </g>

          {/* Topology links */}
          <path d="M180 54 L180 82 M108 100 L132 100 M228 100 L252 100 M180 118 L180 150" stroke={GOLD} strokeOpacity="0.3" strokeWidth="1" strokeDasharray="3 3" />
        </svg>
      </div>

      <div className="absolute -left-2 top-1/4 rounded-lg border border-emerald-500/30 bg-sovereign-midnight/90 px-3 py-2 text-xs shadow-lg backdrop-blur">
        <span className="font-bold text-emerald-400">A−</span>
        <span className="ml-1 text-sovereign-ivory/50">L1 health</span>
      </div>
      <div className="absolute -right-2 bottom-1/3 rounded-lg border border-sovereign-gold/30 bg-sovereign-midnight/90 px-3 py-2 text-xs shadow-lg backdrop-blur">
        <span className="font-bold text-sovereign-gold">3</span>
        <span className="ml-1 text-sovereign-ivory/50">sovereign pillars</span>
      </div>
    </div>
  );
}
