// components.jsx — shared visual atoms for the Sessão Informativa landing page

const { useState, useEffect, useRef } = React;

// ─── Responsive helper ──────────────────────────────────────────────────────
// Inline styles win over @media CSS on specificity, so layout breakpoints are
// driven in JS: components read useIsMobile() and swap the layout-critical
// style values (grid columns, padding, absolute offsets) directly.
function useIsMobile(maxWidth = 900) {
  const query = `(max-width: ${maxWidth}px)`;
  const [match, setMatch] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
  useEffect(() => {
    const mq = window.matchMedia(query);
    const onChange = (e) => setMatch(e.matches);
    setMatch(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange); };
  }, [query]);
  return match;
}

// ─── Logo ─────────────────────────────────────────────────────────────────
function BelavistaLogo({ size = 1, white = false }) {
  const h = 56 * size;
  return (
    <img
      src="media/logo-belavista.png"
      alt="Faculdade Belavista"
      style={{
        height: h, width: 'auto', display: 'block',
        filter: white ? 'brightness(0) invert(1)' : 'none',
      }}
    />
  );
}

// ─── Top utility bar ───────────────────────────────────────────────────────
function TopBar() {
  if (useIsMobile(900)) return null;
  return (
    <div style={{
      borderBottom: '1px solid rgba(81,24,101,0.10)',
      fontSize: 13,
      color: 'var(--ink-2)',
      background: '#fff',
    }}>
      <div style={{
        maxWidth: 1360, margin: '0 auto', padding: '10px 64px',
        display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 28,
      }}>
        <a href="#" style={{ color: 'var(--purple)', fontWeight: 500 }}>Central do Aluno</a>
        <a href="#" style={{ color: 'var(--purple)', fontWeight: 500 }}>Portal do Professor</a>
        <span style={{ width: 1, height: 14, background: 'rgba(81,24,101,0.18)' }}/>
        <div style={{ display: 'flex', gap: 14, color: 'var(--purple)' }}>
          {['Instagram','LinkedIn','YouTube','TikTok'].map(s => (
            <a key={s} href="#" aria-label={s} style={{ fontSize: 12 }}>
              <SocialIcon name={s} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function SocialIcon({ name }) {
  const sz = 16;
  const stroke = 'var(--purple)';
  if (name === 'Instagram') return (
    <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="0.7" fill={stroke}/>
    </svg>
  );
  if (name === 'LinkedIn') return (
    <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}>
      <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.5 0H12v1.9h.06c.6-1.1 2.06-2.27 4.24-2.27 4.54 0 5.38 2.98 5.38 6.87V22h-4.56v-6.6c0-1.58-.03-3.62-2.2-3.62-2.2 0-2.54 1.72-2.54 3.5V22H7.72V8z"/>
    </svg>
  );
  if (name === 'YouTube') return (
    <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}>
      <path d="M23 7c-.3-1.1-1.1-1.9-2.2-2.2C18.9 4.4 12 4.4 12 4.4s-6.9 0-8.8.4C2.1 5.1 1.3 5.9 1 7c-.4 1.9-.4 5-.4 5s0 3.1.4 5c.3 1.1 1.1 1.9 2.2 2.2 1.9.4 8.8.4 8.8.4s6.9 0 8.8-.4c1.1-.3 1.9-1.1 2.2-2.2.4-1.9.4-5 .4-5s0-3.1-.4-5zM9.8 15.4V8.6L15.6 12l-5.8 3.4z"/>
    </svg>
  );
  return (
    <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}>
      <path d="M19.6 6.4a4.8 4.8 0 0 1-3.3-1.3 4.8 4.8 0 0 1-1.3-3.1h-3.2v13.4a2.8 2.8 0 1 1-2-2.7V9.5a6 6 0 1 0 5.2 5.9V8.6a8 8 0 0 0 4.6 1.5V6.4z"/>
    </svg>
  );
}

// ─── Main navigation ──────────────────────────────────────────────────────
function MainNav() {
  const items = ['Cursos','Quem somos','Diferenciais','Faça um tour','Notícias','Fale conosco'];
  const compact = useIsMobile(1024);
  const goForm = () => {
    const el = document.getElementById('agende');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <nav style={{
      background: '#fff',
      borderBottom: '1px solid rgba(81,24,101,0.08)',
      position: 'sticky', top: 0, zIndex: 50,
    }}>
      <div style={{
        maxWidth: 1360, margin: '0 auto', padding: compact ? '14px 22px' : '22px 64px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <BelavistaLogo size={compact ? 0.92 : 1.15}/>
        {compact ? (
          <button onClick={goForm} style={{
            background: 'var(--blue)', color: '#fff', border: 'none',
            padding: '12px 18px', fontSize: 12, fontWeight: 800,
            letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap', cursor: 'pointer',
          }}>Inscreva-se</button>
        ) : (
          <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
            {items.map(i => (
              <a key={i} href="#" style={{
                fontSize: 13, fontWeight: 700, letterSpacing: '0.06em',
                textTransform: 'uppercase', color: 'var(--ink)',
              }}>{i}</a>
            ))}
          </div>
        )}
      </div>
    </nav>
  );
}

// ─── Primary blue CTA button ──────────────────────────────────────────────
function CTAButton({ children, large, onClick, style }) {
  const [hover, setHover] = useState(false);
  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}
      style={{
        background: hover ? 'var(--blue-hover)' : 'var(--blue)',
        color: '#fff',
        border: 'none',
        padding: large ? '22px 36px' : '18px 30px',
        fontSize: large ? 14 : 13,
        fontWeight: 800,
        letterSpacing: '0.10em',
        textTransform: 'uppercase',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 18,
        transition: 'background .2s ease, transform .2s ease, box-shadow .2s ease',
        boxShadow: hover
          ? '0 14px 28px -10px rgba(27,111,224,0.55)'
          : '0 8px 20px -10px rgba(27,111,224,0.35)',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        ...style,
      }}
    >
      <span>{children}</span>
      <svg width="20" height="14" viewBox="0 0 20 14" fill="none" style={{ transform: hover ? 'translateX(4px)' : 'translateX(0)', transition: 'transform .2s ease' }}>
        <path d="M0 7 H 18 M 12 1 L 19 7 L 12 13" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="square"/>
      </svg>
    </button>
  );
}

// ─── Photo (real image with optional placeholder fallback) ────────────────
function PhotoPlaceholder({ label, ratio = '4 / 5', tone = 'purple', src, objectPosition = 'center' }) {
  if (src) {
    return (
      <div style={{ aspectRatio: ratio, width: '100%', overflow: 'hidden', position: 'relative', background: 'var(--purple-soft)' }}>
        <img src={src} alt={label || ''} style={{
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition, display: 'block',
        }}/>
      </div>
    );
  }
  // subtly striped placeholder with monospace explainer; never hand-drawn imagery
  const stripeColor = tone === 'purple' ? 'rgba(81,24,101,0.08)' : 'rgba(81,24,101,0.05)';
  const bg = tone === 'purple' ? 'var(--purple-soft)' : '#F6F4F7';
  return (
    <div style={{
      aspectRatio: ratio,
      width: '100%',
      background: `repeating-linear-gradient(135deg, ${bg} 0 18px, ${stripeColor} 18px 19px)`,
      position: 'relative',
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'flex-start',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 16,
        border: '1px dashed rgba(81,24,101,0.28)',
      }}></div>
      <div className="mono" style={{
        position: 'relative', padding: '24px 28px',
        fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--purple)', fontWeight: 500,
      }}>
        <span style={{
          display: 'inline-block', padding: '6px 10px',
          background: '#fff', border: '1px solid var(--hairline)',
        }}>{label}</span>
      </div>
    </div>
  );
}

// ─── Card variants ────────────────────────────────────────────────────────
function Card({ variant = 'outlined', number, eyebrow, title, body, children, accentColor }) {
  const accent = accentColor || 'var(--purple)';
  const base = {
    padding: 32,
    display: 'flex', flexDirection: 'column', gap: 14,
    transition: 'all .25s ease',
    height: '100%',
  };
  let styles = {};
  if (variant === 'outlined') {
    styles = { ...base, background: '#fff', border: '1px solid var(--hairline)', borderTop: `3px solid ${accent}` };
  } else if (variant === 'filled') {
    styles = { ...base, background: 'var(--purple-soft)', border: '1px solid transparent' };
  } else if (variant === 'lifted') {
    styles = { ...base, background: '#fff', border: '1px solid rgba(81,24,101,0.06)', boxShadow: '0 18px 40px -24px rgba(42,14,54,0.25), 0 2px 6px -2px rgba(42,14,54,0.06)' };
  } else if (variant === 'minimal') {
    styles = { ...base, background: 'transparent', borderTop: `1px solid ${accent}`, paddingLeft: 0, paddingRight: 0 };
  } else if (variant === 'dark') {
    styles = { ...base, background: 'var(--purple-ink)', color: '#fff', border: '1px solid transparent' };
  }
  const titleColor = variant === 'dark' ? '#fff' : 'var(--ink)';
  const bodyColor = variant === 'dark' ? 'rgba(255,255,255,0.78)' : 'var(--ink-2)';
  const eyebrowColor = variant === 'dark' ? 'rgba(255,255,255,0.6)' : accent;

  return (
    <div style={styles}>
      {number && (
        <div style={{
          fontFamily: "'Avenir Next','Mulish',sans-serif",
          fontWeight: 800, fontSize: 56,
          color: variant === 'dark' ? 'rgba(255,255,255,0.95)' : accent,
          lineHeight: 0.9, letterSpacing: '-0.04em',
          marginBottom: 4,
        }}>{number}</div>
      )}
      {eyebrow && (
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.10em', textTransform: 'uppercase',
          color: eyebrowColor, fontWeight: 500,
        }}>{eyebrow}</div>
      )}
      {title && <h3 style={{ fontSize: 22, color: titleColor, letterSpacing: '-0.015em', lineHeight: 1.15 }}>{title}</h3>}
      {body && <p style={{ fontSize: 15.5, lineHeight: 1.55, color: bodyColor, fontWeight: 400 }}>{body}</p>}
      {children}
    </div>
  );
}

// ─── Section header ───────────────────────────────────────────────────────
function SectionHeader({ eyebrow, title, intro, align = 'left', maxWidth = 880, eyebrowColor }) {
  return (
    <div style={{
      maxWidth, margin: align === 'center' ? '0 auto' : '0',
      textAlign: align, display: 'flex', flexDirection: 'column', gap: 24,
    }}>
      {eyebrow && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          justifyContent: align === 'center' ? 'center' : 'flex-start',
        }}>
          <span style={{ width: 36, height: 1, background: eyebrowColor || 'var(--purple)' }}/>
          <span className="mono" style={{
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: eyebrowColor || 'var(--purple)', fontWeight: 600,
          }}>{eyebrow}</span>
        </div>
      )}
      {title && <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 60px)', maxWidth: 820, alignSelf: align === 'center' ? 'center' : 'flex-start' }}>{title}</h2>}
      {intro && (
        <p style={{
          fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)',
          maxWidth: 680, fontWeight: 400,
          alignSelf: align === 'center' ? 'center' : 'flex-start',
        }}>{intro}</p>
      )}
    </div>
  );
}

Object.assign(window, {
  BelavistaLogo, TopBar, MainNav, CTAButton, PhotoPlaceholder, Card, SectionHeader, SocialIcon,
});