/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, Waveform, SB_EASE */
// AI Influencer solutions page — hero: copy left, casting board right.
const { useState: aiS, useEffect: aiE } = React;

const AIBoard = () => {
  const [ref, on] = useReveal(0.3);
  const [locked, setLocked] = aiS(false);
  aiE(() => {
    if (!on) return;
    const t = setInterval(() => setLocked(l => !l), 4200);
    return () => clearInterval(t);
  }, [on]);
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ padding: '18px 20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 800, color: INK }}>New Character <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>· cast from zero</span></span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 700, borderRadius: 9999, padding: '3px 10px', transition: `all 0.4s ${SB_EASE}`,
              color: locked ? '#15803D' : 'rgba(28,27,27,0.5)',
              background: locked ? 'rgba(34,197,94,0.12)' : 'rgb(246,243,242)',
              border: locked ? '1px solid rgba(34,197,94,0.3)' : '1px solid rgba(28,27,27,0.08)' }}>
              <svg width="9" height="9" viewBox="0 0 16 16" fill="none"><path d="M5 7V5.5a3 3 0 016 0V7M4 7h8v6H4z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
              {locked ? 'Identity locked' : 'Casting…'}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 12 }}>
            <div style={{ position: 'relative', borderRadius: 13, overflow: 'hidden', aspectRatio: '3/3.9', background: 'rgb(246,243,242)' }}>
              <img loading="lazy" decoding="async" src={GENS[2].src} alt="Sloane" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%',
                filter: locked ? 'none' : 'blur(6px) saturate(0.9)', transform: locked ? 'scale(1)' : 'scale(1.04)', transition: `filter 0.8s ${SB_EASE}, transform 0.9s ${SB_EASE}` }} />
              {!locked && <span style={{ position: 'absolute', left: 0, right: 0, height: '14%', background: 'linear-gradient(to bottom, transparent, rgba(129,60,237,0.35), transparent)', animation: 'sz-scan-x 2.2s ease-in-out infinite' }} />}
              <span style={{ position: 'absolute', left: 9, bottom: 9, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 9px' }}>Sloane · 24</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>The persona sheet</div>
              {[['Look', 'Soft glam · freckles · auburn'], ['World', 'Golden hour · coastal · slow mornings'], ['Platforms', 'Instagram · Fanvue · TikTok']].map(([k, v]) =>
                <div key={k} style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px' }}>
                  <span style={{ display: 'block', fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 2 }}>{k}</span>
                  <span style={{ fontSize: 11, fontWeight: 600, color: INK }}>{v}</span>
                </div>)}
              <div style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px' }}>
                <span style={{ display: 'block', fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 4 }}>Voice · warm, low</span>
                <Waveform on={locked} bars={20} h={16} />
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '9px 12px' }}>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.65)', flex: 1 }}>They’re not based on anyone. They’re yours — designed, owned, directed.</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '7px 14px', background: PULSE, color: '#fff', fontSize: 9.5, fontWeight: 800, letterSpacing: '0.05em', flexShrink: 0 }}>CAST THEM ✦</span>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const AIInfluencerHero = () => (
  <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)' }}>Solutions</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>AI Influencer</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' }}>
            The next star<br /><GradText>isn’t real.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            AI influencers are the future of social — media properties you cast, direct and own. Build one from zero, or run the ones you manage at studio scale. You stay behind the camera.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Cast your Character</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><AIBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { AIInfluencerHero });