/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE */
// White Label — hero + the re-skinnable studio window (shared with § 01).
const WL_SKINS = {
  aurelle: { name: 'AURELLE', domain: 'studio.aurelle.com', ink: '#241418', accent: '#8C2F39', wash: '#F7EDEA', logo: 'A', tag: '#AurellePartner' },
  vantage: { name: 'VANTAGE', domain: 'create.vantage.co', ink: '#0F1E36', accent: '#B8892B', wash: '#EEF2F8', logo: 'V', tag: '#VantageCrew' } };

const WLStudio = ({ skin = 'aurelle' }) => {
  const s = WL_SKINS[skin];
  const T = 'all 0.45s cubic-bezier(0.2,0.8,0.2,1)';
  return (
    <div style={{ borderRadius: 18, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', borderBottom: '1px solid rgba(28,27,27,0.07)', background: 'rgb(250,247,247)' }}>
        <span style={{ display: 'flex', gap: 4 }}>{['#FF5F57', '#FEBC2E', '#28C840'].map(c => <span key={c} style={{ width: 8, height: 8, borderRadius: '50%', background: c }} />)}</span>
        <span style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, borderRadius: 8, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '4px 10px', maxWidth: 240, margin: '0 auto' }}>
          <svg width="8" height="9" viewBox="0 0 10 12" fill="none"><rect x="1" y="5" width="8" height="6" rx="1.5" stroke="#15803D" strokeWidth="1.4" /><path d="M3 5V3.5a2 2 0 014 0V5" stroke="#15803D" strokeWidth="1.4" /></svg>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: INK, transition: T }}>{s.domain}</span>
        </span>
        <span style={{ width: 36 }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid rgba(28,27,27,0.06)' }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: s.accent, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800, color: '#fff', transition: T }}>{s.logo}</span>
        <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', color: s.ink, transition: T }}>{s.name}</span>
        <span style={{ display: 'flex', gap: 4, marginLeft: 10 }}>
          {['Explore', 'Create', 'Vault', 'Queue'].map((n, i) =>
            <span key={n} style={{ fontSize: 8.5, fontWeight: 700, borderRadius: 9999, padding: '3px 9px', transition: T,
              background: i === 1 ? s.wash : 'transparent', color: i === 1 ? s.ink : 'rgba(28,27,27,0.5)' }}>{n}</span>)}
        </span>
        <span style={{ whiteSpace: 'nowrap', marginLeft: 'auto', fontSize: 8, fontWeight: 700, color: '#15803D', background: 'rgba(34,197,94,0.1)', border: '1px solid rgba(34,197,94,0.28)', borderRadius: 9999, padding: '2px 8px' }}>Seat covered ✓</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 10, padding: 14 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ borderRadius: 11, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '10px 12px', flex: 1 }}>
            <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 5 }}>Create · campaign brief loaded</div>
            <div style={{ fontSize: 11, lineHeight: 1.5, fontWeight: 600, color: INK }}>Velvet drop — rooftop at golden hour, collar in frame<span style={{ display: 'inline-block', width: 1.5, height: 11, background: s.accent, marginLeft: 2, verticalAlign: '-2px', animation: 'sz-blink 1.1s step-end infinite', transition: T }} /></div>
          </div>
          <div style={{ borderRadius: 9, background: s.wash, padding: '7px 10px', fontSize: 8.5, fontWeight: 700, color: s.ink, transition: T }}>✓ Disclosure auto-appended · {s.tag}</div>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, borderRadius: 9999, padding: '9px 0', background: s.accent, color: '#fff', fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', transition: T, boxShadow: '0 8px 18px -6px rgba(28,27,27,0.4)' }}>GENERATE ✦</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 7 }}>
          {[2, 5, 1, 6].map((n) =>
            <span key={n} style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', aspectRatio: '1' }}>
              <img loading="lazy" decoding="async" src={`assets/shoot/set-${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />
              <span style={{ position: 'absolute', right: 5, top: 5, width: 12, height: 12, borderRadius: 4, background: s.accent, display: 'grid', placeItems: 'center', fontSize: 7, fontWeight: 800, color: '#fff', transition: T }}>{s.logo}</span>
            </span>)}
        </div>
      </div>
    </div>);
};

const WhiteLabelHero = () => (
  <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 }}>White Label</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 56px/1.02 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance', maxWidth: 480 }}>
            The whole studio,<br /><GradText>under your name.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            Sozee’s content studio on your domain, in your brand, inside your compliance rules. Your creators and ours generate under your banner — and never see a bill.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Book a call</CTAButton>
          </div>
        </Reveal>
        <Reveal delay={330}>
          <div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>White glove setup · live on your domain in three weeks · from $5K/mo.</div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}>
        <div style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}><WLStudio skin="aurelle" /></div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { WhiteLabelHero, WLStudio, WL_SKINS });