// Ibmec institutional page — light theme.
// Sample hero placeholder + placeholder copy. Will be filled in later.

const IBMEC_BLUE = '#1145ff';
const IBMEC_BLUE_DARK = '#0A33CC';
const IBMEC_YELLOW = '#FFD60A';

// ----- Hero (full-bleed image placeholder w/ overlay status bar + back) -----
const IbmecHero = ({ onBack }) => (
  <div style={{ position: 'relative', height: 320, width: '100%', overflow: 'hidden' }}>
    {/* Sample hero image — striped placeholder with the brand blue */}
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(165deg, ${IBMEC_BLUE} 0%, ${IBMEC_BLUE_DARK} 100%)`,
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 16px)',
      pointerEvents: 'none',
    }} />

    {/* Status bar — light tone over blue */}
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 3 }}>
      <StatusBar tone="light" />
    </div>

    {/* Top chrome — back button + logo */}
    <div style={{
      position: 'absolute', top: 50, left: 0, right: 0,
      padding: '10px 20px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 3,
    }}>
      {onBack ? (
        <button onClick={onBack} aria-label="Voltar" style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.18)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          border: '1px solid rgba(255,255,255,0.3)',
          color: '#FFFFFF', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <IconChevronLeft size={20} />
        </button>
      ) : <div style={{ width: 40 }} />}
      <img
        src="assets/ibmec-logo-white.svg"
        alt="Ibmec"
        style={{ height: 22, width: 'auto', display: 'block', filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.25))' }}
      />
      <div style={{ width: 40 }} />
    </div>

    {/* Sample placeholder label, bottom-left */}
    <div style={{
      position: 'absolute', left: 20, bottom: 20, zIndex: 2,
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <span className="mono" style={{
        fontSize: 10, color: 'rgba(255,255,255,0.85)',
        background: 'rgba(0,0,0,0.28)', padding: '4px 8px', borderRadius: 6,
        letterSpacing: '0.12em', alignSelf: 'flex-start',
      }}>HERO IMAGE</span>
      <div style={{
        fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
        color: '#FFFFFF', fontSize: 30, lineHeight: 1, letterSpacing: '-0.02em',
      }}>
        Quem faz o futuro,<br/>faz Ibmec.
      </div>
    </div>
  </div>
);

// ----- Body — placeholder copy -----
const IbmecBody = () => (
  <div style={{ padding: '24px 22px 32px', color: '#0A0A0A' }}>
    <div className="mono" style={{
      fontSize: 10, letterSpacing: '0.18em', color: '#7A8094',
      fontWeight: 600, marginBottom: 8,
    }}>QUEM SOMOS</div>
    <h1 style={{
      margin: '0 0 16px', fontSize: 28, fontWeight: 600,
      letterSpacing: '-0.02em', lineHeight: 1.1,
    }}>
      Uma escola de negócios, direito e tecnologia.
    </h1>

    <p style={{ margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. A Ibmec é uma das
      instituições de ensino superior mais reconhecidas do Brasil em negócios,
      economia, direito e tecnologia.
    </p>
    <p style={{ margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Há mais de 50 anos formamos profissionais que decidem o que vem a seguir —
      no mercado, na academia e na construção do próprio caminho. Placeholder
      copy enquanto o conteúdo final é definido.
    </p>
    <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Curabitur tempor odio a velit varius, nec sagittis erat condimentum.
      Aliquam erat volutpat. Donec ut massa eu nisi luctus convallis.
    </p>

    <button style={{
      marginTop: 22,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      background: IBMEC_BLUE, color: '#FFFFFF',
      border: 'none', borderRadius: 999, padding: '12px 18px',
      fontSize: 13, fontWeight: 600, cursor: 'pointer', font: 'inherit',
      boxShadow: '0 8px 22px -8px rgba(17,69,255,0.55)',
    }}>
      Saiba mais <IconArrowRight size={14} stroke={2.4} />
    </button>
  </div>
);

const IbmecScreen = ({ onBack }) => (
  <div className="screen" style={{ background: '#FFFFFF' }}>
    <IbmecHero onBack={onBack} />
    <IbmecBody />
  </div>
);

Object.assign(window, { IbmecScreen });