// Shared atoms and utilities for ITtech Works prototype.
// Globals: Logo, Icon, Reveal, useScrollSpy, Placeholder

const ITW_BRAND = {
  name: "ITtech Works",
  jp: "アイテック ワークス",
  tagline: "成果につながるWebサイトをひとつずつ。",
};

// Logo — image-based wordmark
function Logo({ size = 44, color, mono = false }) {
  return (
    <span className="brand" style={{ display: "inline-flex", alignItems: "center" }}>
      <img
        src="images/logo.png?v=3"
        alt="ITtech Works"
        style={{
          height: size,
          width: "auto",
          display: "block",
          objectFit: "contain",
        }}
      />
    </span>
  );
}

// Inline icons (stroke-based, original)
function Icon({ name, size = 24, color = "currentColor", strokeWidth = 1.6 }) {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "mail":
      return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>);
    case "download":
      return (<svg {...props}><path d="M12 4v11"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></svg>);
    case "chat":
      return (<svg {...props}><path d="M4 5h16v11H8l-4 4V5z"/><circle cx="9" cy="10.5" r=".8" fill={color}/><circle cx="12" cy="10.5" r=".8" fill={color}/><circle cx="15" cy="10.5" r=".8" fill={color}/></svg>);
    case "shield":
      return (<svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "trend":
      return (<svg {...props}><path d="M4 17l5-5 4 3 7-8"/><path d="M15 7h5v5"/></svg>);
    case "monitor":
      return (<svg {...props}><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>);
    case "sparkles":
      return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3"/></svg>);
    case "users":
      return (<svg {...props}><circle cx="9" cy="9" r="3"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="8" r="2.5"/><path d="M15 19c0-2.5 2-4 4-4s2 0 2 0"/></svg>);
    case "headset":
      return (<svg {...props}><path d="M4 14v-2a8 8 0 0 1 16 0v2"/><rect x="3" y="13" width="4" height="6" rx="1.2"/><rect x="17" y="13" width="4" height="6" rx="1.2"/><path d="M19 19v1a3 3 0 0 1-3 3h-2"/></svg>);
    case "question":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-1 .5-1 1.2-1 2.2"/><circle cx="12" cy="17" r=".6" fill={color} stroke="none"/></svg>);
    case "arrow-right":
      return (<svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "arrow-left":
      return (<svg {...props}><path d="M19 12H5M11 18l-6-6 6-6"/></svg>);
    case "check":
      return (<svg {...props}><path d="M5 12l5 5 9-11"/></svg>);
    case "plus":
      return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case "minus":
      return (<svg {...props}><path d="M5 12h14"/></svg>);
    case "clock":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "yen":
      return (<svg {...props}><path d="M6 4l6 8 6-8"/><path d="M6 13h12M6 17h12M12 12v8"/></svg>);
    case "doc":
      return (<svg {...props}><path d="M7 3h8l4 4v14H7V3z"/><path d="M15 3v4h4"/><path d="M10 12h6M10 16h6"/></svg>);
    case "send":
      return (<svg {...props}><path d="M4 12l16-8-6 18-3-7-7-3z"/></svg>);
    case "code":
      return (<svg {...props}><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"/></svg>);
    case "search":
      return (<svg {...props}><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg>);
    case "globe":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18"/></svg>);
    case "menu":
      return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case "x":
      return (<svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case "sun":
      return (<svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>);
    case "moon":
      return (<svg {...props}><path d="M20 14a8 8 0 1 1-10-10 7 7 0 0 0 10 10z"/></svg>);
    case "play":
      return (<svg {...props}><path d="M7 5l12 7-12 7V5z" fill={color}/></svg>);
    case "phone":
      return (<svg {...props}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>);
    case "pin":
      return (<svg {...props}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    default:
      return (<svg {...props}><circle cx="12" cy="12" r="9"/></svg>);
  }
}

// Reveal on scroll wrapper
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => setShown(true), delay);
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} style={style}>
      {children}
    </Tag>
  );
}

// Striped placeholder for imagery
function Placeholder({ label = "image", ratio = "16 / 10", radius = 12, style = {}, tone = "blue" }) {
  const stripes = tone === "blue"
    ? "repeating-linear-gradient(135deg, rgba(30,58,138,.12) 0 14px, rgba(30,58,138,.05) 14px 28px)"
    : "repeating-linear-gradient(135deg, rgba(15,26,46,.10) 0 14px, rgba(15,26,46,.04) 14px 28px)";
  return (
    <div
      style={{
        aspectRatio: ratio,
        background: `linear-gradient(180deg, var(--primary-50), color-mix(in oklab, var(--primary-100) 50%, var(--bg))), ${stripes}`,
        backgroundBlendMode: "multiply",
        borderRadius: radius,
        display: "grid",
        placeItems: "center",
        color: "var(--primary-600)",
        fontFamily: "var(--font-en)",
        fontSize: 12,
        fontWeight: 600,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        border: "1px dashed color-mix(in oklab, var(--primary-600) 30%, transparent)",
        ...style,
      }}
    >
      <span style={{ background: "var(--bg)", padding: "4px 10px", borderRadius: 999, border: "1px solid var(--border)" }}>
        ▱ {label}
      </span>
    </div>
  );
}

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