// US Demolition — Trust + About + CTA Mid + FAQ + Form + Final CTA + Footer
const DS3 = window.USDemolitionDesignSystem_311b2f;
const { Button: Btn3, Badge: Bdg3, Card: Crd3, Input: Inp3, SectionHeading: SHd3, Stat: St3 } = DS3;

const PHONE = '+1 (239) 603-3998';
const INSTAGRAM_URL = 'https://www.instagram.com/us_demolition/';

const TRUST_ICONS = {
  shield: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>`,
  trash: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`,
  building: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 012-2h8a2 2 0 012 2v18z"/><path d="M6 12H4a2 2 0 00-2 2v6a2 2 0 002 2h2"/><path d="M18 9h2a2 2 0 012 2v9a2 2 0 01-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>`,
  message: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>`,
  clipboard: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>`,
  home: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
  mappin: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>`,
};

const CONTACT_ICONS = {
  phone: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.7 19.79 19.79 0 01.01 1.13 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`,
  mail: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`,
  instagram: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--gold-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><path d="M17.5 6.5h.01"/></svg>`,
};

/* ────────────────────────────────────────────
   TRUST / WHY US
──────────────────────────────────────────── */
function SiteTrust() {
  const pillars = [
    { iconKey: 'shield', title: 'Licensed & Insured', desc: 'Fully licensed and insured for residential and commercial demolition work in Florida.' },
    { iconKey: 'settings', title: 'Dust-Controlled Process', desc: 'We use plastic barriers and dust control on every interior job to protect the space.' },
    { iconKey: 'trash', title: 'Full Debris Removal', desc: 'All demo material hauled and disposed of. Site left swept and ready for the next trade.' },
    { iconKey: 'building', title: 'Residential & Commercial', desc: 'Demolition for homes, apartments, offices, retail and commercial properties.' },
    { iconKey: 'message', title: 'Fast Communication', desc: 'Quick responses, clear timelines and honest answers from the first call to the final sweep.' },
    { iconKey: 'clipboard', title: 'Free Estimates', desc: 'Send photos and project details — we quote fast with no obligation and no pressure.' },
    { iconKey: 'home', title: 'Drywall & Flooring', desc: 'Walls, drywall, tile, hardwood, subfloor, carpet and kitchen/bathroom removal.' },
    { iconKey: 'mappin', title: 'South Florida Based', desc: 'Local demolition team serving homeowners and contractors across South Florida.' },
  ];
  return (
    <section id="about" style={{ background: 'var(--black-900)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <SHd3 eyebrow="Why Choose Us" title="Why Property Owners Choose US Demolition" align="center" />
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '520px', margin: '16px auto 52px' }}>
          You need a demolition team that shows up, works safely and leaves the site ready for the next step.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '18px' }} className="usd-trust-grid">
          {pillars.map(p => (
            <div key={p.title} style={{ background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderRadius: '6px', padding: '26px 22px', transition: 'border-color 0.2s, transform 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--steel-500)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <div style={{ marginBottom: '12px', lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: TRUST_ICONS[p.iconKey] }} />
              <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--white)' }}>{p.title}</h3>
              <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '13px', lineHeight: 1.6, color: 'var(--text-muted)' }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   ABOUT
──────────────────────────────────────────── */
function SiteAbout() {
  return (
    <section style={{ background: 'var(--black-950)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '72px', alignItems: 'center' }} className="usd-about-grid">
        <div>
          <p style={{ margin: '0 0 12px', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.2em', color: 'var(--gold-500)' }}>About the Company</p>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.4rem, 4vw, 3.8rem)', lineHeight: 0.93, color: 'var(--white)' }}>
            BUILT TO BREAK.<br /><span style={{ background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>BUILT TO DELIVER.</span>
          </h2>
          <div style={{ width: '56px', height: '3px', background: 'var(--grad-gold)', margin: '24px 0' }} />
          <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.75, color: 'var(--text-muted)' }}>
            US Demolition specializes in residential and commercial demolition for renovation and new construction projects across South Florida. We handle interior demolition, concrete removal, site clearing, and full teardowns — with controlled execution, full debris removal, and a clean handoff to your next contractor.
          </p>
          <p style={{ margin: '18px 0 0', fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.75, color: 'var(--text-muted)' }}>
            We work directly with homeowners, general contractors and remodelers who need a reliable demolition crew that shows up on time, works clean, and delivers a ready site.
          </p>
          <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
            <Bdg3 variant="gold" shape="pill">Licensed &amp; Insured</Bdg3>
            <Bdg3 variant="solid">South Florida</Bdg3>
            <Bdg3 variant="solid">Free Estimates</Bdg3>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <img src="assets/project-site-1.jpg" alt="US Demolition crew at a project site" style={{ width: '100%', borderRadius: '6px', display: 'block', filter: 'saturate(1.05)', objectFit: 'cover', maxHeight: '480px' }} />
          <div style={{ position: 'absolute', bottom: '-20px', left: '-20px', background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderTop: '3px solid var(--gold-500)', borderRadius: '6px', padding: '20px 24px', display: 'flex', gap: '28px' }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: '32px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>FL</div>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--text-muted)', marginTop: '4px' }}>Licensed</div>
            </div>
            <div style={{ width: '1px', background: 'var(--steel-500)' }} />
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: '32px', lineHeight: 1, background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>100%</div>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--text-muted)', marginTop: '4px' }}>Insured</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   CTA BAND (mid-page)
──────────────────────────────────────────── */
function SiteCtaMid({ onEstimate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '96px 40px' }}>
      <img src="assets/concrete-demo-3.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 50%', filter: 'saturate(1.1)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(6,6,6,0.87)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(224,168,46,0.08) 0%, transparent 55%)' }} />
      {/* Gold accent lines */}
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '3px', background: 'var(--grad-gold)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', height: '1px', background: 'var(--steel-500)' }} />
      <div style={{ position: 'relative', maxWidth: '720px', margin: '0 auto', textAlign: 'center' }}>
        <p style={{ margin: '0 0 14px', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.2em', color: 'var(--gold-500)' }}>Get Started Today</p>
        <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.4rem, 5vw, 4.4rem)', lineHeight: 0.92, color: 'var(--white)' }}>NEED SOMETHING REMOVED?</h2>
        <p style={{ margin: '22px 0 0', fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.65, color: 'var(--ash-100)', maxWidth: '520px', marginLeft: 'auto', marginRight: 'auto' }}>
          Tell us what needs to be demolished, removed, or cleared. We'll review your project details and provide a clear estimate.
        </p>
        <div style={{ display: 'flex', gap: '14px', marginTop: '36px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn3 variant="primary" size="lg" onClick={onEstimate}>Request a Free Estimate</Btn3>
          <a href={'tel:' + PHONE.replace(/\D/g, '')} style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--white)', textDecoration: 'none', border: '1px solid rgba(255,255,255,0.25)', borderRadius: '4px', padding: '14px 28px', transition: 'border-color 0.2s, color 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.color = 'var(--gold-300)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; e.currentTarget.style.color = 'var(--white)'; }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.7 19.79 19.79 0 01.01 1.13 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            {PHONE}
          </a>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   FAQ
──────────────────────────────────────────── */
function SiteFaq() {
  const items = [
    { q: 'Do you offer free estimates?', a: 'Yes. Send us your project details — photos and location help us give you an accurate quote. Our team will review the scope and get back to you within the same business day.' },
    { q: 'Do you handle residential demolition?', a: 'Yes. We provide residential demolition services for homeowners, property owners, investors and general contractors across South Florida.' },
    { q: 'Can you remove concrete?', a: 'Yes. We remove driveways, slabs, patios, pool decks, retaining walls and foundations — and haul everything off-site so the area is clear and ready.' },
    { q: 'Do you do interior demolition?', a: 'Yes. We handle selective interior demolition for remodels and renovations, including kitchens, bathrooms, drywall, flooring and full gut-outs.' },
    { q: 'Is cleanup included?', a: 'Yes. Site cleanup and full debris removal are included in our projects. We leave the site swept, organized and ready for the next phase of work.' },
    { q: 'Are you licensed and insured?', a: 'Yes. US Demolition is fully licensed and insured for residential and commercial demolition work in Florida.' },
    { q: 'What areas do you serve?', a: 'We serve South Florida including Miami-Dade, Broward and Palm Beach counties. Contact us to confirm coverage in your specific area.' },
    { q: 'How long does a demolition project take?', a: 'Timeline depends on the scope. Small interior jobs can be done in a day; full residential teardowns or concrete removal projects typically run 2–5 days. We provide a schedule with every estimate.' },
  ];
  const [open, setOpen] = React.useState(null);
  return (
    <section id="faq" style={{ background: 'var(--black-900)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <SHd3 eyebrow="FAQ" title="Common Questions" align="center" />
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '480px', margin: '16px auto 48px' }}>
          Everything you need to know before starting your demolition project.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
          {items.map((item, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--steel-500)', borderTop: i === 0 ? '1px solid var(--steel-500)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px 4px', gap: '20px', textAlign: 'left' }}>
                <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '16px', color: open === i ? 'var(--gold-300)' : 'var(--white)', textTransform: 'uppercase', letterSpacing: '.04em', transition: 'color 0.2s', lineHeight: 1.3 }}>{item.q}</span>
                <span style={{ color: 'var(--gold-500)', fontSize: '22px', flexShrink: 0, transition: 'transform 0.25s', transform: open === i ? 'rotate(45deg)' : 'none', display: 'inline-block', lineHeight: 1 }}>+</span>
              </button>
              {open === i && (
                <p style={{ margin: '0 4px 24px', fontFamily: 'var(--font-body)', fontSize: '16px', lineHeight: 1.7, color: 'var(--text-muted)' }}>{item.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   ESTIMATE FORM
──────────────────────────────────────────── */
function SiteForm() {
  const contacts = [
    { iconKey: 'phone', label: 'Call Us', val: PHONE, href: 'tel:' + PHONE.replace(/\D/g, '') },
    { iconKey: 'instagram', label: 'Instagram', val: '@us_demolition', href: INSTAGRAM_URL },
  ];

  return (
    <section id="contact" style={{ background: 'var(--black-950)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)' }}>
      <div style={{ maxWidth: '700px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '52px' }}>
          <p style={{ margin: '0 0 12px', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.2em', color: 'var(--gold-500)' }}>Get In Touch</p>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.2rem, 4vw, 3.4rem)', lineHeight: 0.94, color: 'var(--white)' }}>REQUEST YOUR FREE ESTIMATE</h2>
          <div style={{ width: '56px', height: '3px', background: 'var(--grad-gold)', margin: '24px auto' }} />
          <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '480px', marginLeft: 'auto', marginRight: 'auto' }}>Reach out by phone or Instagram and we'll get back to you within the same business day.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
          {contacts.map(c => (
            <a key={c.label} href={c.href} target={c.iconKey === 'instagram' ? '_blank' : undefined} rel={c.iconKey === 'instagram' ? 'noopener noreferrer' : undefined}
              style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px', textDecoration: 'none', padding: '32px 20px', background: 'var(--surface-card)', border: '1px solid var(--steel-500)', borderRadius: '6px', transition: 'border-color 0.2s, transform 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--steel-500)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <div style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: CONTACT_ICONS[c.iconKey] }} />
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--text-muted)', marginBottom: '6px' }}>{c.label}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '16px', color: 'var(--white)' }}>{c.val}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   FINAL CTA
──────────────────────────────────────────── */
function SiteCtaFinal({ onEstimate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--black-950)', padding: '96px 40px', borderTop: '1px solid var(--steel-500)', textAlign: 'center' }}>
      <img src="assets/retaining-wall-6.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', opacity: 0.12, filter: 'saturate(0.5)' }} />
      <div style={{ position: 'relative', maxWidth: '700px', margin: '0 auto' }}>
        <p style={{ margin: '0 0 14px', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.2em', color: 'var(--gold-500)' }}>Ready to Start</p>
        <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.6rem, 5vw, 4.6rem)', lineHeight: 0.93, color: 'var(--white)' }}>
          READY TO START YOUR<br />
          <span style={{ background: 'var(--grad-gold)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>DEMOLITION PROJECT?</span>
        </h2>
        <p style={{ margin: '22px 0 0', fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.65, color: 'var(--text-muted)' }}>
          Get a professional demolition team to remove, clear and prepare your property — the right way, on schedule.
        </p>
        <div style={{ display: 'flex', gap: '14px', marginTop: '36px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn3 variant="primary" size="lg" onClick={onEstimate}>Get a Free Estimate</Btn3>
          <a href={'tel:' + PHONE.replace(/\D/g, '')} style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '15px', textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--white)', textDecoration: 'none', border: '1px solid var(--steel-500)', borderRadius: '4px', padding: '14px 28px', transition: 'border-color 0.2s, color 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.color = 'var(--gold-300)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--steel-500)'; e.currentTarget.style.color = 'var(--white)'; }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.7 19.79 19.79 0 01.01 1.13 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            Call Now: {PHONE}
          </a>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────── */
function SiteFooter() {
  return (
    <footer style={{ background: 'var(--black-950)', borderTop: '1px solid var(--steel-500)', padding: '64px 40px 36px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        {/* Top grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1.2fr', gap: '48px', paddingBottom: '48px', borderBottom: '1px solid var(--steel-500)' }} className="usd-footer-grid">
          {/* Brand */}
          <div>
            <img src="assets/logo-horizontal.png" alt="US Demolition" style={{ height: '44px', width: 'auto', marginBottom: '18px' }} />
            <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '280px' }}>
              Professional demolition services for residential and commercial projects across South Florida. Licensed &amp; insured.
            </p>
            <div style={{ display: 'flex', gap: '10px' }}>
              <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" title="Instagram" style={{ width: '38px', height: '38px', borderRadius: '4px', border: '1px solid var(--steel-500)', display: 'grid', placeItems: 'center', color: 'var(--gold-500)', textDecoration: 'none', transition: 'border-color 0.2s, background 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.background = 'var(--gold-tint)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--steel-500)'; e.currentTarget.style.background = 'transparent'; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><path d="M17.5 6.5h.01"/></svg>
              </a>
              <a href={'tel:' + PHONE.replace(/\D/g, '')} title="Call Us" style={{ width: '38px', height: '38px', borderRadius: '4px', border: '1px solid var(--steel-500)', display: 'grid', placeItems: 'center', color: 'var(--gold-500)', textDecoration: 'none', transition: 'border-color 0.2s, background 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-500)'; e.currentTarget.style.background = 'var(--gold-tint)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--steel-500)'; e.currentTarget.style.background = 'transparent'; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.7 19.79 19.79 0 01.01 1.13 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
              </a>
            </div>
          </div>
          {/* Services */}
          <div>
            <h4 style={{ margin: '0 0 18px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--white)' }}>Services</h4>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {['Interior Demolition', 'Residential Demolition', 'Commercial Demolition', 'Concrete Removal', 'Site Clearing', 'Flooring Removal', 'Debris Removal', 'Pool Demolition'].map(s => (
                <li key={s}><a href="#services" style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)', textDecoration: 'none', transition: 'color 0.15s' }}
                  onMouseEnter={e => e.target.style.color = 'var(--gold-300)'}
                  onMouseLeave={e => e.target.style.color = 'var(--text-muted)'}>{s}</a></li>
              ))}
            </ul>
          </div>
          {/* Areas */}
          <div>
            <h4 style={{ margin: '0 0 18px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--white)' }}>Service Area</h4>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {['Miami-Dade County', 'Broward County', 'Palm Beach County', 'Fort Lauderdale', 'Miami Beach', 'Coral Gables', 'Boca Raton', 'South Florida'].map(a => (
                <li key={a} style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)' }}>{a}</li>
              ))}
            </ul>
          </div>
          {/* Contact */}
          <div>
            <h4 style={{ margin: '0 0 18px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--white)' }}>Contact</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
              <a href={'tel:' + PHONE.replace(/\D/g, '')} style={{ fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--gold-300)', textDecoration: 'none', fontWeight: 500 }}>{PHONE}</a>
              <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)', textDecoration: 'none' }}
                onMouseEnter={e => e.target.style.color = 'var(--ash-100)'}
                onMouseLeave={e => e.target.style.color = 'var(--text-muted)'}>@us_demolition</a>
              <div style={{ marginTop: '4px' }}>
                <Bdg3 variant="gold">Licensed &amp; Insured</Bdg3>
              </div>
            </div>
          </div>
        </div>
        {/* Bottom bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '28px', flexWrap: 'wrap', gap: '14px' }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--steel-300)' }}>© 2026 US Demolition. All rights reserved. Florida Licensed &amp; Insured.</p>
          <p style={{ margin: 0, fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '.16em', color: 'var(--gold-700)' }}>Built to Break. Built to Deliver.</p>
        </div>
      </div>
    </footer>
  );
}

window.SiteTrust = SiteTrust;
window.SiteAbout = SiteAbout;
window.SiteCtaMid = SiteCtaMid;
window.SiteFaq = SiteFaq;
window.SiteForm = SiteForm;
window.SiteCtaFinal = SiteCtaFinal;
window.SiteFooter = SiteFooter;
