nahodka-front/src/components/NahodkaLogo.jsx

import React from "react";

export default function NahodkaLogo({
  width = 760,
  height = 360,
  className,
}) {
  return (
    <svg
      className={className}
      width={width}
      height={height}
      viewBox="-40 115 760 205"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        {/* ========================= */}
        {/* ЦВЕТ БУКВ */}
        {/* ========================= */}

        <linearGradient
          id="coral"
          x1="0"
          y1="0"
          x2="0"
          y2="1"
        >
          <stop offset="0%" stopColor="#E99A78" />
          <stop offset="100%" stopColor="#D97956" />
        </linearGradient>

        {/* ========================= */}
        {/* РАМКА ЛУПЫ */}
        {/* ========================= */}

        <linearGradient
          id="magnifier"
          x1="0"
          y1="0"
          x2="0"
          y2="1"
        >
          <stop offset="0%" stopColor="#EA9B78" />
          <stop offset="100%" stopColor="#D57250" />
        </linearGradient>

        {/* ========================= */}
        {/* СТЕКЛО */}
        {/* ========================= */}

        <radialGradient id="glass">
          <stop offset="0%" stopColor="#FFFDF8" />
          <stop offset="100%" stopColor="#F3E9DA" />
        </radialGradient>

        {/* ========================= */}
        {/* РУЧКА */}
        {/* ========================= */}

        <linearGradient
          id="handle"
          x1="0"
          y1="0"
          x2="1"
          y2="1"
        >
          <stop offset="0%" stopColor="#86A383" />
          <stop offset="100%" stopColor="#617D68" />
        </linearGradient>

        {/* ========================= */}
        {/* ТЕНЬ */}
        {/* ========================= */}

        <filter
          id="shadow"
          x="-30%"
          y="-30%"
          width="160%"
          height="180%"
        >
          <feDropShadow
            dx="0"
            dy="5"
            stdDeviation="5"
            floodColor="#8F4938"
            floodOpacity="0.25"
          />
        </filter>

        <filter
          id="magnifierShadow"
          x="-40%"
          y="-40%"
          width="180%"
          height="200%"
        >
          <feDropShadow
            dx="0"
            dy="5"
            stdDeviation="4"
            floodColor="#8F4938"
            floodOpacity="0.3"
          />
        </filter>
      </defs>

      {/* ===================================================== */}
      {/* ЛЕВАЯ ЧАСТЬ — "НАХ" */}
      {/* ===================================================== */}

      <g
  fill="url(#coral)"
  filter="url(#shadow)"
  fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
  fontSize="135"
  fontWeight="800"
>
  <text
    x="30"
    y="225"
    letterSpacing="1"
  >
    Нах
  </text>
</g>

      {/* ===================================================== */}
      {/* ЛУПА — "О" */}
      {/* ===================================================== */}

      <g
          transform="translate(352 190)"
          filter="url(#magnifierShadow)"
      >
        {/* Ручка */}

        <rect
            x="34"
            y="70"
            width="28"
            height="105"
            rx="14"
            transform="rotate(-43 34 70)"
            fill="url(#handle)"
            stroke="#D97956"
            strokeWidth="6"
        />

        {/* Внешняя рамка */}

        <circle
            cx="0"
            cy="0"
            r="70"
            fill="none"
            stroke="url(#magnifier)"
            strokeWidth="12"
        />

        {/* Внутренняя рамка */}

        <circle
            cx="0"
            cy="0"
            r="58"
            fill="none"
        />

        {/* Стекло */}

        <circle
            cx="0"
            cy="0"
            r="53"
            fill="none"
        />

        {/* ================================================= */}
        {/* ЛАПКА */}
        {/* ================================================= */}

        <g transform="translate(0 15)">
          <path
              d="
              M 0 25
              C -8 18 -25 12 -25 -2
              C -25 -13 -14 -18 -5 -12
              L 0 -8
              L 5 -12
              C 14 -18 25 -13 25 -2
              C 25 12 8 18 0 25
              Z
            "
              fill="#E8D3B0"
              stroke="#D97956"
              strokeWidth="4"
          />

          <ellipse
              cx="-22"
              cy="-20"
              rx="7"
              ry="10"
              fill="#E8D3B0"
              stroke="#D97956"
              strokeWidth="4"
              transform="rotate(-25 -22 -20)"
          />

          <ellipse
              cx="-7"
              cy="-29"
              rx="7"
              ry="11"
              fill="#E8D3B0"
              stroke="#D97956"
              strokeWidth="4"
          />

          <ellipse
              cx="9"
              cy="-29"
              rx="7"
              ry="11"
              fill="#E8D3B0"
              stroke="#D97956"
              strokeWidth="4"
          />

          <ellipse
              cx="23"
              cy="-20"
              rx="7"
              ry="10"
              fill="#E8D3B0"
              stroke="#D97956"
              strokeWidth="4"
              transform="rotate(25 23 -20)"
          />
        </g>
      </g>

      {/* ===================================================== */}
      {/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
      {/* ===================================================== */}

      {/* ПРАВАЯ ЧАСТЬ — "ДКА" */}

<g
  fill="url(#coral)"
  filter="url(#shadow)"
  fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
  fontSize="135"
  fontWeight="800"
>
  <text
    x="436"
    y="225"
    letterSpacing="1"
  >
    дка
  </text>
</g>
    </svg>
  );
}