// scene_template.jsx — Template builder: faithful product shell + callout

function SceneTemplate() {
  const t = useTime();

  const questions = [
    { label: 'Introduction', duration: '60s', type: 'Open-ended' },
    { label: 'Why this role?', duration: '90s', type: 'Motivation' },
    { label: 'Tell me about a challenge you overcame.', duration: '120s', type: 'Behavioural' },
    { label: 'How would you approach a new market?', duration: '90s', type: 'Situational' },
    { label: 'A question from the team.', duration: '60s', type: 'Culture' },
  ];

  return (
    <>
      <PSShell
        breadcrumb={['Select', 'TalentScreen', 'Screen', 'Video Interview', 'Templates', 'Edit']}
        title="Edit Template"
        eyebrow="COMPOSE QUESTIONS, TIMINGS AND BRANDING IN ONE PLACE"
        icon="template"
      >

        {/* Submenu */}
        <div style={{ position: 'absolute', left: 104, top: 172, zIndex: 1 }}>
          <PSSubmenu active="Templates"/>
        </div>

        {/* Template meta row */}
        <div style={{
          position: 'absolute',
          left: 340, top: 172,
          width: 1140, height: 140,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 28px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
          opacity: Easing.easeOutCubic(clamp((t - 0.4) / 0.7, 0, 1)),
          transform: `translateY(${(1 - Easing.easeOutCubic(clamp((t - 0.4) / 0.7, 0, 1))) * 16}px)`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: LC_PURPLE_SOFT,
              color: LC_PURPLE,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <PSIcon kind="template" size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: 'Gilroy, sans-serif',
                fontSize: 20, fontWeight: 700,
                color: LC_INK,
                letterSpacing: '-0.02em',
              }}>Marketing Analyst — Graduate Scheme</div>
              <div style={{
                fontFamily: 'Gilroy, sans-serif',
                fontSize: 11, fontWeight: 600,
                color: LC_INK_MUTED,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                marginTop: 3,
              }}>Draft · Unpublished</div>
            </div>
            <div style={{
              padding: '8px 14px',
              borderRadius: 8,
              background: LC_PURPLE,
              color: '#fff',
              fontFamily: 'Gilroy, sans-serif',
              fontSize: 12, fontWeight: 600,
            }}>Publish Template</div>
            <div style={{
              padding: '8px 14px',
              borderRadius: 8,
              border: `1px solid ${LC_LINE}`,
              color: LC_INK_SOFT,
              fontFamily: 'Gilroy, sans-serif',
              fontSize: 12, fontWeight: 600,
            }}>Preview</div>
          </div>
          <div style={{
            display: 'flex', gap: 32,
            fontFamily: 'Gilroy, sans-serif',
            fontSize: 12, fontWeight: 500,
            color: LC_INK_SOFT,
            marginTop: 18,
          }}>
            <div>Duration · <span style={{ color: LC_INK, fontWeight: 700 }}>~7 min</span></div>
            <div>Questions · <span style={{ color: LC_INK, fontWeight: 700 }}>{Math.min(5, Math.floor(clamp((t - 1.0) / 2.5, 0, 1) * 5))}</span></div>
            <div>Rubric · <span style={{ color: LC_INK, fontWeight: 700 }}>Standard Marketing</span></div>
            <div>Language · <span style={{ color: LC_INK, fontWeight: 700 }}>EN-GB</span></div>
            <div>Version · <span style={{ color: LC_GREEN, fontWeight: 700 }}>v1.0</span></div>
          </div>
        </div>

        {/* Questions stack */}
        <div style={{
          position: 'absolute',
          left: 340, top: 340,
          width: 1140,
        }}>
          {questions.map((q, i) => {
            const qT = Easing.easeOutBack(clamp((t - 1.2 - i * 0.22) / 0.6, 0, 1));
            const playheadActive = i === 2 && t > 4.0 && t < 6.8;
            const playT = clamp((t - 4.0) / 2.8, 0, 1);
            return (
              <div key={i} style={{
                marginBottom: 12,
                background: '#fff',
                borderRadius: 12,
                border: `1px solid ${LC_LINE}`,
                padding: '16px 20px',
                display: 'flex',
                alignItems: 'center',
                gap: 18,
                opacity: clamp(qT, 0, 1),
                transform: `translateY(${(1 - clamp(qT, 0, 1)) * 26}px) scale(${0.96 + clamp(qT, 0, 1) * 0.04})`,
                boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: LC_PURPLE_SOFT,
                  color: LC_PURPLE_DARK,
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 14, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>{String(i + 1).padStart(2, '0')}</div>

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'Gilroy, sans-serif',
                    fontSize: 15, fontWeight: 600,
                    color: LC_INK,
                    marginBottom: 4,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{q.label}</div>
                  <div style={{
                    display: 'flex', gap: 10, alignItems: 'center',
                    fontFamily: 'Gilroy, sans-serif',
                    fontSize: 11, fontWeight: 500,
                    color: LC_INK_MUTED,
                  }}>
                    <span style={{
                      padding: '3px 8px',
                      borderRadius: 4,
                      background: '#F6F5FA',
                      color: LC_INK_SOFT,
                      textTransform: 'uppercase',
                      letterSpacing: '0.08em',
                    }}>{q.type}</span>
                    <span>· {q.duration} response</span>
                    <span>· Mandatory</span>
                  </div>
                </div>

                {/* video thumbnail (dark) */}
                <div style={{
                  width: 200, height: 104,
                  borderRadius: 8,
                  background: 'linear-gradient(135deg, #1F1B2B, #3D2C5B)',
                  position: 'relative',
                  overflow: 'hidden',
                  flexShrink: 0,
                }}>
                  <svg width="200" height="104" viewBox="0 0 200 104" style={{ position: 'absolute', inset: 0 }}>
                    <defs>
                      <radialGradient id={`tface-${i}`} cx="50%" cy="38%" r="42%">
                        <stop offset="0%" stopColor="#D9B8A2"/>
                        <stop offset="100%" stopColor="#5E3E30"/>
                      </radialGradient>
                    </defs>
                    <path d={`M40,104 Q40,74 100,74 Q160,74 160,104 Z`} fill="#2A1E3E"/>
                    <ellipse cx="100" cy="46" rx="24" ry="28" fill={`url(#tface-${i})`}/>
                  </svg>
                  <div style={{
                    position: 'absolute',
                    left: '50%', top: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: 40, height: 40, borderRadius: 20,
                    background: 'rgba(255,255,255,0.3)',
                    backdropFilter: 'blur(8px)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="#fff"><path d="M4 2l8 5-8 5z"/></svg>
                  </div>
                  <div style={{
                    position: 'absolute',
                    left: 0, right: 0, bottom: 0,
                    height: 3,
                    background: 'rgba(255,255,255,0.15)',
                  }}>
                    <div style={{
                      height: '100%',
                      width: playheadActive ? `${playT * 100}%` : (i === 2 ? '18%' : '0%'),
                      background: LC_PURPLE,
                    }}/>
                  </div>
                  <div style={{
                    position: 'absolute',
                    right: 8, top: 8,
                    padding: '2px 6px',
                    borderRadius: 4,
                    background: 'rgba(0,0,0,0.6)',
                    color: '#fff',
                    fontFamily: 'Gilroy, sans-serif',
                    fontSize: 10, fontWeight: 600,
                  }}>{q.duration}</div>
                </div>

                <div style={{
                  width: 14, flexShrink: 0,
                  color: LC_INK_MUTED,
                  display: 'flex', flexDirection: 'column', gap: 3,
                }}>
                  {[0,1,2].map(k => <div key={k} style={{ height: 2, background: 'currentColor', borderRadius: 1, opacity: 0.5 }}/>)}
                </div>
              </div>
            );
          })}
        </div>

        {/* Saved toast */}
        {t > 6.5 && (() => {
          const saveT = Easing.easeOutBack(clamp((t - 6.5) / 0.5, 0, 1));
          return (
            <div style={{
              position: 'absolute',
              right: 130, top: 170,
              padding: '14px 20px',
              background: '#fff',
              borderRadius: 12,
              border: `1px solid ${LC_LINE}`,
              boxShadow: '0 10px 30px rgba(22,22,31,0.15)',
              display: 'flex', alignItems: 'center', gap: 12,
              opacity: clamp(saveT, 0, 1),
              transform: `translateY(${(1 - clamp(saveT, 0, 1)) * -20}px)`,
              zIndex: 3,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 14,
                background: LC_GREEN,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 7.5l2.5 2.5L11 4"/>
                </svg>
              </div>
              <div>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 13, fontWeight: 700,
                  color: LC_INK,
                }}>Template saved</div>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 11, fontWeight: 500,
                  color: LC_INK_SOFT,
                }}>Ready to assign to pipelines</div>
              </div>
            </div>
          );
        })()}

      </PSShell>

      {/* Callout: creative director pointing to the template */}
      <PSCallout
        src="assets/callouts/callout1.png"
        side="right"
        heightPx={720}
        bubbleTop={240}
        appear={4.0}
        bubbleDelay={0.8}
        bubble={{
          label: 'HIRING MANAGER · MAYA',
          text: '"I built a graduate scheme interview in forty minutes. It used to take us a fortnight."',
          meta: 'Head of Marketing · FMCG',
        }}
      />
    </>
  );
}

Object.assign(window, { SceneTemplate });