/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, WLStudio, WL_SKINS */
// White Label §§ 01–06 + pricing. Skews alternate right → left per single-panel section.
const { useState: wlS } = React;

const WLBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18, borderRadius: 9999, padding: '7px 14px', background: bg, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: ac }} />
    <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>{label}</span>
  </div>;

const WLShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff', cta = 'Book a call' }) => (
  <section style={{ background: bg, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: flip ? '1.1fr 0.9fr' : '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>{h1}<br /><GradText>{h2}</GradText></h2>
        </Reveal>
        <Reveal delay={170}><p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{sub}</p></Reveal>
        <Reveal delay={250}><CTAButton>{cta}</CTAButton></Reveal>
        {note && <Reveal delay={330}><div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>{note}</div></Reveal>}
      </div>
      <Reveal delay={160} y={28} style={{ order: flip ? 1 : 2 }}>
        <div style={{ transform: lean === 'left' ? 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)' : 'rotate(1.3deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>{panel}</div>
      </Reveal>
    </div>
  </section>
);

const WLCard = ({ children, pad = 18 }) =>
  <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad }}>{children}</div>;

// ---------- § 01 Your brand ----------
const BrandSkinPanel = () => {
  const [skin, setSkin] = wlS('aurelle');
  return (
    <div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, justifyContent: 'center' }}>
        {Object.entries(WL_SKINS).map(([k, s]) =>
          <span key={k} onClick={() => setSkin(k)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 9999, padding: '7px 14px', cursor: 'pointer', transition: 'all 0.2s',
            background: skin === k ? '#fff' : 'transparent', boxShadow: skin === k ? '0 8px 20px 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: 10, height: 10, borderRadius: 3, background: s.accent }} />
            <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: '0.08em', color: INK }}>{s.name}</span>
          </span>)}
        <span style={{ alignSelf: 'center', fontSize: 10, fontWeight: 600, color: 'var(--text-tertiary)', marginLeft: 4 }}>← try a skin</span>
      </div>
      <WLStudio skin={skin} />
    </div>);
};

// ---------- § 02 Compliance ----------
const WL_RULES = [
  ['✓', 'Disclosure appended to every caption', '#ad · #AurellePartner · FTC-clean', '#15803D'],
  ['✕', '“Clinically proven” — claim blocked at generation', 'Your banned-claims list, enforced before pixels exist', '#B42318'],
  ['✓', 'Wardrobe locked to the approved library', 'Off-guideline outfits can’t be generated, only requested', '#15803D'],
  ['✓', 'Every generation logged', 'Who, what, when — exportable for legal', '#15803D']];

const CompliancePanel = () => {
  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 }}>Compliance engine</span>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '3px 10px' }}>Your guidelines · ingested</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {WL_RULES.map(([m, t, d, c], i) =>
            <div key={t} style={{ display: 'flex', gap: 10, borderRadius: 12, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '10px 12px',
              opacity: on ? 1 : 0, transition: `opacity 0.45s ${SB_EASE} ${i * 100}ms` }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800, color: '#fff', background: c }}>{m}</span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, color: INK }}>{t}</span>
                <span style={{ display: 'block', fontSize: 10, color: 'rgba(28,27,27,0.55)', marginTop: 2 }}>{d}</span>
              </span>
            </div>)}
        </div>
        <div style={{ marginTop: 12, fontSize: 11, color: 'var(--text-secondary)' }}>Compliance reviews content that already follows the rules — not a queue of violations.</div>
      </div>
    </WLCard>);
};

// ---------- § 03 Roster + network ----------
const RosterNetworkPanel = () => {
  const [tab, setTab] = wlS(0);
  const [ref, on] = useReveal(0.35);
  const OWN = [
    { g: GENS[0], n: 'Scarlett Day', r: 'Brand ambassador', s: 'Active' },
    { g: GENS[6], n: 'Mara Quinn', r: 'In-house talent', s: 'Active' },
    { g: GENS[3], n: 'jade@aurelle.com', r: 'Invite sent', s: 'Pending' }];
  const NET = [
    { g: GENS[5], n: 'Nova Reyes', r: '48k · fashion', s: 'Invite' },
    { g: GENS[1], n: 'Lena Cole', r: '31k · beauty', s: 'Invite' },
    { g: GENS[7], n: 'Ivy Tran', r: '22k · lifestyle', s: 'Invite' }];
  const rows = tab === 0 ? OWN : NET;
  return (
    <WLCard>
      <div ref={ref}>
        <div style={{ display: 'flex', gap: 5, marginBottom: 12 }}>
          {['Your roster · 14', 'Sozee network · 20,412'].map((p, i) =>
            <span key={p} onClick={() => setTab(i)} style={{ borderRadius: 9999, padding: '6px 13px', fontSize: 10.5, fontWeight: tab === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s',
              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: 7, marginBottom: 12 }}>
          {rows.map((r, i) =>
            <div key={r.n} style={{ display: 'flex', alignItems: 'center', gap: 9, borderRadius: 11, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '8px 11px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 80}ms` }}>
              <span style={{ width: 28, height: 28, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
                <img loading="lazy" decoding="async" src={r.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: 11.5, fontWeight: 700, color: INK }}>{r.n}</span>
                <span style={{ display: 'block', fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>{r.r}</span>
              </span>
              <span style={{ fontSize: 9, fontWeight: 700, borderRadius: 9999, padding: '4px 11px', flexShrink: 0, cursor: tab === 1 ? 'pointer' : 'default',
                color: r.s === 'Active' ? '#15803D' : r.s === 'Pending' ? '#B45309' : '#fff',
                background: r.s === 'Active' ? 'rgba(34,197,94,0.12)' : r.s === 'Pending' ? 'rgba(245,165,36,0.14)' : PULSE,
                border: r.s === 'Invite' ? 'none' : `1px solid ${r.s === 'Active' ? 'rgba(34,197,94,0.3)' : 'rgba(245,165,36,0.4)'}` }}>{r.s}</span>
            </div>)}
        </div>
        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
          {['Invite by email or link', 'Vetted micro-creators', 'One standard, one studio'].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>);
};

// ---------- § 04 Enterprise pays ----------
const BillingPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <WLCard>
      <div ref={ref}>
        <div style={{ borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '12px 14px', marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Aurelle · March invoice</span>
            <span style={{ fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.45)' }}>One vendor · net-30</span>
          </div>
          {[['Platform · white label', '$5,000'], ['Creator seats · 34 active', 'Included'], ['Campaign escrow', '$8,000']].map(([l, v]) =>
            <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderTop: '1px solid rgba(28,27,27,0.06)' }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-secondary)' }}>{l}</span>
              <span style={{ fontSize: 10.5, fontWeight: 800, color: INK, fontVariantNumeric: 'tabular-nums' }}>{v}</span>
            </div>)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderRadius: 13, background: '#fff', boxShadow: 'inset 0 0 0 1.5px var(--brand-purple-300)', padding: '11px 13px', marginBottom: 10,
          opacity: on ? 1 : 0, transition: `opacity 0.5s ${SB_EASE} 250ms` }}>
          <span style={{ width: 30, height: 30, 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, minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 10.5, fontWeight: 700, color: INK }}>What Nova sees at checkout</span>
            <span style={{ display: 'block', fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>Studio access · unlimited generations</span>
          </span>
          <span style={{ textAlign: 'right', flexShrink: 0 }}>
            <span style={{ display: 'block', fontSize: 13, fontWeight: 800, color: INK }}>$0.00</span>
            <span style={{ display: 'block', fontSize: 8.5, fontWeight: 700, color: '#15803D' }}>Covered by Aurelle ✓</span>
          </span>
        </div>
        <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>No creator ever hits a paywall wearing your logo — adoption is never the bottleneck.</div>
      </div>
    </WLCard>);
};

Object.assign(window, { WLBadge, WLShell, WLCard, BrandSkinPanel, CompliancePanel, RosterNetworkPanel, BillingPanel });