/* Portfolio sections — part 3: Watch (videos), Testimonials, Gallery */
const DS3 = window.BassantZeidanFesforiDesignSystem_940ce5;
const ASSET3 = 'assets';

const TONE_HEX = { green: 'var(--green-500)', sky: 'var(--sky-500)', sun: 'var(--sun-500)' };
const TONE_TINT = { green: 'var(--green-100)', sky: 'var(--sky-100)', sun: 'var(--sun-100)' };

/* One 16:9 video spot. Fills from data: youtube id, mp4 src, else placeholder. */
function VideoSlot({ v, t }) {
  const tone = v.tone || 'green';
  const accent = TONE_HEX[tone];
  const frame = {
    position: 'relative', borderRadius: 'var(--radius-card)', overflow: 'hidden',
    aspectRatio: '16 / 9', background: 'var(--navy-800)',
    border: '1px solid var(--navy-600)', boxShadow: 'var(--shadow-md)',
  };
  if (v.youtube) {
    // Thumbnail + play button that opens the video on YouTube (works even when
    // the uploader has disabled embedding, which blocks inline iframe playback).
    return (
      <a href={'https://www.youtube.com/watch?v=' + v.youtube} target="_blank" rel="noopener noreferrer"
        title={t(v.title)} style={{ ...frame, display: 'block', textDecoration: 'none', cursor: 'pointer' }}>
        <img src={'https://i.ytimg.com/vi/' + v.youtube + '/hqdefault.jpg'} alt={t(v.title)}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(9,13,45,0.55), rgba(9,13,45,0.05))' }} />
        {/* play button */}
        <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
          width: 62, height: 62, borderRadius: '50%', background: accent, boxShadow: 'var(--shadow-lg)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{ marginLeft: 3 }}>
            <path d="M8 5.5v13l11-6.5-11-6.5Z" fill="var(--navy-900)" />
          </svg>
        </span>
        <span style={{ position: 'absolute', insetInline: 0, bottom: 0, padding: '1.5rem 0.9rem 0.7rem',
          color: 'var(--text-on-dark)', fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'var(--fs-sm, 0.9rem)', textAlign: 'start' }}>{t(v.title)}</span>
      </a>
    );
  }
  if (v.src) {
    return (
      <div style={frame}>
        <video src={window.R(v.src)} controls playsInline
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: '#000' }} />
      </div>
    );
  }
  // Empty placeholder — branded "drop a video / paste a link" spot
  return (
    <div style={{ ...frame, cursor: 'default' }}>
      {/* faint diagonal stripes so it reads as an empty slot */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.12,
        backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 12px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: '0.75rem', textAlign: 'center', padding: '1rem' }}>
        <span style={{ width: 56, height: 56, borderRadius: '50%', background: accent,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-md)' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{ marginInlineStart: 3 }}>
            <path d="M8 5.5v13l11-6.5-11-6.5Z" fill="var(--navy-900)" />
          </svg>
        </span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h5, 1.1rem)', color: 'var(--text-on-dark)' }}>{t(v.title)}</span>
        <span style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: 'var(--fs-xs)', letterSpacing: '0.02em', color: 'var(--text-on-dark-muted)' }}>drop video · paste YouTube link</span>
      </div>
    </div>
  );
}

function Watch({ t, dir }) {
  const P = window.PORTFOLIO;
  const W = P.watch;
  return (
    <section id="watch" className="pf-section">
      <div className="pf-container">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 'var(--space-7)' }}>
          <DS3.SectionHeading eyebrow={t(W.eyebrow)} title={t(W.title)} intro={t(W.intro)} />
          <DS3.Button as="a" href={W.channelHref} target="_blank" rel="noopener noreferrer" variant="primary" size="lg">{t(W.channelCta)}</DS3.Button>
        </div>
        <div className="pf-grid-3">
          {W.videos.map((v, i) => (
            <VideoSlot key={i} v={v} t={t} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ t }) {
  const P = window.PORTFOLIO;
  const T = P.testimonials;
  return (
    <section id="testimonials" className="pf-section" style={{ paddingTop: 0 }}>
      <div className="pf-container">
        <DS3.SectionHeading align="center" eyebrow={t(T.eyebrow)} title={t(T.title)} intro={t(T.intro)} />
        <div className="pf-grid-3" style={{ marginTop: 'var(--space-7)' }}>
          {T.items.map((it, i) => {
            const accent = TONE_HEX[it.tone];
            return (
              <div key={i} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)',
                borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)', boxShadow: 'var(--shadow-sm)',
                display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                <span aria-hidden="true" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '3rem', lineHeight: 0.6, color: accent, height: '1.4rem' }}>&ldquo;</span>
                <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-body)', color: 'var(--text-heading)' }}>{t(it.quote)}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: '0.75rem', paddingTop: 'var(--space-2)' }}>
                  <span style={{ width: 40, height: 40, borderRadius: '50%', background: TONE_TINT[it.tone], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: accent, fontFamily: 'var(--font-display)', fontWeight: 700 }}>{t(it.name).trim().charAt(0)}</span>
                  <span style={{ display: 'flex', flexDirection: 'column' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-body)', color: 'var(--text-heading)' }}>{t(it.name)}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{t(it.role)}</span>
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* One carousel slide — uniform frame, image cover-fitted so all sizes match. */
function CarouselSlide({ p, t, perView }) {
  return (
    <figure style={{ position: 'relative', flex: '0 0 ' + (100 / perView) + '%', maxWidth: (100 / perView) + '%',
      boxSizing: 'border-box', padding: '0 0.5rem', margin: 0 }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '3 / 4',
        background: 'var(--navy-800)', overflow: 'hidden', borderRadius: 'var(--radius-card)',
        border: '1px solid var(--border-default)', boxShadow: 'var(--shadow-sm)' }}>
        <img src={window.R(p.src)} alt={t(p.label)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
        <figcaption style={{ position: 'absolute', insetInline: 0, bottom: 0, padding: '1.75rem 0.9rem 0.8rem',
          background: 'linear-gradient(to top, rgba(9,13,45,0.88), transparent)',
          color: 'var(--text-on-dark)', fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'var(--fs-sm, 0.9rem)', lineHeight: 1.25, textAlign: 'start' }}>{t(p.label)}</figcaption>
      </div>
    </figure>
  );
}

function Gallery({ t, dir }) {
  const P = window.PORTFOLIO;
  const G = P.gallery;
  const photos = G.photos;
  const rtl = dir === 'rtl';
  const [perView, setPerView] = React.useState(3);
  const [i, setI] = React.useState(0);
  const n = photos.length;

  React.useEffect(() => {
    const calc = () => setPerView(window.innerWidth < 560 ? 1 : window.innerWidth < 900 ? 2 : 3);
    calc();
    window.addEventListener('resize', calc);
    return () => window.removeEventListener('resize', calc);
  }, []);

  const maxStart = Math.max(0, n - perView);
  React.useEffect(() => { if (i > maxStart) setI(maxStart); }, [perView, maxStart, i]);

  const prev = () => setI((p) => Math.max(0, p - 1));
  const next = () => setI((p) => Math.min(maxStart, p + 1));
  const atStart = i <= 0;
  const atEnd = i >= maxStart;

  const arrowBtn = (onClick, icon, side, disabled) => (
    <button onClick={onClick} disabled={disabled} aria-label={icon === 'l' ? 'Previous' : 'Next'}
      style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', [side]: '-0.5rem', zIndex: 3,
        width: 44, height: 44, borderRadius: '50%', border: 'none', cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? 0.35 : 1, background: 'var(--surface-card)', boxShadow: 'var(--shadow-lg)',
        color: 'var(--navy-900)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d={icon === 'l' ? 'M15 5l-7 7 7 7' : 'M9 5l7 7-7 7'} stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );

  // shift by one slide-width per step; slide width = 100/perView % of track
  const shift = (i * (100 / perView));

  return (
    <section id="gallery" className="pf-section" style={{ paddingTop: 0 }}>
      <div className="pf-container">
        <DS3.SectionHeading eyebrow={t(G.eyebrow)} title={t(G.title)} intro={t(G.intro)} />
        <div style={{ marginTop: 'var(--space-7)', position: 'relative', padding: '0 0.5rem' }}>
          <div style={{ overflow: 'hidden' }}>
            <div style={{ display: 'flex', margin: '0 -0.5rem',
              transform: 'translateX(' + (rtl ? '' : '-') + shift + '%)',
              transition: 'transform 0.5s cubic-bezier(0.4,0,0.2,1)' }}>
              {photos.map((p, idx) => (
                <CarouselSlide key={idx} p={p} t={t} perView={perView} />
              ))}
            </div>
          </div>
          {arrowBtn(rtl ? next : prev, 'l', 'insetInlineStart', rtl ? atEnd : atStart)}
          {arrowBtn(rtl ? prev : next, 'r', 'insetInlineEnd', rtl ? atStart : atEnd)}
        </div>
        {/* progress dots — one per page position */}
        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'center', marginTop: 'var(--space-5)' }}>
          {Array.from({ length: maxStart + 1 }).map((_, idx) => (
            <button key={idx} onClick={() => setI(idx)} aria-label={'Go to position ' + (idx + 1)}
              style={{ width: idx === i ? 22 : 9, height: 9, borderRadius: '999px', border: 'none', cursor: 'pointer',
                padding: 0, background: idx === i ? 'var(--green-500)' : 'var(--border-strong, #cbd5e1)',
                transition: 'width 0.3s, background 0.3s' }} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Watch, Testimonials, Gallery });