/* Danex Roofing — why us. Danny's portrait + a plain-spoken checklist,
   with the stats band anchoring the section. */
function WhyUs({ onQuote }) {
  const { Stat, Eyebrow, Button } = DS;
  const reasons = [
    { title: 'Two decades of pitched & flat', body: 'Over 20 years on Lower Mainland roofs. There is no roof type Danny hasn\'t handled.' },
    { title: 'Honest, upfront quotes', body: 'Clear written estimates with no surprise add-ons. You know the number before we start.' },
    { title: 'Licensed, insured & warrantied', body: 'Fully covered work backed by a workmanship warranty on every job.' },
    { title: 'Clean site, on time', body: 'Full clean-up and magnetic nail sweep. We leave your property better than we found it.' },
  ];

  return (
    <section id="why-danex" style={{ background: 'var(--slate-950)', position: 'relative', overflow: 'hidden' }}>
      <div className="dx-shingle" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}></div>
      <div className="dx-container" style={{ position: 'relative', zIndex: 1, paddingBlock: 'var(--section-y)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 72, alignItems: 'center' }} className="dx-why-grid">
          <div>
            <Eyebrow tone="inverse">Why Danex</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, color: 'var(--paper-100)' }}>
              The Roofer Your<br />Neighbours Recommend
            </h2>
            <p style={{ color: 'var(--slate-300)', fontSize: 18, lineHeight: 1.6, marginTop: 18, maxWidth: 460 }}>
              No call centres, no subcontracted crews you've never met. When you hire Danex, you get Danny. On the roof and on the phone.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 34 }}>
              {reasons.map((r) => (
                <div key={r.title} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%', background: 'rgba(229,84,22,0.16)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--ember-400)', flexShrink: 0, marginTop: 1,
                  }}><i data-lucide="check" style={{ width: 15, height: 15 }}></i></span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 16, color: 'var(--paper-100)' }}>{r.title}</div>
                    <div style={{ color: 'var(--slate-400)', fontSize: 14, lineHeight: 1.55, marginTop: 3, maxWidth: 440 }}>{r.body}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 36 }}>
              <Button variant="primary" size="lg" onClick={onQuote}
                iconRight={<i data-lucide="arrow-right" style={{ width: 19, height: 19 }}></i>}>
                Book Your Free Inspection
              </Button>
            </div>
          </div>

          <div className="dx-why-media" style={{ position: 'relative' }}>
            <img src="assets/danny.jpg" alt="Danny, owner-operator of Danex Roofing, on a metal roof in the Lower Mainland" style={{
              width: '100%', height: 560, display: 'block', borderRadius: 14,
              objectFit: 'cover', objectPosition: 'center 80%', boxShadow: 'var(--shadow-lg)',
            }} />
            <div className="dx-danny-card" style={{
              position: 'absolute', left: 20, bottom: 20, background: 'var(--surface-raised)',
              borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', padding: '14px 18px', lineHeight: 1.3,
            }}>
              <div style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontWeight: 800, fontSize: 19, color: 'var(--text-strong)' }}>Danny</div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>Owner-operator · on every job</div>
            </div>
          </div>
        </div>

        <div style={{
          display: 'flex', gap: 72, flexWrap: 'wrap', marginTop: 72,
          paddingTop: 44, borderTop: '1px solid var(--border-inverse)',
        }} className="dx-stats-row">
          <Stat value="20+" label="Years Experience" tone="inverse" />
          <Stat value="500+" label="Roofs Completed" tone="inverse" />
          <Stat value="100%" label="Satisfaction Guaranteed" tone="inverse" />
        </div>
      </div>
    </section>
  );
}

window.WhyUs = WhyUs;