// DIRECTION 02 · EDITORIAL LUXE
// Premium magazine — Fraunces serif display, photography, generous whitespace.

function D02_Manifesto() {
  return (
    <div style={{ padding: ABPAD, height: '100%', background: 'var(--paper)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 8, borderBottom: '1px solid var(--ink)' }}>
        <span style={{ fontFamily: "'Fraunces'", fontStyle: 'italic', fontWeight: 700, fontSize: 13 }}>Yoube</span>
        <span className="label-caps">Nº 02 — 2026</span>
      </div>

      <div style={{ flex: 1, paddingTop: 14, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <span className="label-caps" style={{ color: 'var(--purple-deep)' }}>EDITORIAL</span>
          <div style={{ fontFamily: "'Fraunces'", fontWeight: 700, fontSize: 30, lineHeight: 0.95, color: 'var(--ink)', letterSpacing: '-0.025em', marginTop: 6 }}>
            Beleza,<br/><span style={{ fontStyle: 'italic', color: 'var(--purple-deep)' }}>com método.</span>
          </div>
          <p style={{ fontFamily: "'Fraunces'", fontSize: 11, fontWeight: 400, lineHeight: 1.4, color: 'var(--ink-soft)', marginTop: 10, marginBottom: 0 }}>
            Uma plataforma editorial para o ofício de quem cuida — agenda, finanças e relacionamento em prosa limpa.
          </p>
        </div>

        <div>
          <div className="label-caps" style={{ marginBottom: 6 }}>Paleta</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Swatch color="var(--purple)" label="#7F6CFF" />
            <Swatch color="#1C1B22" label="Ink" />
            <Swatch color="#F7F1E7" label="Cream" />
            <Swatch color="#C9A86A" label="Brass" />
          </div>
          <div style={{ borderTop: '1px solid var(--pencil-light)', marginTop: 10, paddingTop: 8 }}>
            <div className="label-caps" style={{ marginBottom: 2 }}>Tipo</div>
            <div style={{ fontFamily: "'Fraunces'", fontStyle: 'italic', fontSize: 14, color: 'var(--ink)' }}>Fraunces display</div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, color: 'var(--ink-soft)' }}>Plus Jakarta · texto</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function D02_Landing() {
  return (
    <div style={{ height: '100%', background: 'var(--paper)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--ink)' }}>
        <span style={{ fontFamily: "'Fraunces'", fontWeight: 700, fontSize: 14, letterSpacing: '-0.02em' }}>Yoube</span>
        <div style={{ display: 'flex', gap: 14, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 500, color: 'var(--ink-soft)' }}>
          <span>Plataforma</span><span>Para sua marca</span><span>Diário</span><span>Entrar</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 18, padding: '18px 16px', flex: 1 }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <span className="label-caps" style={{ color: 'var(--purple-deep)' }}>EDIÇÃO Nº 02 · NOV/26</span>
          <div style={{ fontFamily: "'Fraunces'", fontWeight: 700, fontSize: 36, lineHeight: 0.95, color: 'var(--ink)', letterSpacing: '-0.03em', marginTop: 8 }}>
            O ofício<br/>da beleza,<br/><span style={{ fontStyle: 'italic', color: 'var(--purple-deep)' }}>organizado.</span>
          </div>
          <p style={{ fontFamily: "'Fraunces'", fontSize: 11, lineHeight: 1.45, color: 'var(--ink-soft)', marginTop: 12, marginBottom: 0, fontStyle: 'italic' }}>
            Agenda · clientes · finanças — uma plataforma editorial para quem faz beleza ser ofício.
          </p>
          <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
            <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '8px 14px', borderRadius: 999, fontFamily: "'Plus Jakarta Sans'", fontSize: 10, fontWeight: 600 }}>Comece a editar →</div>
            <div style={{ padding: '8px 14px', fontFamily: "'Fraunces'", fontStyle: 'italic', fontSize: 11, color: 'var(--ink-soft)', alignSelf: 'center' }}>ou faça um tour</div>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <PHBlock style={{ position: 'absolute', inset: 0, borderRadius: 4, background: '#e8dccb' }}>retrato · profissional no espelho</PHBlock>
          <div style={{ position: 'absolute', bottom: 10, left: 10, right: 10, fontFamily: "'Fraunces'", fontStyle: 'italic', fontSize: 10, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.4)' }}>
            "A Yoube me devolveu o tempo." — Camila, sobrancelhista
          </div>
          <span className="label-caps" style={{ position: 'absolute', top: 8, right: 8, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>FOTO · CAPA</span>
        </div>
      </div>
    </div>
  );
}

function D02_Social() {
  return (
    <div style={{ height: '100%', background: '#e8dccb', position: 'relative', overflow: 'hidden' }}>
      <PHBlock style={{ position: 'absolute', inset: 0, background: '#e8dccb' }}>retrato editorial</PHBlock>

      {/* overlay */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 35%, rgba(28,27,34,0.7) 100%)' }}/>

      <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff' }}>
        <span style={{ fontFamily: "'Fraunces'", fontWeight: 700, fontSize: 14, letterSpacing: '-0.02em' }}>Yoube</span>
        <span className="label-caps-on-purple">Nº 02</span>
      </div>

      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, color: '#fff' }}>
        <div style={{ fontFamily: "'Fraunces'", fontStyle: 'italic', fontWeight: 400, fontSize: 18, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
          "Cada cliente<br/>tem uma história.<br/><span style={{ fontWeight: 700, fontStyle: 'normal', color: 'var(--purple-soft)' }}>A gente guarda.</span>"
        </div>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 8, opacity: 0.75, marginTop: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>— Yoube, sobre fidelização</div>
      </div>
    </div>
  );
}

function D02_BizCard() {
  return (
    <div style={{ padding: 18, height: '100%', background: 'var(--paper)', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div className="tape"/>
      <div>
        <span style={{ fontFamily: "'Fraunces'", fontWeight: 700, fontSize: 24, color: 'var(--ink)', letterSpacing: '-0.02em' }}>Yoube</span>
        <div style={{ fontFamily: "'Fraunces'", fontStyle: 'italic', fontSize: 10, color: 'var(--ink-soft)', marginTop: 2 }}>plataforma de beleza</div>
      </div>

      <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 9, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
        <div style={{ color: 'var(--ink)', fontWeight: 600, marginBottom: 2 }}>Camila Reis</div>
        <div>Designer de sobrancelhas</div>
        <div style={{ marginTop: 6, color: 'var(--purple-deep)' }}>camila.yoube.com.br</div>
        <div>11 9 9928 · 4421</div>
      </div>

      <div style={{ position: 'absolute', right: 14, top: 14, width: 22, height: 22, borderRadius: '50%', background: 'var(--purple)' }}/>
      <Note style={{ position: 'absolute', right: -36, bottom: 12, transform: 'rotate(-4deg)', maxWidth: 90 }}>
        Cartão<br/>de visita ↘
      </Note>
    </div>
  );
}

function Direction02() {
  return (
    <>
      <DCArtboard id="d2-manifesto" label="Capa · manifesto"  width={300} height={420}><D02_Manifesto /></DCArtboard>
      <DCArtboard id="d2-landing"   label="Landing · editorial" width={500} height={360}><D02_Landing /></DCArtboard>
      <DCArtboard id="d2-social"    label="Post · citação"    width={280} height={280}><D02_Social /></DCArtboard>
      <DCArtboard id="d2-card"      label="Papelaria · cartão" width={280} height={170}><D02_BizCard /></DCArtboard>
    </>
  );
}

window.Direction02 = Direction02;