/* Danex Roofing — services. Three core trades with photo slots up top,
   then a compact row for repair / replacement / commercial. */
function Services() {
  const { Card, Eyebrow, Badge } = DS;
  const trades = [
    { id: 'flat', title: 'Flat Roofing', tag: "Danny's specialty", photo: 'assets/photos/roof-07.jpg', body: 'Torch-on (SBS) membrane systems for low-slope residential and commercial roofs. Built to shed Lower Mainland rain for decades.' },
    { id: 'sloped', title: 'Sloped Roofing', tag: null, photo: 'assets/photos/roof-05.jpg', body: 'Duroid and laminate architectural shingles, expertly installed with proper underlayment and ventilation.' },
    { id: 'specialty', title: 'Specialty Roofing', tag: null, photo: 'assets/photos/roof-21.jpg', body: 'Curved, custom and complex roof shapes, re-roofed with premium synthetic underlayment and a watertight finish.' },
  ];
  const more = [
    { icon: 'wrench', title: 'Roof Repair', body: 'Leaks, storm damage, flashing, ponding water. Fast diagnosis and lasting fixes, not band-aids.' },
    { icon: 'hammer', title: 'Replacement', body: 'Full tear-off and re-roof, handled start to finish with clean-up and a workmanship warranty.' },
    { icon: 'building-2', title: 'Commercial', body: 'Strata, retail and industrial flat-roof projects, scheduled to keep your business running.' },
  ];

  return (
    <section id="services" style={{ background: 'var(--surface-base)', padding: 'calc(var(--section-y) - 24px) 0 var(--section-y)' }}>
      <div className="dx-container">
        <div style={{ maxWidth: 620 }}>
          <Eyebrow>What We Do</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.25rem,4vw,3.25rem)', lineHeight: 0.98, margin: '14px 0 0', fontWeight: 800 }}>
            Every Roof, Every Pitch
          </h2>
          <p style={{ color: 'var(--text-muted)', fontSize: 18, lineHeight: 1.55, marginTop: 16 }}>
            Residential and commercial, from repairs to full replacements.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 48 }} className="dx-services-grid">
          {trades.map((t) => (
            <Card key={t.id} interactive style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative' }}>
                <img src={t.photo} alt={t.title + ' by Danex Roofing'} loading="lazy"
                  style={{ width: '100%', height: 195, display: 'block', objectFit: 'cover' }} />
                {t.tag && (
                  <div style={{ position: 'absolute', top: 14, left: 14 }}>
                    <Badge variant="accent" size="sm" icon={<i data-lucide="flame" style={{ width: 12, height: 12 }}></i>}>{t.tag}</Badge>
                  </div>
                )}
              </div>
              <div style={{ padding: 'var(--space-6)' }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontWeight: 700,
                  fontSize: 'var(--text-xl)', letterSpacing: '0.01em', color: 'var(--text-strong)', margin: '0 0 8px',
                }}>{t.title}</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: 15, lineHeight: 1.55, margin: 0 }}>{t.body}</p>
              </div>
            </Card>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 22 }} className="dx-services-more">
          {more.map((m) => (
            <Card key={m.title} style={{ display: 'flex', alignItems: 'flex-start', gap: 16, padding: 'var(--space-5)' }}>
              <span style={{
                width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', flexShrink: 0,
              }}><i data-lucide={m.icon} style={{ width: 20, height: 20 }}></i></span>
              <div>
                <h3 style={{
                  fontFamily: 'var(--font-sans)', textTransform: 'none', fontWeight: 700, fontSize: 15.5,
                  letterSpacing: 0, color: 'var(--text-strong)', margin: '2px 0 4px',
                }}>{m.title}</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.5, margin: 0 }}>{m.body}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;