// Gallery section — dashboard screenshots + video demo widget.

/* ── Placeholder SVG when image is missing ── */
function ImgPlaceholder({ label, color = "#6C5CE7" }) {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 select-none"
         style={{ background: `linear-gradient(135deg, ${color}22, ${color}44)` }}>
      <Icon name="layout-dashboard" size={32} style={{ color: `${color}99` }} strokeWidth={1.4} />
      <span className="mono text-[11px] uppercase tracking-wider" style={{ color: `${color}88` }}>{label}</span>
    </div>
  );
}

/* ── Single dashboard screenshot card ── */
function DashboardCard({ src, title, tags, delay = 0 }) {
  const [loaded, setLoaded] = React.useState(false);
  const [errored, setErrored] = React.useState(false);

  return (
    <Reveal delay={delay}>
      <Tilt className="rounded-2xl h-full" max={4}>
        <div className="glass rounded-2xl overflow-hidden flex flex-col h-full group">
          {/* image area */}
          <div className="relative overflow-hidden" style={{ aspectRatio: "16/9" }}>
            {!errored && (
              <img
                src={src}
                alt={title}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                style={{ display: loaded ? "block" : "none" }}
                onLoad={() => setLoaded(true)}
                onError={() => setErrored(true)}
              />
            )}
            {/* placeholder shown while loading or on error */}
            {(!loaded || errored) && (
              <div className="absolute inset-0">
                <ImgPlaceholder label={title} color="#7165E3" />
              </div>
            )}
            {/* overlay on hover */}
            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                 style={{ background: "rgba(113,101,227,0.45)", backdropFilter: "blur(4px)" }}>
              <div className="flex items-center gap-2 px-4 py-2 rounded-full"
                   style={{ background: "rgba(255,255,255,0.90)", color: "var(--accent)" }}>
                <Icon name="zoom-in" size={14} />
                <span className="text-[13px] font-medium">Ver proyecto</span>
              </div>
            </div>
          </div>

          {/* card footer */}
          <div className="p-4 flex items-center justify-between gap-3">
            <span className="serif text-[17px] leading-tight tracking-[-0.01em]">{title}</span>
            <div className="flex flex-wrap gap-1 justify-end">
              {tags.map(t => (
                <span key={t} className="mono text-[9.5px] px-2 py-0.5 rounded-md"
                      style={{ background: "var(--surface-1)", color: "var(--text-mute)", border: "1px solid var(--border)" }}>
                  {t}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Tilt>
    </Reveal>
  );
}

/* ── Video demo widget ── */
function VideoWidget() {
  const [playing, setPlaying] = React.useState(false);
  const [errored, setErrored] = React.useState(false);
  const videoRef = React.useRef(null);
  const { t, lang } = useT();

  const label = lang === "es"
    ? { chip: "Demo en vivo", title: "Dashboard operativo en acción", sub: "Grabación de pantalla · Power BI · ~3 min" }
    : { chip: "Live demo",    title: "Operational dashboard in action", sub: "Screen recording · Power BI · ~3 min" };

  const handlePlay = () => {
    if (videoRef.current) {
      videoRef.current.play();
      setPlaying(true);
    }
  };

  return (
    <Reveal delay={0.1}>
      <Tilt className="rounded-2xl" max={3}>
        <div className="glass rounded-2xl overflow-hidden relative group">
          <div className="relative" style={{ aspectRatio: "16/9" }}>
            {/* Video element */}
            <video
              ref={videoRef}
              src="assets/demo.mp4"
              className="w-full h-full object-cover"
              style={{ display: errored ? "none" : "block" }}
              controls={playing}
              playsInline
              onError={() => setErrored(true)}
            />

            {/* Placeholder when no video file */}
            {errored && (
              <div className="absolute inset-0 flex flex-col items-center justify-center gap-4"
                   style={{ background: "linear-gradient(135deg, #4A3BB0, #3D2FA4)" }}>
                <Icon name="play-circle" size={56} style={{ color: "rgba(255,255,255,0.35)" }} strokeWidth={1.2} />
                <span className="mono text-[11px] uppercase tracking-wider"
                      style={{ color: "rgba(255,255,255,0.40)" }}>
                  {lang === "es" ? "Pon tu video en assets/demo.mp4" : "Add your video to assets/demo.mp4"}
                </span>
              </div>
            )}

            {/* Play button overlay (before playing) */}
            {!playing && !errored && (
              <div
                className="absolute inset-0 flex items-center justify-center cursor-pointer"
                style={{ background: "rgba(30,16,56,0.50)", backdropFilter: "blur(2px)" }}
                onClick={handlePlay}
              >
                <div className="w-20 h-20 rounded-full flex items-center justify-center transition-transform group-hover:scale-110"
                     style={{ background: "rgba(255,255,255,0.18)", border: "2px solid rgba(255,255,255,0.35)" }}>
                  <Icon name="play" size={32} style={{ color: "white", marginLeft: 4 }} strokeWidth={1.8} />
                </div>
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="px-5 py-4 flex items-center justify-between gap-4">
            <div>
              <div className="chip mb-2" style={{ borderColor: "var(--accent-line)", color: "var(--accent)", background: "var(--accent-soft)" }}>
                <Icon name="video" size={11} /> {label.chip}
              </div>
              <div className="serif text-[20px] leading-tight tracking-[-0.01em]">{label.title}</div>
              <div className="mono text-[10.5px] t-dim mt-1">{label.sub}</div>
            </div>
            <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0"
                 style={{ background: "var(--accent-soft)", border: "1px solid var(--accent-line)" }}>
              <Icon name="bar-chart-3" size={22} className="t-accent" strokeWidth={1.6} />
            </div>
          </div>
        </div>
      </Tilt>
    </Reveal>
  );
}

/* ── Gallery section ── */
function Gallery() {
  const { t, lang } = useT();

  const label = lang === "es"
    ? { sec: "Proyectos visuales · dashboards", title: "Lo que construyo,", em: "se ve así.", kicker: "Capturas reales de dashboards diseñados y construidos en Power BI y Looker Studio." }
    : { sec: "Visual projects · dashboards",   title: "What I build",    em: "looks like this.", kicker: "Real screenshots of dashboards designed and built in Power BI and Looker Studio." };

  const projects = lang === "es"
    ? [
        { src: "assets/db-1.png", title: "Dashboard SLA · Reclamos", tags: ["Power BI", "DAX"] },
        { src: "assets/db-2.png", title: "Reporte Automatizado",      tags: ["SQL", "Excel"] },
        { src: "assets/db-3.png", title: "ETL · Vista Operativa",     tags: ["SQL Server", "Looker"] },
      ]
    : [
        { src: "assets/db-1.png", title: "SLA Dashboard · Claims",   tags: ["Power BI", "DAX"] },
        { src: "assets/db-2.png", title: "Automated Report",          tags: ["SQL", "Excel"] },
        { src: "assets/db-3.png", title: "ETL · Ops Overview",        tags: ["SQL Server", "Looker"] },
      ];

  return (
    <section id="gallery" className="relative py-24 md:py-32 hairline-t"
             style={{ background: "linear-gradient(180deg, var(--bg), var(--surface-1) 60%, var(--bg))" }}>
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <Reveal>
          <div className="flex items-center gap-3">
            <span className="star-decor" style={{ position: "relative", fontSize: 16 }} aria-hidden="true">✦</span>
            <div className="sec-label"><span className="sec-dash" /><span>{label.sec}</span></div>
          </div>
          <h2 className="serif mt-5 text-[44px] md:text-[56px] leading-[1.05] tracking-[-0.01em]" style={{ textWrap: "balance" }}>
            {label.title} <em className="not-italic" style={{ color: "var(--accent)" }}>{label.em}</em>
          </h2>
          <p className="mt-4 max-w-xl text-[15px] leading-relaxed t-mute">{label.kicker}</p>
          <div className="accent-rule w-full mt-6" />
        </Reveal>

        {/* Screenshot grid */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-5">
          {projects.map((p, i) => (
            <DashboardCard key={p.title} {...p} delay={i * 0.06} />
          ))}
        </div>

        {/* Video widget — full width below */}
        <div className="mt-6 max-w-[860px]">
          <VideoWidget />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery });