// SegmentPage.jsx — shared scaffold for setor pages
function SegmentHero({ eyebrow, title, lede, illustration }) {
  return (
    <section className="rs-seg-hero">
      <div className="rs-title-grid"></div>
      <div className="rs-container rs-seg-hero-inner">
        <div>
          <a className="rs-seg-back" href="index.html">← Voltar para a página inicial</a>
          <div className="rs-seg-eyebrow">{eyebrow}</div>
          <h1 className="rs-seg-h">{title}</h1>
          <p className="rs-seg-lede">{lede}</p>
          <div style={{display:'flex', gap:12}}>
            <a className="rs-btn rs-btn-on-navy rs-btn-lg" href="https://web.whatsapp.com/send?phone=5547992871181&text=Ol%C3%A1%2C+quero+conversar+com+um+Contador+especialista." target="_blank" rel="noopener noreferrer">Pedir proposta</a>
            <a className="rs-btn rs-btn-ghost rs-btn-lg" style={{color:'#fff'}} href="#features">Ver o que entregamos →</a>
          </div>
        </div>
        <aside className="rs-seg-illu">{illustration}</aside>
      </div>
    </section>
  );
}

function SegmentFeatures({ items }) {
  return (
    <section className="rs-seg-list-section" id="features">
      <div className="rs-container">
        <header className="rs-section-head">
          <span className="rs-eyebrow">O que está incluso</span>
          <h2 className="rs-section-title">Tudo que sua operação precisa, sob um único contador.</h2>
        </header>
        <div className="rs-seg-grid">
          {items.map((it, i) => (
            <div className="rs-seg-feat" key={i}>
              <span className="rs-seg-feat-num">{String(i+1).padStart(2,'0')}</span>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SegmentHero = SegmentHero;
window.SegmentFeatures = SegmentFeatures;