// Workshop showcase: each tile is a poster image that swaps to a muted video on hover.
// Performance:
//   - <img> uses loading="lazy" + decoding="async" so off-screen posters defer.
//   - <video> starts with no src; src is only attached on first hover, so the
//     7 mp4 files are not downloaded on page load. Once attached it stays cached.
//   - All videos are muted, looped, inline — no audio anywhere on the site.

const POSTS_META = [
  { image: 'uploads/workshop1.jpg', video: 'uploads/workshop1.mp4', likes: 1208, accent: '#5A1FD0' },
  { image: 'uploads/workshop2.jpg', video: 'uploads/workshop2.mp4', likes: 891,  accent: '#FF8A3D' },
  { image: 'uploads/workshop3.jpg', video: 'uploads/workshop3.mp4', likes: 542,  accent: '#F26B14' },
  { image: 'uploads/workshop4.png', video: 'uploads/workshop4.mp4', likes: 367,  accent: '#3DA9FF' },
  { image: 'uploads/workshop5.jpg', video: 'uploads/workshop5.mp4', likes: 1024, accent: '#52CCA0' },
  { image: 'uploads/workshop6.jpg', video: 'uploads/workshop6.mp4', likes: 412,  accent: '#FFB000' },
  { image: 'uploads/workshop7.jpg', video: 'uploads/workshop7.mp4', likes: 326,  accent: '#7846E4' },
  { more: true, accent: '#FF8A3D' },
];

function CardFrame({ children, accent, idx, label }) {
  return (
    <div
      className="card-lift relative aspect-square rounded-[28px] border-[3px] border-brand-800 bg-cream shadow-card overflow-hidden flex flex-col group cursor-pointer"
      style={{ boxShadow: `0 18px 40px -14px ${accent}66, 0 5px 0 0 ${accent}` }}
    >
      {/* Top studs strip in accent (LEGO-feel) */}
      <div className="h-3 relative shrink-0" style={{ background: `radial-gradient(circle at 50% 50%, ${accent} 22%, transparent 23%) 0 0/22px 22px, ${accent}` }}>
        <div className="absolute inset-0 opacity-40" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.6), transparent)' }}/>
      </div>

      {/* Workshop number ribbon — top-start corner */}
      <div className="absolute top-5 start-3 z-20">
        <div className="px-2.5 py-1 rounded-full text-cream text-[10px] font-extrabold tracking-wider shadow-pop border-2 border-cream" style={{ background: '#22024C' }}>
          {label}
        </div>
      </div>

      {children}
    </div>
  );
}

function MoreTile({ post, idx }) {
  return (
    <CardFrame accent={post.accent} idx={idx} label="✨ +">
      {/* gradient body — vibrant, optimistic */}
      <div className="relative flex-1" style={{ background: 'linear-gradient(135deg, #FF8A3D 0%, #FFB000 50%, #FFC93C 100%)' }}>
        {/* stud texture */}
        <div className="absolute inset-0 opacity-25" style={{ backgroundImage: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 22%, transparent 23%)', backgroundSize: '22px 22px' }}/>
        {/* floating accent dots */}
        <div className="absolute top-8 right-6 w-3 h-3 rounded-full bg-cream/80 float-slow"/>
        <div className="absolute bottom-10 left-8 w-2 h-2 rounded-full bg-brand-800/30 float-med"/>
        <div className="absolute top-16 left-10 w-1.5 h-1.5 rounded-full bg-cream float-fast"/>

        {/* center plus + sparkles */}
        <div className="absolute inset-0 grid place-items-center">
          <div className="flex flex-col items-center gap-3">
            <div className="relative">
              <div className="absolute inset-0 rounded-3xl blur-2xl opacity-70" style={{ background: '#fff' }}/>
              <div className="relative w-20 h-20 rounded-3xl bg-cream grid place-items-center shadow-pop border-[3px] border-brand-800">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#22024C" strokeWidth="3" strokeLinecap="round">
                  <line x1="12" y1="5" x2="12" y2="19"/>
                  <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
              </div>
              {/* sparkles */}
              <div className="absolute -top-3 -right-3 text-[20px] float-fast">✨</div>
              <div className="absolute -bottom-2 -left-3 text-[16px] float-med">✨</div>
            </div>
            <div className="px-3 py-1 rounded-full bg-brand-800 text-cream text-[10px] font-extrabold tracking-wider uppercase border-2 border-cream shadow-soft">
              {post.tag}
            </div>
          </div>
        </div>

        {/* hover overlay with description */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
          <div className="text-white">
            <div className="text-[13px] font-extrabold leading-tight">{post.caption}</div>
            <div className="text-[11px] font-semibold opacity-95 mt-1 leading-snug">{post.desc}</div>
          </div>
        </div>
      </div>
    </CardFrame>
  );
}

function PostTile({ post, idx }) {
  const videoRef = React.useRef(null);
  const [hover, setHover] = React.useState(false);
  const [armed, setArmed] = React.useState(false);

  React.useEffect(() => {
    const v = videoRef.current; if (!v) return;
    if (hover) {
      if (!armed) setArmed(true);
      const tryPlay = () => v.play().catch(() => {});
      if (v.src) tryPlay(); else requestAnimationFrame(tryPlay);
    } else if (armed) {
      v.pause();
    }
  }, [hover, armed]);

  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <CardFrame accent={post.accent} idx={idx} label={`#0${idx + 1}`}>
        {/* Media body — clean white background so white-bg product shots blend seamlessly */}
        <div className="relative flex-1 overflow-hidden bg-white">
          {/* Poster image — object-cover fills edge-to-edge, no white-rectangle look */}
          <img
            src={post.image}
            alt={post.caption}
            loading="lazy"
            decoding="async"
            className={"absolute inset-0 w-full h-full object-cover transition-opacity duration-300 " + (hover ? 'opacity-0' : 'opacity-100')}
          />
          {/* Video — muted, only loads after first hover */}
          <video
            ref={videoRef}
            src={armed ? post.video : undefined}
            muted
            loop
            playsInline
            preload="none"
            aria-hidden="true"
            className={"absolute inset-0 w-full h-full object-cover transition-opacity duration-300 " + (hover ? 'opacity-100' : 'opacity-0')}
          />

          {/* Bottom accent stripe — keeps the card colorful even when image is fully white */}
          <div className="absolute bottom-0 inset-x-0 h-1.5 z-10" style={{ background: post.accent }}/>

          {/* Tag pill — bottom-end, accent-bordered */}
          <div className="absolute bottom-4 end-3 z-20">
            <div className="px-2.5 py-1 rounded-full bg-cream/95 backdrop-blur text-brand-800 text-[10px] font-extrabold tracking-wide shadow-soft border-2" style={{ borderColor: post.accent }}>
              {post.tag}
            </div>
          </div>

          {/* Hover caption overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4 pb-12">
            <div className="text-white">
              <div className="text-[13px] font-extrabold leading-tight">{post.caption}</div>
              <div className="text-[11px] font-semibold opacity-95 mt-1 leading-snug line-clamp-3">{post.desc}</div>
              <div className="text-[10px] font-bold opacity-85 mt-1.5">♥ {post.likes.toLocaleString()}</div>
            </div>
          </div>
        </div>
      </CardFrame>
    </div>
  );
}

function Social() {
  const { t } = window.useT();
  const POSTS = POSTS_META.map((m, i) => ({ ...m, ...t.social.posts[i] }));
  return (
    <section id="community" className="relative px-4 sm:px-8 py-20 sm:py-28 bg-gradient-to-b from-cream to-brand-50/40">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-10">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full bg-cream border border-brand-100 px-3.5 py-1.5 mb-4 shadow-soft">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" className="text-tang-500"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              <span className="text-brand-700 font-extrabold text-[12px] tracking-wider uppercase">{t.social.pill}</span>
            </div>
            <h2 className="font-display font-extrabold text-brand-800 text-[40px] sm:text-[56px] leading-[1.0] tracking-tight">
              {t.social.title1} <span className="relative inline-block"><span className="absolute inset-0 -inset-x-2 bg-mint-300/70 rotate-1 rounded-xl -z-10"/>{t.social.titleHi}</span>
            </h2>
            <p className="mt-3 text-brand-700/75 font-semibold text-[16px] max-w-xl">{t.social.sub}</p>
          </div>
          <a href="#" className="inline-flex items-center gap-2 bg-cream border-2 border-brand-800 text-brand-800 font-extrabold px-5 py-3 rounded-2xl btn-3d-light text-[14px]">
            {t.social.follow} <span>↗</span>
          </a>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-5">
          {POSTS.map((p, i) => p.more ? <MoreTile key={i} post={p} idx={i}/> : <PostTile key={i} post={p} idx={i}/>)}
        </div>
      </div>
    </section>
  );
}
window.Social = Social;