/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, WLBadge, WLShell, WLCard, BrandSkinPanel, CompliancePanel, RosterNetworkPanel, BillingPanel */
// White Label — § 05 control, § 06 white glove, § 07 pricing + section assembly.
const { useState: wl2S } = React;

// ---------- § 05 Control ----------
const WL_ROLES = [
  ['Admin', [1, 1, 1, 1]], ['Brand manager', [1, 1, 1, 0]], ['Legal', [0, 1, 1, 0]], ['Creator', [1, 0, 0, 0]]];
const WL_PERMS = ['Generate', 'Approve', 'Audit', 'Configure'];

const ControlPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <WLCard>
      <div ref={ref}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Roles & permissions</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>Approval chains included</span>
        </div>
        <div style={{ borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '11px 13px', marginBottom: 10 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr repeat(4, 1fr)', gap: 6, alignItems: 'center', marginBottom: 4 }}>
            <span />
            {WL_PERMS.map(p => <span key={p} style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', textAlign: 'center' }}>{p}</span>)}
          </div>
          {WL_ROLES.map(([r, perms], i) =>
            <div key={r} style={{ display: 'grid', gridTemplateColumns: '1.2fr repeat(4, 1fr)', gap: 6, alignItems: 'center', padding: '6px 0', borderTop: '1px solid rgba(28,27,27,0.06)',
              opacity: on ? 1 : 0, transition: `opacity 0.4s cubic-bezier(0.2,0.8,0.2,1) ${i * 80}ms` }}>
              <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>{r}</span>
              {perms.map((p, k) =>
                <span key={k} style={{ display: 'grid', placeItems: 'center' }}>
                  <span style={{ width: 15, height: 15, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 8, fontWeight: 800,
                    background: p ? PULSE : 'rgb(238,234,233)', color: p ? '#fff' : 'rgba(28,27,27,0.3)' }}>{p ? '✓' : '–'}</span>
                </span>)}
            </div>)}
        </div>
        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
          {['SSO · SAML', 'SCIM provisioning', 'Full audit log', 'Approval chains', 'Data residency'].map(c =>
            <span key={c} style={{ borderRadius: 9999, padding: '5px 11px', fontSize: 10, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'rgba(28,27,27,0.65)' }}>{c}</span>)}
        </div>
      </div>
    </WLCard>);
};

// ---------- § 06 White glove ----------
const WL_WEEKS = [
  ['Week 1', 'Kickoff & ingest', 'Brand kit, compliance docs and guidelines become studio rules.'],
  ['Week 2', 'Your domain goes up', 'studio.yourbrand.com — SSO wired, roles mapped, themes locked.'],
  ['Week 3', 'Roster onboarding', 'Your creators invited, network creators matched. We train both.'],
  ['Live', 'We stay on', 'Sozee runs creator support under your banner. You get a dedicated CSM.']];

const GlovePanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <WLCard>
      <div ref={ref} style={{ display: 'flex', flexDirection: 'column' }}>
        {WL_WEEKS.map(([w, t, d], i) =>
          <div key={w} style={{ display: 'flex', gap: 12, opacity: on ? 1 : 0, transition: `opacity 0.45s cubic-bezier(0.2,0.8,0.2,1) ${i * 110}ms` }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 44, flexShrink: 0 }}>
              <span style={{ width: 44, height: 22, borderRadius: 9999, display: 'grid', placeItems: 'center', fontSize: 8, fontWeight: 800, letterSpacing: '0.04em',
                background: i === 3 ? PULSE : '#fff', color: i === 3 ? '#fff' : 'var(--brand-purple-700)',
                boxShadow: i === 3 ? '0 6px 14px -4px rgba(104,19,212,0.5)' : 'inset 0 0 0 1.5px var(--brand-purple-300)' }}>{w.toUpperCase()}</span>
              {i < 3 && <span style={{ width: 1.5, flex: 1, minHeight: 18, background: 'linear-gradient(var(--brand-purple-300), var(--brand-purple-100))' }} />}
            </div>
            <div style={{ paddingBottom: i < 3 ? 16 : 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: INK, marginBottom: 3, marginTop: 2 }}>{t}</div>
              <div style={{ fontSize: 11, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{d}</div>
            </div>
          </div>)}
      </div>
    </WLCard>);
};

// ---------- Section assembly ----------
const WLBrandSection = () => <window.WLShell label="Your brand" ac="#B0489B" h1="Your domain." h2="Your colors." lean="left"
  sub="The studio lives at studio.yourbrand.com — your logo, your palette, your voice in every corner. Creators experience your brand, not a third-party tool with your logo in the corner."
  note="Try a skin — the whole studio re-themes." panel={<BrandSkinPanel />} />;
const WLComplianceSection = () => <window.WLShell label="Compliance" ac="#4D73F2" h1="Every asset," h2="born compliant." flip lean="right" bg={CREAM}
  sub="Your legal and brand guidelines are ingested as generation rules — banned claims blocked before pixels exist, disclosures appended automatically, wardrobe locked to the approved library. Legal reviews exceptions, not everything."
  panel={<CompliancePanel />} />;
const WLRosterSection = () => <window.WLShell label="Creators" ac="#C77D3A" h1="Your roster," h2="plus 20,000." lean="left"
  sub="Invite your own ambassadors and in-house talent, then fill the gaps from Sozee’s community of 20,000 vetted micro-creators — everyone inside the same studio, the same rules, the same reporting."
  panel={<RosterNetworkPanel />} />;
const WLBillingSection = () => <window.WLShell label="Billing" ac="#3A8F6B" h1="You pay." h2="They create." flip lean="right" bg={CREAM}
  sub="Creators never pay to participate — the enterprise covers every seat. Procurement gets one vendor and one invoice; your creators get a studio that’s simply free to use."
  panel={<BillingPanel />} />;
const WLControlSection = () => <window.WLShell label="Control" ac="#813CED" h1="Control," h2="all the way down." lean="left"
  sub="Roles, approval chains, SSO and a full audit log — who generated what, who approved it, where it published. The most brand-driven configuration Sozee offers."
  panel={<ControlPanel />} />;
const WLGloveSection = () => <window.WLShell label="White glove" ac="#B0489B" h1="White glove," h2="not white paper." flip lean="right" bg={CREAM}
  sub="You don’t configure this yourself. We ingest your brand, wire your domain and onboard your roster — live in three weeks. After launch, Sozee runs creator support under your banner."
  panel={<GlovePanel />} />;

// ---------- § 07 Pricing ----------
const WL_INCLUDES = ['Your domain & branding', 'Compliance engine', 'Your roster + 20K network', 'Every creator seat covered', 'SSO · roles · audit log', 'Dedicated CSM & creator support'];

const WLPricingSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', textAlign: 'center' }}>
      <Reveal delay={90}>
        <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
          Starts at $5K a month.<br /><GradText>Scoped on a call.</GradText>
        </h2>
      </Reveal>
      <Reveal delay={170}>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto 44px', maxWidth: 500 }}>
          Every white label is set up by hand — roster size, compliance depth and campaign volume shape the number. The call is where it gets scoped.
        </p>
      </Reveal>
      <Reveal delay={240} y={24}>
        <div style={{ maxWidth: 680, margin: '0 auto', borderRadius: 20, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '34px 38px', transform: 'rotate(-0.8deg)' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 10, marginBottom: 6 }}>
            <span style={{ font: '800 44px/1 var(--font-sans)', letterSpacing: '-0.02em', color: INK }}>$5,000</span>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-tertiary)' }}>/ month, from</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginBottom: 22 }}>Annual agreement · white glove setup included</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 18px', textAlign: 'left', marginBottom: 26 }}>
            {WL_INCLUDES.map(x =>
              <span key={x} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 600, color: INK }}>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}><path d="M3 8.4l3.2 3.2L13.5 4" stroke="var(--brand-purple-600)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>{x}</span>)}
          </div>
          <CTAButton>Book a call</CTAButton>
          <div style={{ marginTop: 16, fontSize: 11.5, color: 'var(--text-tertiary)' }}>30 minutes with the team that will build yours — no deck, a live studio.</div>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { WLBrandSection, WLComplianceSection, WLRosterSection, WLBillingSection, WLControlSection, WLGloveSection, WLPricingSection, ControlPanel, GlovePanel });