/* Inland Empire Car Accident Lander — shared primitives
   Exposes: Icon, Eyebrow, Container, PhoneButton, GhostButton, useLucide, PHONE, TEL */
const { useState, useEffect, useRef } = React;

const PHONE = '(909) 359-9065';
const TEL = '+19093599065';
const SMS = 'sms:+19093599065';

function useLucide() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

function Icon({ name, size = 22, color, style, strokeWidth = 2.25 }) {
  return <i data-lucide={name} style={{ width: size, height: size, color, ...style }} data-stroke={strokeWidth}></i>;
}

function Eyebrow({ children, light, style }) {
  return (
    <span className="t-eyebrow" style={{ color: light ? 'var(--red)' : 'var(--red)', display: 'inline-flex', alignItems: 'center', gap: 10, ...style }}>
      <span style={{ width: 26, height: 3, background: 'var(--red)', display: 'inline-block' }}></span>
      {children}
    </span>
  );
}

function Container({ children, style, className }) {
  return <div className={className} style={{ maxWidth: 1180, margin: '0 auto', padding: '0 28px', width: '100%', ...style }}>{children}</div>;
}

/* The hero call-to-action — the only pill-rounded element, per brand. */
function PhoneButton({ small, block, big, sub = 'Call 24/7 · Free Consultation', style }) {
  const [pressed, setPressed] = useState(false);
  return (
    <a
      href={`tel:${TEL}`}
      onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
      style={{
        display: block ? 'flex' : 'inline-flex', width: block ? '100%' : 'auto', textDecoration: 'none',
        alignItems: 'center', justifyContent: 'center', gap: small ? 9 : 15,
        background: pressed ? 'var(--red-press)' : 'var(--red)', color: '#fff',
        border: 'none', cursor: 'pointer', borderRadius: 999,
        padding: small ? '11px 20px' : big ? '20px 36px' : '16px 28px',
        boxShadow: pressed ? 'none' : 'var(--shadow-red)',
        transform: pressed ? 'scale(.98)' : 'none', transition: 'all .12s ease-out',
        fontFamily: 'var(--font-headline)', ...style,
      }}
      onMouseOver={e => !pressed && (e.currentTarget.style.background = 'var(--red-hover)')}
      onMouseOut={e => !pressed && (e.currentTarget.style.background = 'var(--red)')}
      className="pulse-cta"
    >
      <i data-lucide="phone-call" style={{ width: small ? 17 : big ? 30 : 24, height: small ? 17 : big ? 30 : 24, flexShrink: 0 }}></i>
      {small
        ? <span style={{ textTransform: 'uppercase', fontWeight: 600, letterSpacing: '.05em', fontSize: 14 }}>Call Now</span>
        : <span style={{ textAlign: 'left', lineHeight: 1, whiteSpace: 'nowrap' }}>
            <span style={{ display: 'block', textTransform: 'uppercase', fontSize: big ? 13 : 12, letterSpacing: '.12em', opacity: .9 }}>{sub}</span>
            <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: big ? 38 : 30, letterSpacing: 0, marginTop: 5, whiteSpace: 'nowrap' }}>{PHONE}</span>
          </span>}
    </a>
  );
}

/* Square secondary button. variant: ink | outline | outlineLight | white */
function GhostButton({ children, variant = 'ink', icon, href, onClick, block, style }) {
  const [pressed, setPressed] = useState(false);
  const base = {
    fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600,
    letterSpacing: '.06em', fontSize: 15, border: 'none', cursor: 'pointer', textDecoration: 'none',
    display: block ? 'flex' : 'inline-flex', width: block ? '100%' : 'auto',
    alignItems: 'center', justifyContent: 'center', gap: 9, borderRadius: 4,
    padding: '15px 26px', transition: 'all .12s ease-out',
    transform: pressed ? 'scale(.98)' : 'none',
  };
  const variants = {
    ink: { background: pressed ? '#000' : 'var(--ink)', color: '#fff' },
    white: { background: '#fff', color: 'var(--ink)', boxShadow: 'var(--shadow-hard)' },
    outline: { background: 'transparent', color: 'var(--ink)', border: '2px solid var(--ink)', padding: '13px 24px' },
    outlineLight: { background: 'transparent', color: '#fff', border: '2px solid rgba(255,255,255,.55)', padding: '13px 24px' },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} onClick={onClick}
      onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
      style={{ ...base, ...variants[variant], ...style }}>
      {icon && <i data-lucide={icon} style={{ width: 18, height: 18 }}></i>}
      {children}
    </Tag>
  );
}

Object.assign(window, { useLucide, Icon, Eyebrow, Container, PhoneButton, GhostButton, PHONE, TEL, SMS });