/* media.jsx — lightweight video player, real video testimonials, and product demo videos */

const { useState: useStateMD, useRef: useRefMD } = React;

/* ─────────── Click-to-play video (poster + native controls once started) ─────────── */
function VideoPlayer({ src, poster, palette, label, sub, aspect = "9 / 16", rounded = 10 }){
  const ref = useRefMD(null);
  const [playing, setPlaying] = useStateMD(false);
  const start = () => { const v = ref.current; if (v){ v.play(); setPlaying(true); } };
  return (
    <div style={{ position:"relative", width:"100%", aspectRatio: aspect, background: palette.ink, borderRadius: rounded, overflow:"hidden", border:`1px solid ${palette.line}`, boxShadow:"0 24px 44px -28px rgba(28,24,21,.5)" }}>
      <video
        ref={ref} src={src} poster={poster} playsInline preload="none"
        controls={playing}
        onPlay={()=>setPlaying(true)} onPause={()=>setPlaying(false)}
        style={{ width:"100%", height:"100%", objectFit:"cover", display:"block", background: palette.ink }}
      />
      {!playing && (
        <button type="button" onClick={start} aria-label={label ? `נגן: ${label}` : "נגן וידאו"}
          style={{ position:"absolute", inset:0, display:"grid", placeItems:"center", cursor:"pointer", border:0,
            background:"linear-gradient(0deg, rgba(28,24,21,.55), rgba(28,24,21,.08) 55%, rgba(28,24,21,.12))" }}>
          <span style={{ width:62, height:62, borderRadius:999, background:"rgba(255,255,255,.94)", display:"grid", placeItems:"center", boxShadow:"0 14px 32px rgba(0,0,0,.35)", transition:"transform .2s ease" }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill={palette.accent} aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
          </span>
        </button>
      )}
      {label && !playing && (
        <div style={{ position:"absolute", insetInlineStart:0, insetInlineEnd:0, bottom:0, padding:"30px 16px 14px", color:"#fff", pointerEvents:"none",
          background:"linear-gradient(0deg, rgba(28,24,21,.82), transparent)" }}>
          <div className="display" style={{ fontSize:16, fontWeight:700, lineHeight:1.2 }}>{label}</div>
          {sub && <div style={{ fontSize:12.5, opacity:.85, marginTop:3 }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}

/* ─────────── Real video testimonials + book intro ─────────── */
/* VIDEO_TESTIMONIALS is provided by content.js (window.CONTENT.videoTestimonials). */
function VideoStories({ palette }){
  const c = HOME.videoStories || {};
  return (
    <section id="stories" data-screen-label="16b Video Stories" className="pad-y" style={{ background: palette.surface }}>
      <div className="container">
        <div className="vs-top" style={{ display:"grid", gridTemplateColumns:"1.1fr .9fr", gap:56, alignItems:"center", marginBottom:48 }}>
          <div>
            <Eyebrow palette={palette}>{c.eyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(32px, 4.5vw, 56px)", margin:"14px 0 18px", lineHeight:1.06 }}>
              {c.title} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
            </h2>
            <p style={{ fontSize:16.5, lineHeight:1.7, color: palette.ink2, margin:"0 0 26px", maxWidth:"50ch" }}>
              {c.text}
            </p>
            <div style={{ display:"flex", gap:12, flexWrap:"wrap" }}>
              {c.ctaLabel && <PrimaryBtn palette={palette} href={c.ctaHref || "/products"}>{c.ctaLabel}</PrimaryBtn>}
              {c.ghostLabel && <GhostBtn palette={palette} href={whatsappLink(c.ghostWaMessage)}><IconWa size={16}/> {c.ghostLabel}</GhostBtn>}
            </div>
          </div>
          {c.mainVideo && (
            <div style={{ maxWidth:330, width:"100%", margin:"0 auto" }}>
              <VideoPlayer
                palette={palette}
                src={c.mainVideo}
                poster={c.mainPoster}
                label={c.mainLabel}
                sub={c.mainSub}
              />
            </div>
          )}
        </div>

        <div className="vs-grid" style={{ display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:16 }}>
          {VIDEO_TESTIMONIALS.map((t,i)=>(
            <VideoPlayer key={i} palette={palette} src={t.src} poster={t.poster} label={t.name} sub={t.sub}/>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .vs-top{ grid-template-columns: 1fr !important; gap: 32px !important; } .vs-top > div:last-child{ max-width:300px !important; } }
        @media (max-width: 1000px){ .vs-grid{ grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 620px){ .vs-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

/* ─────────── Product demo video (used on product detail pages) ─────────── */
function ProductVideo({ palette, product }){
  if (!product || !product.video) return null;
  const c = C("pages.productDetail", {});
  return (
    <section className="pad-y" style={{ background: palette.surface, borderTop:`1px solid ${palette.line}` }}>
      <div className="container">
        <div className="pv-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"center" }}>
          <div>
            <Eyebrow palette={palette}>{c.videoEyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(28px, 3.6vw, 44px)", margin:"14px 0 14px", lineHeight:1.08 }}>
              {c.videoTitle} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.videoTitleAccent}</span>
            </h2>
            <p style={{ fontSize:16, lineHeight:1.7, color: palette.ink2, margin:"0 0 22px", maxWidth:"46ch" }}>
              {c.videoTextPrefix}{product.title}{c.videoTextSuffix}
            </p>
            <PrimaryBtn palette={palette} href={whatsappLink(`${c.orderWaPrefix} ${product.title}`)}><IconWa size={16}/> {c.orderCta}</PrimaryBtn>
          </div>
          <div style={{ maxWidth:330, width:"100%", margin:"0 auto" }}>
            <VideoPlayer palette={palette} src={product.video} poster={product.videoPoster}/>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .pv-grid{ grid-template-columns: 1fr !important; gap: 28px !important; } .pv-grid > div:last-child{ max-width:300px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { VideoPlayer, VideoStories, ProductVideo });