/* Services page. */

const DS_services = window.DawsonsDesignSystem_489d7d;

function PageHeader({ eyebrow, title, intro }) {
  return (
    <section className="hero" style={{ paddingBlock: 0 }}>
      <div className="blueprint"></div>
      <div className="hero-glow" style={{ width: 460, height: 460, top: -200 }}></div>
      <div className="container container-wide" style={{ position: 'relative', paddingBlock: 'clamp(3rem,6vw,5.5rem)' }}>
        <span className="eyebrow" style={{ color: 'var(--red-400)' }}>{eyebrow}</span>
        <h1 className="display-lg" style={{ color: 'var(--white)', marginTop: 14, maxWidth: 720 }}>{title}</h1>
        {intro && <p className="lead" style={{ color: 'var(--steel-300)', marginTop: 16, maxWidth: 620 }}>{intro}</p>}
      </div>
    </section>
  );
}

function Services({ onNavigate }) {
  const { ServiceCard, SectionHeading, Card, Icon, Button } = DS_services;
  const reasons = [
    { icon: 'users', title: 'One accountable team', text: 'Every trade in-house — no subcontractor blame game.' },
    { icon: 'file-check-2', title: 'Certified & compliant', text: 'Full documentation and certification on every job.' },
    { icon: 'shield-check', title: 'Fully insured', text: '£5m public liability and all the right accreditations.' },
    { icon: 'clock', title: '24/7 emergencies', text: 'Reactive cover when something can\u2019t wait.' },
  ];
  return (
    <div>
      <PageHeader eyebrow="Our services" title="Every trade, under one roof"
        intro="Electrical, plumbing, heating and building work for domestic, commercial and industrial clients — planned, delivered and certified by Dawsons." />
      <section className="section">
        <div className="container container-wide">
          <div className="grid-3">
            {window.SITE.services.map((s) => (
              <ServiceCard key={s.title} icon={s.icon} title={s.title} cta="Enquire" href="#"
                onClick={(e) => { e.preventDefault(); onNavigate('Contact'); }}>{s.blurb}</ServiceCard>
            ))}
          </div>
        </div>
      </section>
      <section className="section subtle">
        <div className="container container-wide">
          <SectionHeading eyebrow="Why Dawsons" title="Trades done the right way" align="center" style={{ marginBottom: 44 }} />
          <div className="grid-4">
            {reasons.map((r) => (
              <Card key={r.title} padding="26px 24px">
                <span style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--brand-soft)', color: 'var(--brand)', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={r.icon} size={24} />
                </span>
                <h3 style={{ fontSize: 'var(--fs-h4)', marginBottom: 8 }}>{r.title}</h3>
                <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.5 }}>{r.text}</p>
              </Card>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 44 }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Request a free quote</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

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