/* Morning Light — Full Landing Page
   Shared styles/tokens for all sections.
*/

window.mlTokens = {
  // palette
  bg: 'linear-gradient(180deg, #FFE8D1 0%, #FFF3E6 30%, #FFF8EF 70%, #FFF3E6 100%)',
  paper: '#FFFDF8',
  ink: '#2A1810',
  ink80: '#3E2418',
  ink60: '#6B3A1F',
  ink40: '#8A5A3E',
  ink20: '#B88D6E',
  coral: '#FF5A2D',
  coralSoft: '#FF7A4D',
  peach: '#FFE0B5',
  peachLight: '#FFF3E6',
  amber: '#FFB87A',
  cream: '#FFF3E6',
  // type
  sans: '"DM Sans", -apple-system, sans-serif',
  mono: '"DM Mono", ui-monospace, monospace',
  // shadow
  card: '0 20px 50px rgba(42,24,16,0.08)',
  cardHover: '0 28px 60px rgba(42,24,16,0.12)',
  btn: '0 8px 24px rgba(255,90,45,0.35), inset 0 1px 0 rgba(255,255,255,0.25)',
};

// Mobile detection hook — available globally
window.useMobile = function useMobile() {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);
  return isMobile;
};

// Reusable tiny components
window.MLBadge = function MLBadge({children, icon}) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 10,
      padding:'8px 16px', borderRadius: 999,
      background:'rgba(255,255,255,0.65)',
      border:'1px solid rgba(42,24,16,0.1)',
      fontSize: 13, color:'#6B3A1F', fontWeight: 500,
      backdropFilter:'blur(8px)',
      whiteSpace:'nowrap',
    }}>
      {icon !== undefined ? icon : <span style={{width:8, height:8, borderRadius:999, background:'#FF7A4D', boxShadow:'0 0 0 4px rgba(255,122,77,0.2)'}}/>}
      {children}
    </span>
  );
};

window.MLKicker = function MLKicker({children, color='#FF5A2D'}) {
  return <span style={{
    fontFamily:'"DM Mono", monospace',
    fontSize: 11, letterSpacing:'0.2em',
    color, display:'block', marginBottom: 14, fontWeight: 600,
  }}>{children}</span>;
};

window.MLH2 = function MLH2({children, style}) {
  const isMobile = window.useMobile();
  return <h2 style={{
    fontFamily:'"DM Sans", sans-serif',
    fontSize: isMobile ? 36 : 56, lineHeight: 1.05, letterSpacing:'-0.035em',
    fontWeight: 700, margin: 0, color:'#2A1810',
    ...style,
  }}>{children}</h2>;
};

// Harold logo lockup (image-based)
window.MLLogo = function MLLogo({small, dark}) {
  const h = small ? 96 : 64;
  return (
    <div style={{display:'flex', alignItems:'center'}}>
      <img
        src="/assets/the-harold-logo.png"
        alt="The Harold"
        style={{
          height: h, width:'auto', display:'block',
          filter: dark ? 'invert(94%) sepia(8%) saturate(380%) hue-rotate(335deg) brightness(105%)' : 'none',
        }}
      />
    </div>
  );
};