/* Showcase v2 — two large 16:9 video tiles, no slider.
 * Sits right under hero, drives conversion by showing the result up front.
 * Reads palette via :root CSS vars (set by PageSections).
 */

const SHOWCASE_SERIF = '"Instrument Serif", serif';
const SHOWCASE_SANS = '"Inter", system-ui, sans-serif';

const SHOWCASE_KEYFRAMES = `
.ow-video-tile { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; cursor: pointer; }
.ow-video-tile:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(0,0,0,0.22); }
.ow-video-tile:hover .ow-play-btn { transform: translate(-50%,-50%) scale(1.08); background: var(--ow-accent); color: var(--ow-cream); }
.ow-play-btn { transition: transform .25s, background .25s, color .25s; }
`;

function VideoTileLarge({ ytId, label, sub }) {
  const [playing, setPlaying] = React.useState(false);

  return (
    <div className="ow-video-tile" style={{
      position: 'relative', width: '100%', aspectRatio: '16/9',
      borderRadius: 16, overflow: 'hidden',
      background: '#000',
      border: '1px solid var(--ow-border)',
      boxShadow: '0 18px 44px rgba(0,0,0,0.18)',
    }}>
      {playing ? (
        <iframe
          src={`https://www.youtube.com/embed/${ytId}?autoplay=1&rel=0&modestbranding=1`}
          allow="autoplay; encrypted-media; fullscreen"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
        />
      ) : (
        <>
          <img
            src={`https://img.youtube.com/vi/${ytId}/maxresdefault.jpg`}
            alt={label}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.65) 100%)',
          }} />
          <div className="ow-play-btn" onClick={() => setPlaying(true)} style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%,-50%)',
            width: 84, height: 84, borderRadius: '50%',
            background: 'rgba(255,255,255,0.94)', color: '#0c1118',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 28, fontWeight: 700, paddingLeft: 8,
            backdropFilter: 'blur(6px)',
            boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
            cursor: 'pointer',
          }}>▶</div>
        </>
      )}
      {!playing && (
        <div style={{
          position: 'absolute', bottom: 22, left: 26, right: 26,
          color: '#fff', pointerEvents: 'none',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12,
          textShadow: '0 2px 8px rgba(0,0,0,0.6)',
        }}>
          <div>
            <div style={{ fontFamily: SHOWCASE_SERIF, fontSize: 26, fontStyle: 'italic', fontWeight: 400, lineHeight: 1.1 }}>{label}</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4, letterSpacing: 0.3 }}>{sub}</div>
          </div>
          <span style={{ fontSize: 11, opacity: 0.85, letterSpacing: 1.6, textTransform: 'uppercase', whiteSpace: 'nowrap', paddingBottom: 2 }}>
            Kliknij ▶
          </span>
        </div>
      )}
    </div>
  );
}

function Showcase() {
  return (
    <section style={{
      padding: '110px 56px',
      background: 'var(--ow-cream)',
      color: 'var(--ow-ink)',
      fontFamily: SHOWCASE_SANS,
      position: 'relative',
    }}>
      <style>{SHOWCASE_KEYFRAMES}</style>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: 3,
              color: 'var(--ow-accentDeep)', textTransform: 'uppercase', marginBottom: 18,
            }}>Realizacje</div>
            <h2 style={{
              fontFamily: SHOWCASE_SERIF, fontSize: 'clamp(38px, 4.5vw, 60px)',
              fontWeight: 400, lineHeight: 1.05, letterSpacing: -1,
              color: 'var(--ow-ink)', margin: 0, maxWidth: 760,
            }}>
              Zobacz, jak <em style={{ color: 'var(--ow-accentDeep)' }}>ożywiamy</em> rodzinne zdjęcia
            </h2>
          </div>
          <p style={{ fontSize: 16, color: 'var(--ow-ink2)', maxWidth: 340, lineHeight: 1.6 }}>
            Dwa fragmenty filmów, które dostarczyliśmy klientom. Kliknij, żeby odtworzyć.
          </p>
        </div>

        {/* Two large videos side-by-side */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <VideoTileLarge ytId="rrDQG2gPQ3I" label="Pięćdziesiąt lat razem" sub="Film na rocznicę ślubu rodziców" />
          <VideoTileLarge ytId="FlbxgM0s4uI" label="Święta, które pamiętamy" sub="Historia rodzinna z lat 60." />
        </div>

        {/* Mini-CTA */}
        <div style={{
          marginTop: 48, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 22, flexWrap: 'wrap',
        }}>
          <div style={{ fontFamily: SHOWCASE_SERIF, fontSize: 24, color: 'var(--ow-ink)', fontStyle: 'italic' }}>
            Twoja rodzina zasługuje na taki film.
          </div>
          <button className="ow-cta-btn" style={{
            background: 'var(--ow-ink)', color: 'var(--ow-cream)', border: 'none',
            padding: '15px 32px', borderRadius: 8, fontSize: 14, fontWeight: 700,
            cursor: 'pointer', fontFamily: SHOWCASE_SANS,
          }}>
            <span className="ow-cta-shine" />
            Zamów film →
          </button>
        </div>
      </div>
    </section>
  );
}

window.Showcase = Showcase;