/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, MShell, MHead, WL_SKINS, WLStudio */
// White Label — mobile layout (skews alternate).
const { useState: mwlS } = React;

// eyebrows are hero-only on mobile — keep the heading, drop the pill
const MWLBadgeHead = ({ title, sub }) => <MHead title={title} sub={sub} />;
const MWLCard = ({ lean = 'right', children, pad = 12 }) => (
  <div style={{ borderRadius: 18, background: '#fff', boxShadow: '0 12px 32px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad, marginTop: 26, textAlign: 'left',
    transform: lean === 'left' ? 'rotate(-1.2deg) perspective(1200px) rotateY(3deg)' : 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}>{children}</div>
);

// hero
const MWLHero = () => (
  <section style={{ background: CREAM, padding: '0 22px 56px' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0 30px' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
        <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ width: 19, height: 19, objectFit: 'contain' }} />
        <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.03em', color: INK }}>sozee</span>
      </span>
    </div>
    <div style={{ textAlign: 'center' }}>
      <Reveal>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginBottom: 16, borderRadius: 9999, padding: '6px 12px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
          <a href="/" style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Solutions</a>
          <span style={{ fontSize: 10, color: 'rgba(28,27,27,0.35)' }}>/</span>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>White Label</span>
        </div>
      </Reveal>
      <Reveal delay={90}>
        <h1 style={{ font: '800 44px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 16px', textWrap: 'balance' }}>
          The whole studio,<br /><GradText>under your name.</GradText>
        </h1>
      </Reveal>
      <Reveal delay={170}>
        <p style={{ fontSize: 14.5, lineHeight: 1.58, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
          Sozee on your domain, in your brand, inside your compliance rules — and your creators never see a bill.
        </p>
      </Reveal>
      <Reveal delay={250} style={{ marginBottom: 34 }}><CTAButton size="sm">Book a call</CTAButton></Reveal>
    </div>
    <Reveal delay={200} y={26}>
      <div style={{ transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}><WLStudio skin="aurelle" /></div>
    </Reveal>
  </section>
);

// § 01 brand — skin switcher
const MWLBrand = () => {
  const [skin, setSkin] = mwlS('aurelle');
  return (
    <MShell bg="#fff">
      <MWLBadgeHead label="White Label · Your brand" ac="#B0489B" title={<span>Your domain.<br /><GradText>Your colors.</GradText></span>}
        sub="studio.yourbrand.com — your logo, palette and voice. Creators experience your brand, not a third-party tool." />
      <div style={{ display: 'flex', gap: 6, marginTop: 22, justifyContent: 'center' }}>
        {Object.entries(WL_SKINS).map(([k, s]) =>
          <span key={k} onClick={() => setSkin(k)} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9999, padding: '6px 12px', cursor: 'pointer', transition: 'all 0.2s',
            background: skin === k ? '#fff' : 'transparent', boxShadow: skin === k ? '0 6px 16px rgba(28,27,27,0.12), inset 0 0 0 1.5px ' + s.accent : 'inset 0 0 0 1px rgba(28,27,27,0.14)' }}>
            <span style={{ width: 9, height: 9, borderRadius: 3, background: s.accent }} />
            <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: '0.08em', color: INK }}>{s.name}</span>
          </span>)}
      </div>
      <div style={{ marginTop: 14, textAlign: 'left', transform: 'rotate(-1.2deg) perspective(1200px) rotateY(3deg)' }}><WLStudio skin={skin} /></div>
    </MShell>);
};

// § 02 compliance
const MWL_RULES = [
  ['✓', 'Disclosure auto-appended', '#15803D'],
  ['✕', '“Clinically proven” — blocked at generation', '#B42318'],
  ['✓', 'Wardrobe locked to approved library', '#15803D'],
  ['✓', 'Every generation logged · exportable', '#15803D']];

const MWLCompliance = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell>
      <MWLBadgeHead label="White Label · Compliance" ac="#4D73F2" title={<span>Every asset,<br /><GradText>born compliant.</GradText></span>}
        sub="Your legal and brand guidelines become generation rules — claims blocked before pixels exist." />
      <MWLCard lean="right">
        <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {MWL_RULES.map(([m, t, c], i) =>
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 10px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 80}ms` }}>
              <span style={{ width: 17, height: 17, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 8.5, fontWeight: 800, color: '#fff', background: c }}>{m}</span>
              <span style={{ fontSize: 10, fontWeight: 700, color: INK }}>{t}</span>
            </div>)}
        </div>
      </MWLCard>
    </MShell>);
};

// § 03 roster
const MWLRoster = () => {
  const [tab, setTab] = mwlS(0);
  const rows = tab === 0 ?
    [[GENS[0], 'Scarlett Day', 'Ambassador', 'Active', '#15803D', 'rgba(34,197,94,0.12)'], [GENS[6], 'Mara Quinn', 'In-house', 'Active', '#15803D', 'rgba(34,197,94,0.12)'], [GENS[3], 'jade@aurelle.com', 'Invite sent', 'Pending', '#B45309', 'rgba(245,165,36,0.14)']] :
    [[GENS[5], 'Nova Reyes', '48k · fashion', 'Invite', '#fff', PULSE], [GENS[1], 'Lena Cole', '31k · beauty', 'Invite', '#fff', PULSE], [GENS[7], 'Ivy Tran', '22k · lifestyle', 'Invite', '#fff', PULSE]];
  return (
    <MShell bg="#fff">
      <MWLBadgeHead label="White Label · Creators" ac="#C77D3A" title={<span>Your roster,<br /><GradText>plus 20,000.</GradText></span>}
        sub="Invite your ambassadors, fill the gaps from Sozee’s vetted micro-creator community — one studio, one standard." />
      <MWLCard lean="left" pad={10}>
        <div style={{ display: 'flex', gap: 4, marginBottom: 9 }}>
          {['Your roster · 14', 'Network · 20,412'].map((p, i) =>
            <span key={p} onClick={() => setTab(i)} style={{ borderRadius: 9999, padding: '5px 10px', fontSize: 9, fontWeight: tab === i ? 700 : 600, cursor: 'pointer',
              background: tab === i ? INK : 'rgb(246,243,242)', color: tab === i ? '#fff' : 'rgba(28,27,27,0.6)',
              boxShadow: tab === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{p}</span>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          {rows.map(([g, n, r, s, c, bg]) =>
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 7, borderRadius: 9, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 8px' }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
                <img loading="lazy" decoding="async" src={g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 9.5, fontWeight: 700, color: INK, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</span>
                <span style={{ display: 'block', fontSize: 8, fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>{r}</span>
              </span>
              <span style={{ fontSize: 8, fontWeight: 700, borderRadius: 9999, padding: '3px 9px', color: c, background: bg, flexShrink: 0 }}>{s}</span>
            </div>)}
        </div>
      </MWLCard>
    </MShell>);
};

// § 04 billing
const MWLBilling = () => (
  <MShell>
    <MWLBadgeHead label="White Label · Billing" ac="#3A8F6B" title={<span>You pay.<br /><GradText>They create.</GradText></span>}
      sub="Every creator seat covered by the enterprise. One vendor, one invoice — never a paywall on your logo." />
    <MWLCard lean="right">
      <div style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '9px 11px', marginBottom: 8 }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: INK, marginBottom: 5 }}>Aurelle · March invoice</div>
        {[['Platform · white label', '$5,000'], ['Creator seats · 34', 'Included'], ['Campaign escrow', '$8,000']].map(([l, v]) =>
          <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '1px solid rgba(28,27,27,0.06)' }}>
            <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-secondary)' }}>{l}</span>
            <span style={{ fontSize: 9, fontWeight: 800, color: INK }}>{v}</span>
          </div>)}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 10, boxShadow: 'inset 0 0 0 1.5px var(--brand-purple-300)', padding: '8px 10px' }}>
        <span style={{ width: 24, height: 24, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
          <img loading="lazy" decoding="async" src={GENS[5].src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
        <span style={{ flex: 1, fontSize: 9, fontWeight: 700, color: INK }}>What Nova sees</span>
        <span style={{ textAlign: 'right' }}>
          <span style={{ display: 'block', fontSize: 11, fontWeight: 800, color: INK }}>$0.00</span>
          <span style={{ display: 'block', fontSize: 7.5, fontWeight: 700, color: '#15803D' }}>Covered by Aurelle ✓</span>
        </span>
      </div>
    </MWLCard>
  </MShell>
);

// § 05 control
const MWLControl = () => (
  <MShell bg="#fff">
    <MWLBadgeHead label="White Label · Control" ac="#813CED" title={<span>Control,<br /><GradText>all the way down.</GradText></span>}
      sub="Roles, approval chains, SSO and a full audit log — the most brand-driven configuration Sozee offers." />
    <MWLCard lean="left" pad={10}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr repeat(3, 1fr)', gap: 5, alignItems: 'center', marginBottom: 3 }}>
        <span />{['Gen', 'Approve', 'Audit'].map(p => <span key={p} style={{ fontSize: 7, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', textAlign: 'center' }}>{p}</span>)}
      </div>
      {[['Admin', [1, 1, 1]], ['Brand mgr', [1, 1, 0]], ['Legal', [0, 1, 1]], ['Creator', [1, 0, 0]]].map(([r, ps]) =>
        <div key={r} style={{ display: 'grid', gridTemplateColumns: '1.3fr repeat(3, 1fr)', gap: 5, alignItems: 'center', padding: '5px 0', borderTop: '1px solid rgba(28,27,27,0.06)' }}>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: INK }}>{r}</span>
          {ps.map((p, k) => <span key={k} style={{ display: 'grid', placeItems: 'center' }}>
            <span style={{ width: 13, height: 13, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 7, fontWeight: 800, background: p ? PULSE : 'rgb(238,234,233)', color: p ? '#fff' : 'rgba(28,27,27,0.3)' }}>{p ? '✓' : '–'}</span></span>)}
        </div>)}
      <div className="m-nosb" style={{ display: 'flex', gap: 4, overflowX: 'auto', marginTop: 8 }}>
        {['SSO · SAML', 'SCIM', 'Audit log', 'Approval chains'].map(c =>
          <span key={c} style={{ borderRadius: 9999, padding: '4px 9px', fontSize: 8.5, 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)', whiteSpace: 'nowrap', flexShrink: 0 }}>{c}</span>)}
      </div>
    </MWLCard>
  </MShell>
);

// § 06 white glove
const MWLGlove = () => (
  <MShell>
    <MWLBadgeHead label="White Label · White glove" ac="#B0489B" title={<span>White glove,<br /><GradText>not white paper.</GradText></span>}
      sub="We ingest your brand, wire your domain and onboard your roster — live in three weeks. Sozee runs creator support under your banner." />
    <MWLCard lean="right">
      {[['WK 1', 'Kickoff & ingest'], ['WK 2', 'Your domain goes up'], ['WK 3', 'Roster onboarding'], ['LIVE', 'We stay on — dedicated CSM']].map(([w, t], i) =>
        <div key={w} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0', borderTop: i ? '1px solid rgba(28,27,27,0.06)' : 'none' }}>
          <span style={{ width: 40, height: 18, borderRadius: 9999, display: 'grid', placeItems: 'center', fontSize: 7, fontWeight: 800, flexShrink: 0,
            background: i === 3 ? PULSE : '#fff', color: i === 3 ? '#fff' : 'var(--brand-purple-700)',
            boxShadow: i === 3 ? 'none' : 'inset 0 0 0 1.5px var(--brand-purple-300)' }}>{w}</span>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>{t}</span>
        </div>)}
    </MWLCard>
  </MShell>
);

// § 07 pricing
const MWLPricing = () => (
  <MShell bg="#fff">
    <MWLBadgeHead label="White Label · Pricing" ac="#813CED" title={<span>Starts at $5K.<br /><GradText>Scoped on a call.</GradText></span>}
      sub="Roster size, compliance depth and campaign volume shape the number." />
    <div style={{ marginTop: 24, borderRadius: 16, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '22px 18px', transform: 'rotate(-0.8deg)' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 7, marginBottom: 4 }}>
        <span style={{ font: '800 32px/1 var(--font-sans)', letterSpacing: '-0.02em', color: INK }}>$5,000</span>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>/ month, from</span>
      </div>
      <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginBottom: 16, textAlign: 'center' }}>Annual agreement · white glove setup included</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, textAlign: 'left', marginBottom: 18 }}>
        {['Your domain & branding', 'Compliance engine', 'Your roster + 20K network', 'Every creator seat covered', 'SSO · roles · audit log', 'Dedicated CSM & support'].map(x =>
          <span key={x} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 10.5, fontWeight: 600, color: INK }}>
            <svg width="10" height="10" 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>
      <div style={{ textAlign: 'center' }}><CTAButton size="sm">Book a call</CTAButton></div>
    </div>
  </MShell>
);

const MWLPage = () => (
  <React.Fragment>
    <div style={{ fontFamily: 'var(--font-sans)', maxWidth: 430, margin: '0 auto', boxShadow: '0 0 0 1px rgba(28,27,27,0.06), 0 0 60px rgba(28,27,27,0.08)', overflow: 'clip' }}>
      <div data-screen-label="Hero — White Label"><MWLHero /></div>
      <div data-screen-label="01 Your brand"><MWLBrand /></div>
      <div data-screen-label="02 Compliance"><MWLCompliance /></div>
      <div data-screen-label="03 Creators"><MWLRoster /></div>
      <div data-screen-label="04 Billing"><MWLBilling /></div>
      <div data-screen-label="05 Control"><MWLControl /></div>
      <div data-screen-label="06 White glove"><MWLGlove /></div>
      <div data-screen-label="07 Pricing"><MWLPricing /></div>
      <div data-screen-label="08 FAQ"><window.MBrandFAQSection /></div>
      <div data-screen-label="CTA + Footer"><window.MFinalSection /></div>
    </div>
    <window.MCISticky />
    <window.SozeeNavMobile siteHref="/" localLabels={{ '/white-label': 'Hero — White Label' }} />
  </React.Fragment>
);

Object.assign(window, { MWLPage });
