// landing-visuals.jsx — Plat signature visuals used by the phone preview.
// Exports to window: PlatMark, PlatLogo

// The Parcel mark (recommended), parametric
function PlatMark({ s = 40, line = 'var(--teal-deep)', fill = 'var(--teal)', accent = 'var(--gold)' }) {
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" fill="none" style={{ display: 'block' }}>
      <rect x="14" y="14" width="72" height="72" stroke={line} strokeWidth="3.2" />
      <line x1="50" y1="14" x2="50" y2="86" stroke={line} strokeWidth="2" />
      <line x1="14" y1="52" x2="50" y2="52" stroke={line} strokeWidth="2" />
      <rect x="50" y="14" width="36" height="38" fill={fill} />
      <circle cx="14" cy="14" r="2.4" fill={accent} />
      <circle cx="86" cy="86" r="2.4" fill={accent} />
    </svg>
  );
}

// Plat wordmark lockup
function PlatLogo({ size = 28, dark = false }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.34 }}>
      <PlatMark s={size} line={dark ? 'var(--teal-light)' : 'var(--teal-deep)'} fill={dark ? 'var(--teal-light)' : 'var(--teal)'} accent="var(--gold)" />
      <span className="serif wm-grad" style={{ fontSize: size * 1.18, fontWeight: 900, fontStyle: 'italic', letterSpacing: '-0.03em', lineHeight: 0.8,
        ...(dark ? { backgroundImage: 'linear-gradient(135deg,#2AADA3 0%,#4DC8BE 100%)' } : {}) }}>Plat</span>
    </span>
  );
}

Object.assign(window, { PlatMark, PlatLogo });