/* global React, Common */
const { Eyebrow } = Common;

// Some app logos were removed from Simple Icons (legal requests by brand owners
// (Slack, OpenAI, Microsoft, Bear, …). For those we fall back to a colored
// monogram tile that still gives each app a unique visual identity.
function MonogramIcon({ letter, color }) {
  return (
    <span aria-hidden="true" style={{
      width: 16, height: 16, borderRadius: 4,
      background: color, color: "white",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontWeight: 700, fontSize: letter.length > 1 ? 8 : 10,
      letterSpacing: letter.length > 1 ? "0.02em" : "0",
      fontFamily: "var(--font-display)",
      flexShrink: 0,
      boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.18)",
    }}>{letter}</span>
  );
}

function FallbackIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="4"/>
      <path d="M8 12h8M8 16h5"/>
    </svg>
  );
}

function AppIcon({ slug, monogram }) {
  const [failed, setFailed] = React.useState(false);
  if (monogram) return <MonogramIcon letter={monogram.letter} color={monogram.color}/>;
  if (!slug || failed) return <FallbackIcon/>;
  return (
    <img
      src={`https://cdn.simpleicons.org/${slug}`}
      alt=""
      width="16"
      height="16"
      loading="lazy"
      onError={() => setFailed(true)}
      style={{ display: "block", flexShrink: 0 }}
    />
  );
}

// Marquee of supported apps. Simple Icons CDN where available, monogram tiles
// for apps removed from the catalog (Slack, OpenAI, MS Word, Bear, VS Code).
function AppsMarquee() {
  const apps = [
    { name: "Slack",          monogram: { letter: "S",  color: "#4A154B" } },
    { name: "Notion",         slug: "notion" },
    { name: "VS Code",        monogram: { letter: "VS", color: "#007ACC" } },
    { name: "Figma",          slug: "figma" },
    { name: "Discord",        slug: "discord" },
    { name: "Linear",         slug: "linear" },
    { name: "Gmail",          slug: "gmail" },
    { name: "Cursor",         slug: "cursor" },
    { name: "Terminal",       slug: "gnometerminal" },
    { name: "Obsidian",       slug: "obsidian" },
    { name: "ChatGPT",        monogram: { letter: "G",  color: "#10A37F" } },
    { name: "Claude",         slug: "anthropic" },
    { name: "Microsoft Word", monogram: { letter: "W",  color: "#2B579A" } },
    { name: "Google Docs",    slug: "googledocs" },
    { name: "Telegram",       slug: "telegram" },
    { name: "Whatsapp",       slug: "whatsapp" },
    { name: "Things",         slug: "things" },
    { name: "Bear",           monogram: { letter: "B",  color: "#E0533D" } },
    { name: "Xcode",          slug: "xcode" },
    { name: "Safari",         slug: "safari" },
    { name: "Chrome",         slug: "googlechrome" },
    { name: "Arc",            slug: "arc" },
    { name: "Mail",           monogram: { letter: "✉",  color: "#0F76FF" } },
    { name: "iMessage",       slug: "imessage" },
    { name: "Zed",            slug: "zedindustries" },
    { name: "Sublime",        slug: "sublimetext" },
    { name: "JetBrains",      slug: "jetbrains" },
  ];
  const Track = () => (
    <div className="marquee-track">
      {[...apps, ...apps].map((a, i) => (
        <div key={i} style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "10px 16px", borderRadius: 10,
          border: "1px solid var(--line)",
          background: "var(--bg-elev)",
          fontFamily: "var(--font-sans)", fontSize: 14,
          color: "var(--fg-muted)", whiteSpace: "nowrap",
        }}>
          <AppIcon slug={a.slug} monogram={a.monogram}/>
          {a.name}
        </div>
      ))}
    </div>
  );
  return (
    <section style={{ padding: "32px 0 72px" }}>
      <div className="container reveal" style={{ marginBottom: 24, textAlign: "center" }}>
        <Eyebrow>works everywhere</Eyebrow>
        <h3 style={{
          fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600,
          color: "var(--fg)", marginTop: 12,
          letterSpacing: "-0.01em",
        }}>
          If it has a text input, Dimmy works in it.
        </h3>
      </div>
      <div className="edge-fade" style={{ overflow: "hidden" }}>
        <Track/>
      </div>
    </section>
  );
}

window.AppsMarquee = AppsMarquee;