/* Shared UI primitives + icons */

const JICOO = window.JICOO_URL;

function BrandLock({ white }) {
  const logo = (window.__resources || {}).logo;
  return (
    <a href="#top" className="brand-lock">
      {logo
        ? <img src={logo} alt="株式会社イトウ林産" className="brand-logo" style={{ filter: white ? 'brightness(0) invert(1)' : 'none' }} />
        : <><div className="mark">伊</div><div className="name"><small className="corp">株式会社イトウ林産</small><span className="event">完成物件見学会</span></div></>
      }
    </a>
  );
}

function Cta({ children = '予約の空き状況をみる', size, ghost, small }) {
  const cls = ['btn'];
  if (size === 'lg') cls.push('btn-lg');
  if (ghost) cls.push('btn-ghost');
  return (
    <a href={JICOO} target="_blank" rel="noopener" className={cls.join(' ')}>
      <span>{children}</span>
      <span className="arrow" aria-hidden="true">→</span>
    </a>
  );
}

/* ---- inline SVG icons ---- */
const iconBase = {
  width: '100%', height: '100%', viewBox: '0 0 64 64',
  fill: 'none', stroke: 'currentColor', strokeWidth: 1.4,
  strokeLinecap: 'round', strokeLinejoin: 'round',
};

const Icons = {
  tree: (
    <svg {...iconBase}>
      <path d="M32 8 L20 28 H26 L16 44 H26 L20 54 H44 L38 44 H48 L38 28 H44 Z"/>
      <path d="M32 54 V60"/>
    </svg>
  ),
  hand: (
    <svg {...iconBase}>
      <path d="M16 36 V20 a3 3 0 0 1 6 0 V34"/>
      <path d="M22 20 V16 a3 3 0 0 1 6 0 V34"/>
      <path d="M28 16 V14 a3 3 0 0 1 6 0 V34"/>
      <path d="M34 18 V18 a3 3 0 0 1 6 0 V38"/>
      <path d="M40 28 a4 4 0 0 1 8 0 V44 a14 14 0 0 1-14 14 H28 a12 12 0 0 1-12-12 V36"/>
    </svg>
  ),
  map: (
    <svg {...iconBase}>
      <path d="M10 18 L24 14 L40 20 L54 14 V48 L40 54 L24 48 L10 52 Z"/>
      <path d="M24 14 V48"/>
      <path d="M40 20 V54"/>
      <circle cx="32" cy="30" r="3"/>
    </svg>
  ),
  talk: (
    <svg {...iconBase}>
      <path d="M10 20 a4 4 0 0 1 4-4 H40 a4 4 0 0 1 4 4 V34 a4 4 0 0 1-4 4 H22 L14 46 V38 a4 4 0 0 1-4-4 Z"/>
      <path d="M24 24 H38 M24 30 H34"/>
      <circle cx="50" cy="46" r="3" fill="currentColor" stroke="none"/>
    </svg>
  ),
  silence: (
    <svg {...iconBase}>
      <circle cx="32" cy="32" r="22"/>
      <path d="M16 16 L48 48"/>
      <path d="M24 28 H40 M24 34 H36"/>
    </svg>
  ),
  calendar: (
    <svg {...iconBase}>
      <rect x="10" y="14" width="44" height="40" rx="2"/>
      <path d="M10 24 H54"/>
      <path d="M20 10 V18 M44 10 V18"/>
      <circle cx="22" cy="36" r="2" fill="currentColor" stroke="none"/>
      <circle cx="32" cy="36" r="2" fill="currentColor" stroke="none"/>
      <circle cx="42" cy="36" r="2" fill="currentColor" stroke="none"/>
    </svg>
  ),
};

function FloorplanIllustration() {
  return (
    <svg viewBox="0 0 400 300" style={{ width: '88%', height: '82%', opacity: .85 }}>
      <g fill="none" stroke="#a87544" strokeWidth="1.4">
        <path d="M40 60 H200 V140 H360 V260 H40 Z"/>
        <path d="M40 140 H200"/>
        <path d="M120 60 V140"/>
        <path d="M200 140 V260 M280 140 V260"/>
        <path d="M200 200 H360"/>
        <rect x="210" y="60" width="140" height="76" stroke="#c79a6a" strokeDasharray="4 3"/>
      </g>
      <g fill="#6b6560" fontFamily="Shippori Mincho, serif" fontSize="10" letterSpacing="2">
        <text x="72" y="108">親世帯</text>
        <text x="215" y="104" fill="#a87544">中庭</text>
        <text x="232" y="186">子世帯 LDK</text>
        <text x="296" y="236">子世帯</text>
      </g>
    </svg>
  );
}

Object.assign(window, { BrandLock, Cta, Icons, FloorplanIllustration });