/* ---------- ZoomHeroPanel ----------
   Virtual podcast / Zoom-call UI for the Hero right column.
   Globals expected (set by globals.jsx): React, motion (FM), C, EASE.
   Props:
     williamImg    — src string for William Shatner photo
     melanieImg    — src string for Melanie Shatner Gretsch photo
     davidImg      — src string for David Schmidt photo
     prefersReduced — boolean, pass through from hero for reduced-motion support
*/

/* ── Mic SVG (not in the lucide shim) ── */
function _ZPMic() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
      stroke="#4dd8a4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="2" width="6" height="13" rx="3" />
      <path d="M5 10a7 7 0 0 0 14 0" />
      <line x1="12" y1="19" x2="12" y2="22" />
      <line x1="9" y1="22" x2="15" y2="22" />
    </svg>
  );
}

/* ── Single participant tile ── */
function _ZPTile({ img, name, role, showBadges, prefersReduced, imgScale = 1, imgPosition = "center bottom" }) {
  return (
    <div style={{
      position: "relative",
      borderRadius: 10,
      overflow: "hidden",
      height: "100%",
      background: "#0E1B2E",
      border: "1px solid rgba(93,177,226,0.15)",
    }}>

      {/* Tile background gradient */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(160deg, #215291 0%, #173E73 45%, #0E1B2E 100%)",
      }} />

      {/* Photo layer */}
      {img && (
        <img src={img} alt={name}
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center top", display: "block",
          }} />
      )}

      {/* Inner vignette */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse at 50% 0%, transparent 50%, rgba(14,27,46,0.5) 100%)",
      }} />

      {/* Mic badge */}
      {showBadges && (
        <div style={{
          position: "absolute", top: 12, right: 12, zIndex: 2,
          width: 30, height: 30, borderRadius: "50%",
          background: "rgba(77,216,164,0.14)", border: "1px solid rgba(77,216,164,0.45)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 0 12px rgba(77,216,164,0.2)",
        }}>
          <_ZPMic />
        </div>
      )}

      {/* Name / role label */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 2,
        background: "linear-gradient(to top, rgba(14,27,46,0.97) 0%, rgba(14,27,46,0.6) 55%, transparent 100%)",
        padding: "40px 14px 14px",
      }}>
        <p className="lw-tile-name" style={{
          margin: 0, color: "#ffffff",
          fontWeight: 600,
          fontFamily: "var(--lw-font-sans)", letterSpacing: "-0.01em", lineHeight: 1.2,
        }}>{name}</p>
      </div>

      {/* Mic-active glow border */}
      {showBadges && !prefersReduced && (
        <motion.div
          aria-hidden="true"
          style={{
            position: "absolute", inset: 0, borderRadius: 10, pointerEvents: "none",
            border: "1.5px solid rgba(77,216,164,0.45)",
          }}
          animate={{ opacity: [0.25, 0.9, 0.25] }}
          transition={{ duration: 2.8, repeat: Infinity, ease: "easeInOut" }}
        />
      )}
    </div>
  );
}

/* ── Public component ── */
function ZoomHeroPanel({ williamImg, melanieImg, davidImg, prefersReduced = false }) {
  const tileV = {
    hidden:  { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.58, ease: EASE } },
  };

  return (
    <div className="lw-zoom-panel" style={{ width: "100%", display: "flex", flexDirection: "column" }}>

      {/* ── Call frame ── */}
      <div style={{
        flex: 1,
        display: "flex", flexDirection: "column",
        borderRadius: 14, overflow: "hidden",
        border: "1px solid rgba(77,216,164,0.16)",
        boxShadow: [
          "0 16px 40px rgba(0,0,0,0.5)",
          "0 16px 40px rgba(13,42,74,0.5)",
          "0 0 0 1px rgba(255,255,255,0.04)",
          "inset 0 1px 0 rgba(255,255,255,0.06)",
        ].join(", "),
      }}>

        {/* Title bar */}
        <div style={{
          flexShrink: 0,
          background: "#0a1628",
          padding: "10px 13px",
          display: "flex", alignItems: "center", gap: 8,
          borderBottom: "1px solid rgba(255,255,255,0.07)",
          userSelect: "none",
        }}>
          <div style={{ display: "flex", gap: 5.5, flexShrink: 0 }}>
            {[["#ff5f57","#bf4b44"],["#ffbd2e","#c99a25"],["#28c840","#1f9e32"]].map(([fill, ring], i) => (
              <div key={i} style={{
                width: 11, height: 11, borderRadius: "50%",
                background: fill, boxShadow: `0 0 0 0.5px ${ring}80`,
              }} />
            ))}
          </div>
          <div style={{ flex: 1, display: "flex", justifyContent: "center", marginRight: 29.5 }}>
            <img src="assets/No Time But Now Logo.png" alt="No Time But Now"
              className="lw-logo-strip-ntbn" style={{ width: "auto", display: "block", opacity: 1 }} />
          </div>
        </div>

        {/* Video grid — 3 equal vertical columns */}
        <motion.div
          style={{ flex: 1, padding: 8, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 7, background: "#0b1829", minHeight: 0 }}
          initial="hidden"
          animate="visible"
          variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.14, delayChildren: 0.2 } } }}>

          <motion.div variants={tileV} style={{ minHeight: 0 }}>
            <_ZPTile
              img={williamImg}
              name="William Shatner"
              role="Host · No Time But Now"
              showBadges={true}
              prefersReduced={prefersReduced}
            />
          </motion.div>

          <motion.div variants={tileV} style={{ minHeight: 0 }}>
            <_ZPTile
              img={melanieImg}
              name="Melanie Shatner Gretsch"
              role="Co-Host"
              showBadges={false}
              prefersReduced={prefersReduced}
              imgPosition="center top"
            />
          </motion.div>

          <motion.div variants={tileV} style={{ minHeight: 0 }}>
            <_ZPTile
              img={davidImg}
              name="David Schmidt"
              role="Founder, LifeWave"
              showBadges={false}
              prefersReduced={prefersReduced}
              imgPosition="center top"
            />
          </motion.div>

        </motion.div>

      </div>

      {/* ── Logo strip ── */}
      <div className="lw-logo-strip" style={{
        flexShrink: 0,
        marginTop: 10,
        display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
        userSelect: "none",
      }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
          <span className="lw-logo-strip-text" style={{
            color: "rgba(255,255,255,1)",
            fontFamily: "var(--lw-font-mono)", letterSpacing: "0.18em", textTransform: "uppercase",
            whiteSpace: "nowrap",
          }}>presented by</span>
          <Logo height={44} onDark className="lw-logo-strip-lw" />
        </div>
      </div>

    </div>
  );
}