// Brush.jsx — decorative SVG components and icons

function EnsoSVG({ size = 360, color = "var(--sumi)", opacity = 0.08 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ opacity }}>
      <path
        d="M 100 18 C 145 18 182 55 182 100 C 182 145 145 182 100 182 C 55 182 18 145 18 100 C 18 60 50 25 92 19"
        stroke={color} strokeWidth="14" strokeLinecap="round" fill="none"
        strokeDasharray="600" strokeDashoffset="0"
      />
    </svg>
  );
}

function StrokeH({ width = 240, color = "var(--sumi)", opacity = 1 }) {
  return (
    <svg width={width} height={28} viewBox="0 0 240 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ opacity }}>
      <path d="M 6 18 C 60 8 140 8 234 14" stroke={color} strokeWidth="6" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

function IconArrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <line x1="2" y1="8" x2="13" y2="8"/>
      <polyline points="9,4 13,8 9,12"/>
    </svg>
  );
}

function IconArrowUR({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <line x1="4" y1="12" x2="12" y2="4"/>
      <polyline points="6,4 12,4 12,10"/>
    </svg>
  );
}

function IconPhone({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.56 21 3 13.44 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.36.03.76-.25 1.04L6.6 10.8z"/>
    </svg>
  );
}

function IconMail({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
  );
}

function IconPin({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  );
}

function IconInstagram({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="ig-grad" cx="30%" cy="107%" r="150%">
          <stop offset="0%" stopColor="#fdf497"/>
          <stop offset="5%" stopColor="#fdf497"/>
          <stop offset="45%" stopColor="#fd5949"/>
          <stop offset="60%" stopColor="#d6249f"/>
          <stop offset="90%" stopColor="#285AEB"/>
        </radialGradient>
      </defs>
      <rect x="1" y="1" width="22" height="22" rx="7" fill="url(#ig-grad)" stroke="none"/>
      <rect x="5" y="5" width="14" height="14" rx="4" fill="none"/>
      <circle cx="12" cy="12" r="4.2"/>
      <circle cx="17.5" cy="6.5" r="1.1" fill="white" stroke="none"/>
    </svg>
  );
}

function IconLine({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <rect width="100" height="100" rx="22" fill="#06c755"/>
      <rect x="13" y="17" width="74" height="50" rx="14" fill="white"/>
      <path fill="white" d="M36 67 L28 84 L52 72z"/>
      <text x="50" y="46" textAnchor="middle" dominantBaseline="middle" fill="#06c755" fontSize="20" fontWeight="900" fontFamily="'Arial Black',Arial,sans-serif" letterSpacing="1">LINE</text>
    </svg>
  );
}

function IconChevron({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6,4 10,8 6,12"/>
    </svg>
  );
}

function HankoStamp({ chars = "志", size = 48 }) {
  const fz = size * 0.5;
  return (
    <span
      className="hanko-mark"
      aria-hidden="true"
      style={{
        width: size, height: size, fontSize: fz, lineHeight: size + "px",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        transform: "rotate(-3deg)",
      }}
    >{chars}</span>
  );
}

Object.assign(window, {
  EnsoSVG, StrokeH,
  IconArrow, IconArrowUR, IconPhone, IconMail, IconPin, IconInstagram, IconLine, IconChevron,
  HankoStamp,
});
