// Idomed institutional page — light theme.
// Sample hero placeholder + placeholder copy. Med-school sister brand to Ibmec.

const IDOMED_TEAL = '#0FA89B';
const IDOMED_TEAL_DARK = '#0A6E66';
const IDOMED_CORAL = '#FF6E55';

// ----- Hero -----
const IdomedHero = ({ onBack }) => (
  <div style={{ position: 'relative', height: 320, width: '100%', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(165deg, ${IDOMED_TEAL} 0%, ${IDOMED_TEAL_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',
    }} />

    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 3 }}>
      <StatusBar tone="light" />
    </div>

    <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 }} />}
      <span style={{
        fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
        color: '#FFFFFF', fontSize: 24, lineHeight: 1, letterSpacing: '-0.01em',
        filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.25))',
      }}>idomed</span>
      <div style={{ width: 40 }} />
    </div>

    <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',
      }}>
        A medicina<br/>começa aqui.
      </div>
    </div>
  </div>
);

// ----- Body -----
const IdomedBody = () => (
  <div style={{ padding: '24px 22px 32px', color: '#0A0A0A' }}>
    <div className="mono" style={{
      fontSize: 10, letterSpacing: '0.18em', color: '#7A8094',
      fontWeight: 600, marginBottom: 8,
    }}>SOBRE A IDOMED</div>
    <h1 style={{
      margin: '0 0 16px', fontSize: 28, fontWeight: 600,
      letterSpacing: '-0.02em', lineHeight: 1.1,
    }}>
      Uma escola feita pra quem cuida de pessoas.
    </h1>

    <p style={{ margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. A Idomed é a
      escola de medicina e ciências da saúde do grupo, com simulação realística,
      hospitais-escola e estágio desde o primeiro semestre.
    </p>
    <p style={{ margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Aliquam erat volutpat. Sed quis libero in mauris vehicula sodales. Nullam
      pharetra, justo a faucibus rhoncus, sapien risus dignissim ipsum.
      Placeholder copy enquanto o conteúdo final é definido.
    </p>
    <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: '#3A3F4D' }}>
      Donec at lectus eu erat fermentum vehicula. Praesent volutpat sem at
      tellus pulvinar, eget bibendum nibh placerat.
    </p>

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

const IdomedScreen = ({ onBack }) => (
  <div className="screen" style={{ background: '#FFFFFF' }}>
    <IdomedHero onBack={onBack} />
    <IdomedBody />
  </div>
);

// Expose colors to window so the home page block can match the brand
Object.assign(window, { IdomedScreen, IDOMED_TEAL, IDOMED_TEAL_DARK, IDOMED_CORAL });