/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, Shimmer, SB_EASE */
// Copilot feature page — hero: copy left, live agent thread right.
const { useState: cpS, useEffect: cpE } = React;
const CP_ACCENTS = { 'Quick starts': '#4D73F2', 'Generative UI': '#C77D3A', Editing: '#B0489B', Publishing: '#3A8F6B', Checkpoints: '#813CED' };
const CP_OPTS = [GENS[7], GENS[1], GENS[3]];

const CPMsg = ({ me = false, show, children, pad = true }) => (
  <div style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start',
    opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(14px)', transition: `opacity 0.45s ${SB_EASE}, transform 0.45s ${SB_EASE}` }}>
    <div style={{ maxWidth: '84%', borderRadius: me ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
      background: me ? INK : 'rgb(246,243,242)', color: me ? '#fff' : INK,
      padding: pad ? '10px 14px' : 8, fontSize: 12.5, lineHeight: 1.5, fontWeight: 500,
      boxShadow: me ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.06)' }}>{children}</div>
  </div>
);

const CPBoard = () => {
  const [ref, on] = useReveal(0.3);
  const [step, setStep] = cpS(0);
  cpE(() => {
    if (!on) return;
    const times = [400, 1300, 2400, 4200];
    const ts = times.map((t, i) => setTimeout(() => setStep(i + 1), t));
    return () => ts.forEach(clearTimeout);
  }, [on]);
  const ready = step >= 4;
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px 18px', borderBottom: '1px solid rgba(28,27,27,0.08)' }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: PULSE, display: 'grid', placeItems: 'center', fontSize: 12, color: '#fff' }}>✦</span>
          <span style={{ fontSize: 13.5, fontWeight: 800, color: INK }}>Copilot</span>
          <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.08em', color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '2px 8px' }}>NEW</span>
          <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', background: 'rgb(246,243,242)', borderRadius: 9999, padding: '4px 10px' }}>
            <span style={{ width: 13, height: 13, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />Scarlett</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '16px 18px' }}>
          <CPMsg me show={step >= 1}>Make tonight’s post — something poolside, golden hour.</CPMsg>
          <CPMsg show={step >= 2}>On it. Three directions — same setting, three reads. Pick one and I’ll finish it.</CPMsg>
          <CPMsg show={step >= 3} pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 7, width: 340, maxWidth: '100%' }}>
              {CP_OPTS.map((g, i) =>
                <div key={i} style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', aspectRatio: '3/3.9', background: '#fff',
                  boxShadow: ready && i === 0 ? '0 0 0 2px var(--brand-purple-500)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
                  {!ready && <Shimmer style={{ position: 'absolute', inset: 0 }} />}
                  <img loading="lazy" decoding="async" src={g.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%',
                    opacity: ready ? 1 : 0, filter: ready ? 'none' : 'blur(12px)', transition: `opacity 0.55s ${SB_EASE} ${i * 150}ms, filter 0.75s ${SB_EASE} ${i * 150}ms` }} />
                  <span style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 8, fontWeight: 700, color: ready ? '#fff' : 'rgba(28,27,27,0.55)',
                    background: ready ? 'rgba(28,27,27,0.55)' : '#fff', borderRadius: 9999, padding: '2px 7px' }}>{ready ? `${i + 1} / 3` : 'Generating…'}</span>
                </div>)}
            </div>
          </CPMsg>
          <CPMsg show={step >= 4}>Option 1 it is. Caption written, queued for 9:00 PM — <span style={{ fontWeight: 700, color: 'var(--brand-purple-700)' }}>approve to ship</span>.</CPMsg>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px 16px' }}>
          <div style={{ flex: 1, borderRadius: 12, background: 'rgb(235,231,231)', display: 'flex', alignItems: 'center', padding: '0 13px', height: 42, fontSize: 12, fontWeight: 500, color: 'rgba(28,27,27,0.5)' }}>
            Ask for anything…
          </div>
          <span style={{ width: 42, height: 42, borderRadius: 12, background: PULSE, display: 'grid', placeItems: 'center', boxShadow: '0 8px 20px -4px rgba(104,19,212,0.45)' }}>
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4.8 7.2L8 4l3.2 3.2" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
        </div>
      </AppWindow>
    </div>);
};

const CopilotHero = () => (
  <section style={{ background: CREAM, padding: '0 0 100px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: '140px 56px 0', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20, borderRadius: 9999, padding: '7px 14px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Features</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Copilot</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 62px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance' }}>
            Ask for it.<br /><GradText>It ships.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            A conversational layer over the whole studio. Copilot reads your Characters, your library and what performed — then plans, generates, edits and schedules, all in one thread.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Open Copilot</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><CPBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { CopilotHero, CP_ACCENTS });