// js/ui.jsx — Reusable UI primitives for Equilys
// Exposes: Button, Pill, ServiceCard, OfferCard, Input, Textarea, Field,
//          Badge, IconCircle, Quote, Stat, NavLink

function Button({ children, variant = 'primary', size = 'md', icon, style, onClick, fullWidth }) {
  const sizes = {
    sm: { pad: '10px 18px', font: 13, gap: 8 },
    md: { pad: '14px 26px', font: 14, gap: 10 },
    lg: { pad: '18px 34px', font: 15, gap: 12 }
  }[size];
  const styles = {
    primary: {
      background: 'var(--eq-ink)',
      color: 'var(--eq-bg)',
      border: '1px solid var(--eq-ink)'
    },
    gold: {
      background: 'var(--eq-gold)',
      color: 'var(--eq-ink-on-gold)',
      border: '1px solid var(--eq-gold)'
    },
    ghost: {
      background: 'transparent',
      color: 'var(--eq-ink)',
      border: '1px solid var(--eq-line)'
    },
    link: {
      background: 'transparent',
      color: 'var(--eq-ink)',
      border: 0,
      padding: 0,
      borderBottom: '1px solid var(--eq-gold)',
      borderRadius: 0
    }
  }[variant];
  return (
    <button onClick={onClick} className="eq-btn" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: sizes.gap, padding: variant === 'link' ? '4px 0' : sizes.pad,
      fontFamily: 'var(--eq-font-body)', fontSize: sizes.font, fontWeight: 500,
      letterSpacing: '0.04em', borderRadius: variant === 'link' ? 0 : 2,
      cursor: 'pointer', width: fullWidth ? '100%' : 'auto',
      transition: 'transform .2s ease, box-shadow .2s ease, background .2s ease',
      ...styles, ...style
    }}>
      {children}
      {icon}
    </button>);

}

function Arrow({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7h10M8 3l4 4-4 4" stroke={color} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function Pill({ children, style }) {
  return (
    <span style={{
      display: 'inline-block', padding: '5px 12px', borderRadius: 999,
      border: '1px solid var(--eq-line)', background: 'var(--eq-surface)',
      fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.16em',
      textTransform: 'uppercase', color: 'var(--eq-ink-soft)', ...style
    }}>{children}</span>);

}

function Badge({ children, tone = 'gold', style }) {
  const tones = {
    gold: { bg: 'rgba(191,161,90,0.12)', color: 'var(--eq-gold)', border: 'rgba(191,161,90,0.35)' },
    ink: { bg: 'var(--eq-surface-alt)', color: 'var(--eq-ink-soft)', border: 'var(--eq-line)' },
    soft: { bg: 'transparent', color: 'var(--eq-ink-soft)', border: 'var(--eq-line)' }
  }[tone];
  return (
    <span style={{
      display: 'inline-block', padding: '4px 10px', borderRadius: 999,
      background: tones.bg, color: tones.color, border: `1px solid ${tones.border}`,
      fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', ...style
    }}>{children}</span>);

}

function IconCircle({ children, size = 44, tone = 'gold' }) {
  const bg = tone === 'gold' ?
  'rgba(191,161,90,0.10)' :
  'var(--eq-surface-alt)';
  const stroke = tone === 'gold' ? 'rgba(191,161,90,0.4)' : 'var(--eq-line)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: '50%',
      background: bg, border: `1px solid ${stroke}`,
      color: tone === 'gold' ? 'var(--eq-gold)' : 'var(--eq-ink)'
    }}>{children}</span>);

}

function ServiceCard({ kicker, title, price, duration, body, cta = 'Découvrir', href = '#', highlighted = false, comingSoon = false, icon }) {
  return (
    <div className="eq-card" style={{
      position: 'relative',
      padding: '36px 32px 32px',
      background: highlighted ? 'var(--eq-ink)' : 'var(--eq-surface)',
      color: highlighted ? 'var(--eq-bg)' : 'var(--eq-ink)',
      border: highlighted ? '1px solid var(--eq-ink)' : '1px solid var(--eq-line)',
      borderRadius: 4,
      display: 'flex', flexDirection: 'column', gap: 20,
      boxShadow: highlighted ? '0 30px 70px -30px rgba(42,61,77,0.55)' : 'none',
      overflow: 'hidden'
    }}>
      {highlighted &&
      <span style={{
        position: 'absolute', top: 16, right: 16, padding: '4px 10px',
        fontFamily: 'var(--eq-font-mono)', fontSize: 9.5, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'var(--eq-gold)',
        border: '1px solid rgba(212,194,138,0.4)', borderRadius: 99
      }}>Programme phare</span>
      }
      {icon && <div>{icon}</div>}
      {kicker &&
      <div style={{ ...{
          fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: highlighted ? 'var(--eq-gold-soft)' : 'var(--eq-ink-muted)'
        }, color: "rgb(217, 183, 116)", fontSize: "11px", height: "36px", width: "244px" }}>{kicker}</div>
      }
      <h3 style={{
        margin: 0, fontFamily: 'var(--eq-font-display)',
        fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
        fontSize: 30, lineHeight: 1.1, textTransform: 'var(--eq-display-case)',
        color: highlighted ? 'rgb(125, 130, 160)' : '#FFFFFF'
      }}>{title}</h3>
      <p style={{
        margin: 0, fontSize: 14.5, lineHeight: 1.6,
        color: highlighted ? 'var(--eq-bg)' : 'var(--eq-gold)',
        maxWidth: 320
      }}>{body}</p>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 12, paddingTop: 4,
        borderTop: highlighted ? '1px solid rgba(241,236,223,0.12)' : '1px solid var(--eq-line)',
        paddingTop: 18, marginTop: 4
      }}>
        <span style={{
          fontFamily: 'var(--eq-font-display)',
          color: highlighted ? 'var(--eq-gold)' : 'var(--eq-ink)',
          fontWeight: 500, width: "157px", fontSize: "27px"
        }}>{price}</span>
        {duration &&
        <span style={{ ...{ fontSize: 12, color: highlighted ? 'rgba(241,236,223,0.6)' : 'var(--eq-ink-muted)' }, color: "rgb(0, 0, 0)" }}>
            · {duration}
          </span>
        }
      </div>
      {!comingSoon ?
      <a href={href} style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none',
        color: highlighted ? 'var(--eq-gold)' : 'var(--eq-ink)',
        borderBottom: highlighted ? '1px solid var(--eq-gold)' : '1px solid var(--eq-gold)',
        paddingBottom: 4, alignSelf: 'flex-start', fontSize: 13, letterSpacing: '0.04em'
      }}>{cta} <Arrow /></a> :

      <span style={{
        fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: highlighted ? 'var(--eq-gold-soft)' : 'var(--eq-ink-muted)'
      }}>Prochainement</span>
      }
    </div>);

}

function Field({ label, children, hint }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{
        fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'var(--eq-ink-soft)'
      }}>{label}</span>
      {children}
      {hint && <span style={{ fontSize: 12, color: 'var(--eq-ink-muted)' }}>{hint}</span>}
    </label>);

}

function Input({ placeholder, type = 'text', defaultValue, style }) {
  return (
    <input type={type} placeholder={placeholder} defaultValue={defaultValue} style={{
      appearance: 'none', border: 0, borderBottom: '1px solid var(--eq-line)',
      padding: '10px 0', background: 'transparent', color: 'var(--eq-ink)',
      fontFamily: 'var(--eq-font-body)', fontSize: 14, outline: 'none',
      ...style
    }} />);

}

function Textarea({ placeholder, rows = 4, defaultValue }) {
  return (
    <textarea placeholder={placeholder} rows={rows} defaultValue={defaultValue} style={{
      appearance: 'none', border: 0, borderBottom: '1px solid var(--eq-line)',
      padding: '10px 0', background: 'transparent', color: 'var(--eq-ink)',
      fontFamily: 'var(--eq-font-body)', fontSize: 14, outline: 'none', resize: 'none'
    }} />);

}

function Quote({ text, author, role }) {
  return (
    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 18,
      padding: '28px 28px 24px',
      background: 'var(--eq-surface)', border: '1px solid var(--eq-line)',
      borderRadius: 4, position: 'relative' }}>
      <span style={{
        position: 'absolute', top: -8, left: 22, fontFamily: 'var(--eq-font-display)',
        fontSize: 60, lineHeight: 1, color: 'var(--eq-gold)', opacity: 0.8
      }}>“</span>
      <blockquote style={{
        margin: 0, fontFamily: 'var(--eq-font-display)', fontStyle: 'italic',
        fontSize: 18, lineHeight: 1.55, color: 'var(--eq-ink)'
      }}>{text}</blockquote>
      <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{
          width: 40, height: 40, borderRadius: '50%',
          background: 'var(--eq-surface-alt)', border: '1px solid var(--eq-line)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--eq-font-display)', color: 'var(--eq-ink-soft)', fontSize: 14
        }}>{author ? author.split(' ').map((s) => s[0]).slice(0, 2).join('') : '·'}</span>
        <span>
          <div style={{ fontSize: 13, color: 'var(--eq-ink)' }}>{author}</div>
          <div style={{ fontSize: 11.5, color: 'var(--eq-ink-muted)', fontFamily: 'var(--eq-font-mono)',
            letterSpacing: '0.12em', textTransform: 'uppercase' }}>{role}</div>
        </span>
      </figcaption>
    </figure>);

}

function Stat({ value, label, sub }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{
        fontFamily: 'var(--eq-font-display)', fontSize: 44, lineHeight: 1,
        fontWeight: 'var(--eq-display-weight)', color: 'var(--eq-ink)',
        letterSpacing: 'var(--eq-display-tracking)'
      }}>{value}</span>
      <span style={{ fontSize: 13, color: 'var(--eq-ink-soft)' }}>{label}</span>
      {sub && <span style={{ fontSize: 11.5, color: 'var(--eq-ink-muted)',
        fontFamily: 'var(--eq-font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase'
      }}>{sub}</span>}
    </div>);

}

function NavLink({ children, href = '#', active }) {
  return (
    <a href={href} className="eq-link" style={{
      textDecoration: 'none', color: active ? 'var(--eq-ink)' : 'var(--eq-ink-soft)',
      fontSize: 13, letterSpacing: '0.04em', position: 'relative', paddingBottom: 4,
      borderBottom: active ? '1px solid var(--eq-gold)' : '1px solid transparent'
    }}>{children}</a>);
}

// Section header — eyebrow + display title + optional kicker line
function SectionHead({ eyebrow, title, intro, align = 'center', maxWidth = 720 }) {
  return (
    <header style={{
      display: 'flex', flexDirection: 'column',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align, gap: 18, maxWidth, margin: align === 'center' ? '0 auto' : 0
    }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 style={{
        margin: 0, fontFamily: 'var(--eq-font-display)',
        fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
        fontSize: 48, lineHeight: 1.08, textTransform: 'var(--eq-display-case)',
        color: 'var(--eq-ink)'
      }}>{title}</h2>
      {intro && <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: 'var(--eq-ink-soft)',
        maxWidth: 600 }}>{intro}</p>}
    </header>);

}

// Image placeholder — striped, with monospace caption ("product shot")
function PlaceholderImage({ width = '100%', height = 320, caption = 'photo', radius = 2, tone = 'ink' }) {
  const stripe = tone === 'ink' ? 'var(--eq-ink)' : 'var(--eq-gold)';
  return (
    <div style={{
      position: 'relative', width, height, borderRadius: radius, overflow: 'hidden',
      background: `repeating-linear-gradient(135deg, var(--eq-surface) 0 12px, var(--eq-surface-alt) 12px 24px)`,
      border: '1px solid var(--eq-line)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      <span style={{
        fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'var(--eq-ink-muted)',
        padding: '6px 12px', background: 'var(--eq-bg)',
        border: '1px solid var(--eq-line)', borderRadius: 99
      }}>{caption}</span>
    </div>);

}

Object.assign(window, {
  Button, Arrow, Pill, Badge, IconCircle, ServiceCard, Field, Input, Textarea,
  Quote, Stat, NavLink, SectionHead, PlaceholderImage
});