// hifi-logo.jsx — logo mark using the "C" motif from the hero
//
// The mark is an open green "C" — four anchor dots along the arc — echoing
// the hero illustration. Pairs with a wordmark of the company name.

function LogoMark({ size = 36 }) {
  // C-arc from top-right opening down through the left and back to bottom-right.
  // viewBox 64×64, C centered at (34, 32), radius 22.
  const cPath = 'M 50 16 A 22 22 0 1 0 50 48';
  const anchors = [
    { x: 50, y: 16, c: '#306b3a' },
    { x: 17, y: 24, c: '#467548' },
    { x: 17, y: 40, c: '#6b9461' },
    { x: 50, y: 48, c: '#7ab26a' },
  ];
  return (
    <svg
      viewBox="0 0 64 64"
      width={size}
      height={size}
      style={{ display: 'block' }}
      aria-hidden="true"
    >
      {/* C arc */}
      <path
        d={cPath}
        fill="none"
        stroke="#306b3a"
        strokeWidth="3"
        strokeLinecap="round"
      />
      {/* anchor dots */}
      {anchors.map((a, i) => (
        <circle key={i} cx={a.x} cy={a.y} r="3.4" fill={a.c} />
      ))}
    </svg>
  );
}

function Logo({ size = 36, name = '株式会社●●●●' }) {
  return (
    <a href="#top" className="logo-wrap" aria-label="ホームへ">
      <LogoMark size={size} />
      <span className="name">{name}</span>
    </a>
  );
}

window.Logo = Logo;
window.LogoMark = LogoMark;