// ============================================================
// Hattie — atoms (Icon, Button, Badge, Nav, Footer, useTally)
// ============================================================

/* ---------- Icons (Lucide-style monoline, 1.5 stroke) ---------- */

const Icon = ({ name, size = 20, strokeWidth = 1.5, style, className }) => {
  const props = {
    width: size, height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style, className,
  };
  switch (name) {
    case "check": return (
      <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>
    );
    case "x": return (
      <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    );
    case "edit": return (
      <svg {...props}><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
    );
    case "arrow-right": return (
      <svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
    );
    case "arrow-up": return (
      <svg {...props}><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
    );
    case "arrow-down": return (
      <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
    );
    case "plus": return (
      <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    );
    case "chevron-down": return (
      <svg {...props}><polyline points="6 9 12 15 18 9"/></svg>
    );
    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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
    );
    case "video": return (
      <svg {...props}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
    );
    case "more": return (
      <svg {...props}><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
    );
    case "mic": return (
      <svg {...props}><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
    );
    case "send": return (
      <svg {...props}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
    );
    case "smile": return (
      <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
    );
    case "paperclip": return (
      <svg {...props}><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
    );
    case "check-double": return (
      <svg {...props}><polyline points="2 12 6.5 16.5 12 11"/><polyline points="9 12 13.5 16.5 22 8"/></svg>
    );
    case "hash": return (
      <svg {...props}><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
    );
    case "menu": return (
      <svg {...props}><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    );
    case "lock": return (
      <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
    );
    case "alert": return (
      <svg {...props}><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    );
    case "trending-down": return (
      <svg {...props}><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
    );
    case "message-square": return (
      <svg {...props}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    );
    case "shield": return (
      <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    );
    case "eye": return (
      <svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    );
    case "clock": return (
      <svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    );
    case "broom": return (
      <svg {...props}><path d="M19.36 2.72 20.78 4.14 15.06 9.85"/><path d="M14 5.25 17.75 1.5"/><path d="m5.42 12.11 8.49 8.49"/><path d="m17.5 9.5-8 8L4 22l4.5-5.5L17.5 9.5z"/></svg>
    );
    case "calendar": return (
      <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    );
    case "circle-dot": return (
      <svg {...props}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg>
    );
    case "linkedin": return (
      <svg {...props}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
    );
    case "mail": return (
      <svg {...props}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    );
    case "dollar": return (
      <svg {...props}><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    );
    default: return null;
  }
};

/* ---------- Tally helper ---------- */
// Tally.openPopup is provided by the Tally embed script in the head.
const openWaitlist = () => {
  if (window.Tally && typeof window.Tally.openPopup === "function") {
    window.Tally.openPopup("PdGo1x", {
      layout: "modal",
      width: 540,
      autoClose: 3000,
      hideTitle: false,
    });
  } else {
    // Fallback if embed didn't load
    window.open("https://tally.so/r/PdGo1x", "_blank", "noopener");
  }
};

/* ---------- Buttons ---------- */

const Button = ({ variant = "primary", size, onDark, children, icon, iconAfter, as = "button", href, onClick, ...rest }) => {
  const cls = [
    "btn",
    `btn--${variant}`,
    size && `btn--${size}`,
    onDark && "btn--on-dark",
  ].filter(Boolean).join(" ");
  const content = (
    <>
      {icon && <Icon name={icon} size={16}/>}
      <span className="btn__label">{children}</span>
      {iconAfter && <Icon name={iconAfter} size={16}/>}
    </>
  );
  if (as === "a") return <a className={cls} href={href} onClick={onClick} {...rest}>{content}</a>;
  return <button className={cls} onClick={onClick} {...rest}>{content}</button>;
};

const WaitlistButton = ({ children = "Join the waitlist", size, variant = "primary", onDark, iconAfter }) => {
  const [loading, setLoading] = React.useState(false);
  const cls = [
    "btn",
    `btn--${variant}`,
    size && `btn--${size}`,
    onDark && "btn--on-dark",
    loading && "is-loading",
  ].filter(Boolean).join(" ");
  const handle = () => {
    setLoading(true);
    setTimeout(() => {
      openWaitlist();
      setTimeout(() => setLoading(false), 600);
    }, 250);
  };
  return (
    <button className={cls} onClick={handle} aria-busy={loading}>
      <span className="btn__label" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        {children}
        {iconAfter && <Icon name={iconAfter} size={16}/>}
      </span>
    </button>
  );
};

/* ---------- Badge ---------- */

const Badge = ({ children, dot, live }) => (
  <span className={`badge ${dot ? "badge--dot" : ""} ${live ? "badge--live" : ""}`}>{children}</span>
);

/* ---------- Nav ---------- */

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav__inner">
        <a className="nav__brand" href="#top" aria-label="Hattie home">
          <img src="assets/hattie-wordmark.svg" alt="Hattie"/>
        </a>
        <div className="nav__links">
          <a className="nav__link" href="#workflows">How it works</a>
          <a className="nav__link" href="#stack">Stack</a>
          <a className="nav__link" href="#founders">Founding partners</a>
          <a className="nav__link" href="#faq">FAQ</a>
        </div>
        <div className="nav__right">
          <WaitlistButton size="sm">Join the waitlist</WaitlistButton>
        </div>
      </div>
    </nav>
  );
};

/* ---------- Footer ---------- */

const Footer = () => (
  <footer className="footer footer--minimal">
    <div className="container">
      <div className="footer__row">
        <div className="footer__left">
          <img className="footer__mark" src="assets/hattie-wordmark.svg" alt="Hattie"/>
          <span className="footer__copyright">© 2026 Hattie</span>
        </div>
        <div className="footer__right">
          <a href="mailto:hello@meethattie.com" className="footer__link">hello@meethattie.com</a>
          <span className="footer__dot" aria-hidden>·</span>
          <span className="footer__link footer__credit">
            Built by{" "}
            <a href="https://www.linkedin.com/in/nikoladomazet/" target="_blank" rel="noopener">Nik</a>
          </span>
          <span className="footer__dot" aria-hidden>·</span>
          <a href="#" className="footer__link">Privacy</a>
          <span className="footer__dot" aria-hidden>·</span>
          <a href="#" className="footer__link">Terms</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Icon, Button, WaitlistButton, Badge, Nav, Footer, openWaitlist });