// brand.jsx — Medicya brand tokens, logo, shared atoms.
// All visual choices are sourced from the brand board image.

const M = {
  // Greens
  primary:    '#0E7A65',  // deep teal — buttons, headlines accents
  primaryDk:  '#0A5A4A',  // hover, dark-hero bg overlay
  primaryHi:  '#1AA585',  // mid teal — gradient stop, hover lift
  mint:       '#7DE3C5',  // light mint — chip backgrounds, gradient tip
  forest:     '#063A33',  // darkest forest teal — dark hero, deep blocks
  forestDeep: '#04231F',
  // Neutrals
  ink:        '#0E1B33',  // body text on light
  ink2:       '#3A4257',  // secondary text
  ink3:       '#6B7385',  // tertiary
  rule:       '#E6E2D7',  // hairlines on cream
  ruleSoft:   '#EFEAD9',
  cream:      '#F6F2E8',  // page bg
  creamSoft:  '#FBF8F0',
  white:      '#FFFFFF',
  // Accents (from swatch row)
  navy:       '#0E1B33',
  indigo:     '#5757D6',
  steel:      '#D8DEEA',
};

// ─── Logo ───────────────────────────────────────────────────────────────
// Two overlapping leaf-strokes forming an "M" + a punctuating dot.
function Logo({ size = 36, monochrome = null }) {
  const a = monochrome || M.primary;
  const b = monochrome || M.primaryHi;
  const c = monochrome || M.mint;
  const dot = monochrome || M.primary;
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="mg-left" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={a}/>
          <stop offset="100%" stopColor={b}/>
        </linearGradient>
        <linearGradient id="mg-right" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stopColor={b}/>
          <stop offset="100%" stopColor={c}/>
        </linearGradient>
      </defs>
      {/* left leaf — bottom up to peak */}
      <path d="M10 50 C 10 26, 24 12, 36 12 L 36 22 C 28 22, 20 30, 20 50 Z"
            fill="url(#mg-left)" />
      {/* right leaf — top peak down, overlapping */}
      <path d="M28 12 C 40 12, 54 26, 54 50 L 44 50 C 44 30, 36 22, 28 22 Z"
            fill="url(#mg-right)" opacity="0.92" />
      {/* punctuation dot */}
      <circle cx="48" cy="50" r="4.2" fill={dot}/>
    </svg>
  );
}

function Wordmark({ size = 28, color = M.ink, mark = true, gap = 10 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap }}>
      {mark && <Logo size={size * 1.25}/>}
      <span style={{
        fontFamily: 'Poppins, system-ui, sans-serif',
        fontWeight: 600, fontSize: size, color,
        letterSpacing: '-0.02em', lineHeight: 1,
      }}>
        Medicya<sup style={{
          fontSize: size * 0.32, fontWeight: 500, marginLeft: 2,
          verticalAlign: 'super', opacity: 0.8,
        }}>®</sup>
      </span>
    </div>
  );
}

// ─── Buttons ────────────────────────────────────────────────────────────
function Btn({ children, kind = 'primary', size = 'md', onClick, style, full = false }) {
  const sizes = {
    sm: { p: '10px 18px', f: 14, r: 999 },
    md: { p: '14px 24px', f: 15, r: 999 },
    lg: { p: '18px 32px', f: 16, r: 999 },
  };
  const s = sizes[size];
  const palettes = {
    primary: { bg: M.primary, color: '#fff', border: 'transparent' },
    dark:    { bg: M.forest, color: '#fff', border: 'transparent' },
    light:   { bg: '#fff', color: M.ink, border: M.rule },
    ghost:   { bg: 'transparent', color: M.ink, border: M.rule },
    onDark:  { bg: 'rgba(255,255,255,0.08)', color: '#fff', border: 'rgba(255,255,255,0.22)' },
  };
  const p = palettes[kind];
  return (
    <button onClick={onClick} style={{
      padding: s.p, fontSize: s.f, borderRadius: s.r,
      background: p.bg, color: p.color, border: `1px solid ${p.border}`,
      fontFamily: 'Poppins, system-ui, sans-serif', fontWeight: 600,
      letterSpacing: '-0.01em', cursor: 'pointer',
      width: full ? '100%' : 'auto',
      transition: 'transform .15s ease, box-shadow .15s ease, background .15s ease',
      ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={e => e.currentTarget.style.transform = ''}
    onMouseLeave={e => e.currentTarget.style.transform = ''}
    >{children}</button>
  );
}

// ─── Section wrapper ────────────────────────────────────────────────────
function Section({ children, bg = M.cream, color = M.ink, py = 96, id, screenLabel }) {
  return (
    <section id={id} data-screen-label={screenLabel} style={{
      background: bg, color, padding: `${py}px 0`,
      position: 'relative',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto', padding: '0 32px',
      }}>{children}</div>
    </section>
  );
}

// ─── Eyebrow / Tag ──────────────────────────────────────────────────────
function Eyebrow({ children, dark = false }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 999,
      background: dark ? 'rgba(125,227,197,0.12)' : 'rgba(14,122,101,0.08)',
      color: dark ? M.mint : M.primary,
      fontFamily: 'Poppins, system-ui, sans-serif',
      fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
      textTransform: 'uppercase',
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 999,
        background: dark ? M.mint : M.primary,
      }}/>
      {children}
    </div>
  );
}

// ─── Icon set (line, 24px) ──────────────────────────────────────────────
const Icon = {
  arrow: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M5 12h14M13 6l6 6-6 6" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  check: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M5 12.5l4.5 4.5L19 7" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  dna: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M6 3c0 5 12 6 12 11s-12 5-12 10M18 3c0 5-12 6-12 11s12 5 12 10" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
      <path d="M8 7h8M8 11h8M8 17h8M8 21h8" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  brain: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M9 4.5C7 4.5 5.5 6 5.5 8c0 .6.2 1.2.5 1.7C5 10.5 4 11.7 4 13.3c0 1.5.9 2.7 2.2 3.2-.1.3-.2.7-.2 1 0 1.7 1.3 3 3 3 1 0 1.9-.5 2.5-1.2.6.7 1.5 1.2 2.5 1.2 1.7 0 3-1.3 3-3 0-.3 0-.7-.2-1 1.3-.5 2.2-1.7 2.2-3.2 0-1.6-1-2.8-2-3.6.3-.5.5-1.1.5-1.7 0-2-1.5-3.5-3.5-3.5-1.1 0-2 .5-2.5 1.2-.6-.7-1.5-1.2-2.5-1.2z" stroke={c} strokeWidth="1.6"/>
      <path d="M12 5.7v14M9 9h2M13 12h2M9 15h2" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  shield: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M9 12l2.2 2.2L15 10.5" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  pulse: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <path d="M3 12h4l2-5 4 10 2-5h6" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  doctor: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="8" r="4" stroke={c} strokeWidth="1.7"/>
      <path d="M5 21c0-3.5 3-6 7-6s7 2.5 7 6" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <path d="M9 13.5v2.5a3 3 0 006 0v-1" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  cal: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <rect x="3.5" y="5.5" width="17" height="15" rx="2.5" stroke={c} strokeWidth="1.7"/>
      <path d="M3.5 10h17M8 3v4M16 3v4" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="12" cy="15" r="1.4" fill={c}/>
    </svg>
  ),
  lock: (c = 'currentColor') => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" stroke={c} strokeWidth="1.7"/>
      <path d="M8 10.5V8a4 4 0 018 0v2.5" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="12" cy="15" r="1.4" fill={c}/>
    </svg>
  ),
  vial: (c = 'currentColor') => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M9 3h6M10 3v9.5a3 3 0 006 0V3M10 14h6" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  spark: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
  chevron: (c = 'currentColor') => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M6 9l6 6 6-6" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  star: (c = 'currentColor') => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill={c}>
      <path d="M12 2.5l2.9 6 6.6 1-4.8 4.7 1.1 6.6L12 17.7 6.2 20.8l1.1-6.6L2.5 9.5l6.6-1z"/>
    </svg>
  ),
};

// expose globally for other JSX scripts
Object.assign(window, { M, Logo, Wordmark, Btn, Section, Eyebrow, Icon });
