// Service page building blocks — reusable across Bookkeeping, Tax, CFO
const { useState: useStateSvc } = React;

function ServiceHero({ eyebrow, headline, lede, meta }) {
  return (
    <section className="container svc-hero">
      <div>
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="display">{headline}</h1>
        <p className="lede">{lede}</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <a href="talk-to-advisor.html" className="btn btn-primary">Get a proposal <ArrowRight/></a>
          <a href="talk-to-advisor.html" className="btn btn-secondary">Talk to an advisor</a>
        </div>
      </div>
      <div className="svc-hero-meta">
        {meta.map((m, i) => (
          <div key={i}>
            <div className="label">{m.label}</div>
            <div className="value">{m.value}</div>
          </div>
        ))}
        <div style={{marginTop: 8}}><Rating/></div>
      </div>
    </section>
  );
}

function IncludedGrid({ title, items }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">What's included</div>
            <h2 className="display">{title}</h2>
          </div>
          <div className="sh-right">
            <p>Every engagement includes a dedicated lead who owns the relationship. No handoffs, no ticket queues.</p>
          </div>
        </div>
        <div className="feature-grid">
          {items.map((it, i) => (
            <div key={i} className="feature-cell">
              <div className="num">0{i+1}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceBand({ headline, bullets }) {
  return (
    <section className="section">
      <div className="container">
        <div className="svc-band">
          <h2 className="display" style={{fontSize: 'clamp(40px, 5vw, 64px)', margin: 0, maxWidth: 720}}>{headline}</h2>
          <div className="svc-band-grid">
            {bullets.map((b, i) => (
              <div key={i} className="svc-band-item">
                <Check size={16}/>
                <div>
                  <div style={{fontSize:15, fontWeight:500}}>{b.t}</div>
                  <div style={{fontSize:14, color:'var(--ink-muted)', marginTop:4, lineHeight:1.5}}>{b.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Deliverables({ items }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Deliverables</div>
            <h2 className="display">What lands in your inbox.</h2>
          </div>
          <div className="sh-right">
            <p>Every engagement produces concrete, predictable output — on a schedule you can count on.</p>
          </div>
        </div>
        <div className="deliverables">
          {items.map((it, i) => (
            <div key={i} className="deliv-row">
              <div className="deliv-when mono">{it.when}</div>
              <div>
                <div className="deliv-title display">{it.t}</div>
                <div className="deliv-desc">{it.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SvcTestimonial({ quote, who, role, init }) {
  return (
    <section className="section">
      <div className="container">
        <div className="testimonial" style={{maxWidth: 900, margin: '0 auto'}}>
          <blockquote>"{quote}"</blockquote>
          <div className="cite">
            <div className="avatar">{init}</div>
            <div>
              <div className="cite-who">{who}</div>
              <div className="cite-sub">{role}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RelatedServices({ current }) {
  const all = [
    { key: 'bookkeeping', title: 'Bookkeeping & Accounting', desc: 'Clean books, closed monthly, on time.', href: 'bookkeeping.html' },
    { key: 'tax', title: 'Tax Prep & Filings', desc: 'Entity, personal, and year-round planning.', href: 'tax.html' },
    { key: 'cfo', title: 'Controller & CFO', desc: 'Forecasts, fundraising, and finance strategy.', href: 'cfo.html' },
    { key: 'sec', title: 'SEC Reporting & Audit Support', desc: 'Filings, technical memos, and audit readiness.', href: 'sec.html' },
  ];
  const others = all.filter(s => s.key !== current).slice(0, 3);
  return (
    <section className="section">
      <div className="container">
        <div className="eyebrow" style={{marginBottom: 24}}>Explore more</div>
        <div className="related-grid">
          {others.map((s, i) => (
            <a key={i} href={s.href} className="related-card">
              <h3 className="display">{s.title}</h3>
              <p>{s.desc}</p>
              <div className="svc-learn">Learn more <ArrowRight size={12}/></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServiceHero, IncludedGrid, ServiceBand, Deliverables, SvcTestimonial, RelatedServices });