/* global React */
// Home page sections — UltraTech dealership for Raghuveer Agencies
const { useState: useStateHome } = React;

/* ================== HERO ================== */
const HomeHero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ra-bg)', paddingTop: 72, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.55fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>
              Engineered for Strength · Mysore Since 1972
            </div>
            <div className="ra-kn-strap" style={{ marginBottom: 32, color: 'var(--ra-muted)', fontSize: 15 }}>
              ೧೯೭೨ ರಿಂದ ಮೈಸೂರನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ
            </div>
            <h1 className="ra-display-xl" style={{ marginBottom: 36, letterSpacing: '-0.015em' }}>
              The Industrial<br />
              <span style={{ background: 'var(--ra-yellow)', padding: '0 18px' }}>Standard.</span>
            </h1>
            <p style={{
              fontSize: 18, lineHeight: 1.65, color: 'var(--ra-ink-2)',
              maxWidth: 580, marginBottom: 40
            }}>
              Authorized UltraTech Cement dealers in Mysore since 1972.
              Providing high-performance building solutions from <strong style={{ fontWeight: 700 }}>OPC 53</strong> to specialized
              <strong style={{ fontWeight: 700 }}> Ready Mix Concrete</strong> — across three generations of families,
              factories and infrastructure.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="ra-btn ra-btn--yellow ra-btn--lg">
                PLAN MY HOME BUILD
                <RaIcon name="arrow-right" size={14} stroke={2.5} />
              </a>
              <a href="#" className="ra-btn ra-btn--ghost ra-btn--lg">GET BULK PRICING</a>
            </div>

            {/* Stat row */}
            <div style={{
              marginTop: 72, display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
              borderTop: '1px solid var(--ra-border)', paddingTop: 28
            }}>
              {[
                ['54', 'Years of trust'],
                ['OPC·PPC', 'UltraTech full range'],
                ['Mysuru', 'Core delivery zone'],
                ['Scheduled', 'Site-coordinated delivery'],
              ].map(([n, l]) => (
                <div key={l}>
                  <div className="ra-h1" style={{ fontSize: 44 }}>{n}</div>
                  <div className="ra-label" style={{ marginTop: 10 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Hero panel — dramatic construction scene */}
          <div style={{ position: 'relative', paddingBottom: 8 }}>
            {/* Credential strip — sits above the photo */}
            <div style={{ background: 'transparent', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <img src="assets/ultratech-cement-logo.png" alt="UltraTech Cement"
                style={{ height: 36, objectFit: 'contain', display: 'block', filter: 'drop-shadow(0px 1px 3px rgba(0,0,0,0.4))' }} />
              <img src="assets/ultratech-building-solutions-logo.png" alt="UltraTech Building Solutions"
                style={{ height: 36, objectFit: 'contain', display: 'block', filter: 'drop-shadow(0px 1px 3px rgba(0,0,0,0.4))' }} />
              <div style={{
                background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
                padding: '8px 16px', fontFamily: 'var(--ra-font-display)',
                fontWeight: 800, fontSize: 11, letterSpacing: 2,
                textTransform: 'uppercase', whiteSpace: 'nowrap',
                filter: 'drop-shadow(0px 1px 3px rgba(0,0,0,0.4))'
              }}>
                AUTHORIZED DEALER
              </div>
            </div>
            <div style={{
              height: isMobile ? 320 : 620, background: 'var(--ra-ink)',
              position: 'relative', overflow: 'hidden'
            }}>
              <img
                src="assets/hero-construction-site.jpg"
                alt="Construction site workers at dawn"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                background: 'linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%)'
              }} />



              {/* top HUD */}
              <div style={{ position: 'absolute', top: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', zIndex: 2 }}>
                <div className="ra-label ra-label--on-dark" style={{ background: 'rgba(0,0,0,0.55)', padding: '8px 12px' }}>Site 04 · Hebbal Ind. Area</div>
                <div className="ra-mono" style={{ color: '#EDEDED', fontSize: 11, background: 'rgba(0,0,0,0.55)', padding: '8px 12px' }}>08:42 IST · LIVE POUR</div>
              </div>

              {/* yellow block corner */}
              <div style={{
                position: 'absolute', top: 0, right: 0, width: 140, height: 140,
                background: 'var(--ra-yellow)', display: 'flex', flexDirection: 'column',
                alignItems: 'flex-start', justifyContent: 'flex-end', padding: 18, zIndex: 2
              }}>
                <div className="ra-label" style={{ color: 'var(--ra-ink)', marginBottom: 4 }}>Grade</div>
                <div className="ra-h1" style={{ fontSize: 38, lineHeight: 0.95 }}>M35<br />RMC</div>
              </div>

              {/* bottom meta */}
              <div style={{
                position: 'absolute', bottom: 22, left: 24, right: 24, color: '#fff',
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12,
                zIndex: 2, background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 80%)',
                padding: '30px 0 0'
              }}>
                <div>
                  <div className="ra-label ra-label--on-dark" style={{ marginBottom: 8 }}>Active Site · Mysuru</div>
                  <div className="ra-display-s" style={{ color: '#fff', fontSize: 32, lineHeight: 1 }}>M35 RMC · Pouring</div>
                </div>
                <div className="ra-mono" style={{ color: '#F0C000', fontSize: 11, letterSpacing: 2, textAlign: 'right' }}>
                  IS 12269:2013<br/>OPC 53 GRADE
                </div>
              </div>
            </div>
            <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
              <span>FIG. 01 · ACTIVE SITE · MYSURU</span>
              <span>IS 12269:2013 · M35 · OPC 53</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ================== EXPERTISE PATH ================== */
const ExpertisePath = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 0' : '96px 0', borderTop: '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 / PATH</div>
          <div>
            <h2 className="ra-display-m" style={{ marginBottom: 14 }}>Choose Your<br />Expertise Path.</h2>
            <p style={{ fontSize: 16, color: 'var(--ra-muted)', maxWidth: 560, lineHeight: 1.7 }}>
              Whether you're laying the foundation of a home or the spine of a dam,
              we route your order through specialists who know the grade, the site and the schedule.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
          {/* Card 1 — Residential (cream with ink) */}
          <div style={{
            background: '#fff', border: '1px solid var(--ra-border)',
            padding: 48, minHeight: 520,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden'
          }}>
            {/* photo backdrop — right side */}
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: '46%',
              backgroundImage: 'linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.55) 28%, rgba(255,255,255,0) 60%), url("assets/residential-hero-home.jpg")',
              backgroundSize: 'cover', backgroundPosition: 'center',
              pointerEvents: 'none'
            }}/>

            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 40 }}>
                <div className="ra-label ra-label-tick">For Homeowners &amp; Contractors</div>
                <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11 }}>01 / 02</div>
              </div>
              <h3 className="ra-display-s" style={{ marginBottom: 20, fontSize: 44, lineHeight: 1 }}>
                Residential<br />Home Builders.
              </h3>
              <p style={{ color: 'var(--ra-muted)', lineHeight: 1.7, maxWidth: 420, marginBottom: 32 }}>
                Precision materials for individual homes — foundation to finish.
                OPC 53 for columns, PPC for plaster, and a sales team that's walked
                10,000 Mysore plots.
              </p>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--ra-border)', maxWidth: 420, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(2px)' }}>
                {['Bag-count calculator by plot size', 'Same-day delivery inside Mysuru city', 'Dedicated homeowner advisor line'].map(item => (
                  <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--ra-border)' }}>
                    <RaIcon name="check" size={16} stroke={2.5} style={{ color: 'var(--ra-ink)' }} />
                    <span style={{ fontSize: 14 }}>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 32 }}>
              <a href="https://wa.me/919448055225?text=Hi%2C+I+want+to+plan+my+home+build.+Please+advise+on+cement+requirements." target="_blank" rel="noopener noreferrer" className="ra-btn ra-btn--yellow">
                PLAN MY HOME BUILD
                <RaIcon name="arrow-right" size={14} stroke={2.5} />
              </a>
              <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, background: 'rgba(255,255,255,0.85)', padding: '4px 8px' }}>AVG. ORDER · 80–400 BAGS</div>
            </div>
          </div>

          {/* Card 2 — Industrial (black with yellow) */}
          <div style={{
            background: 'var(--ra-ink)', color: '#fff',
            padding: 48, minHeight: 520,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden'
          }}>
            {/* photo backdrop — right side */}
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: '46%',
              backgroundImage: 'linear-gradient(90deg, var(--ra-ink) 0%, rgba(17,17,17,0.55) 28%, rgba(17,17,17,0) 60%), url("assets/industrial-hero-construction.jpg")',
              backgroundSize: 'cover', backgroundPosition: 'center',
              pointerEvents: 'none'
            }}/>
            {/* yellow corner notch */}
            <div style={{ position: 'absolute', top: 0, right: 0, width: 88, height: 88, background: 'var(--ra-yellow)' }} />

            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 40, position: 'relative', zIndex: 1 }}>
                <div className="ra-label ra-label-tick" style={{ color: 'var(--ra-yellow)' }}>For Contractors &amp; Industry</div>
                <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11, marginRight: 100 }}>02 / 02</div>
              </div>
              <h3 className="ra-display-s" style={{ fontSize: 44, lineHeight: 1, marginBottom: 20, color: '#fff' }}>
                Industrial &amp;<br />
                <span style={{ color: 'var(--ra-yellow)' }}>Infrastructure.</span>
              </h3>
              <p style={{ color: '#B8B8B8', lineHeight: 1.7, maxWidth: 460, marginBottom: 32 }}>
                Bulk supply and high-grade Ready Mix Concrete for dams,
                highways, industrial complexes and government tenders.
                Scheduled pours. Tested mixes. Coordinated site delivery.
              </p>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid #2A2A2A' }}>
                {['Volumetric RMC from 6m³ to 10m³', 'M20 to M50 grade — tested in-house', 'Tender support & govt. rate contracts'].map(item => (
                  <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid #2A2A2A', color: '#EDEDED' }}>
                    <RaIcon name="check" size={16} stroke={2.5} style={{ color: 'var(--ra-yellow)' }} />
                    <span style={{ fontSize: 14 }}>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 32 }}>
              <a href="https://wa.me/919448055225?text=Hi%2C+I+need+bulk+pricing+for+cement+and+RMC." target="_blank" rel="noopener noreferrer" className="ra-btn ra-btn--yellow">
                GET BULK PRICING
                <RaIcon name="arrow-right" size={14} stroke={2.5} />
              </a>
              <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11 }}>AVG. ORDER · 2K+ BAGS / 50m³</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HomeHero, ExpertisePath });