// Section header — number, eyebrow, title, intro
const SectionHeader = ({ num, eyebrow, title, intro, anchor }) => (
  <div className="section-header" id={anchor}>
    <div className="meta">
      <div className="section-num">{num}</div>
      <div className="eyebrow">{eyebrow}</div>
    </div>
    <div>
      <h2 className="h1" style={{ marginTop: 0, marginBottom: 16 }}>{title}</h2>
      {intro && <p className="lede" style={{ maxWidth: 680, marginTop: 0 }}>{intro}</p>}
    </div>
  </div>
);

// Authority strip — credentials right after hero
const AuthorityStrip = () => (
  <section style={{ background: 'var(--ivory-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '36px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 48 }}>
        <div className="eyebrow">Pripravili sme</div>
        <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', alignItems: 'center' }}>
          <Credential label="Slovenská advokátska komora" sub="č. zápisu 5144" />
          <Credential label="Občiansky zákonník" sub="§ 663 – § 723" />
          <Credential label="Zákon č. 98/2014 Z. z." sub="o krátkodobom nájme bytu" />
          <Credential label="GDPR / nariadenie EÚ 2016/679" sub="ochrana údajov zmluvných strán" />
        </div>
        <a href="#autor" style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'underline', textUnderlineOffset: 4 }}>O autorovi →</a>
      </div>
    </div>
  </section>
);

const Credential = ({ label, sub }) => (
  <div>
    <div style={{ fontFamily: 'var(--serif)', fontSize: '0.95rem', color: 'var(--ink)' }}>{label}</div>
    <div className="small" style={{ fontSize: 11 }}>{sub}</div>
  </div>
);

// Quick answer (AEO) module — appears throughout for snippet eligibility
const QuickAnswer = ({ q, a }) => (
  <div className="answer-box">
    <div className="answer-label">Krátka odpoveď</div>
    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 8, fontFamily: 'var(--sans)' }}>{q}</div>
    <div className="answer-text">{a}</div>
  </div>
);

window.SectionHeader = SectionHeader;
window.AuthorityStrip = AuthorityStrip;
window.QuickAnswer = QuickAnswer;