/* eslint-disable react/prop-types */
/* TUS Mentor — UI Kit · Atoms & foundations
   Palette, mascot, logo, pills, buttons, icons. Exported to window for the
   other kit files + index.html to consume. */

const PALETTE = {
  blue: '#185FA5', blueDark: '#0C447C', blueDeep: '#072E58',
  blueLight: '#E6F1FB', blueMid: '#9EC9EE',
  ink: '#0B1B2E', ink2: '#1B2A3F',
  slate900: '#0F172A', slate700: '#334155', slate500: '#64748B',
  slate300: '#CBD5E1', slate200: '#E2E8F0', slate100: '#F1F5F9', slate50: '#F8FAFC',
  paper: '#FAF8F4', whatsapp: '#25D366', amber: '#D97757', success: '#22C55E',
};

const MASCOT = {
  1: '../../assets/maskot/pose1-wave-fullbody.png',
  2: '../../assets/maskot/pose2-fist.png',
  3: '../../assets/maskot/pose3-book.png',
  4: '../../assets/maskot/pose4-thinking.png',
  5: '../../assets/maskot/pose5-thinking-small.png',
  6: '../../assets/maskot/pose6-cheer.png',
  7: '../../assets/maskot/pose7-pointing.png',
};

const FONT_STACK = "'Outfit', system-ui, -apple-system, sans-serif";

/* ── Mascot ─────────────────────────────────────────────── */
function Mascot({ pose = 1, drift = false, style }) {
  return (
    <img
      src={MASCOT[pose] || MASCOT[1]}
      alt="Dr. Leo — TUS Mentor maskotu"
      className={drift ? 'tm-drift' : ''}
      draggable={false}
      style={{ width: '100%', height: '100%', objectFit: 'contain',
        objectPosition: 'center bottom', display: 'block',
        userSelect: 'none', pointerEvents: 'none', ...style }}
    />
  );
}

/* ── Stethoscope glyph (brand mark) ─────────────────────── */
function StethoMark({ size = 22, color = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 3v6a5 5 0 0 0 10 0V3" />
      <path d="M10 14v2a5 5 0 0 0 5 5h0a5 5 0 0 0 5-5v-4" />
      <circle cx="20" cy="9" r="2" />
    </svg>
  );
}

/* ── Logo / wordmark ────────────────────────────────────── */
function LogoMark({ size = 34, dark = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: size, height: size, borderRadius: size * 0.28,
        background: PALETTE.blue, display: 'grid', placeItems: 'center',
        boxShadow: 'inset 0 -2px 0 rgba(0,0,0,.08)' }}>
        <StethoMark size={size * 0.58} />
      </div>
      <span style={{ fontSize: size * 0.5, fontWeight: 800, letterSpacing: '-0.02em',
        color: dark ? '#fff' : PALETTE.blueDark, lineHeight: 1 }}>
        TUS<span style={{ color: dark ? PALETTE.blueMid : PALETTE.blue }}>Mentor</span>
      </span>
    </div>
  );
}

/* ── Section eyebrow / tag pill ─────────────────────────── */
function SectionTag({ children, tone = 'light', big = false }) {
  const bg = tone === 'dark' ? 'rgba(255,255,255,0.10)' : PALETTE.blueLight;
  const fg = tone === 'dark' ? '#cfe4f8' : PALETTE.blue;
  return (
    <span style={{ display: 'inline-block', background: bg, color: fg,
      fontSize: big ? 14 : 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
      padding: big ? '9px 18px' : '6px 12px', borderRadius: 100 }}>{children}</span>
  );
}

/* ── Accent chip (dot + label) ──────────────────────────── */
function AccentChip({ children }) {
  return (
    <span style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 6,
      background: PALETTE.blueLight, color: PALETTE.blueDark, fontSize: 11.5, fontWeight: 700,
      letterSpacing: '0.04em', padding: '5px 10px', borderRadius: 100 }}>
      <span style={{ width: 6, height: 6, background: PALETTE.blue, borderRadius: '50%' }} />
      {children}
    </span>
  );
}

/* ── Arrow + check icons ────────────────────────────────── */
function ArrowRight({ size = 16 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
}
function Check({ size = 12, color = 'currentColor' }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
    strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>;
}
function WhatsAppIcon({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
    </svg>
  );
}

/* ── Buttons ────────────────────────────────────────────── */
function InstagramIcon({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill={color} stroke="none" />
    </svg>
  );
}

function Button({ children, variant = 'primary', onClick, href, style }) {
  const base = { display: 'inline-flex', alignItems: 'center', gap: 9, cursor: 'pointer',
    fontFamily: 'inherit', textDecoration: 'none', border: 0, borderRadius: 10,
    fontWeight: 700, fontSize: 15, padding: '14px 22px', transition: 'opacity .15s, transform .1s' };
  const variants = {
    primary: { background: PALETTE.slate900, color: '#fff' },
    whatsapp: { background: PALETTE.whatsapp, color: '#fff', boxShadow: '0 10px 24px rgba(37,211,102,0.40)', fontWeight: 800 },
    nav: { background: PALETTE.slate900, color: '#fff', padding: '9px 16px', borderRadius: 8, fontSize: 13.5, fontWeight: 600 },
    instagram: { background: 'linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF)', color: '#fff', fontWeight: 800, boxShadow: '0 10px 24px rgba(221,42,123,0.32)' },
    ghost: { background: 'transparent', color: PALETTE.slate700, fontWeight: 500, fontSize: 14, padding: '9px 6px' },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} onClick={onClick}
      onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.92')}
      onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
      style={{ ...base, ...variants[variant], ...style }}>{children}</Tag>
  );
}

Object.assign(window, {
  PALETTE, MASCOT, FONT_STACK,
  Mascot, StethoMark, LogoMark, SectionTag, AccentChip,
  ArrowRight, Check, WhatsAppIcon, InstagramIcon, Button,
});