/* Takotasks — primitives.
   Buttons, badges, inputs, wordmark, icons, and motion helpers. */

const cx = (...c) => c.filter(Boolean).join(" ");

function Wordmark({ light = false, size = 36 }) {
  const src = light ? "assets/logo-light.svg" : "assets/logo-dark.svg";
  return (
    <img
      src={src}
      alt="Takotasks"
      height={size}
      style={{ display: "block", alignSelf: "flex-start" }} />);


}

function Button({ children, variant = "primary", as = "button", onClick, disabled, href, ...rest }) {
  const cls = cx("tt-btn", `tt-btn--${variant}`);
  if (href) {
    return (
      <a className={cls} href={href} {...rest}>
        {children}
      </a>);

  }
  const Tag = as;
  return (
    <Tag className={cls} onClick={onClick} disabled={disabled} {...rest}>
      {children}
    </Tag>);

}

function Eyebrow({ children, light, style, ...rest }) {
  return (
    <span
      className="tt-eyebrow"
      style={{
        ...(light ? { color: "var(--tt-grad-pink)" } : null),
        ...style
      }}
      {...rest}>
      
      {children}
    </span>);

}

function Badge({ children, variant, dot }) {
  return (
    <span className={cx("tt-badge", variant && `tt-badge--${variant}`)}>
      {dot && <span className="tt-badge__dot" style={{ background: dot }} />}
      {children}
    </span>);

}

function Field({ label, error, hint, children, id }) {
  return (
    <div className={cx("tt-field", error && "tt-field--error")}>
      {label && <label htmlFor={id}>{label}</label>}
      {children}
      {error && <span className="tt-field__err">{error}</span>}
      {hint && !error && <span style={{ color: "var(--tt-muted)", fontSize: 12 }}>{hint}</span>}
    </div>);

}

/* Line-icon set in Lucide style — rounded caps, 1.75 stroke. */
function Icon({ name, size = 20, strokeWidth = 1.75, ...rest }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth, strokeLinecap: "round", strokeLinejoin: "round",
    ...rest
  };
  switch (name) {
    case "arrow-right":
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "arrow-up-right":
      return <svg {...common}><path d="M7 17 17 7M8 7h9v9" /></svg>;
    case "arrow-down":
      return <svg {...common}><path d="M12 5v14M6 13l6 6 6-6" /></svg>;
    case "check":
      return <svg {...common}><path d="M20 6 9 17l-5-5" /></svg>;
    case "check-circle":
      return <svg {...common}><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>;
    case "shield":
      return <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>;
    case "wallet":
      return <svg {...common}><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" /></svg>;
    case "users":
      return <svg {...common}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><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 "user":
      return <svg {...common}><circle cx="12" cy="8" r="4" /><path d="M4 21v-2a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2" /></svg>;
    case "calendar":
      return <svg {...common}><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>;
    case "mail":
      return <svg {...common}><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 7-10 6L2 7" /></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>;
    case "sparkles":
      return <svg {...common}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>;
    case "menu":
      return <svg {...common}><path d="M3 6h18M3 12h18M3 18h18" /></svg>;
    case "x":
      return <svg {...common}><path d="M18 6 6 18M6 6l12 12" /></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14M5 12h14" /></svg>;
    case "minus":
      return <svg {...common}><path d="M5 12h14" /></svg>;
    case "globe":
      return <svg {...common}><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" /></svg>;
    case "map-pin":
      return <svg {...common}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></svg>;
    case "briefcase":
      return <svg {...common}><rect x="2" y="7" width="20" height="14" rx="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /></svg>;
    case "file-text":
      return <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M8 13h8M8 17h8M8 9h2" /></svg>;
    case "video":
      return <svg {...common}><path d="m22 8-6 4 6 4V8z" /><rect x="2" y="6" width="14" height="12" rx="2" /></svg>;
    case "headphones":
      return <svg {...common}><path d="M3 14v-3a9 9 0 0 1 18 0v3" /><path d="M21 19a2 2 0 0 1-2 2h-1v-7h3v5zM3 19a2 2 0 0 0 2 2h1v-7H3v5z" /></svg>;
    case "image":
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>;
    case "palette":
      return <svg {...common}><circle cx="13.5" cy="6.5" r="1" /><circle cx="17.5" cy="10.5" r="1" /><circle cx="8.5" cy="7.5" r="1" /><circle cx="6.5" cy="12.5" r="1" /><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 10 10c0 4-3 5-5 5h-2a2 2 0 0 0-2 2v1c0 1-1 2-1 2z" /></svg>;
    case "play":
      return <svg {...common}><path d="m6 4 14 8L6 20V4z" /></svg>;
    default:
      return null;
  }
}

/* ---------- Motion: reveal-on-scroll ---------- */
function Reveal({ children, delay = 0, y = 24, as: Tag = "div", className, style, ...rest }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.unobserve(e.target);
          }
        });
      },
      { rootMargin: "0px 0px -8% 0px", threshold: 0.05 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={cx("tt-reveal", shown && "tt-reveal--in", className)}
      style={{
        transitionDelay: `${delay}ms`,
        "--tt-reveal-y": `${y}px`,
        ...style
      }}
      {...rest}>
      
      {children}
    </Tag>);

}

window.cx = cx;
window.Wordmark = Wordmark;
window.Button = Button;
window.Eyebrow = Eyebrow;
window.Badge = Badge;
window.Field = Field;
window.Icon = Icon;
window.Reveal = Reveal;