/* global React */
// Industrial Page — Iconic Foundations + Supply Precision Matrix + CTA

const { useState: useStateInd, useRef: useRefInd } = React;

const PROJECTS = [
  {
    key: 'krs',
    title: 'KRS Dam Restoration',
    kn: 'ಕೃಷ್ಣರಾಜಸಾಗರ ಜಲಾಶಯ',
    era: '1970 — 2024',
    type: 'Hydraulic Infrastructure',
    scale: '54,300 m³ supplied',
    grade: 'M40 · Sulphate-resistant',
    lat: '12.4241° N · 76.5722° E',
    blurb: 'Five decades of continuous supply for periodic restoration works. Custom sulphate-resistant mixes for sustained submerged performance.',
    illo: (
      <img
        src="assets/heritage-krs-dam.jpg"
        alt="KRS Dam — Krishnaraja Sagara, Mandya"
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
    )
  },
  {
    key: 'rbi',
    title: 'RBI Note Press',
    kn: 'ಆರ್‌ಬಿಐ ನೋಟು ಮುದ್ರಣಾಲಯ',
    era: 'Phase III · 2018–2021',
    type: 'High Security Industrial',
    scale: '32,800 m³ supplied',
    grade: 'M50 · Fe-550 compatible',
    lat: '12.2958° N · 76.6394° E',
    blurb: 'Phase III high-security industrial supply. Controlled slump and on-site cube testing to BRBNMPL protocol — zero rejected pours.',
    illo: (
      <img
        src="assets/industrial-facility-building.jpg"
        alt="RBI Note Press — Mysore Security Printing Press"
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
    )
  }
];

const IconicFoundations = () => {
  const isMobile = useIsMobile();
  const [i, setI] = useStateInd(0);
  const p = PROJECTS[i];
  const go = (d) => setI(x => (x + d + PROJECTS.length) % PROJECTS.length);

  return (
    <section id="portfolio" style={{ padding: '96px 0 120px', borderTop: '1px solid var(--ra-border)' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 48, marginBottom: 56, alignItems: 'end' }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>02 / PORTFOLIO</div>
          <div>
            <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>Iconic Foundations</div>
            <h2 className="ra-display-m" style={{ maxWidth: 720 }}>
              Our legacy is etched in the<br/>landmarks of Mysore.
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => go(-1)} aria-label="Previous project" style={navBtnStyleInd}>
              <RaIcon name="arrow-left" size={16} stroke={2.5}/>
            </button>
            <button onClick={() => go(1)} aria-label="Next project" style={navBtnStyleInd}>
              <RaIcon name="arrow-right" size={16} stroke={2.5}/>
            </button>
          </div>
        </div>

        {/* project stage */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 440px', gap: 0, border: '1px solid var(--ra-border)', background: '#fff' }}>
          {/* image */}
          <div style={{ position: 'relative', background: '#1A1816', aspectRatio: '16/10', filter: 'grayscale(0.6) contrast(1.05)' }}>
            {p.illo}
            <div style={{
              position: 'absolute', top: 20, left: 20,
              background: 'var(--ra-ink)', color: '#fff',
              padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'var(--ra-font-mono)', fontSize: 11, letterSpacing: 2
            }}>
              <span style={{ width: 6, height: 6, background: 'var(--ra-yellow)' }}/>
              {String(i+1).padStart(2,'0')} / {String(PROJECTS.length).padStart(2,'0')}
            </div>
            <div style={{
              position: 'absolute', bottom: 20, right: 20,
              color: '#C9BFB2', fontFamily: 'var(--ra-font-mono)', fontSize: 10,
              letterSpacing: 2, textAlign: 'right', whiteSpace: 'nowrap'
            }}>
              {p.lat}<br/>ARCHIVE · MYSORE
            </div>
          </div>
          {/* data column */}
          <div style={{ padding: 40, display: 'flex', flexDirection: 'column' }}>
            <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 14 }}>
              {p.era}
            </div>
            <h3 className="ra-display-s" style={{ fontSize: 36, lineHeight: 1.02, marginBottom: 14 }}>{p.title}</h3>
            <div className="ra-kn-label" style={{ color: 'var(--ra-muted)', marginBottom: 30, lineHeight: 1.7 }}>{p.kn}</div>
            <div style={{ display: 'inline-flex', alignSelf: 'flex-start', background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '6px 10px', fontFamily: 'var(--ra-font-body)', fontSize: 10, letterSpacing: 2, fontWeight: 700, marginBottom: 22, whiteSpace: 'nowrap' }}>
              {p.type}
            </div>
            <p style={{ color: 'var(--ra-muted)', fontSize: 14.5, lineHeight: 1.65, marginTop: 0, marginBottom: 24 }}>
              {p.blurb}
            </p>
            <dl style={{ borderTop: '1px solid var(--ra-border)', margin: 0, marginTop: 'auto' }}>
              {[['Supply Volume', p.scale], ['Mix Grade', p.grade]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid var(--ra-border)', gap: 16 }}>
                  <dt className="ra-label" style={{ color: 'var(--ra-muted)' }}>{k}</dt>
                  <dd className="ra-mono" style={{ margin: 0, fontSize: 12, textAlign: 'right', whiteSpace: 'nowrap' }}>{v}</dd>
                </div>
              ))}
            </dl>
            <a href="Contact.html" style={{
              marginTop: 22, fontFamily: 'var(--ra-font-display)', fontWeight: 800,
              textTransform: 'uppercase', fontSize: 13, letterSpacing: 1.5,
              color: 'var(--ra-ink)', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              borderBottom: '2px solid var(--ra-yellow)', paddingBottom: 3, alignSelf: 'flex-start',
              whiteSpace: 'nowrap'
            }}>
              Read Case Study
              <RaIcon name="arrow-up-right" size={12} stroke={2.5}/>
            </a>
          </div>
        </div>

        {/* pagination dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 28 }}>
          {PROJECTS.map((_, idx) => (
            <button key={idx} onClick={() => setI(idx)} aria-label={`Project ${idx+1}`} style={{
              width: idx === i ? 32 : 8, height: 3, background: idx === i ? 'var(--ra-ink)' : 'var(--ra-border-strong)',
              border: 0, cursor: 'pointer', transition: 'width .2s ease'
            }}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const navBtnStyleInd = {
  width: 48, height: 48, background: 'transparent',
  border: '1px solid var(--ra-ink)', cursor: 'pointer',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  color: 'var(--ra-ink)'
};

/* ================== SUPPLY PRECISION MATRIX ================== */
const MATRIX = [
  {
    lhs: 'Curing Period Support',
    std: '28 Days fixed',
    ra: 'Accelerated High-Early · 7 Days',
    impact: 'Slashes construction cycle by 30%',
  },
  {
    lhs: 'BOQ Compliance',
    std: 'Manual Verification',
    ra: 'Digital Batch Calibration',
    impact: 'Zero material wastage',
  },
  {
    lhs: 'Tracking',
    std: 'Phone updates',
    ra: 'Real-time GPS Monitoring',
    impact: 'Precision pour scheduling',
  },
];

const SupplyMatrix = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ background: 'var(--ra-ink)', color: '#fff', padding: isMobile ? '50px 0' : '100px 0', position: 'relative' }}>
    <div style={{
      position: 'absolute', inset: 0, opacity: 0.35,
      backgroundImage: 'linear-gradient(#1C1A18 1px, transparent 1px), linear-gradient(90deg, #1C1A18 1px, transparent 1px)',
      backgroundSize: '56px 56px', pointerEvents: 'none'
    }}/>
    <div className="ra-container" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 64 }}>
        <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 12, letterSpacing: 2 }}>03 / MATRIX</div>
        <div>
          <div className="ra-label ra-label-tick" style={{ color: 'var(--ra-yellow)', marginBottom: 20 }}>
            Supply Precision Matrix
          </div>
          <h2 className="ra-display-l" style={{ color: '#fff', maxWidth: 1000 }}>
            Standard supply is a number.<br/>
            <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 14px' }}>Industrial Grade</span> is a discipline.
          </h2>
        </div>
      </div>

      {/* matrix table */}
      <div style={{ overflowX: 'auto' }}>
      <div style={{ border: '1px solid #2A2A2A', minWidth: isMobile ? 600 : 'auto' }}>
        {/* header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr 1.1fr 1fr',
          background: '#121110', borderBottom: '1px solid #2A2A2A'
        }}>
          {['Parameter', 'Standard Supply', 'Raghuveer Industrial', 'Project Impact'].map((h, idx) => (
            <div key={h} style={{
              padding: '18px 24px', fontFamily: 'var(--ra-font-display)', fontWeight: 800,
              textTransform: 'uppercase', fontSize: 12, letterSpacing: 2,
              color: idx === 2 ? 'var(--ra-yellow)' : '#8A8A8A',
              borderRight: idx < 3 ? '1px solid #2A2A2A' : 'none',
              background: idx === 2 ? 'rgba(240,192,0,0.07)' : 'transparent'
            }}>{h}</div>
          ))}
        </div>
        {/* rows */}
        {MATRIX.map((row, idx) => (
          <div key={row.lhs} style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr 1.1fr 1fr',
            borderBottom: idx < MATRIX.length - 1 ? '1px solid #2A2A2A' : 'none'
          }}>
            <div style={{ padding: '32px 24px', borderRight: '1px solid #2A2A2A' }}>
              <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11, letterSpacing: 2 }}>
                {String(idx+1).padStart(2,'0')}
              </div>
              <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 22, marginTop: 10, color: '#fff' }}>
                {row.lhs}
              </div>
            </div>
            <div style={{ padding: '32px 24px', borderRight: '1px solid #2A2A2A', display: 'flex', alignItems: 'center', gap: 12, color: '#8A8A8A' }}>
              <span style={{ width: 20, height: 2, background: '#4A453E', display: 'inline-block' }}/>
              <span style={{ fontSize: 16, textDecoration: 'line-through', textDecorationColor: '#3A3631' }}>{row.std}</span>
            </div>
            <div style={{ padding: '32px 24px', borderRight: '1px solid #2A2A2A', background: 'rgba(240,192,0,0.07)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 24, height: 24, background: 'var(--ra-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <RaIcon name="check" size={14} stroke={3} style={{ color: 'var(--ra-ink)' }}/>
              </div>
              <span style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 16, color: '#fff', letterSpacing: 0.5 }}>
                {row.ra}
              </span>
            </div>
            <div style={{ padding: '32px 24px', display: 'flex', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <RaIcon name="arrow-right" size={14} stroke={2.5} style={{ color: 'var(--ra-yellow)' }}/>
                <span style={{ fontSize: 15, color: '#C9BFB2', lineHeight: 1.4 }}>{row.impact}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      </div>

      <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11, marginTop: 20, letterSpacing: 2 }}>
        * METRICS FROM 12 INDUSTRIAL DEPLOYMENTS · FY 2022–2024 · AUDITED
      </div>
    </div>
  </section>
  );
};

/* ================== YELLOW CTA BLOCK ================== */
const IndustrialCTA = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', position: 'relative', overflow: 'hidden' }}>
    {/* warning stripes bottom */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: 14,
      background: 'repeating-linear-gradient(135deg, #1A1A1A 0 24px, #F0C000 24px 48px)'
    }}/>
    {/* bg mark */}
    <div style={{ position: 'absolute', right: -60, top: -40, color: 'rgba(26,26,26,0.08)', fontFamily: 'var(--ra-font-display)', fontWeight: 900, fontSize: 420, lineHeight: 0.9, letterSpacing: '-0.02em', pointerEvents: 'none' }}>
      RA
    </div>
    <div className="ra-container" style={{ position: 'relative', padding: '110px 0 120px', overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ minWidth: 0 }}>
          <div className="ra-mono" style={{ fontSize: 12, letterSpacing: 2, marginBottom: 20, color: 'var(--ra-ink-2)' }}>
            04 / NEXT STEP ↓
          </div>
          <div className="ra-label ra-label-tick" style={{ marginBottom: 24 }}>
            Industrial Partner · BOQ · Batch-Tested
          </div>
          <h2 className="ra-display-l" style={{ lineHeight: 0.9, maxWidth: 820 }}>
            Build your project on<br/>
            <span style={{ borderBottom: '8px solid var(--ra-ink)', paddingBottom: 4 }}>industrial truth.</span>
          </h2>
          <div className="ra-kn-strap" style={{ fontSize: 15, marginTop: 28, color: 'var(--ra-ink-2)' }}>
            ಪ್ರತಿ ಸುರಿಯುವಿಕೆ, ಪ್ರತಿ ಟನ್ — ಲೆಕ್ಕಕ್ಕೆ ಸಿಗುವಂತೆ.
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <a href="Contact.html" className="ra-btn ra-btn--lg" style={{
            background: 'var(--ra-ink)', borderColor: 'var(--ra-ink)', color: 'var(--ra-yellow)',
            padding: '24px 28px', justifyContent: 'space-between', fontSize: 16
          }}>
            <span>Check Today's Price</span>
            <RaIcon name="arrow-right" size={18} stroke={2.5}/>
          </a>
          <a href="Contact.html" className="ra-btn ra-btn--lg" style={{
            background: 'transparent', borderColor: 'var(--ra-ink)', color: 'var(--ra-ink)',
            padding: '24px 28px', justifyContent: 'space-between', fontSize: 16
          }}>
            <span>Talk to Expert</span>
            <RaIcon name="arrow-up-right" size={18} stroke={2.5}/>
          </a>
          <div style={{
            borderTop: '1px solid rgba(26,26,26,0.35)', marginTop: 12, paddingTop: 16,
            display: 'flex', justifyContent: 'space-between', gap: 16
          }}>
            <div>
              <div className="ra-label" style={{ color: 'var(--ra-ink-2)' }}>Phone · Daily 7a–9p</div>
              <div className="ra-mono" style={{ fontSize: 14, marginTop: 4 }}>+91 821 249 5500</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="ra-label" style={{ color: 'var(--ra-ink-2)' }}>Yard · Mysore</div>
              <div className="ra-mono" style={{ fontSize: 14, marginTop: 4 }}>Hinkal · NH-275</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { IconicFoundations, SupplyMatrix, IndustrialCTA });