const CERTS = [
  { title: "GoHighLevel CRM Full Training", image: "assets/certificate-ghl.png" },
  { title: "Prompt Engineering", image: "assets/certificate-prompt.png" },
  { title: "AI Automation with n8n", image: "assets/certificate-n8n.png" },
  { title: "No-Code Automation with Make.com", image: "assets/certificate-make.png" },
  { title: "No-Code Automation with Zapier", image: "assets/certificate-zapier.png" },
];

const ExperienceSection = () => {
  const [certIdx, setCertIdx] = React.useState(0);
  const [lightbox, setLightbox] = React.useState(null);
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 768);
  const touchRef = React.useRef({ startX: null });
  const activeCert = CERTS[certIdx];
  const certUrlSlug = activeCert.title.toLowerCase().replace(/[^a-z0-9]+/g, "-");

  React.useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 768px)");
    const syncMobile = () => setIsMobile(mediaQuery.matches);
    syncMobile();
    mediaQuery.addEventListener("change", syncMobile);
    return () => mediaQuery.removeEventListener("change", syncMobile);
  }, []);

  const setCertIndex = (nextIndex) => {
    const total = CERTS.length;
    const normalized = (nextIndex + total) % total;
    setCertIdx(normalized);
  };

  const handleCertTouchStart = (e) => {
    touchRef.current.startX = e.touches[0].clientX;
  };

  const handleCertTouchEnd = (e) => {
    if (touchRef.current.startX === null) return;
    const delta = touchRef.current.startX - e.changedTouches[0].clientX;
    touchRef.current.startX = null;
    if (Math.abs(delta) < 45) return;
    setCertIndex(certIdx + (delta > 0 ? 1 : -1));
  };

  return (
    <section data-screen-label="05 Experience" style={{
      minHeight: "100vh", padding: "100px 60px 80px",
      background: "var(--bg)", borderTop: "1px solid var(--border)",
      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.60)", zIndex: 1 }} />

      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <p style={{ fontFamily: "Roboto Mono, monospace", fontSize: 11, fontWeight: 500, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--teal)", marginBottom: 14 }}>Background</p>
        <h2 style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 900, fontSize: "clamp(2.2rem,5vw,3.5rem)", color: "var(--fg)", letterSpacing: "-0.02em", lineHeight: 1.05, marginBottom: 64 }}>
          <span style={{ color: "var(--teal)", textShadow: "0 0 14px oklch(0.65 0.16 185 / 0.9), 0 0 32px oklch(0.65 0.16 185 / 0.5)", animation: "tealGlow 2.5s ease-in-out infinite" }}>Experience</span> & Education.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>

          {/* Timeline */}
          <div style={{ position: "relative" }}>
            <div style={{ position: "absolute", left: 19, top: 24, bottom: 24, width: 1, background: "linear-gradient(to bottom, var(--teal), rgba(20,184,166,0.1))" }} />

            {[
              {
                period: "2026 — Present",
                title: "Automation & AI Specialist",
                sub: "Freelance / Remote",
                items: ["GoHighLevel CRM full training","Prompt Engineering","AI Automation with n8n","No-Code with Make.com","No-Code with Zapier"],
              },
              {
                period: "2012 — 2017",
                title: "Bachelor of Science in Marine Engineering",
                sub: "Maritime Academy of Asia and the Pacific",
                items: [],
              }
            ].map((entry, i) => (
              <div key={entry.title} style={{ display: "flex", gap: 32, paddingBottom: i < 1 ? 48 : 0 }}>
                {/* Timeline dot */}
                <div style={{ position: "relative", zIndex: 1, flexShrink: 0 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: "50%",
                    background: "rgba(5,12,13,0.88)",
                    border: "1px solid rgba(20,184,166,0.45)",
                    boxShadow: "0 0 0 1px rgba(0,0,0,0.35), 0 0 16px rgba(20,184,166,0.08)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--teal)" strokeWidth="1.5">
                      {i === 0 ? <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> : <path d="M22 10v6M2 10l10-7 10 7M5 19.5V10.7M19 19.5V10.7M9 19.5v-4c0-1.1.9-2 2-2h2a2 2 0 012 2v4"/>}
                    </svg>
                  </div>
                </div>

                {/* Timeline card */}
                <div style={{
                  flex: 1,
                  background: "rgba(5,12,13,0.86)",
                  border: "1px solid rgba(20,184,166,0.16)",
                  borderRadius: 14, padding: "24px 28px",
                  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.borderColor = "rgba(20,184,166,0.28)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.22)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = "rgba(20,184,166,0.16)";
                    e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)";
                  }}>
                  <p style={{ fontFamily: "Roboto Mono, monospace", fontSize: 10, color: "var(--teal)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 8 }}>{entry.period}</p>
                  <h3 style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 800, fontSize: 16, color: "var(--fg)", letterSpacing: "-0.01em", marginBottom: 6 }}>{entry.title}</h3>
                  <p style={{ fontFamily: "Montserrat, sans-serif", fontSize: 14, color: "rgba(237,239,242,0.5)", lineHeight: 1.55, marginBottom: entry.items.length ? 16 : 0 }}>{entry.sub}</p>
                  {entry.items.length > 0 && (
                    <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                      {entry.items.map(item => (
                        <li key={item} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--teal)", flexShrink: 0, marginTop: 6 }} />
                          <span style={{ fontFamily: "Montserrat, sans-serif", fontSize: 15, fontWeight: 500, color: "rgba(237,239,242,0.56)", lineHeight: 1.5 }}>{item}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Certifications */}
          <div>
            <p style={{ fontFamily: "Roboto Mono, monospace", fontSize: 10, fontWeight: 500, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--teal)", marginBottom: 20 }}>Credentials</p>
            <h3 style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 800, fontSize: 24, color: "var(--fg)", marginBottom: 32 }}>Certifications.</h3>

            {/* Main cert — glass frame */}
            <div style={{
              position: "relative", 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.2)",
              background: "rgba(5,12,13,0.86)",
              cursor: "pointer", marginBottom: 16,
              touchAction: isMobile ? "pan-y" : "auto",
            }}
              onTouchStart={isMobile ? handleCertTouchStart : undefined}
              onTouchEnd={isMobile ? handleCertTouchEnd : undefined}
              onClick={() => setLightbox(activeCert.image)}>
              <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: 290,
                  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",
                  }}>
                    certificates.fjda.tech/{certUrlSlug}
                  </span>
                </div>
              </div>
              <div style={{ position: "relative" }}>
                <img src={activeCert.image} alt={activeCert.title} style={{ width: "100%", height: "auto", display: "block" }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(7,14,16,0.72), transparent 48%)" }} />
                <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "16px 20px" }}>
                  <p style={{ fontFamily: "Montserrat, sans-serif", fontWeight: 700, fontSize: 14, color: "var(--fg)", letterSpacing: "-0.01em", textAlign: "center" }}>{activeCert.title}</p>
                </div>
              </div>
            </div>

            {/* Thumbnails — glass frames */}
            {!isMobile && <div style={{
              display: "flex",
              gap: 8,
              overflowX: "visible",
            }}>
              {CERTS.map((c, i) => (
                <button key={i} onClick={() => setCertIdx(i)} style={{
                  flex: 1,
                  aspectRatio: "4/3", padding: 0, border: "none", cursor: "pointer",
                  borderRadius: 10, overflow: "hidden",
                  outline: i === certIdx ? "2px solid var(--teal)" : "2px solid rgba(20,184,166,0.12)",
                  outlineOffset: 2,
                  background: "rgba(5,12,13,0.86)",
                  opacity: i === certIdx ? 1 : 0.45,
                  boxShadow: i === certIdx ? "inset 0 1px 0 rgba(255,255,255,0.06), 0 0 12px rgba(20,184,166,0.3)" : "inset 0 1px 0 rgba(255,255,255,0.03)",
                  transition: "all 0.2s",
                }}>
                  <img src={c.image} alt={c.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </button>
              ))}
            </div>}

            {isMobile && (
              <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 2 }}>
                {CERTS.map((cert, index) => (
                  <button
                    key={cert.title}
                    onClick={() => setCertIdx(index)}
                    aria-label={cert.title}
                    style={{
                      width: index === certIdx ? 22 : 7,
                      height: 7,
                      borderRadius: 999,
                      border: "none",
                      padding: 0,
                      cursor: "pointer",
                      background: index === certIdx ? "var(--teal)" : "rgba(255,255,255,0.18)",
                      boxShadow: index === certIdx ? "0 0 10px rgba(20,184,166,0.35)" : "none",
                      transition: "all 0.2s ease",
                    }}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(4,11,12,0.95)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
          <img src={lightbox} 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>
      )}
    </section>
  );
};

Object.assign(window, { ExperienceSection });