// ───────── Stampa - Brand identity artboard ─────────
// Logo, mark, palette, type, voice. 1100×900.

function StampaSeal({ size = 96, rotation = -6, glyph = "ס", style = {} }) {
  // The Stampa seal - circular stamp, monogram inside. Slightly off-angle.
  const stroke = Math.max(2, size * 0.022);
  return (
    <div
      className="seal seal--worn"
      style={{
        width: size,
        height: size,
        borderWidth: stroke,
        transform: `rotate(${rotation}deg)`,
        ...style,
      }}
    >
      <div style={{
        position: 'absolute', inset: stroke * 1.6,
        border: `${Math.max(1, stroke * 0.55)}px solid currentColor`,
        borderRadius: '999px',
        opacity: 0.45,
      }} />
      <span style={{
        fontFamily: 'var(--font-display)',
        fontSize: size * 0.5,
        lineHeight: 1,
        marginTop: -size * 0.02,
      }}>{glyph}</span>
      {/* tiny stars top + bottom of inner ring - feels official */}
      <span style={{
        position: 'absolute', top: stroke * 1.8, left: '50%', transform: 'translateX(-50%)',
        fontSize: size * 0.10, opacity: 0.6,
      }}>★</span>
      <span style={{
        position: 'absolute', bottom: stroke * 1.8, left: '50%', transform: 'translateX(-50%)',
        fontSize: size * 0.10, opacity: 0.6,
      }}>★</span>
    </div>
  );
}

function Wordmark({ size = 64, color = 'var(--ink)', latin = false }) {
  // Heavy display serif wordmark. Hebrew = סטמפה, latin = Stampa.
  return (
    <span style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 600,
      fontSize: size,
      letterSpacing: latin ? '-0.025em' : '-0.01em',
      color,
      lineHeight: 0.9,
      // Subtle "stamped" effect via text-shadow offset
    }}>
      {latin ? 'Stampa' : 'סטמפה'}
    </span>
  );
}

function ColorChip({ name, hex, cssVar, textColor = 'var(--ink)' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{
        height: 88,
        background: `var(--${cssVar})`,
        border: '1px solid var(--rule)',
        borderRadius: 'var(--radius-sm)',
        position: 'relative',
        display: 'flex',
        alignItems: 'flex-end',
        padding: 10,
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          color: textColor,
          letterSpacing: '0.04em',
          opacity: 0.85,
        }}>{hex}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>{name}</span>
        <span style={{ fontSize: 11, color: 'var(--ink-muted)', fontFamily: 'var(--font-mono)' }}>--{cssVar}</span>
      </div>
    </div>
  );
}

function BrandArtboard() {
  return (
    <div dir="rtl" className="paper-tex" style={{
      width: '100%', height: '100%',
      padding: '56px 64px',
      color: 'var(--ink)',
      fontFamily: 'var(--font-sans)',
      display: 'flex',
      flexDirection: 'column',
      gap: 40,
      overflow: 'hidden',
    }}>
      {/* Header strip: ledger-style */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderBottom: '1px solid var(--rule-strong)', paddingBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <span className="idx">01 / 06</span>
          <span className="smallcaps">מערכת מותג · Brand System</span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-muted)' }}>
          STAMPA - INK & STAMP / v1.0 / 2026
        </span>
      </div>

      {/* ── Hero: mark + wordmark + tagline ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <StampaSeal size={140} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Wordmark size={92} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.18em' }}>
              S T A M P A
            </span>
          </div>
        </div>
        <div style={{ borderInlineStart: '1px solid var(--rule-strong)', paddingInlineStart: 32 }}>
          <p className="font-display" style={{
            fontSize: 30, lineHeight: 1.2, margin: 0, color: 'var(--ink)',
            textWrap: 'pretty',
          }}>
            הצעת מחיר היא <em style={{ color: 'var(--stamp)', fontStyle: 'italic' }}>חתימה</em> שלך -
            תן לה לצאת מודפסת, מסודרת ומדויקת.
          </p>
          <p style={{ fontSize: 14, color: 'var(--ink-muted)', marginTop: 12, lineHeight: 1.5 }}>
            סטמפה הופכת הקלטה של סיור בשטח לכתב כמויות מקצועי בתוך פחות מדקה - בלי לפתוח אקסל, בלי להתבייש בפני הלקוח.
          </p>
        </div>
      </div>

      {/* ── Two cols: palette + type ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48 }}>
        {/* Palette */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
            <span className="idx">02</span>
            <span className="smallcaps">Palette · נייר ודיו</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <ColorChip name="Paper"   hex="#F3ECDC" cssVar="paper" />
            <ColorChip name="Ink"     hex="#1A140E" cssVar="ink" textColor="var(--paper)" />
            <ColorChip name="Stamp"   hex="#B23A1E" cssVar="stamp" textColor="#fff" />
            <ColorChip name="Amber"   hex="#C28321" cssVar="amber" textColor="#fff" />
            <ColorChip name="Sage"    hex="#4F7B53" cssVar="sage"  textColor="#fff" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginTop: 12 }}>
            <ColorChip name="Paper 2" hex="#EAE1CC" cssVar="paper-2" />
            <ColorChip name="Ink Soft" hex="#3A2F22" cssVar="ink-soft" textColor="var(--paper)" />
            <ColorChip name="Stamp Ink" hex="#7A2510" cssVar="stamp-ink" textColor="#fff" />
            <ColorChip name="Rust"    hex="#9A2A2A" cssVar="rust"  textColor="#fff" />
            <ColorChip name="Rule"    hex="#DDD0B0" cssVar="rule" />
          </div>
        </div>

        {/* Type */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
            <span className="idx">03</span>
            <span className="smallcaps">Type · אותיות</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ borderBottom: '1px dashed var(--rule)', paddingBottom: 14 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-muted)', marginBottom: 4 }}>
                DISPLAY · FRANK RUHL LIBRE
              </div>
              <div className="font-display" style={{ fontSize: 38, lineHeight: 1 }}>סטמפה - Stampa</div>
            </div>
            <div style={{ borderBottom: '1px dashed var(--rule)', paddingBottom: 14 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-muted)', marginBottom: 4 }}>
                UI · ASSISTANT
              </div>
              <div style={{ fontSize: 18, fontWeight: 600 }}>הצעה חדשה · ABCDEFG · 0123456789</div>
              <div style={{ fontSize: 14, color: 'var(--ink-muted)', marginTop: 4 }}>
                הקלט סיור · קבל כתב כמויות · שלח ללקוח
              </div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-muted)', marginBottom: 4 }}>
                NUMBERS · JETBRAINS MONO
              </div>
              <div className="font-mono" style={{ fontSize: 22 }}>₪ 24,430.00</div>
              <div className="font-mono" style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>
                54 מ״ר · 145.00 / יח׳ · 18% מע״מ
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Logo variants strip ── */}
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
          <span className="idx">04</span>
          <span className="smallcaps">Logo · גרסאות</span>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
        }}>
          {/* On paper */}
          <div style={{
            background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 6,
            padding: 24, display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center',
            height: 110,
          }}>
            <StampaSeal size={48} />
            <Wordmark size={36} />
          </div>
          {/* On stamp red */}
          <div style={{
            background: 'var(--stamp)', borderRadius: 6,
            padding: 24, display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center',
            height: 110,
          }}>
            <div style={{ color: '#F8E9DA' }}>
              <StampaSeal size={48} />
            </div>
            <Wordmark size={36} color="#F8E9DA" />
          </div>
          {/* On ink */}
          <div style={{
            background: 'var(--ink)', borderRadius: 6,
            padding: 24, display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center',
            height: 110,
          }}>
            <div style={{ color: 'var(--stamp)' }}>
              <StampaSeal size={48} />
            </div>
            <Wordmark size={36} color="var(--paper)" />
          </div>
          {/* Mark only, big */}
          <div style={{
            background: 'var(--panel)', border: '1px solid var(--rule)', borderRadius: 6,
            padding: 24, display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center',
            height: 110,
          }}>
            <StampaSeal size={72} glyph="ס" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-muted)' }}>
              MARK ONLY
            </span>
          </div>
        </div>
      </div>

      {/* ── Voice strip ── */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'auto 1fr auto 1fr', gap: 24, alignItems: 'start',
        borderTop: '1px solid var(--rule-strong)', paddingTop: 18,
      }}>
        <span className="idx">05</span>
        <div>
          <div className="smallcaps" style={{ marginBottom: 6 }}>Voice · קול</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
            ישיר · בלי מילים יפות · מכבד את הזמן של הקבלן.<br />
            "פתח את הכלי" ולא "התחל את המסע שלך".
          </div>
        </div>
        <span className="idx">06</span>
        <div>
          <div className="smallcaps" style={{ marginBottom: 6 }}>Principles · עקרונות</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
            נייר לפני מסך · מספרים מונוספייס · מעט צבע, הרבה מקום לבן · חתימה בסוף.
          </div>
        </div>
      </div>
    </div>
  );
}

window.BrandArtboard = BrandArtboard;
window.StampaSeal = StampaSeal;
window.Wordmark = Wordmark;