/* global React */
// Residential page — dream home builders

/* ================== HERO ================== */
const ResidentialHero = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ background: 'var(--ra-bg)', paddingTop: 72, paddingBottom: 0, position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 64, alignItems: 'end', minHeight: 640 }}>
        <div style={{ paddingBottom: 80 }}>
          <div className="ra-label ra-label-tick" style={{ marginBottom: 12 }}>
            The Foundation of Mysore's Homes
          </div>
          <div className="ra-kn-strap" style={{ color: 'var(--ra-muted)', marginBottom: 28, fontSize: 15 }}>
            ೧೯೭೨ ರಿಂದ ಮೈಸೂರಿನ ಕನಸಿನ ಮನೆ ನಿರ್ಮಾಣ
          </div>
          <h1 className="ra-display-xl" style={{ lineHeight: 0.88, marginBottom: 32 }}>
            The Engineer's Choice<br />
            For Your <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>Dream Home.</span>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--ra-muted)', maxWidth: 520, lineHeight: 1.7, marginBottom: 40 }}>
            Building your first home in Mysore is a once-in-a-lifetime journey.
            Trust the technical expertise of Raghuveer Agencies — Mysore's premier
            UltraTech partner since 1972. From foundation to finishing, we have the
            right grade for every stage.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://wa.me/919448055225?text=Hi%2C+I%27d+like+to+plan+my+home+building+project." className="ra-btn ra-btn--yellow ra-btn--lg">
              Plan Your Home Building
              <RaIcon name="arrow-right" size={14} stroke={2.5} />
            </a>
            <a href="https://wa.me/919448055225" className="ra-btn ra-btn--ghost ra-btn--lg">
              WhatsApp an Expert
            </a>
          </div>

          {/* trust stats */}
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', borderTop: '1px solid var(--ra-border)', paddingTop: 28, gap: 24 }}>
            {[
              ['54', 'Years supplying Mysore'],
              ['12,000+', 'Homes built'],
              ['OPC·PPC·RMC', 'Full UltraTech range'],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="ra-h1" style={{ fontSize: 36, lineHeight: 1 }}>{n}</div>
                <div className="ra-label" style={{ marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* hero image */}
        <div style={{ position: 'relative', height: '100%', minHeight: 640, background: 'var(--ra-ink)', overflow: 'hidden' }}>
          <img
            src="assets/residential-hero-home.jpg"
            alt="Beautiful residential home built with UltraTech cement in Mysore"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%)' }} />
          {/* yellow badge */}
          <div style={{ position: 'absolute', bottom: 0, left: 0, background: 'var(--ra-yellow)', padding: '18px 22px' }}>
            <div className="ra-mono" style={{ fontSize: 10, letterSpacing: 2, color: 'var(--ra-ink)', marginBottom: 4 }}>AUTHORIZED DEALER</div>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 900, textTransform: 'uppercase', fontSize: 18, lineHeight: 1, color: 'var(--ra-ink)' }}>
              UltraTech<br/>Building Solutions
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

/* ================== CONSTRUCTION STAGES ================== */
const STAGES = [
  {
    no: '01',
    title: 'Foundation & Plinth',
    kn: 'ಅಡಿಪಾಯ ಮತ್ತು ಪ್ಲಿಂತ್',
    desc: 'The most critical stage. Use OPC 53 with precise water-cement ratio for maximum load-bearing capacity and crack resistance.',
    recommended: 'UltraTech OPC 53',
    dark: false,
  },
  {
    no: '02',
    title: 'Column & Beam',
    kn: 'ಕಾಲಂ ಮತ್ತು ಬೀಮ್',
    desc: 'Structural skeleton of your home. OPC 53 Grade ensures the compressive strength your engineer specifies in the design.',
    recommended: 'UltraTech OPC 53',
    dark: true,
    img: 'assets/residential-slab-pour.jpg',
  },
  {
    no: '03',
    title: 'Walling & Plaster',
    kn: 'ಗೋಡೆ ಮತ್ತು ಪ್ಲಾಸ್ಟರ್',
    desc: 'Apply UltraTech PPC for damp-proofing and preventing salt efflorescence on exterior surfaces. Workable and crack-resistant.',
    recommended: 'UltraTech PPC',
    dark: false,
    img: 'assets/residential-wall-plaster.jpg',
  },
  {
    no: '04',
    title: 'Slab & Roofing',
    kn: 'ಸ್ಲ್ಯಾಬ್ ಮತ್ತು ಛಾವಣಿ',
    desc: 'RMC M25 grade is ideal for seamless slab casting with reduced structural joints and leak-proof performance.',
    recommended: 'UltraTech RMC M25',
    dark: true,
  },
];

const ConstructionStages = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: isMobile ? '48px 0' : '96px 0', background: 'var(--ra-bg-alt)', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 56, alignItems: 'start' }}>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>01 / STAGES</div>
        <div>
          <h2 className="ra-display-m" style={{ marginBottom: 14 }}>Construction<br/>Stage Guide.</h2>
          <p style={{ fontSize: 16, color: 'var(--ra-muted)', maxWidth: 560, lineHeight: 1.7 }}>
            The right cement grade at every stage of your home. Our team has guided
            12,000+ Mysore homes from first pour to final finish.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 2, background: 'var(--ra-border)' }}>
        {STAGES.map(s => (
          <div key={s.no} style={{
            background: s.dark ? 'var(--ra-ink)' : '#fff',
            color: s.dark ? '#fff' : 'var(--ra-ink)',
            padding: '44px 40px',
            minHeight: 360,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden'
          }}>
            {s.img && (
              <div style={{
                position: 'absolute', top: 0, right: 0, bottom: 0, width: '45%',
                backgroundImage: `linear-gradient(90deg, ${s.dark ? '#1A1A1A' : '#fff'} 0%, rgba(0,0,0,0) 60%), url("${s.img}")`,
                backgroundSize: 'cover', backgroundPosition: 'center',
                pointerEvents: 'none', opacity: s.dark ? 0.6 : 0.5
              }}/>
            )}
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <div className="ra-mono" style={{ color: s.dark ? 'var(--ra-yellow)' : 'var(--ra-muted)', fontSize: 11, letterSpacing: 2 }}>{s.no} / 04</div>
                <div style={{
                  background: s.dark ? 'var(--ra-yellow)' : 'var(--ra-ink)',
                  color: s.dark ? 'var(--ra-ink)' : '#fff',
                  padding: '4px 10px',
                  fontFamily: 'var(--ra-font-body)', fontWeight: 600,
                  fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase'
                }}>
                  {s.recommended}
                </div>
              </div>
              <div className="ra-kn-label" style={{ color: s.dark ? '#8A8A8A' : 'var(--ra-muted)', marginBottom: 10 }}>
                {s.kn}
              </div>
              <h3 className="ra-display-s" style={{ color: s.dark ? '#fff' : 'var(--ra-ink)', fontSize: 40, lineHeight: 1, marginBottom: 20 }}>
                {s.title}
              </h3>
              <p style={{ color: s.dark ? '#B8B8B8' : 'var(--ra-muted)', lineHeight: 1.7, fontSize: 15, maxWidth: 420 }}>
                {s.desc}
              </p>
            </div>
            <div style={{ marginTop: 32, position: 'relative' }}>
              <a
                href="https://wa.me/919448055225?text=Hi%2C+I+need+guidance+on+cement+grades+for+my+home+construction."
                className={`ra-btn ra-btn--sm ${s.dark ? 'ra-btn--yellow' : 'ra-btn--ghost'}`}
              >
                Ask an Expert
                <RaIcon name="arrow-right" size={12} stroke={2.5} />
              </a>
            </div>
          </div>
        ))}
      </div>

      {/* CTA strip */}
      <div style={{
        marginTop: 2, background: 'var(--ra-ink)', color: '#fff',
        padding: '36px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32
      }}>
        <div>
          <div className="ra-label" style={{ color: 'var(--ra-yellow)', marginBottom: 10 }}>Not sure which grade?</div>
          <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 22, lineHeight: 1 }}>
            Talk to our team — 54 years of on-site expertise.
          </div>
        </div>
        <a href="https://wa.me/919448055225" className="ra-btn ra-btn--yellow ra-btn--lg" style={{ flexShrink: 0 }}>
          WhatsApp Us Now
          <RaIcon name="arrow-right" size={14} stroke={2.5} />
        </a>
      </div>
    </div>
  </section>
  );
};

/* ================== RESIDENTIAL PRODUCTS ================== */
const ResidentialProducts = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: isMobile ? '48px 0' : '96px 0', background: '#fff', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 56 }}>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>02 / PRODUCTS</div>
        <div>
          <h2 className="ra-display-m" style={{ marginBottom: 14 }}>The Material<br/>Portfolio.</h2>
          <p style={{ fontSize: 16, color: 'var(--ra-muted)', maxWidth: 560, lineHeight: 1.7 }}>
            Every product in our residential range is an authorised UltraTech product —
            batch-certified and directly sourced.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 2, background: 'var(--ra-border)' }}>
        {/* OPC 53 */}
        <div style={{ background: 'var(--ra-bg-alt)', padding: '40px 36px', display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ height: 260, background: '#EDE6DD', overflow: 'hidden', position: 'relative' }}>
            <img src="assets/product-opc53-bag.jpg" alt="UltraTech OPC 53 Cement Bag"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div>
            <div style={{ background: 'var(--ra-yellow)', display: 'inline-block', padding: '3px 10px', marginBottom: 10 }}>
              <span className="ra-label">OPC 53</span>
            </div>
            <h3 className="ra-h2" style={{ marginBottom: 10 }}>UltraTech OPC 53</h3>
            <div className="ra-kn-label" style={{ marginBottom: 12 }}>ಹೆಚ್ಚು ಶಕ್ತಿಯ ನಿರ್ಮಾಣಕ್ಕೆ</div>
            <p style={{ color: 'var(--ra-muted)', fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
              High-strength cement for foundations, columns, slabs and structural work.
              53 MPa compressive strength as per IS 12269:2013.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
              {['IS 12269', '53 Grade', 'Structural', 'Foundations'].map(t => (
                <span key={t} style={{ border: '1px solid var(--ra-border-strong)', padding: '3px 8px', fontSize: 11, fontWeight: 600 }}>{t}</span>
              ))}
            </div>
            <a href="https://wa.me/919448055225?text=Hi%2C+I+need+a+quote+for+UltraTech+OPC+53+cement." className="ra-btn ra-btn--sm">
              ASK AN EXPERT <RaIcon name="arrow-right" size={12} stroke={2.5} />
            </a>
          </div>
        </div>

        {/* PPC */}
        <div style={{ background: 'var(--ra-ink)', color: '#fff', padding: '40px 36px', display: 'flex', flexDirection: 'column', gap: 24, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 0, right: 0, width: 64, height: 64, background: 'var(--ra-yellow)' }} />
          <div style={{ height: 260, background: '#0E0E0E', overflow: 'hidden', position: 'relative' }}>
            <img src="assets/product-ppc-bag.jpg" alt="UltraTech PPC Cement Bag"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div>
            <div style={{ background: 'var(--ra-yellow)', display: 'inline-block', padding: '3px 10px', marginBottom: 10 }}>
              <span className="ra-label" style={{ color: 'var(--ra-ink)' }}>PPC · Most Ordered</span>
            </div>
            <h3 className="ra-h2" style={{ color: '#fff', marginBottom: 10 }}>UltraTech PPC</h3>
            <div className="ra-kn-label" style={{ color: '#8A8A8A', marginBottom: 12 }}>ಗೋಡೆ ಮತ್ತು ಪ್ಲಾಸ್ಟರ್‌ಗೆ ಸೂಕ್ತ</div>
            <p style={{ color: '#B8B8B8', fontSize: 14, lineHeight: 1.7, marginBottom: 20 }}>
              Portland Pozzolana Cement for walls, plastering and general construction.
              Damp-proof and resistant to Mysore monsoon conditions.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
              {['IS 1489', 'Damp-Proof', 'Plaster', 'General'].map(t => (
                <span key={t} style={{ border: '1px solid #2A2A2A', padding: '3px 8px', fontSize: 11, fontWeight: 600, color: '#EDEDED' }}>{t}</span>
              ))}
            </div>
            <a href="https://wa.me/919448055225?text=Hi%2C+I+need+a+quote+for+UltraTech+PPC+cement." className="ra-btn ra-btn--yellow ra-btn--sm">
              ASK AN EXPERT <RaIcon name="arrow-right" size={12} stroke={2.5} />
            </a>
          </div>
        </div>

        {/* Weather Pro + Building Solutions */}
        <div style={{ background: 'var(--ra-bg-alt)', padding: '40px 36px', display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ borderBottom: '1px solid var(--ra-border)', paddingBottom: 28 }}>
            <div style={{ background: 'var(--ra-ink)', color: '#fff', display: 'inline-block', padding: '3px 10px', marginBottom: 10 }}>
              <span className="ra-label" style={{ color: '#fff' }}>Weather Pro</span>
            </div>
            <h3 className="ra-h3" style={{ marginBottom: 8 }}>UltraTech Weather Pro</h3>
            <p style={{ color: 'var(--ra-muted)', fontSize: 13, lineHeight: 1.7, marginBottom: 16 }}>
              Water-repellent cement that protects walls against the heavy Mysore monsoons.
              Prevents efflorescence and damp patches.
            </p>
            <a href="https://wa.me/919448055225?text=Hi%2C+I+need+UltraTech+Weather+Pro." className="ra-btn ra-btn--sm ra-btn--ghost">
              Enquire <RaIcon name="arrow-right" size={12} stroke={2.5} />
            </a>
          </div>
          <div>
            <div style={{ background: 'var(--ra-yellow)', display: 'inline-block', padding: '3px 10px', marginBottom: 10 }}>
              <span className="ra-label">Building Solutions</span>
            </div>
            <h3 className="ra-h3" style={{ marginBottom: 8 }}>UltraTech Building Solutions</h3>
            <p style={{ color: 'var(--ra-muted)', fontSize: 13, lineHeight: 1.7, marginBottom: 16 }}>
              Waterproofing systems, tile adhesives, grouts and construction chemicals
              for the complete build.
            </p>
            <a href="https://wa.me/919448055225?text=Hi%2C+I%27d+like+to+know+more+about+UltraTech+Building+Solutions." className="ra-btn ra-btn--sm ra-btn--ghost">
              See Range <RaIcon name="arrow-right" size={12} stroke={2.5} />
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

/* ================== TESTIMONIAL ================== */
const ResidentialTestimonial = () => (
  <section style={{ background: 'var(--ra-ink)', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle, #2A2A2A 1px, transparent 1px)', backgroundSize: '40px 40px', opacity: 0.4 }} />
    <div className="ra-container" style={{ position: 'relative', textAlign: 'center' }}>
      <div style={{ fontSize: 80, color: 'var(--ra-yellow)', fontFamily: 'Georgia, serif', lineHeight: 0.6, marginBottom: 40 }}>"</div>
      <blockquote style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 700, fontSize: 'clamp(24px, 3vw, 40px)', color: '#fff', lineHeight: 1.2, maxWidth: 900, margin: '0 auto 48px', fontStyle: 'italic', textTransform: 'uppercase' }}>
        "When building our home in Vijayanagar, we didn't want to compromise.
        Raghuveer Agencies delivered peace of mind with technical guidance
        and quality UltraTech materials throughout."
      </blockquote>
      <div>
        <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 18, color: '#fff', textTransform: 'uppercase', letterSpacing: 1 }}>
          Arjun &amp; Meera Raghavan
        </div>
        <div className="ra-label" style={{ color: 'var(--ra-yellow)', marginTop: 6 }}>
          Homeowners · Vijayanagar, Mysuru
        </div>
      </div>
    </div>
  </section>
);

/* ================== WHY CHOOSE US ================== */
const WhyIcon = ({ type }) => {
  const s = { width: 28, height: 28, fill: 'none', stroke: 'var(--ra-ink)', strokeWidth: 2, strokeLinecap: 'square', strokeLinejoin: 'miter', display: 'block' };
  if (type === 'badge') return (
    <svg viewBox="0 0 24 24" style={s}>
      <circle cx="12" cy="8" r="6"/><path d="M8 14l-3 7 7-3 7 3-3-7"/>
      <path d="M9 8l2 2 4-4" strokeWidth="1.8"/>
    </svg>
  );
  if (type === 'truck') return (
    <svg viewBox="0 0 24 24" style={s}>
      <rect x="2" y="7" width="14" height="11" rx="0"/><path d="M16 10h4l2 4v4h-6V10z"/>
      <circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>
    </svg>
  );
  if (type === 'tool') return (
    <svg viewBox="0 0 24 24" style={s}>
      <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
    </svg>
  );
  if (type === 'star') return (
    <svg viewBox="0 0 24 24" style={s}>
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
    </svg>
  );
  return null;
};

const WHY = [
  {
    icon: 'badge',
    title: 'Authorised UltraTech Dealer',
    kn: 'ಅಧಿಕೃತ ಡೀಲರ್',
    desc: 'Every bag is genuine, batch-certified UltraTech product direct from the manufacturing plant. No substandard substitutes.'
  },
  {
    icon: 'truck',
    title: 'Scheduled Site Delivery',
    kn: 'ಸೈಟ್‌ಗೆ ತಲುಪಿಸುವಿಕೆ',
    desc: 'We deliver across Mysuru and Mandya districts. Coordinated with your pour and project schedule. Contact us to arrange.'
  },
  {
    icon: 'tool',
    title: 'Technical Expert Support',
    kn: 'ತಾಂತ್ರಿಕ ಸಹಾಯ',
    desc: 'Not sure which grade or quantity? Our team provides guidance on mix design, bag counts and product selection. 54 years of site knowledge.'
  },
  {
    icon: 'star',
    title: 'Since 1972 — Trusted Legacy',
    kn: '೧೯೭೨ ರಿಂದ ನಂಬಿಕೆ',
    desc: 'Founded by D. Keerthi Kumar. Three generations of Mysore builders have trusted us. 12,000+ homes built across the region.'
  },
];

const WhyChooseUs = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: isMobile ? '48px 0' : '96px 0', background: 'var(--ra-bg)', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 56 }}>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>03 / WHY US</div>
        <div>
          <h2 className="ra-display-m" style={{ marginBottom: 14 }}>Why Mysore<br/>Builds With Us.</h2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 2, background: 'var(--ra-border)' }}>
        {WHY.map((w, i) => (
          <div key={i} style={{ background: i % 2 === 0 ? '#fff' : 'var(--ra-bg-alt)', padding: '44px 40px', display: 'flex', gap: 24 }}>
            <div style={{
              width: 48, height: 48, flexShrink: 0,
              border: '1px solid var(--ra-border-strong)',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <WhyIcon type={w.icon} />
            </div>
            <div>
              <h3 className="ra-h3" style={{ marginBottom: 6 }}>{w.title}</h3>
              <div className="ra-kn-label" style={{ marginBottom: 12 }}>{w.kn}</div>
              <p style={{ color: 'var(--ra-muted)', fontSize: 14, lineHeight: 1.7 }}>{w.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};

/* ================== FINAL CTA ================== */
const ResidentialCTA = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: '0 0 96px', background: 'var(--ra-bg)' }}>
    <div className="ra-container">
      <div style={{ background: 'var(--ra-yellow)', padding: isMobile ? '48px 24px' : '72px 64px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: 48, alignItems: 'center' }}>
        <div>
          <div className="ra-label" style={{ color: 'var(--ra-ink)', marginBottom: 16 }}>Ready to start?</div>
          <h2 className="ra-display-m" style={{ color: 'var(--ra-ink)', lineHeight: 0.92, marginBottom: 20 }}>
            Ready to Lay<br />the First Brick?
          </h2>
          <p style={{ color: 'var(--ra-ink)', opacity: 0.7, fontSize: 17, lineHeight: 1.65, maxWidth: 560 }}>
            Get a material estimate and expert consultation for your residential project.
            Use our calculator or call us directly.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, flexShrink: 0 }}>
          <a href="Calculator.html" className="ra-btn ra-btn--lg" style={{ background: 'var(--ra-ink)', borderColor: 'var(--ra-ink)', color: '#fff', justifyContent: 'center' }}>
            Get Free Estimate
            <RaIcon name="arrow-right" size={14} stroke={2.5} />
          </a>
          <a href="tel:+919448055225" className="ra-btn ra-btn--ghost ra-btn--lg" style={{ justifyContent: 'center' }}>
            Call +91 94480 55225
          </a>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { ResidentialHero, ConstructionStages, ResidentialProducts, ResidentialTestimonial, WhyChooseUs, ResidentialCTA });