// Shared UI primitives for MLS Conseil landing
const { useState, useEffect, useRef, useMemo } = React;

// ---- Logo --------------------------------------------------------------
function Logo({ light = false, size = 1 }) {
  const ink = light ? '#F4EEE2' : '#14223D';
  return (
    <div style={{display:'flex', alignItems:'center', gap: 10*size}}>
      <div style={{
        width: 34*size, height: 34*size, borderRadius: 8*size,
        background: ink, color: light ? '#14223D' : '#F4EEE2',
        display:'grid', placeItems:'center',
        fontFamily:'"Instrument Serif", serif', fontStyle:'italic',
        fontSize: 20*size, lineHeight: 1, paddingBottom: 2,
        position:'relative', overflow:'hidden'
      }}>
        <span style={{position:'relative', zIndex:1}}>m</span>
        <div style={{position:'absolute', right:-2, bottom:-2, width:10*size, height:10*size, background:'#C9A961', borderRadius:'50%'}} />
      </div>
      <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
        <span style={{fontWeight:600, fontSize:15*size, letterSpacing:'-0.01em', color: ink}}>MLS Conseil</span>
        <span style={{fontSize:10*size, color: light ? '#F4EEE299' : '#4A5878', letterSpacing:'0.08em', textTransform:'uppercase', marginTop:2}}>Gestion · Trésorerie</span>
      </div>
    </div>
  );
}

// ---- Buttons -----------------------------------------------------------
function PrimaryButton({ children, onClick, light = false, icon = true, size = 'md' }) {
  const [hover, setHover] = useState(false);
  const pad = size === 'lg' ? '18px 28px' : size === 'sm' ? '10px 18px' : '14px 22px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13 : 14.5;
  const bg = light ? '#F4EEE2' : '#14223D';
  const fg = light ? '#14223D' : '#F4EEE2';
  return (
    <button
      onClick={onClick}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        display:'inline-flex', alignItems:'center', gap: 10,
        background: bg, color: fg, border: 'none',
        padding: pad, borderRadius: 999,
        fontWeight: 500, fontSize: fs, letterSpacing:'-0.005em',
        cursor:'pointer',
        boxShadow: hover ? '0 12px 28px -8px #14223d44' : '0 4px 12px -4px #14223d22',
        transform: hover ? 'translateY(-1px)' : 'none',
        transition: 'all .25s cubic-bezier(.2,.8,.2,1)',
        whiteSpace:'nowrap',
      }}>
      {children}
      {icon && (
        <span style={{
          width: 26, height: 26, borderRadius: '50%',
          background: '#C9A961', color:'#14223D',
          display:'grid', placeItems:'center',
          transform: hover ? 'translateX(3px) rotate(-45deg)' : 'rotate(-45deg)',
          transition: 'transform .25s cubic-bezier(.2,.8,.2,1)',
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      )}
    </button>
  );
}

function GhostButton({ children, onClick, light=false, underline=true }) {
  const [hover, setHover] = useState(false);
  const fg = light ? '#F4EEE2' : '#14223D';
  return (
    <button
      onClick={onClick}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background:'transparent', border:'none',
        color: fg,
        padding: '14px 4px', cursor:'pointer',
        fontWeight: 500, fontSize: 14.5,
        display:'inline-flex', alignItems:'center', gap: 8,
        position:'relative',
      }}>
      <span style={{
        borderBottom: underline ? `1.5px solid ${fg}` : 'none',
        paddingBottom: 2,
        opacity: hover ? 0.7 : 1,
        transition: 'opacity .2s'
      }}>{children}</span>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{transform: hover ? 'translateX(3px)' : 'none', transition:'transform .2s'}}>
        <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

// ---- Section frame -----------------------------------------------------
function Section({ children, bg, py = 120, id, label, style = {} }) {
  return (
    <section id={id} style={{
      background: bg || 'transparent',
      padding: `${py}px 0`,
      position: 'relative',
      ...style
    }}>
      <div style={{maxWidth: 1240, margin: '0 auto', padding: '0 32px'}}>
        {label && <SectionLabel>{label}</SectionLabel>}
        {children}
      </div>
    </section>
  );
}

function SectionLabel({ children, accent = '#C9A961' }) {
  return (
    <div style={{display:'inline-flex', alignItems:'center', gap:10, marginBottom: 24, color:'#4A5878'}}>
      <span style={{width:6, height:6, borderRadius:'50%', background: accent}} />
      <span className="mono" style={{fontSize: 11, letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:500}}>{children}</span>
    </div>
  );
}

// ---- Variant tag (for the 3 hero versions) -----------------------------
function VariantTag({ n, title }) {
  return (
    <div style={{
      maxWidth: 1240, margin: '0 auto', padding: '0 32px',
      display:'flex', alignItems:'center', gap: 14,
      paddingTop: 60, paddingBottom: 12,
    }}>
      <div style={{
        display:'inline-flex', alignItems:'center', gap: 10,
        background:'#14223D', color:'#F4EEE2',
        padding: '8px 14px', borderRadius: 999,
        fontSize: 12, fontWeight: 500, letterSpacing:'0.04em',
      }}>
        <span style={{width:6, height:6, borderRadius:'50%', background:'#C9A961'}} />
        Variante {n} · Hero
      </div>
      <span style={{color:'#4A5878', fontSize: 13}}>{title}</span>
      <div style={{flex:1, height:1, background:'#1B2A4E22'}} />
    </div>
  );
}

// ---- Eyebrow / pill ----------------------------------------------------
function Pill({ children, dark=false, icon }) {
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap: 8,
      background: dark ? '#14223D' : '#FBF7EE',
      color: dark ? '#F4EEE2' : '#14223D',
      border: dark ? 'none' : '1px solid #1B2A4E1F',
      padding: '7px 14px 7px 10px', borderRadius: 999,
      fontSize: 12.5, fontWeight: 500, letterSpacing:'0.005em',
    }}>
      {icon || <span style={{width:6, height:6, borderRadius:'50%', background:'#C9A961'}} />}
      {children}
    </div>
  );
}

// ---- Mini sparkline / chart helpers (SVG) ------------------------------
function buildPath(values, w, h, padX=4, padY=8) {
  if (!values.length) return '';
  const min = Math.min(...values), max = Math.max(...values);
  const range = max - min || 1;
  const stepX = (w - padX*2) / (values.length - 1);
  const pts = values.map((v,i)=>[padX + i*stepX, padY + (h - padY*2) * (1 - (v-min)/range)]);
  // smooth curve
  let d = `M ${pts[0][0]} ${pts[0][1]}`;
  for (let i=1; i<pts.length; i++) {
    const [x0,y0] = pts[i-1], [x1,y1] = pts[i];
    const cx = (x0+x1)/2;
    d += ` C ${cx} ${y0}, ${cx} ${y1}, ${x1} ${y1}`;
  }
  return { d, pts };
}

// Export to global so other babel scripts can find them
Object.assign(window, {
  Logo, PrimaryButton, GhostButton, Section, SectionLabel, VariantTag, Pill, buildPath
});