// DIRECTION 01 · GRID SYSTEM
// Tech/SaaS — geometric, visible grid, mono callouts, purple as data ink.

function D01_Manifesto() {
  return (
    <div style={{ padding: ABPAD, height: '100%', display: 'flex', flexDirection: 'column', gap: 12,
      background: 'var(--paper)',
      backgroundImage: 'linear-gradient(var(--pencil-light) 1px, transparent 1px), linear-gradient(90deg, var(--pencil-light) 1px, transparent 1px)',
      backgroundSize: '20px 20px',
      backgroundPosition: '-1px -1px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <YoubeLockup height={14} color="ink" />
        <span className="label-caps">01 / GRID</span>
      </div>

      <div style={{ fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 22, lineHeight: 1.05, color: 'var(--ink)', letterSpacing: '-0.02em' }}>
        Tudo se<br/>encaixa numa<br/>grade de <span style={{ color: 'var(--purple-deep)' }}>4px</span>.
      </div>

      <div style={{ fontFamily: "'Space Grotesk'", fontSize: 10, lineHeight: 1.4, color: 'var(--ink-soft)', borderTop: '1px solid var(--pencil-light)', paddingTop: 8 }}>
        Sistema modular. Métricas em destaque. Roxo só onde tem decisão.
      </div>

      <div style={{ marginTop: 'auto' }}>
        <div className="label-caps" style={{ marginBottom: 6 }}>Paleta</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Swatch color="var(--purple)" label="#7F6CFF" />
          <Swatch color="#1C1B22" label="Ink" />
          <Swatch color="#F4F4F5" label="Paper" />
          <Swatch color="#E7E5FF" label="Tint" />
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--pencil-light)', paddingTop: 8 }}>
        <div className="label-caps" style={{ marginBottom: 4 }}>Tipo</div>
        <div style={{ fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>Space Grotesk · 700</div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-soft)' }}>JetBrains Mono · números</div>
      </div>

      <Note style={{ position: 'absolute', right: -32, top: 70, transform: 'rotate(6deg)', maxWidth: 90 }}>
        ↗ tudo bate<br/>no grid
      </Note>
    </div>
  );
}

function D01_Landing() {
  return (
    <div style={{ padding: 0, height: '100%', background: 'var(--paper)', display: 'flex', flexDirection: 'column' }}>
      {/* nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: '1px solid var(--pencil-light)' }}>
        <YoubeLockup height={12} color="ink" />
        <div style={{ display: 'flex', gap: 10 }}>
          <div className="ph-line" style={{ width: 24, height: 5 }}/>
          <div className="ph-line" style={{ width: 30, height: 5 }}/>
          <div className="ph-line" style={{ width: 22, height: 5 }}/>
        </div>
        <div style={{ background: 'var(--ink)', color: '#fff', borderRadius: 999, padding: '4px 10px', fontFamily: "'Space Grotesk'", fontSize: 9, fontWeight: 700 }}>ENTRAR →</div>
      </div>

      {/* hero */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 12, padding: 16, flex: 1,
        backgroundImage: 'linear-gradient(var(--pencil-light) 1px, transparent 1px), linear-gradient(90deg, var(--pencil-light) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span className="label-caps">SAAS · BELEZA · 2026</span>
          <div style={{ fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 26, lineHeight: 1.0, color: 'var(--ink)', letterSpacing: '-0.025em' }}>
            Sua agenda,<br/>sua <span style={{ color: 'var(--purple-deep)' }}>operação</span>,<br/>seu controle.
          </div>
          <div className="ph-line" style={{ width: '90%' }}/>
          <div className="ph-line" style={{ width: '70%' }}/>
          <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
            <div style={{ background: 'var(--purple)', color: '#fff', padding: '6px 12px', borderRadius: 6, fontFamily: "'Space Grotesk'", fontSize: 10, fontWeight: 700 }}>Começar grátis</div>
            <div style={{ border: '1px solid var(--ink)', padding: '6px 12px', borderRadius: 6, fontFamily: "'Space Grotesk'", fontSize: 10, fontWeight: 700 }}>Ver demo</div>
          </div>
        </div>

        {/* dashboard preview tile */}
        <div style={{ background: '#fff', border: '1px solid var(--ink)', borderRadius: 8, padding: 8, display: 'flex', flexDirection: 'column', gap: 6, boxShadow: '3px 3px 0 var(--ink)' }}>
          <div style={{ display: 'flex', gap: 4 }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: '#FF5F57' }}/>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: '#FEBC2E' }}/>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: '#28C840' }}/>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
            <div style={{ border: '1px solid var(--pencil-light)', borderRadius: 4, padding: 6 }}>
              <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 8, color: 'var(--ink-faint)' }}>HOJE</div>
              <div style={{ fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 16, color: 'var(--ink)' }}>14</div>
            </div>
            <div style={{ border: '1px solid var(--pencil-light)', borderRadius: 4, padding: 6, background: 'var(--purple-paper)' }}>
              <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 8, color: 'var(--purple-deep)' }}>R$ MÊS</div>
              <div style={{ fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 16, color: 'var(--purple-deep)' }}>8.420</div>
            </div>
          </div>
          {/* mini chart */}
          <svg viewBox="0 0 120 30" style={{ width: '100%', height: 32 }}>
            <polyline points="0,22 15,18 30,20 45,12 60,15 75,8 90,11 105,5 120,7" stroke="var(--purple-deep)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <polyline points="0,22 15,18 30,20 45,12 60,15 75,8 90,11 105,5 120,7 120,30 0,30" fill="var(--purple-paper)" opacity="0.6"/>
          </svg>
          <div style={{ display: 'flex', gap: 4 }}>
            <div className="ph-line" style={{ flex: 1, height: 4 }}/>
            <div className="ph-line" style={{ flex: 1, height: 4 }}/>
            <div className="ph-line" style={{ flex: 1, height: 4 }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function D01_Social() {
  return (
    <div style={{ padding: 16, height: '100%', background: 'var(--paper)', position: 'relative', overflow: 'hidden',
      backgroundImage: 'linear-gradient(var(--pencil-light) 1px, transparent 1px), linear-gradient(90deg, var(--pencil-light) 1px, transparent 1px)',
      backgroundSize: '16px 16px',
    }}>
      <div style={{ position: 'absolute', top: 12, left: 12 }}>
        <YoubeLockup height={11} color="ink" />
      </div>
      <div style={{ position: 'absolute', top: 12, right: 12 }} className="label-caps">01 / 07</div>

      <div style={{ position: 'absolute', left: 12, right: 12, top: 50, fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 22, lineHeight: 1.0, color: 'var(--ink)', letterSpacing: '-0.025em' }}>
        +34% de<br/>retorno em<br/>90 dias.
      </div>

      <div style={{ position: 'absolute', left: 12, right: 12, bottom: 48, fontFamily: "'JetBrains Mono'", fontSize: 9, color: 'var(--ink-soft)' }}>
        média entre salões<br/>que ativaram o<br/>módulo de fidelização
      </div>

      <div style={{ position: 'absolute', right: 12, bottom: 12, background: 'var(--purple)', color: '#fff', padding: '5px 10px', borderRadius: 6, fontFamily: "'Space Grotesk'", fontSize: 9, fontWeight: 700 }}>yoube.com.br →</div>

      {/* big number watermark */}
      <div style={{ position: 'absolute', right: -10, top: -10, fontFamily: "'Space Grotesk'", fontWeight: 800, fontSize: 110, color: 'var(--purple-paper)', lineHeight: 0.8, zIndex: 0 }}>%</div>
    </div>
  );
}

function D01_Story() {
  return (
    <div style={{ height: '100%', background: 'var(--ink)', color: '#fff', display: 'flex', flexDirection: 'column', padding: 14, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.15,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
        backgroundSize: '12px 12px',
      }}/>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <YoubeLockup height={10} color="white" />
      </div>
      <div style={{ position: 'relative', zIndex: 1, marginTop: 'auto', fontFamily: "'Space Grotesk'", fontWeight: 700, fontSize: 22, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
        Agenda<br/>cheia,<br/><span style={{ color: 'var(--purple-soft)' }}>cabeça</span><br/>leve.
      </div>
      <div style={{ position: 'relative', zIndex: 1, marginTop: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ background: 'var(--purple)', padding: '5px 10px', borderRadius: 999, fontFamily: "'Space Grotesk'", fontSize: 9, fontWeight: 700 }}>Arraste para cima ↑</div>
      </div>
      <div style={{ position: 'relative', zIndex: 1, marginTop: 8, fontFamily: "'JetBrains Mono'", fontSize: 8, opacity: 0.6 }}>STORY · 1080×1920</div>
    </div>
  );
}

function Direction01() {
  return (
    <>
      <DCArtboard id="d1-manifesto" label="Manifesto · sistema" width={300} height={420}><D01_Manifesto /></DCArtboard>
      <DCArtboard id="d1-landing"   label="Landing · hero"    width={500} height={360}><D01_Landing /></DCArtboard>
      <DCArtboard id="d1-social"    label="Post · estatística" width={280} height={280}><D01_Social /></DCArtboard>
      <DCArtboard id="d1-story"     label="Story · 9:16"      width={210} height={360}><D01_Story /></DCArtboard>
    </>
  );
}

window.Direction01 = Direction01;