const TOOLS = [
  { name: "Make.com",      img: "uploads/Make_idvSugHHA2_1.png" },
  { name: "GoHighLevel",   img: "uploads/gohighlevel.jpeg" },
  { name: "n8n",           img: "uploads/n8n-color.png" },
  { name: "Zapier",        img: "uploads/Zapier_idMPnFrbc7_1.png" },
  { name: "Airtable",      img: "uploads/Airtable_idbbncOsuL_1.png" },
  { name: "Notion",        img: "https://cdn.simpleicons.org/notion/ffffff" },
  { name: "ChatGPT",       img: "uploads/openai.webp" },
  { name: "Google Sheets", img: "https://cdn.simpleicons.org/googlesheets/34A853" },
  { name: "Gmail",         img: "https://cdn.simpleicons.org/gmail/EA4335" },
  { name: "Supabase",      img: "uploads/supabse.png" },
  { name: "VAPI",          img: "uploads/VAPI.png" },
  { name: "Canva",         img: null, custom: (
    <svg viewBox="0 0 256 256" width="36" height="36">
      <defs>
        <linearGradient id="canvaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#00C4CC"/>
          <stop offset="50%" stopColor="#7D2AE7"/>
          <stop offset="100%" stopColor="#FF0080"/>
        </linearGradient>
      </defs>
      <circle cx="128" cy="128" r="128" fill="url(#canvaGrad)"/>
      <path d="M180 154c-9 22-30 38-56 38-32 0-54-26-54-62 0-38 22-66 56-66 22 0 38 12 44 30 2 6-2 12-8 12s-9-3-13-9c-5-9-13-15-23-15-22 0-36 22-36 48s14 46 34 46c14 0 24-7 30-22 3-7 9-9 14-7 6 2 9 7 12 7z" fill="white"/>
    </svg>
  ) },
  { name: "Monday.com",    img: null, custom: (
    <svg viewBox="0 0 100 32" width="44" height="18">
      <rect x="0" y="6" rx="10" ry="10" width="32" height="20" fill="#FF3D57"/>
      <rect x="36" y="6" rx="10" ry="10" width="32" height="20" fill="#FFCB00"/>
      <rect x="72" y="6" rx="10" ry="10" width="20" height="20" fill="#00CA72"/>
    </svg>
  ) },
  { name: "Google Docs",   img: "https://cdn.simpleicons.org/googledocs/4285F4" },
  { name: "Asana",         img: "https://cdn.simpleicons.org/asana/F06A6A" },
  { name: "Claude",        img: "uploads/claude-color.png" },
  { name: "Codex",         img: "uploads/codex-color.png" },
  { name: "Google Drive",  img: "https://cdn.simpleicons.org/googledrive/4285F4" },
  { name: "Slack",         img: null, custom: (
    <svg viewBox="0 0 122.8 122.8" width="36" height="36">
      <path d="M25.8 77.6a12.9 12.9 0 0 1-12.9 12.9A12.9 12.9 0 0 1 0 77.6a12.9 12.9 0 0 1 12.9-12.9h12.9zm6.5 0a12.9 12.9 0 0 1 12.9-12.9 12.9 12.9 0 0 1 12.9 12.9v32.3a12.9 12.9 0 0 1-12.9 12.9 12.9 12.9 0 0 1-12.9-12.9z" fill="#E01E5A"/>
      <path d="M45.2 25.8a12.9 12.9 0 0 1-12.9-12.9A12.9 12.9 0 0 1 45.2 0a12.9 12.9 0 0 1 12.9 12.9v12.9zm0 6.5a12.9 12.9 0 0 1 12.9 12.9 12.9 12.9 0 0 1-12.9 12.9H12.9A12.9 12.9 0 0 1 0 45.2a12.9 12.9 0 0 1 12.9-12.9z" fill="#36C5F0"/>
      <path d="M97 45.2a12.9 12.9 0 0 1 12.9-12.9 12.9 12.9 0 0 1 12.9 12.9 12.9 12.9 0 0 1-12.9 12.9H97zm-6.5 0a12.9 12.9 0 0 1-12.9 12.9 12.9 12.9 0 0 1-12.9-12.9V12.9A12.9 12.9 0 0 1 77.6 0a12.9 12.9 0 0 1 12.9 12.9z" fill="#2EB67D"/>
      <path d="M77.6 97a12.9 12.9 0 0 1 12.9 12.9 12.9 12.9 0 0 1-12.9 12.9 12.9 12.9 0 0 1-12.9-12.9V97zm0-6.5a12.9 12.9 0 0 1-12.9-12.9 12.9 12.9 0 0 1 12.9-12.9h32.3a12.9 12.9 0 0 1 12.9 12.9 12.9 12.9 0 0 1-12.9 12.9z" fill="#ECB22E"/>
    </svg>
  ) },
  { name: "Meta",          img: "uploads/meta-color.png" },
  { name: "Google Gemini", img: "uploads/gemini-color.png" },
];

const ROW1 = [...TOOLS, ...TOOLS];
const ROW2 = [...[...TOOLS].reverse(), ...[...TOOLS].reverse()];

const ToolItem = ({ tool }) => (
  <div
    style={{
      display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
      padding: "12px 18px", flexShrink: 0, cursor: "default",
      opacity: 0.78,
      transition: "opacity 0.2s, transform 0.2s",
      minWidth: 120,
      margin: "0 8px",
    }}
    onMouseEnter={e => {
      e.currentTarget.style.opacity = "1";
      e.currentTarget.style.transform = "translateY(-4px)";
    }}
    onMouseLeave={e => {
      e.currentTarget.style.opacity = "0.78";
      e.currentTarget.style.transform = "translateY(0)";
    }}
  >
    <div style={{
      width: 64,
      height: 64,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    }}>
      {tool.custom ? tool.custom : tool.img ? (
        <img src={tool.img} alt={tool.name} style={{ width: 56, height: 56, objectFit: "contain" }} />
      ) : (
        <div style={{ width: 56, height: 56, borderRadius: 14, background: tool.color, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 800, fontSize: 16, color: "white" }}>{tool.initials}</span>
        </div>
      )}
    </div>
    <span style={{
      fontFamily: "Roboto Mono, monospace", fontSize: 10, fontWeight: 500,
      color: "var(--muted)", whiteSpace: "nowrap", letterSpacing: "0.06em",
      textTransform: "uppercase",
    }}>{tool.name}</span>
  </div>
);

const MarqueeRow = ({ items, direction, duration }) => (
  <div style={{ overflow: "hidden", position: "relative" }}>
    <div style={{
      display: "flex",
      width: "max-content",
      animation: `${direction} ${duration}s linear infinite`,
    }}>
      {items.map((tool, i) => <ToolItem key={i} tool={tool} />)}
    </div>
  </div>
);

const ToolsSection = () => (
  <section data-screen-label="04b Tools" style={{
    padding: "88px 0 80px",
    background: "var(--bg)",
    borderTop: "1px solid var(--border)",
    overflow: "hidden",
    position: "relative",
  }}>
    {/* Atmospheric background */}
    <video autoPlay muted loop playsInline src="uploads/background_teal_moving.mp4"
      onCanPlay={e => e.target.playbackRate = 0.4}
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }} />
    <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.72)", zIndex: 1 }} />

    {/* Teal accent line top */}
    <div style={{
      position: "absolute", top: 0, left: "10%", right: "10%", height: 1,
      background: "linear-gradient(90deg, transparent, rgba(20,184,166,0.5), transparent)",
      zIndex: 2,
    }} />

    {/* Header */}
    <div style={{ padding: "0 60px", marginBottom: 56, position: "relative", zIndex: 2 }}>
      <div style={{
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "space-between",
        flexWrap: "wrap",
        gap: 16,
      }}>
        <div>
          <p style={{
            fontFamily: "Roboto Mono, monospace", fontSize: 11, fontWeight: 500,
            letterSpacing: "0.22em", textTransform: "uppercase",
            color: "var(--teal)", marginBottom: 14,
          }}>Stack</p>
          <h2 style={{
            fontFamily: "Montserrat, sans-serif", fontWeight: 900,
            fontSize: "clamp(2rem,4.5vw,3.2rem)", color: "var(--fg)",
            letterSpacing: "-0.025em", lineHeight: 1.05,
          }}>
            Tools I Work With.
          </h2>
        </div>
        <p style={{
          fontFamily: "Montserrat, sans-serif", fontSize: 15,
          color: "var(--muted)", maxWidth: 360, lineHeight: 1.7,
        }}>
          {TOOLS.length}+ platforms and tools — each one chosen for real-world automation results.
        </p>
      </div>

      {/* Teal divider under header */}
      <div style={{
        marginTop: 24, height: 1,
        background: "linear-gradient(to right, rgba(20,184,166,0.35), transparent)",
      }} />
    </div>

    {/* Row — scrolls left */}
    <div style={{ position: "relative", zIndex: 2 }}>
      <MarqueeRow items={ROW1} direction="marquee-left" duration={38} />
    </div>

    {/* Fade edges */}
    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 160, background: "linear-gradient(to right, var(--bg), transparent)", pointerEvents: "none", zIndex: 3 }} />
    <div style={{ position: "absolute", right: 0, top: 0, bottom: 0, width: 160, background: "linear-gradient(to left, var(--bg), transparent)", pointerEvents: "none", zIndex: 3 }} />
  </section>
);

Object.assign(window, { ToolsSection });