/* SITE SHOWCASE — MacBook opens on scroll, revealing a mini version of this site.
   Sales proof-by-example: "this site? built here too." */

function SiteShowcase() {
  // Recursion guard: if this component renders inside the showcase's own iframe, bail.
  if (typeof window !== 'undefined' && window !== window.top) return null;

  const sectionRef = React.useRef(null);
  const progress = useSectionProgress(sectionRef);
  const isMobile = useIsMobile();

  // ── Phase-driven values ────────────────────────────────────────────
  const lidRotate    = lerp(isMobile ? -95 : -110, 0, smoothstep(0, 0.30, progress));
  const screenFade   = smoothstep(0.20, 0.40, progress);
  const kickerFade   = smoothstep(0.05, 0.20, progress);
  const copyFade     = smoothstep(0.35, 0.55, progress);
  const copyY        = lerp(28, 0, copyFade);
  const bulletsBase  = smoothstep(0.50, 0.70, progress);
  const ctaFade      = smoothstep(0.65, 0.80, progress);
  const ctaScale     = lerp(0.85, 1, ctaFade);

  return (
    <section ref={sectionRef} style={{position:'relative', height:'240vh', background:'#0A0907'}}>
      <style>{`
        @keyframes ss-halo-pulse { 0%,100% { opacity: 0.35; transform: scale(1) } 50% { opacity: 0.85; transform: scale(1.06) } }
        @keyframes ss-glow-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(238,179,50,0.55) } 50% { box-shadow: 0 0 0 6px rgba(238,179,50,0) } }
      `}</style>

      <div style={{
        position:'sticky', top:0, height:'100vh', overflow:'hidden',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        padding: isMobile ? '0 14px' : '0 24px', gap: isMobile ? 14 : 22,
      }}>
        {/* KICKER */}
        <div dir="rtl" style={{
          fontFamily:'Open Sans, sans-serif', fontWeight:600,
          fontSize: isMobile ? 11 : 13, letterSpacing:'0.20em',
          color:'#EEB332', textTransform:'uppercase',
          opacity: kickerFade,
          transition:'opacity 240ms',
        }}>
          ▸ המקרה הוא הדוגמה
        </div>

        {/* HEADLINE */}
        <h2 dir="rtl" style={{
          fontFamily:'Open Sans, sans-serif', fontWeight:900,
          fontSize: isMobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(40px, 5vw, 72px)',
          lineHeight:1.1, letterSpacing:'-0.025em', margin:0,
          color:'#F5F2ED', textAlign:'center',
          opacity: copyFade,
          transform: `translateY(${copyY}px)`,
          transition:'opacity 240ms linear, transform 280ms cubic-bezier(0.22,1,0.36,1)',
        }}>
          האתר הזה? <span style={{
            background:'linear-gradient(180deg, #FFD777 0%, #EEB332 50%, #B27418 100%)',
            WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
          }}>גם הוא נבנה ב-AI.</span>
        </h2>

        {/* MACBOOK */}
        <MacBook lidRotate={lidRotate} screenFade={screenFade} isMobile={isMobile} />

        {/* SUB PARAGRAPH */}
        <p dir="rtl" style={{
          fontFamily:'Open Sans, sans-serif',
          fontSize: isMobile ? 14 : 'clamp(15px, 1.2vw, 18px)',
          lineHeight:1.55, color:'rgba(245,242,237,0.72)', textAlign:'center',
          maxWidth: 680, margin:0,
          opacity: copyFade,
          transform: `translateY(${copyY * 0.6}px)`,
          transition:'opacity 240ms linear, transform 280ms cubic-bezier(0.22,1,0.36,1)',
        }}>
          כל מה שאתה רואה כאן - האנימציות, הסירטונים, הקופי, הניווט, הסליקה - נבנה ב-Claude Code. <b style={{color:'#EEB332', fontWeight:600}}>יש בקורס שיעור שלם שמראה איך בניתי את האתר הזה צעד-אחר-צעד</b> - תוכל לעשות בדיוק אותו דבר.
        </p>

        {/* FEATURE BULLETS */}
        <FeatureBullets bulletsBase={bulletsBase} isMobile={isMobile} />

        {/* CTA */}
        <button
          onClick={() => scrollToSection('pricing')}
          style={{
            position:'relative',
            background:'transparent', color:'#EEB332',
            border:'2px solid #DD9933', borderRadius:500,
            padding: isMobile ? '12px 26px' : '16px 38px',
            fontSize: isMobile ? 15 : 17,
            fontFamily:'Open Sans, sans-serif', fontWeight:600,
            cursor:'pointer',
            boxShadow:'0 0 28px 4px rgba(238,179,50,0.4)',
            opacity: ctaFade,
            transform: `scale(${ctaScale})`,
            transition:'opacity 240ms linear, transform 280ms cubic-bezier(0.34,1.56,0.64,1)',
            whiteSpace:'nowrap',
            animation: ctaFade > 0.8 ? 'ss-glow-pulse 2.2s ease-in-out infinite' : 'none',
          }}
        >
          תלמד לבנות אתר כזה &larr;
        </button>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────────────
   MACBOOK
   ───────────────────────────────────────────────────────────────────── */

function MacBook({ lidRotate, screenFade, isMobile }) {
  const maxW = isMobile ? 'calc(100vw - 32px)' : '640px';
  const baseH = isMobile ? 22 : 30;
  return (
    <div style={{
      perspective: '2000px',
      width:'100%', maxWidth: maxW,
      display:'flex', flexDirection:'column', alignItems:'center',
    }}>
      {/* SCREEN (lid) */}
      <div style={{
        width:'100%',
        transform:`rotateX(${lidRotate}deg)`,
        transformOrigin:'50% 100%',
        transformStyle:'preserve-3d',
        transition:'transform 60ms linear',
      }}>
        <div style={{
          position:'relative',
          width:'100%', aspectRatio:'16/10',
          background:'#0a0907',
          borderRadius: isMobile ? 10 : 14,
          border: isMobile ? '8px solid #1a1a20' : '12px solid #1a1a20',
          boxShadow:'0 30px 60px -20px rgba(0,0,0,0.7), 0 0 30px rgba(238,179,50,0.18), inset 0 0 1px rgba(255,255,255,0.04)',
          overflow:'hidden',
        }}>
          {/* notch */}
          <div style={{
            position:'absolute', top: -1, left:'50%', transform:'translateX(-50%)',
            width: isMobile ? 50 : 80, height: isMobile ? 8 : 12,
            background:'#1a1a20', borderRadius:'0 0 8px 8px',
            zIndex:5,
          }} />
          {/* live demo video — actual recording of scrolling the site */}
          <MiniSite opacity={screenFade} />
          {/* screen reflection */}
          <div style={{
            position:'absolute', inset:0,
            background:'linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,0.03) 100%)',
            pointerEvents:'none', zIndex:4,
          }} />
        </div>
      </div>

      {/* HINGE */}
      <div style={{
        width:'100%', height:3,
        background:'linear-gradient(90deg, transparent, rgba(238,179,50,0.35), transparent)',
        marginTop: 2,
      }} />

      {/* BASE (keyboard area) */}
      <div style={{
        width:'100%', height: baseH,
        clipPath:'polygon(1.5% 0, 98.5% 0, 100% 100%, 0% 100%)',
        background:'linear-gradient(180deg, #c0c0c8 0%, #8a8a92 55%, #5a5a62 100%)',
        position:'relative',
        boxShadow:'0 14px 30px -10px rgba(0,0,0,0.6)',
      }}>
        {/* trackpad */}
        <div style={{
          position:'absolute', left:'34%', right:'34%', top:'18%', bottom:'34%',
          background:'linear-gradient(180deg, #9c9ca4, #767680)',
          borderRadius: 3,
          opacity: 0.55,
        }} />
        {/* subtle highlight on top edge */}
        <div style={{
          position:'absolute', top:0, left:0, right:0, height:1,
          background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)',
        }} />
      </div>
    </div>
  );
}

/* Real recording of the site being scrolled — plays muted on loop. */
function MiniSite({ opacity }) {
  return (
    <div style={{
      position:'absolute', inset:0,
      background:'#0A0907',
      opacity,
      transition:'opacity 280ms linear',
      overflow:'hidden',
    }}>
      <video
        src="mini%20website.mp4"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        style={{
          width:'100%', height:'100%',
          objectFit:'cover',
          display:'block',
          background:'#0A0907',
        }}
      />
    </div>
  );
}

/* 3 feature bullets — fade in staggered */
function FeatureBullets({ bulletsBase, isMobile }) {
  const items = [
    '✓ 0 שורות קוד שכתבתי',
    '✓ 100% נבנה עם AI',
    '✓ תוצר ברמה של סטודיו',
  ];
  return (
    <div dir="rtl" style={{
      display:'flex',
      flexDirection: isMobile ? 'column' : 'row',
      gap: isMobile ? 6 : 24,
      alignItems:'center', justifyContent:'center',
      fontSize: isMobile ? 13 : 14,
      color:'rgba(245,242,237,0.78)',
      fontFamily:'Open Sans, sans-serif', fontWeight:500,
    }}>
      {items.map((t, i) => {
        const delay = i * 0.06;
        const fade = clamp((bulletsBase - delay) / 0.12, 0, 1);
        return (
          <span key={i} style={{
            opacity: fade,
            transform: `translateY(${lerp(14, 0, fade)}px)`,
            transition:'opacity 200ms, transform 240ms cubic-bezier(0.22,1,0.36,1)',
            whiteSpace:'nowrap',
          }}>{t}</span>
        );
      })}
    </div>
  );
}

window.SiteShowcase = SiteShowcase;