// components-header.jsx — Header section + Age Gate

function AgeGate({ onAccept }) {
  const exit = () => { window.location.href = 'https://google.com'; };
  return (
    <div className="age" role="dialog" aria-modal="true">
      <div className="age__card">
        <div className="age__icon">18+</div>
        <p className="age__title">Este conteúdo é destinado a maiores de 18 anos.</p>
        <div className="age__btns">
          <button className="btn btn--primary btn--full" onClick={onAccept}>
            Tenho 18 anos ou mais
          </button>
          <button className="age__btn-out" onClick={exit}>Sair</button>
        </div>
      </div>
    </div>
  );
}

function VerifiedBadge() {
  return (
    <span className="badge-verified" aria-label="Verificada">
      <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
        <path d="M1.5 4.5L3.5 6.5L7.5 2.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </span>
  );
}

function StatsBar() {
  return (
    <div className="stats">
      <span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
        12
      </span>
      <span className="sep" />
      <span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="6" width="14" height="12" rx="2"/>
          <path d="M22 8l-6 4 6 4V8z"/>
        </svg>
        30
      </span>
      <span className="sep" />
      <span>
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 21s-7-4.35-7-10a4 4 0 017-2.65A4 4 0 0119 11c0 5.65-7 10-7 10z"/>
        </svg>
        3.2k
      </span>
    </div>
  );
}

function HeaderLayoutA({ bioOpen, setBioOpen, bio }) {
  // Standard: cover full-width, avatar overlapping bottom-left
  return (
    <header className="header">
      <div className="header__cover ph">
        <span className="ph__label">cover photo</span>
        <div className="header__stats"><StatsBar /></div>
      </div>
      <div className="header__avatar-wrap">
        <div className="avatar" />
      </div>
      <div className="header__info">
        <h1 className="header__name font-display">
          Gabriela Rosa <VerifiedBadge />
        </h1>
        <p className="header__handle">@gaby_rosa8</p>
        <BioBlock bioOpen={bioOpen} setBioOpen={setBioOpen} bio={bio} />
        <div className="header__loc">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          Florianópolis, SC
        </div>
      </div>
    </header>
  );
}

function HeaderLayoutB({ bioOpen, setBioOpen, bio }) {
  // Centered: avatar overlaps cover dead-center, name centered
  return (
    <header className="header">
      <div className="header__cover ph" style={{ height: 220 }}>
        <span className="ph__label">cover photo</span>
        <div className="header__stats"><StatsBar /></div>
      </div>
      <div style={{ position: 'relative', marginTop: -40, zIndex: 3, display: 'flex', justifyContent: 'center' }}>
        <div className="avatar" style={{ width: 88, height: 88 }} />
      </div>
      <div className="header__info" style={{ textAlign: 'center', paddingTop: 16 }}>
        <h1 className="header__name font-display" style={{ justifyContent: 'center' }}>
          Gabriela Rosa <VerifiedBadge />
        </h1>
        <p className="header__handle">@gaby_rosa8</p>
        <BioBlock bioOpen={bioOpen} setBioOpen={setBioOpen} bio={bio} centered />
        <div className="header__loc" style={{ justifyContent: 'center' }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          Florianópolis, SC
        </div>
      </div>
    </header>
  );
}

function HeaderLayoutC({ bioOpen, setBioOpen, bio }) {
  // Editorial: tall cover, name overlay on cover bottom
  return (
    <header className="header">
      <div className="header__cover ph" style={{ height: 280 }}>
        <span className="ph__label">cover photo</span>
        <div style={{
          position: 'absolute', inset: 0, zIndex: 1,
          background: 'linear-gradient(to top, rgba(10,10,10,0.95) 0%, transparent 50%)'
        }} />
        <div className="header__stats" style={{ top: 12, right: 12, bottom: 'auto' }}><StatsBar /></div>
        <div style={{
          position: 'absolute', left: 16, right: 16, bottom: 16, zIndex: 2,
          display: 'flex', alignItems: 'flex-end', gap: 12,
        }}>
          <div className="avatar" />
          <div style={{ flex: 1, paddingBottom: 4 }}>
            <h1 className="header__name font-display" style={{ fontSize: 26 }}>
              Gabriela Rosa <VerifiedBadge />
            </h1>
            <p className="header__handle" style={{ marginTop: 2 }}>@gaby_rosa8</p>
          </div>
        </div>
      </div>
      <div className="header__info" style={{ paddingTop: 16 }}>
        <BioBlock bioOpen={bioOpen} setBioOpen={setBioOpen} bio={bio} />
        <div className="header__loc">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          Florianópolis, SC
        </div>
      </div>
    </header>
  );
}

function BioBlock({ bioOpen, setBioOpen, bio, centered }) {
  if (bioOpen) {
    return (
      <p className="bio" style={centered ? { textAlign: 'center' } : null}>
        {bio}
      </p>
    );
  }
  // truncated: 2 lines
  return (
    <div>
      <p className="bio bio--clamped" style={centered ? { textAlign: 'center' } : null}>{bio}</p>
      <span className="bio__more" onClick={() => setBioOpen(true)}>Ler mais</span>
    </div>
  );
}

Object.assign(window, { AgeGate, HeaderLayoutA, HeaderLayoutB, HeaderLayoutC, VerifiedBadge });