// DIRECTION 04 · BOLD STATEMENT
// Premium tech — massive type, purple flood, type-as-image, confident.

function D04_Manifesto() {
  return (
    <div style={{ height: '100%', background: 'var(--purple)', color: '#fff', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      {/* monster Y in background */}
      <div style={{ position: 'absolute', right: -40, bottom: -80, fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 320, lineHeight: 0.8, color: 'rgba(255,255,255,0.12)' }}>Y</div>

      <div style={{ position: 'relative', padding: ABPAD, display: 'flex', flexDirection: 'column', height: '100%', gap: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <YoubeLockup height={14} color="white" />
          <span className="label-caps-on-purple">04 / BOLD</span>
        </div>

        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 38, lineHeight: 0.88, letterSpacing: '-0.04em', marginTop: 16 }}>
          GRANDE.<br/>SIMPLES.<br/>YOUBE.
        </div>

        <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 11, lineHeight: 1.4, opacity: 0.85, margin: '12px 0 0 0', maxWidth: '70%' }}>
          Tipografia como manifesto. Roxo como bandeira. Sem rodeios.
        </p>

        <div style={{ marginTop: 'auto', position: 'relative' }}>
          <div className="label-caps-on-purple" style={{ marginBottom: 6 }}>Paleta</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Swatch color="#FFFFFF" label="White" />
            <Swatch color="var(--purple)" label="#7F6CFF" />
            <Swatch color="#1C1B22" label="Ink" />
            <Swatch color="#F4FF4D" label="Bolt" />
          </div>
          <div style={{ marginTop: 10, padding: '8px 10px', background: 'rgba(0,0,0,0.18)', borderRadius: 6 }}>
            <div className="label-caps-on-purple" style={{ marginBottom: 2 }}>Tipo</div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 14, letterSpacing: '-0.02em' }}>Jakarta · 800 ExtraBold</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function D04_Landing() {
  return (
    <div style={{ height: '100%', background: 'var(--purple)', color: '#fff', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      {/* nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.18)' }}>
        <YoubeLockup height={12} color="white" />
        <div style={{ display: 'flex', gap: 14, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 700, color: 'rgba(255,255,255,0.85)' }}>
          <span>PLATAFORMA</span><span>PREÇOS</span><span>DEPOIMENTOS</span>
        </div>
        <div style={{ background: '#fff', color: 'var(--purple-deep)', padding: '5px 12px', borderRadius: 6, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 800 }}>ENTRAR →</div>
      </div>

      {/* type flood */}
      <div style={{ position: 'relative', flex: 1, padding: '14px 16px' }}>
        <span className="label-caps-on-purple">PLATAFORMA Nº 1 P/ BELEZA AUTÔNOMA</span>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 56, lineHeight: 0.85, letterSpacing: '-0.045em', marginTop: 8 }}>
          AGENDA.<br/>CAIXA.<br/>CLIENTES.<br/><span style={{ color: '#F4FF4D' }}>UM LUGAR.</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
          <div style={{ background: '#fff', color: 'var(--purple-deep)', padding: '10px 18px', borderRadius: 6, fontFamily: "'Plus Jakarta Sans'", fontSize: 11, fontWeight: 800 }}>COMEÇAR →</div>
          <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, opacity: 0.8 }}>Grátis · sem cartão</div>
        </div>

        {/* stat bar */}
        <div style={{ position: 'absolute', right: 14, bottom: 14, display: 'flex', gap: 10, alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: 8, paddingLeft: 12 }}>
          <div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 16, letterSpacing: '-0.02em' }}>+12k</div>
            <div className="label-caps-on-purple">profissionais</div>
          </div>
          <div style={{ width: 1, height: 26, background: 'rgba(255,255,255,0.18)' }}/>
          <div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 16, letterSpacing: '-0.02em' }}>4,9★</div>
            <div className="label-caps-on-purple">avaliação</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function D04_Social() {
  return (
    <div style={{ height: '100%', background: '#1C1B22', color: '#fff', position: 'relative', overflow: 'hidden', padding: 14 }}>
      {/* big Y mark */}
      <div style={{ position: 'absolute', top: -10, right: -20, fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 220, lineHeight: 0.8, color: 'var(--purple)' }}>Y</div>

      <div style={{ position: 'relative' }}>
        <YoubeLockup height={11} color="white" />
      </div>

      <div style={{ position: 'absolute', left: 14, right: 14, top: '50%', transform: 'translateY(-50%)', fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 32, lineHeight: 0.85, letterSpacing: '-0.035em', zIndex: 1 }}>
        ZERO<br/>NO-SHOW.<br/><span style={{ color: 'var(--purple)' }}>FIM.</span>
      </div>

      <div style={{ position: 'absolute', left: 14, bottom: 14, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, opacity: 0.7, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        Confirmação automática · pré-pagamento · lembrete WhatsApp
      </div>
    </div>
  );
}

function D04_Tote() {
  return (
    <div style={{ height: '100%', background: 'var(--paper)', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: 16 }}>
      <div style={{ display: 'flex', gap: 30, marginBottom: 8 }}>
        <div style={{ width: 30, height: 30, border: '3px solid var(--ink)', borderBottom: 'none', borderRadius: '40px 40px 0 0' }}/>
        <div style={{ width: 30, height: 30, border: '3px solid var(--ink)', borderBottom: 'none', borderRadius: '40px 40px 0 0' }}/>
      </div>
      <div style={{ background: 'var(--ink)', color: '#fff', flex: 1, width: '100%', borderRadius: 2, position: 'relative', padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <YoubeLockup height={14} color="white" />
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 30, lineHeight: 0.85, letterSpacing: '-0.04em' }}>
          BELEZA<br/>É<br/><span style={{ color: 'var(--purple)' }}>OFÍCIO.</span>
        </div>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 8, opacity: 0.6, letterSpacing: '0.16em', textTransform: 'uppercase' }}>brinde · tote</div>
      </div>
    </div>
  );
}

function Direction04() {
  return (
    <>
      <DCArtboard id="d4-manifesto" label="Manifesto · bold"   width={300} height={420}><D04_Manifesto /></DCArtboard>
      <DCArtboard id="d4-landing"   label="Landing · flood"    width={500} height={360}><D04_Landing /></DCArtboard>
      <DCArtboard id="d4-social"    label="Post · slogan"      width={280} height={280}><D04_Social /></DCArtboard>
      <DCArtboard id="d4-tote"      label="Brinde · tote ink"  width={220} height={300}><D04_Tote /></DCArtboard>
    </>
  );
}

window.Direction04 = Direction04;