// scenes-c.jsx — Scene: Testimonials / social proof.

function Stars({ n = 5, size = 18, color = '#F6C453' }) {
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={color} style={{ display: 'block' }}>
          <path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8L12 2z" />
        </svg>
      ))}
    </div>
  );
}

function QuoteCard({ quote, name, role, initials, inAt, floatPhase }) {
  const time = useTime();
  const float = Math.sin(time * 0.9 + floatPhase) * 5;
  return (
    <Reveal inAt={inAt} y={42} dur={0.75} style={{ flex: 1, transform: `translateY(${float}px)` }}>
      <div style={{
        position: 'relative', padding: '38px 38px 34px', height: '100%',
        background: 'linear-gradient(180deg, rgba(27,33,45,0.95), rgba(17,21,30,0.95))',
        border: `1px solid ${OW.line}`, borderRadius: 22,
        boxShadow: '0 30px 70px -45px rgba(0,0,0,0.9)', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: -28, right: 20, fontFamily: DISPLAY, fontWeight: 700, fontSize: 150, color: 'rgba(53,224,161,0.10)', lineHeight: 1, pointerEvents: 'none' }}>&rdquo;</div>
        <Stars />
        <div style={{ fontFamily: BODY, fontSize: 23, lineHeight: 1.5, color: OW.text, marginTop: 24, fontWeight: 400, position: 'relative' }}>
          {quote}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 30 }}>
          <div style={{ width: 50, height: 50, borderRadius: 99, background: 'rgba(53,224,161,0.14)', border: `1px solid rgba(53,224,161,0.4)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: DISPLAY, fontWeight: 600, fontSize: 18, color: OW.accent, flexShrink: 0 }}>{initials}</div>
          <div>
            <div style={{ fontFamily: BODY, fontSize: 19, fontWeight: 600, color: OW.text }}>{name}</div>
            <div style={{ fontFamily: BODY, fontSize: 15, color: OW.faint, marginTop: 2, fontWeight: 400 }}>{role}</div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function SceneTestimonials({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 130px' }}>
      <div style={{ position: 'absolute', top: 150, left: 130 }}>
        <div style={{ marginBottom: 20 }}><Eyebrow inAt={start + 0.1}>What clients say</Eyebrow></div>
        <Reveal inAt={start + 0.35} y={24} dur={0.7}
          style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 64, letterSpacing: '-0.025em', color: OW.text, lineHeight: 1.05 }}>
          Don&rsquo;t take our word for it.
        </Reveal>
      </div>

      <div style={{ display: 'flex', gap: 36, alignItems: 'stretch', marginTop: 140 }}>
        <QuoteCard inAt={start + 0.8} floatPhase={0}
          quote={<>&ldquo;Chris built a large part of our technical team. He loves what he does, and leans into all stages of the hiring process. It&rsquo;s a treat to work with Chris.&rdquo;</>}
          name="Mike Wakerly" role="Builder, Investor & Advisor" initials="MW" />
        <QuoteCard inAt={start + 1.05} floatPhase={1.6}
          quote={<>&ldquo;One of the most attentive and proactive recruiters I&rsquo;ve ever worked with. The right candidate matters more to him than the quantity of candidates.&rdquo;</>}
          name="Mike Wright" role="Engineering Leader, Datadog" initials="MW" />
        <QuoteCard inAt={start + 1.3} floatPhase={3.2}
          quote={<>&ldquo;Chris has been very thorough and diligent. He made the whole interview process very straightforward for me.&rdquo;</>}
          name="Yakov Gaberman" role="Senior Software Engineer" initials="YG" />
      </div>
    </Scene>
  );
}

Object.assign(window, { SceneTestimonials, Stars, QuoteCard });