"use client";

import { useId } from "react";

/**
 * Cloud Solar identity — a sun behind a cloud built from solar cells.
 *
 * Redrawn as vector rather than shipped as a raster so it stays crisp at every
 * size and on every pixel ratio, which matters on a page whose whole premise is
 * a 4K canvas.
 *
 * Colour: the sun reuses the site's exact accent ramp (amber-400 → orange-500)
 * so the logo ties into every CTA on the page, and the cloud is pulled down to
 * a deep navy — far darker than the mid-blue of the original — because the
 * page sits on #f5f5f5 and a mid-blue greys out against it. Navy also sits
 * opposite amber on the wheel, so the mark reads at 20px in the navbar.
 */

const SUN_FROM = "#fbbf24"; // amber-400
const SUN_TO = "#f97316"; // orange-500
const PANEL_FROM = "#2b5aa8";
const PANEL_TO = "#0c1f4d";

/** Cloud silhouette. Drawn twice — once as the rim, once as the body. */
function CloudShapes() {
  return (
    <>
      <circle cx="30" cy="72" r="14" />
      <circle cx="48" cy="60" r="20" />
      <circle cx="76" cy="54" r="24" />
      <circle cx="100" cy="68" r="15" />
      <rect x="30" y="66" width="70" height="24" rx="12" />
    </>
  );
}

export function CloudSolarMark({
  size = 40,
  className = "",
  rim = "#ffffff",
}: {
  size?: number;
  className?: string;
  /** Colour of the gap between sun and cloud; match the surface behind it. */
  rim?: string;
}) {
  const uid = useId().replace(/:/g, "");
  const sunId = `cs-sun-${uid}`;
  const panelId = `cs-panel-${uid}`;
  const clipId = `cs-clip-${uid}`;

  return (
    <svg
      width={size}
      height={(size * 96) / 128}
      viewBox="0 0 128 96"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label="Cloud Solar"
      className={className}
    >
      <defs>
        <linearGradient id={sunId} x1="64" y1="2" x2="64" y2="52" gradientUnits="userSpaceOnUse">
          <stop stopColor={SUN_FROM} />
          <stop offset="1" stopColor={SUN_TO} />
        </linearGradient>
        <linearGradient id={panelId} x1="26" y1="30" x2="104" y2="92" gradientUnits="userSpaceOnUse">
          <stop stopColor={PANEL_FROM} />
          <stop offset="1" stopColor={PANEL_TO} />
        </linearGradient>
        <clipPath id={clipId}>
          <CloudShapes />
        </clipPath>
      </defs>

      {/* Sun: rays first, then the disc over their inner ends. */}
      <g stroke={`url(#${sunId})`} strokeWidth="4.5" strokeLinecap="round">
        {Array.from({ length: 12 }, (_, i) => {
          const a = ((i * 30 - 90) * Math.PI) / 180;
          return (
            <line
              key={i}
              x1={(64 + Math.cos(a) * 21).toFixed(2)}
              y1={(34 + Math.sin(a) * 21).toFixed(2)}
              x2={(64 + Math.cos(a) * 32).toFixed(2)}
              y2={(34 + Math.sin(a) * 32).toFixed(2)}
            />
          );
        })}
      </g>
      <circle cx="64" cy="34" r="17" fill={`url(#${sunId})`} />

      {/* Rim: the same silhouette fattened by a stroke, so the cloud reads as
          separate from the rays it overlaps. Internal edges are hidden because
          fill and stroke are the same colour. */}
      <g fill={rim} stroke={rim} strokeWidth="8" strokeLinejoin="round">
        <CloudShapes />
      </g>

      <g fill={`url(#${panelId})`}>
        <CloudShapes />
      </g>

      {/* Cell grid, clipped to the cloud. */}
      <g
        clipPath={`url(#${clipId})`}
        stroke="#ffffff"
        strokeOpacity="0.3"
        strokeWidth="1.6"
      >
        {[22, 36, 50, 64, 78, 92, 106].map((x) => (
          <line key={`v${x}`} x1={x} y1="26" x2={x} y2="94" />
        ))}
        {[42, 54, 66, 78].map((y) => (
          <line key={`h${y}`} x1="12" y1={y} x2="120" y2={y} />
        ))}
      </g>
    </svg>
  );
}

/**
 * Full lockup. `tone` inverts only the type — the mark keeps its colour so the
 * brand stays recognisable over the dark sections of the page.
 */
export default function CloudSolarLogo({
  size = 34,
  tone = "dark",
  stacked = false,
  tagline = false,
  rim = "#ffffff",
  className = "",
}: {
  size?: number;
  tone?: "dark" | "light";
  stacked?: boolean;
  tagline?: boolean;
  rim?: string;
  className?: string;
}) {
  const text = tone === "light" ? "text-white" : "text-zinc-950";
  const sub = tone === "light" ? "text-zinc-400" : "text-zinc-500";

  return (
    <span
      className={`flex shrink-0 ${stacked ? "flex-col items-center gap-3" : "flex-row items-center gap-2.5"} ${className}`}
    >
      <CloudSolarMark size={size} rim={rim} />
      <span className={stacked ? "flex flex-col items-center" : "flex flex-col"}>
        <span
          className={`leading-none font-semibold tracking-tight whitespace-nowrap transition-colors duration-500 ${text}`}
          style={{ fontSize: stacked ? size * 0.42 : size * 0.46 }}
        >
          Cloud<span className="font-normal"> Solar</span>
        </span>
        {tagline && (
          <span
            className={`mt-1.5 font-mono tracking-[0.25em] uppercase ${sub}`}
            style={{ fontSize: Math.max(7, size * 0.15) }}
          >
            Renewable Energy Systems
          </span>
        )}
      </span>
    </span>
  );
}