import * as React from "react";
import {
  Search,
  Sprout,
  Rocket,
  Crown,
  Landmark,
  Sparkles,
  ShieldCheck,
  Zap,
  FileText,
  CreditCard,
} from "lucide-react";

export function CrawlerXLogo() {
  return (
    <div className="flex items-center gap-3 select-none">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" className="shrink-0 drop-shadow-sm">
        {/* Top facet - Cyan / Ice Blue (#4faede) */}
        <path d="M20 4L34 12L20 20L6 12L20 4Z" fill="url(#cube-top-theme)" />
        {/* Left facet - MetatronCube Blue (#3779b9) */}
        <path d="M6 12L20 20V36L6 28V12Z" fill="url(#cube-left-theme)" />
        {/* Right facet - Deep Navy (#0f1d34) */}
        <path d="M20 20L34 12V28L20 36V20Z" fill="url(#cube-right-theme)" />
        {/* Subtle highlights */}
        <path d="M20 20V36" stroke="rgba(255,255,255,0.25)" strokeWidth="1" />
        <path d="M6 12L20 20L34 12" stroke="rgba(255,255,255,0.35)" strokeWidth="0.8" />
        <defs>
          <linearGradient id="cube-top-theme" x1="6" y1="4" x2="34" y2="20" gradientUnits="userSpaceOnUse">
            <stop stopColor="#4faede" />
            <stop offset="1" stopColor="#3779b9" />
          </linearGradient>
          <linearGradient id="cube-left-theme" x1="6" y1="12" x2="20" y2="36" gradientUnits="userSpaceOnUse">
            <stop stopColor="#3779b9" />
            <stop offset="1" stopColor="#2563eb" />
          </linearGradient>
          <linearGradient id="cube-right-theme" x1="20" y1="20" x2="34" y2="36" gradientUnits="userSpaceOnUse">
            <stop stopColor="#0f1d34" />
            <stop offset="1" stopColor="#091424" />
          </linearGradient>
        </defs>
      </svg>
      <div>
        <div className="font-extrabold text-xl text-slate-900 tracking-tight leading-none">
          CrawlerX
        </div>
        <div className="text-[10px] font-bold text-slate-400 tracking-wider uppercase mt-1">
          SEO Made Actionable
        </div>
      </div>
    </div>
  );
}

export function DotGridMatrix({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="140"
      height="90"
      viewBox="0 0 140 90"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <defs>
        <pattern
          id="dot-grid-theme"
          x="0"
          y="0"
          width="16"
          height="16"
          patternUnits="userSpaceOnUse"
        >
          <circle cx="2" cy="2" r="1.5" fill="#3779b9" opacity="0.25" />
        </pattern>
      </defs>
      <rect width="140" height="90" fill="url(#dot-grid-theme)" />
    </svg>
  );
}

export function Floating3DChartCard({ className }: { className?: string }) {
  return (
    <div
      className={`pointer-events-none select-none transition-transform duration-700 ease-out hover:scale-105 ${className}`}
      aria-hidden="true"
    >
      <div className="relative">
        {/* Main Chart Card */}
        <div className="relative rounded-3xl bg-white/95 p-5 shadow-[0_25px_60px_rgba(55,121,185,0.18),0_10px_25px_rgba(15,29,52,0.05)] border border-slate-100/90 backdrop-blur-xl -rotate-6 w-44 h-44 flex flex-col justify-between">
          {/* Top Row: "Grow Faster" Pill & Growth Arrow */}
          <div className="flex items-center justify-between w-full">
            <span className="px-2.5 py-0.5 rounded-full bg-[#3779b9] text-white text-[10px] font-bold shadow-xs tracking-wide">
              Grow Faster
            </span>

            <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
              <path
                d="M6 24L16 14L21 19L27 9"
                stroke="url(#theme-growth-arrow)"
                strokeWidth="3.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M21 9H27V15"
                stroke="url(#theme-growth-arrow)"
                strokeWidth="3.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <defs>
                <linearGradient id="theme-growth-arrow" x1="6" y1="24" x2="27" y2="9" gradientUnits="userSpaceOnUse">
                  <stop stopColor="#4faede" />
                  <stop offset="1" stopColor="#3779b9" />
                </linearGradient>
              </defs>
            </svg>
          </div>

          {/* 4 Rising Theme Blue Bars */}
          <div className="flex items-end gap-2.5 w-full justify-center pb-1">
            <div className="w-4 h-9 rounded-md bg-gradient-to-t from-[#0f1d34] to-[#1e3a66] shadow-xs" />
            <div className="w-4 h-14 rounded-md bg-gradient-to-t from-[#1e3a66] to-[#2563eb] shadow-xs" />
            <div className="w-4 h-19 rounded-md bg-gradient-to-t from-[#2563eb] to-[#3779b9] shadow-xs" />
            <div className="w-4 h-24 rounded-md bg-gradient-to-t from-[#3779b9] to-[#4faede] shadow-md shadow-[#4faede]/30" />
          </div>
        </div>

        {/* Small Plant in White Pot */}
        <div className="absolute -bottom-3 -left-3 size-11 z-20">
          <svg viewBox="0 0 44 44" fill="none">
            <path d="M12 28L15 40H29L32 28H12Z" fill="#ffffff" stroke="#e2e8f0" strokeWidth="1.5" />
            <path d="M22 28C22 18 10 14 6 20C10 26 18 26 22 28Z" fill="#10b981" />
            <path d="M22 28C22 16 34 12 38 18C34 24 26 24 22 28Z" fill="#059669" />
            <path d="M22 28V12" stroke="#047857" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </div>
      </div>
    </div>
  );
}

export function Floating3DSearchCard({ className }: { className?: string }) {
  return (
    <div
      className={`pointer-events-none select-none transition-transform duration-700 ease-out hover:scale-105 ${className}`}
      aria-hidden="true"
    >
      <div className="relative">
        {/* Tablet / Card */}
        <div className="relative rounded-3xl bg-white/95 p-4 shadow-[0_25px_60px_rgba(55,121,185,0.18),0_10px_25px_rgba(15,29,52,0.05)] border border-slate-100/90 backdrop-blur-xl rotate-6 w-48 space-y-2.5">
          {/* Search Input Simulation */}
          <div className="h-7 w-full rounded-xl bg-slate-50 border border-slate-200/80 px-2.5 flex items-center justify-between">
            <Search className="size-3 text-[#3779b9]" />
            <div className="size-2 rounded-full bg-[#3779b9]" />
          </div>

          {/* 3 Theme Pills */}
          <div className="space-y-2 pt-0.5">
            <div className="p-2 rounded-xl bg-emerald-50/80 border border-emerald-100 flex items-center gap-2">
              <span className="size-2 rounded-full bg-emerald-500 shrink-0" />
              <span className="text-[11px] font-bold text-emerald-800">Better Rankings</span>
            </div>

            <div className="p-2 rounded-xl bg-[#f0f6fc] border border-[#d6e4f3] flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#3779b9] shrink-0" />
              <span className="text-[11px] font-bold text-[#0f1d34]">More Traffic</span>
            </div>

            <div className="p-2 rounded-xl bg-[#e0f2fe] border border-sky-100 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#4faede] shrink-0" />
              <span className="text-[11px] font-bold text-[#0284c7]">Real Results</span>
            </div>
          </div>
        </div>

        {/* Hand-drawn Loop Arrow */}
        <div className="absolute -bottom-8 -left-8 size-16 text-[#4faede]">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <path
              d="M38 8C34 22 14 18 12 32C11 38 18 42 24 38L22 42"
              stroke="#4faede"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
  );
}

export function CornerWaveDecoration() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden z-0">
      {/* Top Right Blue Glow Aura & Ribbon */}
      <svg
        className="absolute -top-16 -right-16 w-[700px] h-[600px] opacity-80"
        viewBox="0 0 700 600"
        fill="none"
      >
        <path
          d="M740 -80C560 30 500 220 580 340C660 460 540 560 460 600L740 600Z"
          fill="url(#theme-top-right-wave)"
        />
        <defs>
          <linearGradient id="theme-top-right-wave" x1="740" y1="0" x2="420" y2="520" gradientUnits="userSpaceOnUse">
            <stop stopColor="#4faede" stopOpacity="0.22" />
            <stop offset="0.6" stopColor="#3779b9" stopOpacity="0.12" />
            <stop offset="1" stopColor="#0f1d34" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>

      {/* Bottom Left Blue Aura Ribbon */}
      <svg
        className="absolute -bottom-20 -left-20 w-[640px] h-[520px] opacity-75"
        viewBox="0 0 640 520"
        fill="none"
      >
        <path
          d="M-60 560C120 440 180 300 120 180C60 60 140 -20 220 -40"
          stroke="#4faede"
          strokeWidth="32"
          strokeOpacity="0.12"
        />
      </svg>
    </div>
  );
}

const PLAN_ICONS = {
  sprout: <Sprout className="size-5" />,
  rocket: <Rocket className="size-5" />,
  crown: <Crown className="size-5" />,
  landmark: <Landmark className="size-5" />,
};

export function renderPlanIcon(type: keyof typeof PLAN_ICONS) {
  return PLAN_ICONS[type] ?? <Sparkles className="size-5" />;
}

const TRUST_ICONS: Record<string, React.ReactNode> = {
  guarantee: <ShieldCheck className="size-4.5 text-[#3779b9]" />,
  upi: <Zap className="size-4.5 text-[#3779b9]" />,
  gst: <FileText className="size-4.5 text-[#3779b9]" />,
  cards: <CreditCard className="size-4.5 text-[#3779b9]" />,
  support: <span className="text-sm">🇮🇳</span>,
};

export function renderTrustIcon(id: string) {
  return TRUST_ICONS[id] ?? <ShieldCheck className="size-4.5 text-[#3779b9]" />;
}