/* atoms.jsx — 共通部品・アイコン・プレースホルダー */

const Icon = ({ name, size = 24, stroke = 1.6 }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "phone":
      return (
        <svg {...props}>
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      );
    case "mail":
      return (
        <svg {...props}>
          <rect x="2.5" y="4.5" width="19" height="15" rx="2"/>
          <path d="M3 6l9 7 9-7"/>
        </svg>
      );
    case "doc":
      return (
        <svg {...props}>
          <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>
          <path d="M14 3v5h5"/>
          <path d="M9 13h6M9 17h6M9 9h2"/>
        </svg>
      );
    case "users":
      return (
        <svg {...props}>
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="3.5"/>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
      );
    case "home":
      return (
        <svg {...props}>
          <path d="M3 11l9-8 9 8"/>
          <path d="M5 10v10h14V10"/>
        </svg>
      );
    case "car":
      return (
        <svg {...props}>
          <path d="M5 16V11l2-5h10l2 5v5"/>
          <circle cx="7.5" cy="16.5" r="1.5"/>
          <circle cx="16.5" cy="16.5" r="1.5"/>
          <path d="M3 16h18"/>
        </svg>
      );
    case "clipboard":
      return (
        <svg {...props}>
          <rect x="6" y="4" width="12" height="17" rx="2"/>
          <path d="M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"/>
          <path d="M9 11h6M9 15h6"/>
        </svg>
      );
    case "chat":
      return (
        <svg {...props}>
          <path d="M21 12a8 8 0 1 1-3-6.2L21 4l-1 4.5A8 8 0 0 1 21 12z"/>
        </svg>
      );
    case "edit":
      return (
        <svg {...props}>
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/>
        </svg>
      );
    case "check":
      return (
        <svg {...props}>
          <path d="M5 12l5 5L20 7"/>
        </svg>
      );
    case "pin":
      return (
        <svg {...props}>
          <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/>
          <circle cx="12" cy="9" r="2.5"/>
        </svg>
      );
    case "chevron-down":
      return (
        <svg {...props}>
          <path d="M6 9l6 6 6-6"/>
        </svg>
      );
    case "chevron-right":
      return (
        <svg {...props}>
          <path d="M9 6l6 6-6 6"/>
        </svg>
      );
    case "list":
      return (
        <svg {...props}>
          <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
        </svg>
      );
    case "anchor":
      return (
        <svg {...props}>
          <path d="M12 4v16M5 11l-2 2a9 9 0 0 0 9 7 9 9 0 0 0 9-7l-2-2"/>
          <circle cx="12" cy="6" r="2"/>
        </svg>
      );
    default:
      return null;
  }
};

const Logo = () => (
  <svg className="brand-logo" viewBox="0 0 32 32" fill="none">
    <circle cx="16" cy="16" r="15" fill="#14224a"/>
    <path d="M9 22 L16 9 L23 22 Z" fill="#fff"/>
    <path d="M7 23 L25 23" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
    <path d="M16 9 L16 6" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
  </svg>
);

const Placeholder = ({ label, style }) => (
  <div className="ph" style={style}>
    <span className="ph-label">{label}</span>
  </div>
);

/* Reveal-on-scroll wrapper */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", style = {}, ...rest }) => {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          setVis(true);
          io.disconnect();
        }
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${vis ? "is-visible" : ""} ${className}`}
      style={{ ...style, transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

Object.assign(window, { Icon, Logo, Placeholder, Reveal });