// ── Shared UI Components ────────────────────────────────────────────────────

// Primary CTA Button
const CTAButton = ({ children, onClick, variant = 'primary', size = 'md', href, style = {} }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    border: 'none', cursor: 'pointer', fontFamily: 'Inter, sans-serif',
    fontWeight: '600', borderRadius: '6px', transition: 'all 0.2s',
    textDecoration: 'none', letterSpacing: '0.01em',
  };
  const sizes = {
    sm: { fontSize: '13px', padding: '9px 18px' },
    md: { fontSize: '15px', padding: '13px 28px' },
    lg: { fontSize: '16px', padding: '16px 36px' },
  };
  const variants = {
    primary: { background: '#4A9FD4', color: '#fff', border: '2px solid #4A9FD4' },
    secondary: { background: 'transparent', color: '#1B2A4A', border: '2px solid #1B2A4A' },
    white: { background: '#fff', color: '#1B2A4A', border: '2px solid #fff' },
    outline: { background: 'transparent', color: '#fff', border: '2px solid rgba(255,255,255,0.6)' },
    navy: { background: '#1B2A4A', color: '#fff', border: '2px solid #1B2A4A' },
  };

  const [hovered, setHovered] = React.useState(false);
  const hoverVariants = {
    primary: { background: '#3a8fc4', border: '2px solid #3a8fc4' },
    secondary: { background: '#1B2A4A', color: '#fff' },
    white: { background: '#f0f4f8' },
    outline: { background: 'rgba(255,255,255,0.1)', border: '2px solid rgba(255,255,255,0.9)' },
    navy: { background: '#142038' },
  };

  const combinedStyle = {
    ...base, ...sizes[size], ...variants[variant],
    ...(hovered ? hoverVariants[variant] : {}),
    transform: hovered ? 'translateY(-1px)' : 'translateY(0)',
    boxShadow: hovered ? '0 4px 16px rgba(0,0,0,0.15)' : 'none',
    ...style,
  };

  if (href) return (
    <a href={href} style={combinedStyle}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}>
      {children}
    </a>
  );

  return (
    <button style={combinedStyle} onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}>
      {children}
    </button>
  );
};

// Image Placeholder
const ImgPlaceholder = ({ label, aspect = '16/9', height }) => (
  <div style={{
    background: 'linear-gradient(135deg, #1B2A4A 0%, #2E4A70 40%, #1B2A4A 100%)',
    borderRadius: '8px', overflow: 'hidden',
    aspectRatio: height ? undefined : aspect,
    height: height || undefined,
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', gap: '10px',
    position: 'relative',
  }}>
    {/* Steel stripe texture */}
    {Array.from({ length: 12 }).map((_, i) => (
      <div key={i} style={{
        position: 'absolute', top: 0, bottom: 0,
        left: `${i * 8.5}%`, width: '4px',
        background: 'rgba(74,159,212,0.08)',
      }} />
    ))}
    <div style={{
      width: '56px', height: '40px',
      background: 'rgba(74,159,212,0.15)',
      border: '2px solid rgba(74,159,212,0.3)',
      borderRadius: '4px', position: 'relative', zIndex: 1,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="24" height="18" viewBox="0 0 24 18" fill="none">
        <rect x="0" y="4" width="24" height="14" rx="1" stroke="rgba(74,159,212,0.8)" strokeWidth="1.5"/>
        <line x1="6" y1="4" x2="6" y2="18" stroke="rgba(74,159,212,0.5)" strokeWidth="1"/>
        <line x1="12" y1="4" x2="12" y2="18" stroke="rgba(74,159,212,0.5)" strokeWidth="1"/>
        <line x1="18" y1="4" x2="18" y2="18" stroke="rgba(74,159,212,0.5)" strokeWidth="1"/>
        <circle cx="12" cy="2" r="2" fill="rgba(74,159,212,0.8)"/>
      </svg>
    </div>
    <span style={{
      fontFamily: 'Inter, monospace', fontSize: '12px', fontWeight: '600',
      color: 'rgba(74,159,212,0.7)', textAlign: 'center', letterSpacing: '0.05em',
      textTransform: 'uppercase', zIndex: 1, padding: '0 16px',
    }}>
      {label}
    </span>
  </div>
);

// Section wrapper
const Section = ({ children, bg = '#fff', style = {} }) => (
  <section style={{ background: bg, padding: '80px 0', ...style }}>
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 32px' }}>
      {children}
    </div>
  </section>
);

// Section header
const SectionHeader = ({ eyebrow, title, subtitle, align = 'center', light = false }) => (
  <div style={{ textAlign: align, marginBottom: '48px' }}>
    {eyebrow && (
      <span style={{
        fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700',
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#4A9FD4', display: 'block', marginBottom: '10px',
      }}>
        {eyebrow}
      </span>
    )}
    <h2 style={{
      fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(28px, 4vw, 42px)',
      fontWeight: '700', color: light ? '#fff' : '#1B2A4A',
      margin: '0 0 16px 0', lineHeight: '1.1', letterSpacing: '-0.01em',
    }}>
      {title}
    </h2>
    {subtitle && (
      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: '17px',
        color: light ? 'rgba(255,255,255,0.75)' : '#4A5568',
        maxWidth: '640px', margin: align === 'center' ? '0 auto' : '0',
        lineHeight: '1.65',
      }}>
        {subtitle}
      </p>
    )}
  </div>
);

// Badge pill
const Badge = ({ children }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: '6px',
    background: 'rgba(74,159,212,0.12)',
    border: '1px solid rgba(74,159,212,0.3)',
    color: '#1B2A4A', borderRadius: '100px',
    padding: '6px 14px', fontSize: '13px', fontWeight: '600',
    fontFamily: 'Inter, sans-serif',
  }}>
    <span style={{ color: '#4A9FD4', fontSize: '11px' }}>✓</span>
    {children}
  </span>
);

// Card wrapper
const Card = ({ children, style = {}, onClick }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: '#fff', borderRadius: '10px',
        border: '1px solid #E8EDF2',
        boxShadow: hovered ? '0 8px 32px rgba(27,42,74,0.12)' : '0 2px 8px rgba(27,42,74,0.06)',
        transition: 'all 0.25s',
        transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
        overflow: 'hidden', cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
    >
      {children}
    </div>
  );
};

// Quote CTA Band
const QuoteCTABand = ({ setCurrentPage }) => {
  const goContact = () => {
    setCurrentPage('contact');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <div style={{
      background: 'linear-gradient(135deg, #1B2A4A 0%, #243a5e 100%)',
      padding: '48px 32px',
    }}>
      <div style={{
        maxWidth: '1100px', margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: '24px',
      }}>
        <div>
          <h3 style={{
            fontFamily: '"Barlow Condensed", sans-serif', fontSize: '28px',
            fontWeight: '700', color: '#fff', margin: '0 0 6px 0',
          }}>
            Ready to get your container?
          </h3>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: 'rgba(255,255,255,0.65)', margin: 0 }}>
            Get a quote for sales, rentals, or delivery today.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
          <CTAButton variant="primary" onClick={goContact}>Get a Free Quote</CTAButton>
          <CTAButton variant="white" onClick={goContact}>Request a Sales Quote</CTAButton>
          <CTAButton variant="outline" onClick={goContact}>Request a Rental Quote</CTAButton>
        </div>
      </div>
    </div>
  );
};

// Spec row for container specs
const SpecRow = ({ label, value }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '8px 0', borderBottom: '1px solid #EEF2F7',
    fontFamily: 'Inter, sans-serif', fontSize: '14px',
  }}>
    <span style={{ color: '#6B7E96', fontWeight: '500' }}>{label}</span>
    <span style={{ color: '#1B2A4A', fontWeight: '600' }}>{value}</span>
  </div>
);

Object.assign(window, { CTAButton, ImgPlaceholder, Section, SectionHeader, Badge, Card, QuoteCTABand, SpecRow });