/* global React */
// Industrial Page — Hero + Technical RMC Precision

/* ================== INDUSTRIAL HERO ================== */
const IndustrialHero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ position: 'relative', background: '#0A0908', color: '#fff', minHeight: 720, overflow: 'hidden' }}>
      {/* Construction site — real photo with dark overlay */}
      <img
        src="assets/industrial-hero-construction.jpg"
        alt="Industrial construction site — Raghuveer Agencies RMC project"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
      />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.62)' }} />
            {/* HUD corner — site info */}
      <div style={{ position: 'absolute', top: 28, right: 28, color: '#8A8A8A', textAlign: 'right', fontFamily: 'var(--ra-font-mono)', fontSize: 11, lineHeight: 1.7, whiteSpace: 'nowrap' }}>
        <div>12° 18′ N · 76° 38′ E</div>
        <div style={{ color: '#F0C000' }}>SITE ACTIVE · 03:42 PM</div>
      </div>

      {/* Content */}
      <div className="ra-container" style={{ position: 'relative', paddingTop: 120, paddingBottom: 80, maxWidth: 1320 }}>
        <div style={{ maxWidth: 960 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: 'rgba(240,192,0,0.14)', border: '1px solid rgba(240,192,0,0.5)',
            padding: '10px 16px', marginBottom: 36
          }}>
            <span style={{ width: 8, height: 8, background: 'var(--ra-yellow)', display: 'inline-block' }}/>
            <span className="ra-label" style={{ color: 'var(--ra-yellow)' }}>
              Authorized UltraTech Cement Dealer
            </span>
          </div>

          <h1 className="ra-display-xl" style={{ color: '#fff', lineHeight: 0.88, marginBottom: 32 }}>
            Industrial<br/>
            Infrastructure<br/>
            <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 20px' }}>Mysore.</span>
          </h1>

          <p style={{ color: '#C9BFB2', fontSize: 20, lineHeight: 1.55, maxWidth: 720, marginBottom: 40 }}>
            Engineered for civil excellence. Delivering BOQ-compliant RMC and bulk cement
            to Mysore's most critical infrastructure projects since 1972.
          </p>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="#" className="ra-btn ra-btn--yellow ra-btn--lg">
              Get Bulk Pricing
              <RaIcon name="arrow-right" size={14} stroke={2.5}/>
            </a>
            <a href="#portfolio" className="ra-btn ra-btn--ghost-on-dark ra-btn--lg">
              View Portfolio
            </a>
          </div>
        </div>

        {/* Credential strip */}
        <div style={{
          marginTop: 96, borderTop: '1px solid rgba(255,255,255,0.15)',
          paddingTop: 28, display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 40
        }}>
          {[
            ['52', 'Years BIS Certified'],
            ['1200+', 'Industrial Sites Supplied'],
            ['M80', 'Max Grade Available'],
            ['24HR', 'Dispatch Guarantee'],
          ].map(([n, l]) => (
            <div key={l}>
              <div className="ra-display-m" style={{ color: 'var(--ra-yellow)', fontSize: 48, lineHeight: 1 }}>{n}</div>
              <div className="ra-label ra-label--on-dark" style={{ marginTop: 10 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ================== TECHNICAL RMC PRECISION ================== */
const GRADES = [
  { grade: 'M10', use: 'PCC Works', note: 'Lean concrete · 10 MPa' },
  { grade: 'M30', use: 'RCC Structures', note: 'Standard RCC · 30 MPa' },
  { grade: 'M50', use: 'Industrial Floors', note: 'Heavy duty · 50 MPa' },
  { grade: 'M80', use: 'High Strength', note: 'Towers & bridges · 80 MPa', highlight: true },
];

const TechnicalRMC = () => {
  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 }}>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>01 / RMC</div>
        <div>
          <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>Technical RMC Precision</div>
          <h2 className="ra-display-m" style={{ maxWidth: 900 }}>
            From lean PCC to M80.<br/>
            Every pour, <em style={{ fontStyle: 'normal', background: 'var(--ra-yellow)', padding: '0 10px' }}>on spec.</em>
          </h2>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: 24 }}>
        {/* LEFT — grades */}
        <div style={{ background: 'var(--ra-bg-alt)', padding: 40, border: '1px solid var(--ra-border)', display: 'flex', flexDirection: 'column' }}>
          <div className="ra-label" style={{ marginBottom: 14 }}>Grade Library</div>
          <p style={{ fontSize: 20, lineHeight: 1.55, marginBottom: 32, marginTop: 0, maxWidth: 520 }}>
            Supplying comprehensive concrete grades for heavy-load infrastructure and
            high-rise developments.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14, marginBottom: 28 }}>
            {GRADES.map(g => (
              <div key={g.grade} style={{
                background: g.highlight ? 'var(--ra-yellow)' : '#fff',
                border: `1px solid ${g.highlight ? 'var(--ra-yellow)' : 'var(--ra-border)'}`,
                padding: '22px 22px', position: 'relative'
              }}>
                <div className="ra-display-m" style={{ fontSize: 56, lineHeight: 0.9 }}>{g.grade}</div>
                <div className="ra-label" style={{ marginTop: 10 }}>{g.use}</div>
                <div className="ra-mono" style={{ color: g.highlight ? 'var(--ra-ink-2)' : 'var(--ra-muted)', fontSize: 11, marginTop: 8 }}>
                  {g.note}
                </div>
                {g.highlight && (
                  <div style={{
                    position: 'absolute', top: 14, right: 14,
                    background: 'var(--ra-ink)', color: 'var(--ra-yellow)',
                    padding: '4px 8px', fontSize: 9, letterSpacing: 2, fontWeight: 700
                  }}>FLAGSHIP</div>
                )}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 'auto', display: 'flex', gap: 12, alignItems: 'center', paddingTop: 18, borderTop: '1px solid var(--ra-border)' }}>
            <RaIcon name="check" size={16} stroke={2.5} style={{ color: 'var(--ra-ink)' }}/>
            <span className="ra-mono" style={{ fontSize: 12 }}>
              Custom mix designs available · IS 456:2000 compliant
            </span>
          </div>
        </div>

        {/* RIGHT — 24 HOUR LOGISTICS */}
        <div style={{ background: 'var(--ra-ink)', color: '#fff', padding: 40, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
          {/* bg pattern */}
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.3,
            backgroundImage: 'linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px)',
            backgroundSize: '40px 40px'
          }}/>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
              <div>
                <div className="ra-label" style={{ color: 'var(--ra-yellow)' }}>Logistics</div>
                <div className="ra-kn-label" style={{ color: '#8A8A8A', marginTop: 8 }}>ಪೂರೈಕೆ ಸರಪಳಿ</div>
              </div>
              <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
                <rect x="2" y="20" width="30" height="22" fill="#F0C000"/>
                <path d="M32 24 L44 24 L52 32 L52 42 L32 42 Z" fill="#fff"/>
                <rect x="34" y="28" width="8" height="8" fill="#1A1A1A"/>
                <circle cx="12" cy="46" r="6" fill="#1A1A1A"/>
                <circle cx="22" cy="46" r="6" fill="#1A1A1A"/>
                <circle cx="42" cy="46" r="6" fill="#1A1A1A"/>
                <circle cx="12" cy="46" r="2" fill="#F0C000"/>
                <circle cx="22" cy="46" r="2" fill="#F0C000"/>
                <circle cx="42" cy="46" r="2" fill="#F0C000"/>
              </svg>
            </div>

            <div className="ra-display-m" style={{ color: '#fff', lineHeight: 0.95, marginBottom: 20 }}>
              24-Hour<br/>Logistics.
            </div>
            <p style={{ color: '#B8B8B8', fontSize: 16, lineHeight: 1.65, maxWidth: 440, marginBottom: 32 }}>
              Uninterrupted supply chain with GPS-tracked transit. Every truck dispatched,
              every arrival logged, every batch documented.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid #2A2A2A', flex: 1 }}>
              {[
                ['BOQ Compliance Guarantee', 'Matched to your bill of quantities, batch by batch'],
                ['On-Site Quality Testing', 'Slump + cube testing before every pour'],
                ['Automated Batching Reports', 'PDF logs from computerized plant'],
              ].map(([t, s]) => (
                <li key={t} style={{ display: 'grid', gridTemplateColumns: '28px 1fr', gap: 16, padding: '18px 0', borderBottom: '1px solid #2A2A2A', alignItems: 'start' }}>
                  <div style={{
                    width: 24, height: 24, background: 'var(--ra-yellow)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2
                  }}>
                    <RaIcon name="check" size={14} stroke={3} style={{ color: 'var(--ra-ink)' }}/>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 15, letterSpacing: 0.5, color: '#fff' }}>{t}</div>
                    <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11.5, marginTop: 4 }}>{s}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
              <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11 }}>
                LIVE · 14 TRUCKS ON ROUTE
              </div>
              <a href="#" className="ra-btn ra-btn--yellow ra-btn--sm">
                Schedule Dispatch
                <RaIcon name="arrow-right" size={12} stroke={2.5}/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { IndustrialHero, TechnicalRMC });