// US Demolition — Services + Before/After + Process sections
const DS2 = window.USDemolitionDesignSystem_311b2f;
const { Button: Btn2, Badge: Bdg2, Card: Crd2, SectionHeading: SHd2, ServiceCard: SC2, BeforeAfter: BA2 } = DS2;

const SERVICES_DATA = [
{ index: '01', title: 'Interior Demolition', image: 'assets/project-site-2.jpg', description: 'Full interior gut-outs for whole-home or room-by-room renovation prep. We strip everything cleanly and safely, ready for your next contractor.' },
{ index: '02', title: 'Drywall Removal', image: 'assets/retaining-wall-4.jpg', description: 'Fast, clean drywall tear-out with controlled dust and organized debris removal. Walls stripped to the frame without damage to the structure.' },
{ index: '03', title: 'Flooring Removal', image: 'assets/grading-4.jpg', description: 'Tile, hardwood, vinyl, carpet and subfloor removal. Surface cleared and ready for the next install — no residue, no mess left behind.' },
{ index: '04', title: 'Concrete Removal', image: 'assets/concrete-demo-1.jpg', description: 'Driveways, slabs, pool decks, patios and foundations removed clean and hauled off-site. We break, remove and leave the area ready.' },
{ index: '05', title: 'Commercial Demolition', image: 'assets/commercial-demo.jpg', description: 'Offices, retail spaces and business properties cleared professionally. Minimal downtime, organized execution, full debris removal.' },
{ index: '06', title: 'Site Clearing & Grading', image: 'assets/grading-1.jpg', description: 'Lot clearing, grading and site prep for new construction. We clear brush, debris and old concrete — land ready to build.' }];


/* ────────────────────────────────────────────
   SERVICES
──────────────────────────────────────────── */
function SiteServices({ onEstimate }) {
  const cardHover = e => {
    e.currentTarget.style.transform = 'translateY(-4px)';
    e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.5)';
  };
  const cardLeave = e => {
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = 'none';
  };

  return (
    <section id="services" style={{ background: 'var(--black-950)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <SHd2 eyebrow="What We Do" title="Demolition Services" align="center" />
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '560px', margin: '16px auto 52px' }}>
          Residential, commercial and specialty demolition across South Florida. Every job handled with safety, precision and complete site cleanup.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px' }} className="usd-service-grid">
          {SERVICES_DATA.slice(0, 3).map((s) => (
            <div key={s.index} style={{ background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderTop: s.image ? 'none' : '3px solid var(--gold-700)', borderRadius: '6px', overflow: 'hidden', transition: 'transform 0.2s, box-shadow 0.2s' }}
              onMouseEnter={cardHover} onMouseLeave={cardLeave}>
              {s.image && (
                <div style={{ position: 'relative', height: '220px', overflow: 'hidden' }}>
                  <img src={s.image} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s', filter: 'saturate(1.05)' }}
                    onMouseEnter={e => e.target.style.transform = 'scale(1.05)'}
                    onMouseLeave={e => e.target.style.transform = 'scale(1)'} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(6,6,6,0.7) 0%, transparent 60%)' }} />
                  <div style={{ position: 'absolute', top: '14px', left: '14px', fontFamily: 'var(--font-display)', fontSize: '28px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>{s.index}</div>
                </div>
              )}
              <div style={{ padding: '24px' }}>
                {!s.image && (
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: '36px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', marginBottom: '14px' }}>{s.index}</div>
                )}
                <h3 style={{ margin: '0 0 10px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '16px', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--white)' }}>{s.title}</h3>
                <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.65, color: 'var(--text-muted)' }}>{s.description}</p>
                <button onClick={onEstimate} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--gold-400)', display: 'flex', alignItems: 'center', gap: '6px', transition: 'color 0.15s' }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--gold-300)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--gold-400)'}>
                  Get Estimate <span style={{ fontSize: '16px', lineHeight: 1 }}>→</span>
                </button>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px', marginTop: '24px' }} className="usd-service-grid">
          {SERVICES_DATA.slice(3).map((s) => (
            <div key={s.index} style={{ background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderTop: s.image ? 'none' : '3px solid var(--gold-700)', borderRadius: '6px', overflow: 'hidden', transition: 'transform 0.2s, box-shadow 0.2s' }}
              onMouseEnter={cardHover} onMouseLeave={cardLeave}>
              {s.image && (
                <div style={{ position: 'relative', height: '220px', overflow: 'hidden' }}>
                  <img src={s.image} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s', filter: 'saturate(1.05)' }}
                    onMouseEnter={e => e.target.style.transform = 'scale(1.05)'}
                    onMouseLeave={e => e.target.style.transform = 'scale(1)'} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(6,6,6,0.7) 0%, transparent 60%)' }} />
                  <div style={{ position: 'absolute', top: '14px', left: '14px', fontFamily: 'var(--font-display)', fontSize: '28px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>{s.index}</div>
                </div>
              )}
              <div style={{ padding: '24px' }}>
                {!s.image && (
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: '36px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', marginBottom: '14px' }}>{s.index}</div>
                )}
                <h3 style={{ margin: '0 0 10px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '16px', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--white)' }}>{s.title}</h3>
                <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.65, color: 'var(--text-muted)' }}>{s.description}</p>
                <button onClick={onEstimate} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--gold-400)', display: 'flex', alignItems: 'center', gap: '6px', transition: 'color 0.15s' }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--gold-300)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--gold-400)'}>
                  Get Estimate <span style={{ fontSize: '16px', lineHeight: 1 }}>→</span>
                </button>
              </div>
            </div>
          ))}
        </div>
        {/* Additional services strip */}
        <div style={{ marginTop: '40px', background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderRadius: '6px', padding: '24px 28px', display: 'flex', flexWrap: 'wrap', gap: '12px 28px', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '.16em', color: 'var(--gold-500)', marginRight: '8px' }}>Also:</span>
          {['Bathroom & Kitchen Demo', 'Wall Removal', 'Pool Demolition', 'Residential Teardowns', 'Debris Hauling', 'Retaining Wall Demo'].map(s => (
            <span key={s} style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--ash-200)', display: 'flex', alignItems: 'center', gap: '7px' }}>
              <span style={{ color: 'var(--gold-700)', fontSize: '12px' }}>✓</span> {s}
            </span>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: '48px' }}>
          <Btn2 variant="primary" size="lg" onClick={onEstimate}>Request a Free Estimate</Btn2>
        </div>
      </div>
    </section>);
}

/* ────────────────────────────────────────────
   PROCESS
──────────────────────────────────────────── */
function SiteProcess({ onEstimate }) {
  const steps = [
  { n: '01', t: 'Send Your Project Details', d: 'Tell us what needs to be removed and where the project is located. Photos help us give you an accurate estimate.' },
  { n: '02', t: 'Get a Free Estimate', d: 'We review the project and provide a clear estimate and timeline. No charge, no obligation.' },
  { n: '03', t: 'Schedule the Demolition', d: 'Our team plans the work with safety, access and cleanup in mind. We handle permits when required.' },
  { n: '04', t: 'Demolition & Site Cleanup', d: 'We remove, haul and leave the space ready for the next phase — graded, swept and inspection-ready.' }];

  return (
    <section id="process" style={{ background: 'var(--black-950)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <SHd2 eyebrow="How It Works" title="A Clear Process from Estimate to Cleanup" align="center" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px', marginTop: '52px' }} className="usd-process-grid">
          {steps.map((s, i) =>
          <div key={s.n} style={{ position: 'relative' }}>
              {/* Connector line */}
              {i < steps.length - 1 &&
            <div style={{ position: 'absolute', top: '22px', left: 'calc(50% + 32px)', right: '-10px', height: '2px', background: 'linear-gradient(to right, var(--gold-700), var(--steel-500))', zIndex: 0 }} className="usd-connector" />
            }
              <Crd2 goldRule style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '52px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>{s.n}</div>
                <h3 style={{ margin: '16px 0 10px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '15px', textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--white)' }} dangerouslySetInnerHTML={{ __html: s.t }} />
                <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.65, color: 'var(--text-muted)' }}>{s.d}</p>
              </Crd2>
            </div>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: '48px' }}>
          <Btn2 variant="primary" size="lg" onClick={onEstimate}>Start with a Free Estimate</Btn2>
        </div>
      </div>
    </section>);
}

window.SiteServices = SiteServices;
window.SiteProcess = SiteProcess;
