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 - CrawlerX accent teal (#3fb6ae) */}
        <path d="M20 4L34 12L20 20L6 12L20 4Z" fill="url(#cube-top-theme)" />
        {/* Left facet - CrawlerX primary teal (#0e6e6a) */}
        <path d="M6 12L20 20V36L6 28V12Z" fill="url(#cube-left-theme)" />
        {/* Right facet - CrawlerX ink navy (#0f161c) */}
        <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="#3fb6ae" />
            <stop offset="1" stopColor="#0e6e6a" />
          </linearGradient>
          <linearGradient
            id="cube-left-theme"
            x1="6"
            y1="12"
            x2="20"
            y2="36"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#0e6e6a" />
            <stop offset="1" stopColor="#127b76" />
          </linearGradient>
          <linearGradient
            id="cube-right-theme"
            x1="20"
            y1="20"
            x2="34"
            y2="36"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#0f161c" />
            <stop offset="1" stopColor="#0a1210" />
          </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="#0e6e6a" 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-[#0e6e6a] 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="#3fb6ae" />
                  <stop offset="1" stopColor="#0e6e6a" />
                </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-[#0f161c] to-[#163b39] shadow-xs" />
            <div className="w-4 h-14 rounded-md bg-gradient-to-t from-[#163b39] to-[#127b76] shadow-xs" />
            <div className="w-4 h-19 rounded-md bg-gradient-to-t from-[#127b76] to-[#0e6e6a] shadow-xs" />
            <div className="w-4 h-24 rounded-md bg-gradient-to-t from-[#0e6e6a] to-[#3fb6ae] shadow-md shadow-[#3fb6ae]/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-[#0e6e6a]" />
            <div className="size-2 rounded-full bg-[#0e6e6a]" />
          </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-[#f0f8f7] border border-[#d9e8e7] flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#0e6e6a] shrink-0" />
              <span className="text-[11px] font-bold text-[#0f161c]">
                More Traffic
              </span>
            </div>

            <div className="p-2 rounded-xl bg-[#e3f3f2] border border-sky-100 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#3fb6ae] shrink-0" />
              <span className="text-[11px] font-bold text-[#1a8a84]">
                Real Results
              </span>
            </div>
          </div>
        </div>

        {/* Hand-drawn Loop Arrow */}
        <div className="absolute -bottom-8 -left-8 size-16 text-[#3fb6ae]">
          <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="#3fb6ae"
              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="#3fb6ae" stopOpacity="0.22" />
            <stop offset="0.6" stopColor="#0e6e6a" stopOpacity="0.12" />
            <stop offset="1" stopColor="#0f161c" 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="#3fb6ae"
          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-[#0e6e6a]" />,
  upi: <Zap className="size-4.5 text-[#0e6e6a]" />,
  gst: <FileText className="size-4.5 text-[#0e6e6a]" />,
  cards: <CreditCard className="size-4.5 text-[#0e6e6a]" />,
  support: <span className="text-sm">🇮🇳</span>,
};

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