const WORKFLOWS = [
  { title: "AI Appointment Setter", desc: "End-to-end AI-powered scheduling via n8n. Handles availability checks, bookings, cancellations, and Airtable logging — triggered through VAPI voice AI.", tools: ["n8n","Google Calendar","VAPI","Airtable","AI Agent"], image: "assets/ai-appointment-setter.png", loom: "https://www.loom.com/embed/42906a65c17f4cd9b128a11e1c66c887" },
  { title: "Appointment No-Show / Reschedule", desc: "Triggered by appointment status changes. Applies conditional logic to remove/add CRM tags, update opportunity stages, and route contacts into the right follow-up sequences.", tools: ["GoHighLevel","Workflows","CRM"], image: "assets/appointment-workflow.png" },
  { title: "Confirmation & Reminder Emails", desc: "End-to-end booking automation — sends confirmation on booking, then timed reminders at 24h and 4h before the appointment with conditional branching.", tools: ["GoHighLevel","Email","Workflows"], image: "assets/confirmation-workflow.png" },
  { title: "Missed-Call Automation", desc: "Captures missed calls, tags contacts, waits an interval, then fires SMS follow-ups with conditional branching to nurture leads who couldn't be reached.", tools: ["GoHighLevel","SMS","Workflows"], image: "assets/missed-call-workflow.png" },
  { title: "New Lead Follow-Up & Nurture", desc: "Triggers on Facebook or website form submissions — auto-tags leads, creates CRM opportunities, fires webhooks to n8n, sends emails, and loops nurture sequences.", tools: ["GoHighLevel","n8n","Facebook Leads"], image: "assets/new-lead-workflow.png" },
  { title: "AI Social Media Content Creator", desc: "Scheduled automation — generates quotes via Gemini, fetches weather-aware images, composes visuals via AI Agent, and auto-publishes to Facebook.", tools: ["n8n","Google Gemini","Facebook API","AI Agent"], image: "assets/ai-social-media-workflow.png" },
  { title: "AI Chatbot with Memory", desc: "Webhook-triggered AI chatbot built with an OpenAI-powered Agent and persistent memory for contextual conversations with intelligent conditional routing.", tools: ["n8n","OpenAI","Webhooks","AI Agent"], image: "assets/ai-chatbot-workflow.png" },
  { title: "Invoice PDF → Google Sheets", desc: "Extracts invoice data from Gmail PDF attachments, processes fields via JavaScript and OpenAI, then appends structured data into organised Google Sheets.", tools: ["n8n","Gmail","OpenAI","Google Sheets"], image: "assets/invoice-to-sheets-workflow.png" },
  { title: "RAG Agent with Vector Store", desc: "Retrieval-Augmented Generation agent using Supabase vector stores and OpenAI embeddings. Indexes Drive docs and answers webhook queries with full context.", tools: ["n8n","Supabase","OpenAI","Google Drive"], image: "assets/rag-agent-workflow.png" },
];

const FUNNELS = [
  { title: "Real Estate Landing Page", desc: "High-converting real estate landing page built in GoHighLevel — captures seller and buyer leads with a clean, professional layout and automated CRM follow-up on every submission.", tools: ["GoHighLevel","Landing Page","CRM","Lead Capture"], image: "assets/funnel-laya-realty.png" },
  { title: "Real Estate Landing Page", desc: "Full sales funnel for a real estate brand — hero section, property listings teaser, lead form, and instant CRM tagging with automated email/SMS follow-up sequences.", tools: ["GoHighLevel","Sales Funnel","Automation","Email/SMS"], image: "assets/funnel-urbannest.png" },
  { title: "Landing Page Design", desc: "Optimised paid-traffic landing page for Facebook & Google Ads campaigns. Fast load, single focused CTA, and instant webhook trigger to GoHighLevel CRM on form submission.", tools: ["GoHighLevel","Paid Ads","Landing Page","Webhook"], image: "assets/funnel-paid-ads.png" },
];

const WEB_DESIGNS = [
  { title: "My Portfolio Website", desc: "My current portfolio website, designed to present AI automation services with a cleaner premium UI, stronger personal branding, and a polished mobile-first experience. The backend systems are also fully working - from the chatbot widget to form submissions and the booking calendar. Try it for you to see it's all working.", tools: ["Claude Code","Codex","Web Design","Responsive UI"], image: "assets/website-current.png", href: "https://francisjoseph.tech" },
  { title: "Real Estate Landing Page", desc: "Clean property-focused website layout built to balance visual presentation, lead capture, and a polished browsing experience across desktop and mobile.", tools: ["Web Design","Landing Page UI","Brand Layout","Lead Capture"], image: "assets/funnel-laya-realty.png" },
  { title: "Real Estate Landing Page", desc: "Conversion-focused real estate landing page design with a strong visual hierarchy, mobile-friendly sections, and a cleaner lead-capture journey for campaign and organic traffic.", tools: ["Codex","Claude Code","UI Layout","Lead Capture"], image: "assets/funnel-urbannest.png" },
];

const ProjectsSection = () => {
  const [tab, setTab] = React.useState("webdesign");
  const [idx, setIdx] = React.useState(0);
  const [animDir, setAnimDir] = React.useState(null);
  const [lightbox, setLightbox] = React.useState(null);

  const itemsByTab = {
    workflows: WORKFLOWS,
    webdesign: WEB_DESIGNS,
  };
  const items = itemsByTab[tab] || WORKFLOWS;
  const total = items.length;
  const safeIdx = total ? Math.min(idx, total - 1) : 0;
  const project = items[safeIdx];

  const navigate = (dir) => {
    setAnimDir(dir);
    setTimeout(() => {
      setIdx(prev => dir === "next" ? (prev + 1) % total : (prev - 1 + total) % total);
      setAnimDir(null);
    }, 220);
  };

  React.useEffect(() => { setIdx(0); }, [tab]);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === "ArrowRight") navigate("next");
      if (e.key === "ArrowLeft") navigate("prev");
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [total]);

  const urlSlug = project.title.toLowerCase().replace(/[^a-z0-9]+/g, "-");
  const categoryLabel = tab === "workflows" ? "Automation" : "Web Design";

  const dragRef = React.useRef({ startX: null, dragging: false });
  const onDragStart = (e) => {
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    dragRef.current = { startX: x, dragging: true };
  };
  const onDragEnd = (e) => {
    if (!dragRef.current.dragging) return;
    const x = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
    const delta = dragRef.current.startX - x;
    dragRef.current.dragging = false;
    if (Math.abs(delta) > 50) navigate(delta > 0 ? "next" : "prev");
  };

  return (
    <section data-screen-label="02 Projects" style={{
      minHeight: "100vh", background: "var(--bg)",
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
    }}>
      <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.65)", zIndex: 1 }} />

      {/* Top bar */}
      <div style={{ padding: "80px 60px 0", display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 20, position: "relative", zIndex: 2 }}>
        <div>
          <p style={{ fontFamily: "Roboto Mono, monospace", fontSize: 11, fontWeight: 500, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--teal)", marginBottom: 12 }}>Portfolio</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 }}>My Work.</h2>
        </div>

        {/* Glass tabs */}
        <div style={{
          display: "flex", gap: 4, padding: 5,
          background: "rgba(5,12,13,0.86)",
          border: "1px solid rgba(20,184,166,0.16)",
          borderRadius: 14,
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)",
        }}>
          {[
            { key: "workflows", label: "Automations", count: WORKFLOWS.length },
            { key: "webdesign", label: "Web Design", count: WEB_DESIGNS.length },
          ].map(t => (
            <button key={t.key} onClick={() => setTab(t.key)} style={{
              padding: "8px 18px", borderRadius: 9, border: "none", cursor: "pointer",
              background: tab === t.key ? "rgba(20,184,166,0.08)" : "transparent",
              color: tab === t.key ? "rgba(126,230,219,0.92)" : "rgba(255,255,255,0.5)",
              fontFamily: "Montserrat, sans-serif", fontSize: 12, fontWeight: 700,
              borderBottom: tab === t.key ? "2px solid var(--teal)" : "2px solid transparent",
              boxShadow: tab === t.key ? "inset 0 1px 0 rgba(255,255,255,0.1)" : "none",
              transition: "all 0.15s", display: "flex", alignItems: "center", gap: 7,
            }}>
              {t.label}
              <span style={{
                fontFamily: "Roboto Mono, monospace", fontSize: 10,
                background: tab === t.key ? "rgba(20,184,166,0.15)" : "rgba(255,255,255,0.07)",
                color: tab === t.key ? "rgba(126,230,219,0.9)" : "rgba(255,255,255,0.32)",
                borderRadius: 999, padding: "1px 7px",
              }}>{t.count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Main slide area */}
      <div
        style={{ flex: 1, display: "flex", padding: "32px 60px 48px", gap: 48, overflow: "hidden", position: "relative", zIndex: 2, alignItems: "stretch" }}
        onMouseDown={onDragStart} onMouseUp={onDragEnd}
        onTouchStart={onDragStart} onTouchEnd={onDragEnd}
      >
        {/* LEFT: Browser mockup frame */}
        <div style={{
          flex: "0 0 55%",
          display: "flex", flexDirection: "column",
          borderRadius: 16, overflow: "hidden",
          border: "1px solid rgba(20,184,166,0.16)",
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.22)",
          background: "rgba(5,12,13,0.86)",
          maxHeight: 460,
          opacity: animDir ? 0 : 1,
          transform: animDir === "next" ? "translateX(-30px)" : animDir === "prev" ? "translateX(30px)" : "translateX(0)",
          transition: "opacity 0.22s ease, transform 0.22s ease",
        }}>
          {/* Browser chrome bar */}
          <div style={{
            height: 38,
            background: "rgba(255,255,255,0.025)",
            borderBottom: "1px solid rgba(255,255,255,0.05)",
            display: "flex", alignItems: "center",
            padding: "0 14px", gap: 10, flexShrink: 0,
          }}>
            <div style={{ display: "flex", gap: 6 }}>
              {["#ff5f57", "#febc2e", "#28c840"].map(c => (
                <div key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c, opacity: 0.72 }} />
              ))}
            </div>
            <div style={{
              flex: 1, maxWidth: 300, margin: "0 auto",
              background: "rgba(255,255,255,0.025)",
              border: "1px solid rgba(255,255,255,0.05)",
              borderRadius: 5, padding: "3px 10px 3px 8px",
              display: "flex", alignItems: "center", gap: 6,
            }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="rgba(20,184,166,0.5)" strokeWidth="2.5">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
              <span style={{ fontFamily: "Roboto Mono, monospace", fontSize: 9, color: "rgba(255,255,255,0.22)", letterSpacing: "0.02em", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
                francisjoseph.tech/{urlSlug}
              </span>
            </div>
          </div>

          {/* Image area */}
          <div
            onClick={() => setLightbox({ type: "img", src: project.image })}
            style={{ flex: 1, position: "relative", overflow: "hidden", cursor: "zoom-in" }}
            onMouseEnter={e => {
              e.currentTarget.querySelector(".expand-overlay").style.background = "rgba(7,14,16,0.42)";
              e.currentTarget.querySelector(".expand-label").style.opacity = "1";
              e.currentTarget.querySelector(".expand-label").style.transform = "translateY(0) scale(1)";
            }}
            onMouseLeave={e => {
              e.currentTarget.querySelector(".expand-overlay").style.background = "rgba(7,14,16,0)";
              e.currentTarget.querySelector(".expand-label").style.opacity = "0";
              e.currentTarget.querySelector(".expand-label").style.transform = "translateY(4px) scale(0.95)";
            }}
          >
            <img src={project.image} alt={project.title}
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(7,14,16,0.14) 0%, transparent 55%)", pointerEvents: "none" }} />
            <div className="expand-overlay" style={{
              position: "absolute", inset: 0, background: "rgba(7,14,16,0)",
              display: "flex", alignItems: "center", justifyContent: "center",
              transition: "background 0.25s",
            }}>
              <span className="expand-label" style={{
                fontFamily: "Roboto Mono, monospace", fontSize: 11, color: "var(--fg)",
                opacity: 0, transform: "translateY(4px) scale(0.95)",
                letterSpacing: "0.15em", textTransform: "uppercase",
                background: "rgba(5,12,13,0.9)",
                border: "1px solid rgba(20,184,166,0.16)", borderRadius: 999,
                padding: "8px 20px",
                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)",
                transition: "opacity 0.2s, transform 0.2s",
                pointerEvents: "none",
              }}>Expand</span>
            </div>
          </div>
        </div>

        {/* RIGHT: Detail panel */}
        <div style={{
          flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between",
          position: "relative",
          opacity: animDir ? 0 : 1,
          transform: animDir === "next" ? "translateX(20px)" : animDir === "prev" ? "translateX(-20px)" : "translateX(0)",
          transition: "opacity 0.22s ease, transform 0.22s ease",
        }}>
          {/* Ghost editorial counter */}
          <div style={{
            position: "absolute", bottom: -30, right: -16,
            fontFamily: "Montserrat, sans-serif", fontWeight: 900,
            fontSize: "clamp(130px,16vw,210px)", color: "var(--teal)",
            opacity: 0.28, lineHeight: 1, letterSpacing: "-0.06em",
            pointerEvents: "none", userSelect: "none", zIndex: 0,
            transition: "opacity 0.22s ease",
            textShadow: "0 0 40px rgba(20,184,166,0.6), 0 0 80px rgba(20,184,166,0.3)",
          }}>
            {String(safeIdx + 1).padStart(2, "0")}
          </div>

          {/* Progress counter */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, position: "relative", zIndex: 1 }}>
            <span style={{ fontFamily: "Roboto Mono, monospace", fontSize: 13, color: "var(--teal)", fontWeight: 500 }}>
              {String(safeIdx + 1).padStart(2, "0")}
            </span>
            <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.08)" }}>
              <div style={{ height: "100%", background: "var(--teal)", width: `${((safeIdx + 1) / total) * 100}%`, transition: "width 0.4s ease" }} />
            </div>
            <span style={{ fontFamily: "Roboto Mono, monospace", fontSize: 12, color: "rgba(255,255,255,0.35)" }}>
              {String(total).padStart(2, "0")}
            </span>
          </div>

          {/* Content */}
          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "24px 0", position: "relative", zIndex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <div style={{ width: 40, height: 2, borderRadius: 2, background: "var(--teal)", boxShadow: "0 0 10px rgba(20,184,166,0.55)", flexShrink: 0 }} />
              <span style={{ fontFamily: "Roboto Mono, monospace", fontSize: 10, color: "var(--teal)", letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.85 }}>{categoryLabel}</span>
            </div>

            <h3 style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 900, fontSize: "clamp(1.5rem,3vw,2.2rem)", color: "var(--fg)", lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: 20 }}>{project.title}</h3>
            <p style={{ fontFamily: "Montserrat, sans-serif", fontSize: 17, color: "var(--muted)", lineHeight: 1.8, marginBottom: 28 }}>{project.desc}</p>

            {/* Glass tool tags */}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
              {project.tools.map(t => (
                <span key={t} style={{
                  fontFamily: "Roboto Mono, monospace", fontSize: 11,
                  color: "rgba(126,230,219,0.9)",
                  background: "rgba(20,184,166,0.08)",
                  border: "1px solid rgba(20,184,166,0.22)",
                  borderRadius: 8, padding: "5px 12px", letterSpacing: "0.04em",
                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
                }}>{t}</span>
              ))}
            </div>

            {project.loom && (
              <button
                onClick={() => setLightbox({ type: "video", src: project.loom })}
                style={{
                  background: "rgba(5,12,13,0.86)",
                  border: "1px solid rgba(20,184,166,0.16)",
                  cursor: "pointer",
                  display: "inline-flex", alignItems: "center", gap: 8,
                  width: "fit-content",
                  color: "var(--fg)",
                  fontFamily: "Montserrat, sans-serif", fontSize: 13, fontWeight: 700,
                  borderRadius: 999, padding: "10px 22px", letterSpacing: "0.04em",
                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)",
                  transition: "all 0.2s",
                }}
                onMouseEnter={e => {
                    e.currentTarget.style.background = "rgba(7,16,17,0.92)";
                    e.currentTarget.style.borderColor = "rgba(20,184,166,0.3)";
                    e.currentTarget.style.color = "var(--teal)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.22)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = "rgba(5,12,13,0.86)";
                    e.currentTarget.style.borderColor = "rgba(20,184,166,0.16)";
                    e.currentTarget.style.color = "var(--fg)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)";
                  }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                Watch Demo
              </button>
            )}

            {project.href && (
              <a
                href={project.href}
                target="_blank"
                rel="noreferrer"
                style={{
                  marginTop: project.loom ? 12 : 0,
                  background: "rgba(5,12,13,0.86)",
                  border: "1px solid rgba(20,184,166,0.16)",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  width: "fit-content",
                  color: "var(--fg)",
                  fontFamily: "Montserrat, sans-serif",
                  fontSize: 13,
                  fontWeight: 700,
                  borderRadius: 999,
                  padding: "10px 22px",
                  letterSpacing: "0.04em",
                  textDecoration: "none",
                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)",
                  transition: "all 0.2s",
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = "rgba(7,16,17,0.92)";
                  e.currentTarget.style.borderColor = "rgba(20,184,166,0.3)";
                  e.currentTarget.style.color = "var(--teal)";
                  e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.22)";
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = "rgba(5,12,13,0.86)";
                  e.currentTarget.style.borderColor = "rgba(20,184,166,0.16)";
                  e.currentTarget.style.color = "var(--fg)";
                  e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)";
                }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M14 3h7v7" />
                  <path d="M10 14L21 3" />
                  <path d="M21 14v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h4" />
                </svg>
                Visit Website
              </a>
            )}
          </div>

          {/* Navigation */}
          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(20,184,166,0.6)" strokeWidth="1.5"><path d="M11 19l-7-7 7-7M21 19l-7-7 7-7"/></svg>
              <span style={{ fontFamily: "Montserrat, sans-serif", fontSize: 12, fontWeight: 600, color: "rgba(126,230,219,0.72)", letterSpacing: "0.01em" }}>Arrow keys to navigate</span>
            </div>
            <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
              {[{ dir: "prev", icon: "M15 18l-6-6 6-6" }, { dir: "next", icon: "M9 18l6-6-6-6" }].map(({ dir, icon }) => (
                <button key={dir} onClick={() => navigate(dir)} style={{
                  width: 56, height: 56, borderRadius: "50%",
                  border: "1px solid rgba(20,184,166,0.16)",
                  background: "rgba(5,12,13,0.86)",
                  color: "rgba(255,255,255,0.7)", cursor: "pointer",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)",
                  transition: "all 0.2s",
                }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = "rgba(7,16,17,0.92)";
                    e.currentTarget.style.borderColor = "rgba(20,184,166,0.3)";
                    e.currentTarget.style.color = "var(--teal)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.22)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = "rgba(5,12,13,0.86)";
                    e.currentTarget.style.borderColor = "rgba(20,184,166,0.16)";
                    e.currentTarget.style.color = "rgba(255,255,255,0.7)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)";
                  }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d={icon}/></svg>
                </button>
              ))}

              <div style={{ display: "flex", gap: 8, marginLeft: 12, alignItems: "center" }}>
                {items.map((_, i) => (
                  <button key={i} onClick={() => { setAnimDir("next"); setTimeout(() => { setIdx(i); setAnimDir(null); }, 220); }} style={{
                    width: i === safeIdx ? 24 : 8, height: 8, borderRadius: 4, border: "none", cursor: "pointer", padding: 0,
                    background: i === safeIdx ? "var(--teal)" : "rgba(255,255,255,0.2)",
                    boxShadow: i === safeIdx ? "0 0 10px rgba(20,184,166,0.9), 0 0 20px rgba(20,184,166,0.4)" : "none",
                    transition: "all 0.3s ease",
                  }} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(4,11,12,0.96)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
          {lightbox.type === "img" ? (
            <img src={lightbox.src} style={{ maxWidth: "90%", maxHeight: "90vh", borderRadius: 12, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.1)" }} onClick={e => e.stopPropagation()} />
          ) : (
            <div style={{ width: "85vw", maxWidth: 960, aspectRatio: "16/9", borderRadius: 12, overflow: "hidden", border: "1px solid rgba(255,255,255,0.1)" }} onClick={e => e.stopPropagation()}>
              <iframe src={lightbox.src} style={{ width: "100%", height: "100%" }} allowFullScreen allow="autoplay; fullscreen" />
            </div>
          )}
        </div>
      )}
    </section>
  );
};

Object.assign(window, { ProjectsSection });