/* Danex Roofing — hero. Dark band: copy left, roof-pitch framed photo right,
   paper roofline wedge transitioning into the services section. */
function Hero({ onQuote }) {
  const { Button, Eyebrow, Badge, Rating } = DS;
  return (
    <section id="top" style={{ position: 'relative', background: 'var(--slate-950)', overflow: 'hidden' }}>
      <div className="dx-shingle" style={{ position: 'absolute', inset: 0, opacity: 0.55 }}></div>
      {/* soft ember glow behind the photo side — a nod to torch-on work */}
      <div style={{
        position: 'absolute', top: '-30%', right: '-12%', width: 720, height: 720, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(229,84,22,0.13) 0%, rgba(229,84,22,0) 65%)',
        pointerEvents: 'none',
      }}></div>

      <div className="dx-container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="dx-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64,
          alignItems: 'center', padding: '72px 0 88px',
        }}>
          <div>
            <Eyebrow tone="inverse">Lower Mainland · 20+ Years</Eyebrow>
            <h1 style={{
              fontFamily: 'var(--font-display)', textTransform: 'uppercase', color: 'var(--paper-100)',
              fontSize: 'clamp(3rem, 6vw, 5.25rem)', lineHeight: 0.94, letterSpacing: '-0.01em',
              margin: '18px 0 0', fontWeight: 800,
            }}>
              Roofs Built<br />To <span style={{ color: 'var(--ember-400)' }}>Last</span>
            </h1>
            <p style={{
              color: 'var(--slate-300)', fontSize: 'clamp(1.05rem, 1.5vw, 1.25rem)', lineHeight: 1.55,
              margin: '22px 0 0', maxWidth: 520, fontWeight: 400,
            }}>
              Danny's been keeping Vancouver homes dry for over two decades. Flat, sloped, and cedar.
              Honest quotes, clean job sites, and work that holds up to a West Coast winter.
            </p>

            <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={onQuote}
                iconRight={<i data-lucide="arrow-right" style={{ width: 19, height: 19 }}></i>}>
                Get a Free Quote
              </Button>
              <Button variant="outline" size="lg"
                style={{ color: 'var(--paper-100)', borderColor: 'rgba(255,255,255,0.3)' }}
                iconLeft={<i data-lucide="phone" style={{ width: 17, height: 17 }}></i>}>
                604-690-8427
              </Button>
            </div>

            <div style={{ display: 'flex', gap: 22, marginTop: 40, alignItems: 'center', flexWrap: 'wrap' }}>
              <Badge variant="dark" icon={<i data-lucide="calendar" style={{ width: 14, height: 14 }}></i>}
                style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.16)', color: 'var(--paper-100)' }}>
                20+ Years Experience
              </Badge>
              <span style={{ width: 1, height: 22, background: 'rgba(255,255,255,0.15)' }} className="dx-divider"></span>
              <Badge variant="dark" icon={<i data-lucide="shield-check" style={{ width: 14, height: 14 }}></i>}
                style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.16)', color: 'var(--paper-100)' }}>
                Licensed &amp; Insured
              </Badge>
            </div>
          </div>

          <div className="dx-hero-media" style={{ position: 'relative' }}>
            <img
              src="assets/photos/hero-commercial-roof-drone-v3.png"
              alt="Commercial torch-on roofing job by Danex Roofing on a downtown Vancouver rooftop"
              className="dx-roofline-top"
              style={{
                display: 'block', width: '100%', height: 500, borderRadius: 'var(--radius-lg)',
                objectFit: 'cover', objectPosition: 'center',
              }}
            />
            <div style={{
              position: 'absolute', left: 20, bottom: 20, display: 'flex', alignItems: 'center', gap: 12,
              background: 'var(--surface-raised)', borderRadius: 'var(--radius-md)',
              boxShadow: 'var(--shadow-lg)', padding: '12px 16px',
            }}>
              <span style={{
                width: 40, height: 40, borderRadius: '50%', background: 'var(--accent-soft)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', flexShrink: 0,
              }}><i data-lucide="flame" style={{ width: 19, height: 19 }}></i></span>
              <div style={{ lineHeight: 1.25 }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>Torch-on specialist</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>Flat roofs are Danny's trade</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* signature roofline: paper rises into the dark band with a roof peak */}
      <div className="dx-roofline-top" style={{ position: 'relative', zIndex: 2, height: 60, background: 'var(--surface-base)' }}></div>
    </section>
  );
}

window.Hero = Hero;