// Phone mockup for the hero — cinematic sitcom scenes with depth,
// film lighting, and claymation-style character renders.

const HERO_CLIPS = [
  {
    char: 'dog',
    scene: 'news',
    caption: [
      { text: 'BREAKING', tone: 'yellow' },
      { text: 'squirrel', tone: 'blue' },
      { text: 'spotted at', tone: 'yellow' },
      { text: '4PM', tone: 'blue' },
    ],
    handle: '@goldie.nightly',
    likes: '128K',
  },
  {
    char: 'tomato',
    scene: 'kitchen',
    caption: [
      { text: 'Today', tone: 'yellow' },
      { text: 'on the show', tone: 'blue' },
      { text: 'we simmer', tone: 'yellow' },
      { text: 'down', tone: 'blue' },
    ],
    handle: '@senor.t',
    likes: '94K',
  },
  {
    char: 'robot',
    scene: 'standup',
    caption: [
      { text: 'why did', tone: 'yellow' },
      { text: 'the AI', tone: 'blue' },
      { text: 'cross the', tone: 'yellow' },
      { text: 'road', tone: 'blue' },
    ],
    handle: '@bleep.tonight',
    likes: '211K',
  },
];

// Anthropomorphic full-body scenes. Each scene is a staged set (news desk,
// kitchen, standup club) with the bipedal character standing center-frame.

// NEWS DESK set behind dog anchor
function NewsDeskSet() {
  return (
    <svg viewBox="0 0 300 540" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="ndBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0E1540" />
          <stop offset="1" stopColor="#050820" />
        </linearGradient>
        <linearGradient id="ndDesk" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#2E4EA8" />
          <stop offset="1" stopColor="#0B1B4A" />
        </linearGradient>
      </defs>
      <rect width="300" height="540" fill="url(#ndBg)" />
      {/* city skyline background */}
      <rect x="0" y="260" width="300" height="200" fill="#1A2868" />
      {[...Array(20)].map((_, i) => {
        const h = 40 + (i*7 % 80);
        return <rect key={i} x={i*16} y={280-h+80} width="14" height={h+20} fill="#0E1540" />;
      })}
      {[...Array(60)].map((_, i) => {
        const x = (i*41) % 300;
        const y = 280 + (i*13 % 120);
        return <rect key={`w${i}`} x={x} y={y} width="2" height="3" fill="#FFE86A" opacity="0.7" />;
      })}
      {/* EPISODO logo on back wall */}
      <rect x="20" y="40" width="260" height="48" rx="6" fill="#FFD60A" opacity="0.95" />
      <text x="150" y="72" textAnchor="middle" fontFamily="Figtree" fontWeight="900" fontSize="22" fill="#0B1B4A" letterSpacing="4">EPISODO NEWS</text>
      {/* desk */}
      <rect x="0" y="440" width="300" height="100" fill="url(#ndDesk)" />
      <rect x="0" y="436" width="300" height="6" fill="#FFD60A" />
      {/* lower third */}
      <rect x="0" y="486" width="300" height="40" fill="#fff" opacity="0.08" />
    </svg>
  );
}

function KitchenSet() {
  return (
    <svg viewBox="0 0 300 540" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="ksBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#6E2818" />
          <stop offset="0.6" stopColor="#8B3A1E" />
          <stop offset="1" stopColor="#4A1A08" />
        </linearGradient>
      </defs>
      <rect width="300" height="540" fill="url(#ksBg)" />
      {/* subway tile wall */}
      {[...Array(7)].map((_, row) =>
        [...Array(10)].map((_, col) => (
          <rect key={`${row}-${col}`} x={col*32 + (row%2?16:0) - 20} y={row*30 + 30} width="28" height="26" rx="2" fill="#F5E8D8" opacity="0.85" />
        ))
      )}
      {/* hanging pots */}
      <line x1="40" y1="30" x2="40" y2="64" stroke="#2A1A08" strokeWidth="2" />
      <line x1="70" y1="30" x2="70" y2="74" stroke="#2A1A08" strokeWidth="2" />
      <line x1="230" y1="30" x2="230" y2="84" stroke="#2A1A08" strokeWidth="2" />
      <line x1="258" y1="30" x2="258" y2="64" stroke="#2A1A08" strokeWidth="2" />
      <ellipse cx="40" cy="70" rx="14" ry="8" fill="#5A4A30" />
      <ellipse cx="70" cy="80" rx="16" ry="10" fill="#3A3020" />
      <ellipse cx="230" cy="90" rx="18" ry="11" fill="#5A4A30" />
      <ellipse cx="258" cy="70" rx="14" ry="8" fill="#3A3020" />
      {/* counter */}
      <rect x="0" y="440" width="300" height="100" fill="#8A6840" />
      <rect x="0" y="438" width="300" height="4" fill="#C89A60" />
      {/* cutting board + tomato */}
      <rect x="30" y="444" width="80" height="8" rx="2" fill="#5A3A18" />
      <circle cx="50" cy="440" r="8" fill="#E83C28" />
      <path d="M 50 432 L 47 428 L 53 428 Z" fill="#4E8830" />
      <circle cx="84" cy="440" r="7" fill="#E83C28" />
      {/* pepper mill */}
      <rect x="240" y="416" width="14" height="28" rx="2" fill="#3A2818" />
      <ellipse cx="247" cy="414" rx="8" ry="4" fill="#5A4028" />
    </svg>
  );
}

function StandupSet() {
  return (
    <svg viewBox="0 0 300 540" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <radialGradient id="ssBg" cx="0.5" cy="0.5" r="0.8">
          <stop offset="0" stopColor="#5A1A3A" />
          <stop offset="1" stopColor="#0A0210" />
        </radialGradient>
      </defs>
      <rect width="300" height="540" fill="url(#ssBg)" />
      {/* brick back wall */}
      {[...Array(10)].map((_, row) =>
        [...Array(8)].map((_, col) => (
          <rect key={`${row}-${col}`} x={col*40 + (row%2?20:0) - 10} y={row*26} width="34" height="22" rx="2" fill="#3A1830" opacity="0.55" />
        ))
      )}
      {/* spotlight */}
      <path d="M 150 0 L 30 540 L 270 540 Z" fill="#FFD60A" opacity="0.12" />
      <path d="M 150 0 L 80 540 L 220 540 Z" fill="#FFE86A" opacity="0.18" />
      {/* neon club sign */}
      <rect x="40" y="40" width="220" height="60" rx="8" fill="none" stroke="#FF5E8A" strokeWidth="3" />
      <text x="150" y="80" textAnchor="middle" fontFamily="Figtree" fontWeight="900" fontSize="28" fill="#FF5E8A" letterSpacing="4" style={{ filter: 'drop-shadow(0 0 8px #FF5E8A)' }}>COMEDY</text>
      {/* stage floor */}
      <rect x="0" y="480" width="300" height="60" fill="#1A0812" />
    </svg>
  );
}

const SCENE_CHYRON = {
  dog:    { line1: 'BREAKING',  line2: 'Squirrel spotted at 4PM',   color: '#E83C28' },
  tomato: { line1: 'ON NOW',    line2: 'Simmer Down · Season 2',    color: '#FF7A2B' },
  robot:  { line1: 'LIVE',      line2: 'Bleep Tonight · Stand-up',  color: '#6BE4B5' },
};

function HeroScene({ clip }) {
  const { char } = clip;
  const ch = SCENE_CHYRON[char];
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#0a0a0a' }}>
      {char === 'dog' && <NewsDeskSet />}
      {char === 'tomato' && <KitchenSet />}
      {char === 'robot' && <StandupSet />}

      {/* character stage */}
      <div style={{
        position: 'absolute',
        bottom: 90,
        left: '50%',
        transform: 'translateX(-50%)',
        filter: 'drop-shadow(0 14px 22px rgba(0,0,0,0.5)) drop-shadow(0 4px 6px rgba(0,0,0,0.4))',
      }}>
        {char === 'dog' && <AnchorDog size={220} />}
        {char === 'tomato' && <ChefTomato size={220} />}
        {char === 'robot' && <StandupRobot size={220} />}
      </div>

      {/* cinematic vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 22%, transparent 62%, rgba(0,0,0,0.55) 100%), radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0,0,0,0.3) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Lower-third chyron */}
      <div style={{
        position: 'absolute',
        left: 16, right: 16, bottom: 140,
        display: 'flex', alignItems: 'stretch',
        fontFamily: 'Figtree',
        borderRadius: 8,
        overflow: 'hidden',
        boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
      }}>
        <div style={{
          background: ch.color, color: '#fff',
          padding: '8px 12px',
          fontWeight: 900, fontSize: 14, letterSpacing: '0.06em',
          display: 'grid', placeItems: 'center',
        }}>{ch.line1}</div>
        <div style={{
          background: 'rgba(11,27,74,0.92)', backdropFilter: 'blur(6px)',
          color: '#fff', padding: '8px 12px',
          fontWeight: 700, fontSize: 12,
          display: 'grid', placeItems: 'center',
          flex: 1,
        }}>{ch.line2}</div>
      </div>
    </div>
  );
}

function HeroPhone() {
  const [clipIdx, setClipIdx] = React.useState(0);
  const [wordIdx, setWordIdx] = React.useState(0);
  const clip = HERO_CLIPS[clipIdx];

  React.useEffect(() => {
    const t = setInterval(() => {
      setWordIdx(w => {
        const next = w + 1;
        if (next >= clip.caption.length) {
          setClipIdx(c => (c + 1) % HERO_CLIPS.length);
          return 0;
        }
        return next;
      });
    }, 1000);
    return () => clearInterval(t);
  }, [clip]);

  const avatarMap = { dog: '🎙️', tomato: '🍳', robot: '🎤' };

  return (
    <div className="phone">
      <div className="phone-notch" />
      <div className="phone-screen" style={{ background: '#000' }}>
        <HeroScene clip={clip} />

        <div className="phone-progress">
          {HERO_CLIPS.map((_, i) => (
            <div key={i} className={`phone-progress-segment ${i === clipIdx ? 'active' : i < clipIdx ? 'done' : ''}`} />
          ))}
        </div>

        <div className="phone-top-bar">
          <div className="handle">
            <div className="avatar">{avatarMap[clip.char]}</div>
            <div>
              <div>{clip.handle}</div>
              <div style={{ fontSize: 11, fontWeight: 500, opacity: 0.85 }}>Episode 07 · Sponsored by nobody</div>
            </div>
          </div>
          <button className="follow">Follow</button>
        </div>

        <div className="phone-side-actions">
          <div className="action liked">
            <div className="bubble">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" stroke="#fff" strokeWidth="2">
                <path d="M12 21s-7-4.35-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.65-7 10-7 10z" />
              </svg>
            </div>
            <div>{clip.likes}</div>
          </div>
          <div className="action">
            <div className="bubble">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round">
                <path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-7.6-4.7L3 21l1.7-1.9a8.5 8.5 0 1 1 16.3-7.6z" />
              </svg>
            </div>
            <div>2.1K</div>
          </div>
          <div className="action">
            <div className="bubble">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round">
                <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7" />
                <polyline points="16 6 12 2 8 6" />
                <line x1="12" y1="2" x2="12" y2="15" />
              </svg>
            </div>
            <div>Share</div>
          </div>
        </div>

        <div className="phone-caption">
          {clip.caption.slice(0, wordIdx + 1).map((w, i) => (
            <span
              key={`${clipIdx}-${i}`}
              className={`word ${w.tone === 'blue' ? 'blue' : ''}`}
              style={{ animation: i === wordIdx ? 'pop 220ms ease' : 'none' }}
            >
              {w.text}
            </span>
          ))}
        </div>

        <div className="phone-bottom-bar">
          <div className="phone-comment-box">Add a comment…</div>
          <div className="phone-icons">
            <div className="phone-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-7.6-4.7L3 21l1.7-1.9a8.5 8.5 0 1 1 16.3-7.6z" /></svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

if (!document.getElementById('phone-anim-css')) {
  const st = document.createElement('style');
  st.id = 'phone-anim-css';
  st.textContent = `@keyframes pop { 0% { transform: scale(0.6) rotate(-2deg); opacity: 0 } 60% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1) rotate(-2deg); opacity: 1 } }`;
  document.head.appendChild(st);
}

Object.assign(window, { HeroPhone, HERO_CLIPS, NewsDeskSet, KitchenSet, StandupSet });