// reel-content.jsx — Horus Hub REELS · the four acts (Ki · Sho · Ten · Ketsu)
// Condensed ~76s vertical cut. Reuses brand props (PhoneProp, LightCore) + reel-shared.

const { HORUS: C, GRAD: CG, HL: RHL, Scene: CScene, PhaseBg: CBg, Sprite: CSp, Atmosphere: CAtmo,
        Easing: CE, clamp: ccl, interpolate: citp, CW, CH,
        RCap, RSub, REyebrow, RPhase, REmblem, RScrim, rwin,
        PhoneProp, LightCore, RMood } = window;

// ════════════════════════════════════════════════════════════════════════════
//  KI · the story (0–11s) — the brilliant lawyer nobody finds
// ════════════════════════════════════════════════════════════════════════════
function RKi() {
  return (
    <CSp start={0} end={11.3} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      return (
        <CScene bg="transparent">
          <RMood variant="warm" t={lt} />
          {/* dim phone — the empty agenda, recurs lit at the end */}
          <PhoneProp x={CW/2} y={1430} scale={0.78} rot={-9} lit={false} />
          <RScrim from={0.55} op={rwin(lt, 0.5, 11, 1)} />
          <RPhase idx={0} label="Ki · a história" />
          <RCap at={0.5} until={3.6} cy={760} size={94}>Eu conheço um advogado <RHL>brilhante</RHL>.</RCap>
          <RSub at={3.6} until={7.0} cy={780} size={50} maxWidth={820}>Talvez o melhor que eu já vi sustentar uma tese.</RSub>
          <RCap at={7.0} until={8.9} cy={760} size={54} color={C.dim} weight={500}>Mas a agenda dele vivia <RHL>vazia</RHL>.</RCap>
          <RCap at={8.9} until={11.3} cy={760} size={78}>Ninguém sabia que ele <RHL>existia</RHL>.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  SHO · the tension (11–31s) — you'll recognise yourself / the loop
// ════════════════════════════════════════════════════════════════════════════
function FeedV({ x, y, scroll = 0, op = 1 }) {
  const posts = [0,1,2,3,4];
  return (
    <div style={{ position: 'absolute', left: x, top: y, width: 560, height: 1200, opacity: op,
      transform: 'translate(-50%,-50%)', overflow: 'hidden',
      maskImage: 'linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)',
      WebkitMaskImage: 'linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)' }}>
      <div style={{ position: 'absolute', inset: 0, transform: `translateY(${-scroll}px)` }}>
        {posts.concat(posts).map((i, k) => (
          <div key={k} style={{ margin: '0 0 24px', padding: 26, borderRadius: 22,
            background: 'rgba(255,255,255,0.035)', border: `1px solid ${C.line}` }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 18 }}>
              <div style={{ width: 50, height: 50, borderRadius: '50%', background: `hsl(${200 + i*22} 40% 40% / 0.5)` }} />
              <div><div style={{ width: 160, height: 11, borderRadius: 5, background: 'rgba(255,255,255,0.18)' }} />
                <div style={{ width: 96, height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.08)', marginTop: 8 }} /></div>
            </div>
            {[100,88,70].map((w,r) => <div key={r} style={{ width: `${w}%`, height: 9, borderRadius: 5, background: 'rgba(255,255,255,0.10)', marginBottom: 11 }} />)}
          </div>
        ))}
      </div>
    </div>
  );
}

function SearchPill({ x, y, op = 1, typed = 1 }) {
  const full = 'advogado pode anunciar?';
  const txt = full.slice(0, Math.round(typed * full.length));
  return (
    <div style={{ position: 'absolute', left: x, top: y, width: 880, transform: 'translate(-50%,-50%)', opacity: op }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '26px 32px', borderRadius: 999,
        background: '#16161f', border: `1px solid ${C.line}`, boxShadow: '0 26px 70px rgba(0,0,0,0.5)' }}>
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke={C.faint} strokeWidth="2"/><path d="M16 16l5 5" stroke={C.faint} strokeWidth="2" strokeLinecap="round"/></svg>
        <div style={{ fontFamily: C.sans, fontSize: 34, color: C.white }}>{txt}<span style={{ opacity: typed < 1 ? 1 : 0, color: C.blueLight }}>|</span></div>
      </div>
    </div>
  );
}

function SparseCal({ x, y, op = 1, lit = 0 }) {
  const days = Array.from({ length: 28 });
  const filled = [4, 15, 23];
  const show = Math.round(lit * filled.length);
  return (
    <div style={{ position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)', opacity: op }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,76px)', gap: 14 }}>
        {days.map((_, i) => {
          const on = filled.indexOf(i) > -1 && filled.indexOf(i) < show;
          return <div key={i} style={{ width: 76, height: 76, borderRadius: 14,
            background: on ? CG : 'rgba(255,255,255,0.04)', border: `1px solid ${on ? 'transparent' : C.line}`,
            boxShadow: on ? '0 0 22px hsl(263 70% 55% / 0.4)' : 'none' }} />;
        })}
      </div>
      <div style={{ fontFamily: C.display, fontSize: 19, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: C.faint, textAlign: 'center', marginTop: 22 }}>Agenda do mês</div>
    </div>
  );
}

function RShoA() {
  return (
    <CSp start={11} end={21.3} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      const scroll = (lt * 34) % 280;
      return (
        <CScene bg="transparent">
          <RMood variant="cool" t={lt} />
          <FeedV x={CW/2} y={CH/2} scroll={scroll} op={0.45 * rwin(lt, 0, 10.3, 1.4)} />
          <RScrim from={0.45} op={0.9} />
          <RPhase idx={1} label="Sho · a tensão" />
          <RCap at={0.5} until={3.6} cy={900} size={92}>Talvez <RHL>você</RHL> se reconheça.</RCap>
          <RSub at={3.6} until={6.6} cy={900} size={52} maxWidth={840}>Você estudou anos pra dominar o Direito.</RSub>
          <RCap at={6.6} until={10.3} cy={900} size={82} maxWidth={860}>Ninguém te ensinou a ser <RHL>encontrado</RHL>.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

function RShoB() {
  return (
    <CSp start={21} end={31.3} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      return (
        <CScene bg="transparent">
          <RMood variant="cool" t={lt + 14} />
          <SearchPill x={CW/2} y={620} op={rwin(lt, 0.4, 4.4, 0.7)} typed={ccl((lt - 0.8) / 2.4, 0, 1)} />
          <SparseCal x={CW/2} y={1180} op={rwin(lt, 4.6, 10.3, 0.9)} lit={ccl((lt - 5.4) / 3, 0, 1)} />
          <RScrim from={0.5} op={0.85} />
          <RPhase idx={1} label="Sho · a tensão" />
          <RCap at={0.5} until={4.4} cy={980} size={64} weight={600} maxWidth={900}>Cogita anunciar — e trava no medo certo: a <RHL>OAB</RHL>.</RCap>
          <RCap at={4.6} until={8.0} cy={760} size={60} weight={600} maxWidth={900}>Então volta pro seguro: a próxima <RHL>indicação</RHL>.</RCap>
          <RCap at={8.0} until={11.3} cy={760} size={72} weight={600}>Num mês, cinco. No outro, <RHL>silêncio</RHL>.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  TEN · the turn (31–44s) — visibility is engineering
// ════════════════════════════════════════════════════════════════════════════
function RTenReveal() {
  return (
    <CSp start={31} end={44.3} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      const grow = ccl(lt / 11, 0, 1);
      const flash = lt < 0.55 ? (1 - lt / 0.55) : 0;
      return (
        <CScene bg="#050507">
          <CBg variant="void" />
          <LightCore x={CW/2} y={CH/2} grow={grow * 0.9} pulse={lt * 0.5} />
          <div style={{ position: 'absolute', inset: 0, background: '#fff', opacity: flash * 0.9, pointerEvents: 'none' }} />
          <RPhase idx={2} label="Ten · a virada" />
          <RSub at={0.5} until={3.4} cy={980} size={54}>O problema nunca foi o <RHL>talento</RHL> dele.</RSub>
          <RCap at={3.4} until={6.6} cy={980} size={58} color={C.dim} weight={500} maxWidth={860}>Faltava um <RHL>sistema</RHL> em volta do talento.</RCap>
          <REyebrow at={6.9} until={11.4} cy={800} color={C.purpleLight}>A revelação</REyebrow>
          <RCap at={7.0} until={11.4} cy={980} size={118} weight={700} letterSpacing="-0.03em">Visibilidade é <RHL>engenharia</RHL>.</RCap>
          <RCap at={11.4} until={13.3} cy={980} size={56} weight={600} maxWidth={880}>Sem trair a ética. Sem prometer resultado.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  TEN · the solution (44–60s) — Horus Hub ecosystem
// ════════════════════════════════════════════════════════════════════════════
function FeatureRow({ title, desc, color, on }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 22, padding: '24px 30px', borderRadius: 22,
      width: 880, background: on ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.02)',
      border: `1px solid ${on ? 'hsl(263 60% 60% / 0.32)' : C.line}`, borderLeft: `4px solid ${color}`,
      opacity: on ? 1 : 0.28, transform: `translateX(${on ? 0 : -14}px)`,
      transition: 'opacity .45s, transform .45s, background .45s', boxShadow: on ? '0 18px 50px rgba(0,0,0,0.4)' : 'none' }}>
      <div style={{ width: 16, height: 16, borderRadius: 5, background: color, flexShrink: 0,
        boxShadow: on ? `0 0 16px ${color}` : 'none' }} />
      <div>
        <div style={{ fontFamily: C.display, fontSize: 38, fontWeight: 700, color: C.white }}>{title}</div>
        <div style={{ fontFamily: C.sans, fontSize: 23, color: C.dim, marginTop: 5 }}>{desc}</div>
      </div>
    </div>
  );
}

function RTenSolution() {
  const feats = [
    { title: 'Conteúdo que educa', desc: 'Autoridade — dentro do Provimento', color: C.purpleLight, at: 6.0 },
    { title: 'O Estagiário', desc: 'IA aterrada em jurisprudência real', color: C.blueLight, at: 7.4 },
    { title: 'JurisLab', desc: 'Do cliente à cobrança, num só lugar', color: C.cyan, at: 8.8 },
    { title: 'Orquestração', desc: 'Onde as peças finalmente conversam', color: C.green, at: 10.2 },
  ];
  return (
    <CSp start={44} end={60.3} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      // bloom → lockup
      const bloomScale = citp([0, 2.2, 4.6], [0.16, 1, 1.0], [CE.easeOutBack, CE.easeInOutSine])(ccl(lt, 0, 4.6));
      const bloomRot = citp([0, 2.6], [200, 0], CE.easeOutCubic)(ccl(lt, 0, 2.6));
      const lockOp = rwin(lt, 0.3, 16.3, 0.6);
      const wordOp = rwin(lt, 3.0, 16.3, 0.7);
      return (
        <CScene bg="transparent">
          <RMood variant="brand" t={lt} />
          {/* emblem + wordmark lockup, top */}
          <div style={{ position: 'absolute', left: CW/2, top: 470, transform: 'translate(-50%,-50%)', opacity: lockOp, textAlign: 'center' }}>
            <img src="assets/emblema.png" alt="" style={{ width: 230, height: 230, objectFit: 'contain',
              transform: `scale(${bloomScale}) rotate(${bloomRot}deg)`,
              filter: 'drop-shadow(0 0 60px hsl(263 75% 55% / 0.6))' }} />
            <div style={{ opacity: wordOp, marginTop: 18 }}>
              <div style={{ fontFamily: C.display, fontSize: 96, fontWeight: 700, letterSpacing: '0.02em', lineHeight: 1,
                display: 'flex', gap: 20, justifyContent: 'center' }}>
                <span style={{ color: C.white }}>HORUS</span>
                <span style={{ background: `linear-gradient(120deg, ${C.blueLight}, ${C.blue})`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>HUB</span>
              </div>
              <div style={{ fontFamily: C.display, fontSize: 30, color: C.dim, marginTop: 18, letterSpacing: '0.01em' }}>
                <span style={{ color: C.purpleLight, fontWeight: 600 }}>IA</span> + Marketing Jurídico
              </div>
            </div>
          </div>

          {/* feature stack, builds */}
          <div style={{ position: 'absolute', left: CW/2, top: 1080, transform: 'translate(-50%,-50%)',
            display: 'flex', flexDirection: 'column', gap: 18, opacity: rwin(lt, 5.4, 16.3, 0.8) }}>
            {feats.map((f, i) => <FeatureRow key={i} {...f} on={lt >= f.at} />)}
          </div>

          <RScrim from={0.62} op={0.7} />
          <RPhase idx={2} label="Ten · a solução" />
          <RCap at={0.6} until={3.0} cy={1700} size={52} weight={600} maxWidth={920}>Foi por isso que criamos a <RHL>Horus Hub</RHL>.</RCap>
          <RCap at={13.6} until={16.3} cy={1700} size={62} weight={600} maxWidth={920}>A captação vira <RHL>processo</RHL> — não sorte.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  KETSU · the invitation (60–76s) — free diagnosis CTA
// ════════════════════════════════════════════════════════════════════════════
function DiagChip({ x, y, op = 1, fill = 0 }) {
  const items = ['Onde você já está forte', 'O que deixa cliente na mesa', 'Seu próximo passo claro'];
  const seg = 7, lit = Math.round(fill * seg);
  return (
    <div style={{ position: 'absolute', left: x, top: y, width: 880, transform: 'translate(-50%,-50%)', opacity: op,
      background: '#11111a', border: `1px solid ${C.line}`, borderRadius: 28, padding: 44,
      boxShadow: '0 50px 120px rgba(0,0,0,0.6), 0 0 80px hsl(263 70% 50% / 0.18)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 26 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: C.display, fontSize: 18, fontWeight: 600,
          letterSpacing: '0.16em', textTransform: 'uppercase', color: C.green, background: 'hsl(142 70% 40% / 0.12)',
          border: '1px solid hsl(142 70% 45% / 0.4)', borderRadius: 999, padding: '10px 22px', whiteSpace: 'nowrap' }}>Gratuito · ~5 min</div>
        <img src="assets/emblema.png" alt="" style={{ width: 64, height: 64, objectFit: 'contain', opacity: 0.9 }} />
      </div>
      <div style={{ fontFamily: C.display, fontSize: 48, fontWeight: 700, color: C.white, lineHeight: 1.1 }}>
        Diagnóstico de maturidade <RHL>digital + IA</RHL>
      </div>
      <div style={{ height: 1, background: C.line, margin: '28px 0' }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 30, height: 30, borderRadius: '50%', background: CG, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <span style={{ fontFamily: C.sans, fontSize: 24, color: C.white }}>{it}</span>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 32 }}>
        {Array.from({ length: seg }).map((_, i) => (
          <div key={i} style={{ flex: 1, height: 9, borderRadius: 5, background: i < lit ? CG : 'rgba(255,255,255,0.08)' }} />
        ))}
      </div>
    </div>
  );
}

function CTAPill({ x, y, op = 1, pulse = 0 }) {
  return (
    <div style={{ position: 'absolute', left: 0, top: y, width: CW, transform: 'translateY(-50%)', opacity: op,
      display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 20, padding: '34px 60px', borderRadius: 999,
        background: CG, boxShadow: `0 30px 80px hsl(263 70% 50% / ${0.42 + pulse * 0.25}), 0 0 ${50 + pulse * 60}px hsl(217 91% 60% / ${0.3 + pulse * 0.3})`,
        overflow: 'hidden' }}>
        <span style={{ fontFamily: C.display, fontSize: 50, fontWeight: 700, color: '#fff', letterSpacing: '0.01em', whiteSpace: 'nowrap' }}>Agendar diagnóstico</span>
        <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <div style={{ position: 'absolute', top: 0, left: `${-40 + pulse * 180}%`, width: '40%', height: '100%', background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)' }} />
      </div>
      <div style={{ fontFamily: C.display, fontSize: 30, color: C.dim, marginTop: 30, letterSpacing: '0.22em' }}>horushub.com.br</div>
    </div>
  );
}

function RKetsu() {
  return (
    <CSp start={60} end={76.4} keepMounted>{({ localTime: lt, visible }) => { if (!visible) return null;
      return (
        <CScene bg="transparent">
          <RMood variant="brand" t={lt + 60} />
          {/* diagnostic chip while inviting */}
          {lt >= 4.0 && lt < 11.0 && <DiagChip x={CW/2} y={1080} op={rwin(lt, 4.2, 10.8, 0.7)} fill={ccl((lt - 5.2) / 5, 0, 1)} />}
          {/* lit phone — the payoff: agenda full */}
          {lt >= 10.6 && lt < 16.4 && <PhoneProp x={CW/2} y={1100} scale={1.0} rot={-5} lit glow={ccl((lt - 11.2) / 2, 0, 1)} agendaFill={ccl((lt - 12) / 3.5, 0, 1)} />}
          {/* CTA */}
          {lt >= 12.6 && <CTAPill x={CW/2} y={1560} op={rwin(lt, 13, 16.4, 0.8)} pulse={(Math.sin(lt * 1.6) + 1) / 2} />}

          <RScrim from={0.55} op={0.55} />
          <RPhase idx={3} label="Ketsu · o convite" />
          <RCap at={0.5} until={4.0} cy={760} size={64} weight={600} maxWidth={900}>Não vou te pedir pra contratar nada agora.</RCap>
          <RCap at={4.2} until={7.6} cy={620} size={56} weight={600} maxWidth={900}>O primeiro passo é um <RHL>diagnóstico gratuito</RHL>.</RCap>
          <RCap at={8.0} until={12.4} cy={620} size={78} weight={700} maxWidth={920}>A advocacia é o seu ofício.</RCap>
          <RCap at={9.4} until={12.4} cy={780} size={62} weight={600} maxWidth={920}>Deixa a <RHL>engenharia</RHL> com a gente.</RCap>
        </CScene>
      );
    }}</CSp>
  );
}

Object.assign(window, { RKi, RShoA, RShoB, RTenReveal, RTenSolution, RKetsu });
