// === Page header (hero replacement for inner pages) ===

function PageHeader({ eyebrow, title, lede, cta }) {
  return (
    <header className="page-header">
      <div className="page-header-bg" />
      <div className="page-header-grid" />
      <div className="container page-header-inner">
        <Reveal>
          <span className="eyebrow">{eyebrow}</span>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="h-1 page-header-title">{title}</h1>
        </Reveal>
        {lede && (
          <Reveal delay={140}>
            <p className="lede page-header-lede">{lede}</p>
          </Reveal>
        )}
        {cta && (
          <Reveal delay={200}>
            <div className="page-header-actions">{cta}</div>
          </Reveal>
        )}
      </div>
    </header>
  );
}

// CTA Banner — used near the bottom of every inner page to push to the contact form
function CTABanner({ title = "Ready to start your build?", desc = "Drop us your car details — most quotes come back same day. No deposit until you're ready.", primary = "Get a quote", primaryHref = "contact.html", secondary = "Call (858) 405-2330", secondaryHref = "tel:8584052330" }) {
  return (
    <section className="cta-banner-section">
      <div className="container">
        <div className="cta-banner">
          <div className="cta-banner-content">
            <h2 className="h-1" style={{ fontSize: "clamp(32px, 4vw, 56px)" }}>{title}</h2>
            <p className="lede" style={{ marginTop: 16 }}>{desc}</p>
          </div>
          <div className="cta-banner-actions">
            <a href={primaryHref} className="btn btn-primary">{primary} <Icon.Arrow size={14}/></a>
            <a href={secondaryHref} className="btn btn-ghost">{secondary}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageHeader, CTABanner });