// DIRECTION 03 · SOFT BOUTIQUE
// Acolhedor — blobs, rounded everything, soft purple gradients, conversational tone.

function Blob({ style, color = 'var(--purple-paper)', d }) {
  const paths = [
    'M44.2,-58.1C56.5,-50.3,65.2,-35.7,67.7,-20.5C70.2,-5.3,66.6,10.5,58.4,22.4C50.1,34.3,37.3,42.3,23.5,49.6C9.6,56.8,-5.3,63.3,-19.4,61.2C-33.5,59.2,-46.8,48.7,-54.4,35.3C-62,21.9,-63.9,5.7,-61,-9.3C-58.1,-24.4,-50.4,-38.3,-39.1,-46.7C-27.8,-55.1,-13.9,-58,1.4,-59.7C16.7,-61.5,33.5,-62.1,44.2,-58.1Z',
    'M41.6,-54.6C52.5,-44.8,58.7,-30.5,62.4,-15.4C66.1,-0.2,67.3,16,61.4,28.9C55.4,41.8,42.4,51.4,28.3,57.2C14.2,63,0.1,65.1,-14.5,63.4C-29.1,61.8,-44.1,56.4,-53.4,46C-62.7,35.5,-66.2,20.1,-65.6,5.1C-65.1,-9.9,-60.4,-24.5,-51.5,-34.7C-42.7,-44.9,-29.7,-50.8,-16.1,-55.6C-2.5,-60.4,11.7,-64.1,24.3,-62.5C36.9,-60.8,30.7,-64.4,41.6,-54.6Z',
  ];
  return (
    <svg viewBox="-80 -80 160 160" style={style}>
      <path d={d || paths[0]} fill={color} />
    </svg>
  );
}

function D03_Manifesto() {
  return (
    <div style={{ padding: ABPAD, height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #fbf8ff 0%, #efeaff 100%)',
    }}>
      <Blob style={{ position: 'absolute', top: -20, right: -30, width: 160, height: 160, opacity: 0.7 }} color="#d9d0ff"/>
      <Blob style={{ position: 'absolute', bottom: -30, left: -30, width: 140, height: 140, opacity: 0.5 }} color="#ffd6e6" d={'M41.6,-54.6C52.5,-44.8,58.7,-30.5,62.4,-15.4C66.1,-0.2,67.3,16,61.4,28.9C55.4,41.8,42.4,51.4,28.3,57.2C14.2,63,0.1,65.1,-14.5,63.4C-29.1,61.8,-44.1,56.4,-53.4,46C-62.7,35.5,-66.2,20.1,-65.6,5.1C-65.1,-9.9,-60.4,-24.5,-51.5,-34.7C-42.7,-44.9,-29.7,-50.8,-16.1,-55.6C-2.5,-60.4,11.7,-64.1,24.3,-62.5C36.9,-60.8,30.7,-64.4,41.6,-54.6Z'}/>

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', gap: 12 }}>
        <YoubeLockup height={14} />

        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 700, fontSize: 24, lineHeight: 1.0, color: 'var(--ink)', letterSpacing: '-0.025em' }}>
          Oi, a Yoube<br/>está <span style={{ fontStyle: 'italic', color: 'var(--purple-deep)' }}>aqui</span><br/>com você. 💜
        </div>

        <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 11, fontWeight: 400, lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0 }}>
          Bordas suaves, conversa de gente. Para quem faz beleza com afeto.
        </p>

        <div style={{ marginTop: 'auto' }}>
          <div className="label-caps" style={{ marginBottom: 6 }}>Paleta morna</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Swatch color="var(--purple)" label="#7F6CFF" />
            <Swatch color="#FFD6E6" label="Petal" />
            <Swatch color="#FFE9C9" label="Honey" />
            <Swatch color="#FBF8FF" label="Sky" />
          </div>
          <div style={{ marginTop: 10, background: '#fff', borderRadius: 14, padding: 10 }}>
            <div className="label-caps" style={{ marginBottom: 2 }}>Tipo</div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 700, fontSize: 14 }}>Jakarta · 700</div>
            <div style={{ fontFamily: "'Caveat'", fontSize: 16, color: 'var(--purple-deep)' }}>+ Caveat · acentos</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function D03_Landing() {
  return (
    <div style={{ height: '100%', background: 'linear-gradient(180deg, #fbf8ff 0%, #f4eeff 100%)', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      <Blob style={{ position: 'absolute', top: -60, left: -60, width: 240, height: 240, opacity: 0.45 }} color="#ffd6e6"/>
      <Blob style={{ position: 'absolute', bottom: -80, right: -80, width: 280, height: 280, opacity: 0.55 }} color="#d9d0ff" d={'M41.6,-54.6C52.5,-44.8,58.7,-30.5,62.4,-15.4C66.1,-0.2,67.3,16,61.4,28.9C55.4,41.8,42.4,51.4,28.3,57.2C14.2,63,0.1,65.1,-14.5,63.4C-29.1,61.8,-44.1,56.4,-53.4,46C-62.7,35.5,-66.2,20.1,-65.6,5.1C-65.1,-9.9,-60.4,-24.5,-51.5,-34.7C-42.7,-44.9,-29.7,-50.8,-16.1,-55.6C-2.5,-60.4,11.7,-64.1,24.3,-62.5C36.9,-60.8,30.7,-64.4,41.6,-54.6Z'}/>

      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px' }}>
        <YoubeLockup height={12} />
        <div style={{ display: 'flex', gap: 14, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 500, color: 'var(--ink-soft)' }}>
          <span>Sobre</span><span>Como funciona</span><span>Para sua agenda</span>
        </div>
        <div style={{ background: 'var(--purple)', color: '#fff', padding: '6px 14px', borderRadius: 999, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 700 }}>oi, vamos? 💜</div>
      </div>

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: '16px', flex: 1, alignItems: 'center' }}>
        <div>
          <span className="scribble-purple" style={{ fontSize: 16 }}>oi! a gente cuida do resto.</span>
          <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 28, lineHeight: 0.95, color: 'var(--ink)', letterSpacing: '-0.025em', marginTop: 4 }}>
            Sua agenda<br/>arrumadinha,<br/>seu coração<br/><span style={{ fontStyle: 'italic', color: 'var(--purple-deep)' }}>tranquilo.</span>
          </div>
          <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 11, lineHeight: 1.5, color: 'var(--ink-soft)', marginTop: 10, marginBottom: 0 }}>
            Pra você que faz beleza com cuidado — agenda, finanças e clientes, em um cantinho só.
          </p>
          <div style={{ marginTop: 14, display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{ background: 'var(--purple)', color: '#fff', padding: '8px 18px', borderRadius: 999, fontFamily: "'Plus Jakarta Sans'", fontSize: 10, fontWeight: 700 }}>Quero começar</div>
            <span className="scribble" style={{ fontSize: 12 }}>← é de graça pra começar</span>
          </div>
        </div>

        {/* phone-ish mockup */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div style={{ background: '#fff', borderRadius: 24, padding: 10, boxShadow: '0 18px 40px -10px rgba(127,108,255,0.4)', width: 140, height: 240, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ height: 6, background: 'var(--purple-paper)', borderRadius: 3, width: '60%' }}/>
            <div style={{ background: 'var(--purple-paper)', borderRadius: 12, padding: 8 }}>
              <div className="ph-line ph-line--purple" style={{ width: '40%', height: 4 }}/>
              <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 700, fontSize: 12, marginTop: 4, color: 'var(--purple-deep)' }}>Hoje · 4 agendamentos</div>
            </div>
            <div style={{ background: '#fff', border: '1px solid var(--purple-paper)', borderRadius: 12, padding: 8 }}>
              <div className="ph-line" style={{ width: '70%', height: 4 }}/>
              <div className="ph-line" style={{ width: '50%', height: 4, marginTop: 4 }}/>
            </div>
            <div style={{ background: '#fff', border: '1px solid var(--purple-paper)', borderRadius: 12, padding: 8 }}>
              <div className="ph-line" style={{ width: '60%', height: 4 }}/>
              <div className="ph-line" style={{ width: '80%', height: 4, marginTop: 4 }}/>
            </div>
            <div style={{ marginTop: 'auto', background: 'var(--purple)', color: '#fff', textAlign: 'center', borderRadius: 999, padding: 6, fontFamily: "'Plus Jakarta Sans'", fontSize: 8, fontWeight: 700 }}>+ Novo agendamento</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function D03_Social() {
  return (
    <div style={{ height: '100%', background: 'linear-gradient(160deg, #ffd6e6 0%, #d9d0ff 100%)', position: 'relative', overflow: 'hidden', padding: 14 }}>
      <Blob style={{ position: 'absolute', top: -40, left: -40, width: 160, height: 160, opacity: 0.4 }} color="#fff"/>
      <Blob style={{ position: 'absolute', bottom: -50, right: -50, width: 180, height: 180, opacity: 0.4 }} color="#fff" d={'M41.6,-54.6C52.5,-44.8,58.7,-30.5,62.4,-15.4C66.1,-0.2,67.3,16,61.4,28.9C55.4,41.8,42.4,51.4,28.3,57.2C14.2,63,0.1,65.1,-14.5,63.4C-29.1,61.8,-44.1,56.4,-53.4,46C-62.7,35.5,-66.2,20.1,-65.6,5.1Z'}/>

      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'var(--ink)' }}>
        <YoubeLockup height={11} color="ink" />
        <span style={{ fontFamily: "'Caveat'", fontWeight: 700, fontSize: 14, color: 'var(--purple-deep)' }}>oi!</span>
      </div>

      <div style={{ position: 'absolute', left: 14, right: 14, top: '38%', transform: 'translateY(-50%)' }}>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 800, fontSize: 22, lineHeight: 0.95, color: 'var(--ink)', letterSpacing: '-0.025em' }}>
          A semana<br/>vai ser <span className="scribble-purple" style={{ fontSize: 28 }}>doce</span>.
        </div>
        <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, color: 'var(--ink-soft)', marginTop: 8, marginBottom: 0, lineHeight: 1.4 }}>
          Sua agenda hoje:<br/><strong>6 clientes</strong> · <strong>R$ 720</strong>
        </p>
      </div>

      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ background: '#fff', padding: '5px 12px', borderRadius: 999, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 700, color: 'var(--purple-deep)' }}>yoube.com.br</div>
        <span style={{ fontFamily: "'Caveat'", fontSize: 14, color: 'var(--ink)' }}>💜 vai dar tudo certo</span>
      </div>
    </div>
  );
}

function D03_Tote() {
  return (
    <div style={{ height: '100%', background: '#f5ede0', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: 16 }}>
      {/* tote handles */}
      <div style={{ display: 'flex', gap: 30, marginBottom: 8 }}>
        <div style={{ width: 30, height: 30, border: '3px solid #d4c5a4', borderBottom: 'none', borderRadius: '40px 40px 0 0' }}/>
        <div style={{ width: 30, height: 30, border: '3px solid #d4c5a4', borderBottom: 'none', borderRadius: '40px 40px 0 0' }}/>
      </div>
      <div style={{ background: '#ece0c8', flex: 1, width: '100%', borderRadius: 4, position: 'relative', padding: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
        <Blob style={{ position: 'absolute', top: 8, right: -10, width: 80, height: 80, opacity: 0.5 }} color="var(--purple-soft)"/>
        <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <YoubeLockup height={16} color="ink" />
        </div>
        <div style={{ position: 'relative', zIndex: 1, fontFamily: "'Caveat'", fontWeight: 700, fontSize: 22, color: 'var(--purple-deep)', textAlign: 'center', lineHeight: 0.95 }}>
          faz<br/>com<br/>amor
        </div>
        <div style={{ position: 'relative', zIndex: 1, fontFamily: "'Plus Jakarta Sans'", fontSize: 8, color: 'var(--ink-soft)', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 6 }}>brinde · ecobag</div>
      </div>
    </div>
  );
}

function Direction03() {
  return (
    <>
      <DCArtboard id="d3-manifesto" label="Manifesto · acolhedor" width={300} height={420}><D03_Manifesto /></DCArtboard>
      <DCArtboard id="d3-landing"   label="Landing · conversa"    width={500} height={360}><D03_Landing /></DCArtboard>
      <DCArtboard id="d3-social"    label="Post · weekly hello"   width={280} height={280}><D03_Social /></DCArtboard>
      <DCArtboard id="d3-tote"      label="Brinde · ecobag"        width={220} height={300}><D03_Tote /></DCArtboard>
    </>
  );
}

window.Direction03 = Direction03;