/* global React */
// Products Page — Application Expert Guide + Delivery Network

const APP_GUIDE = [
  {
    no: '01', title: 'Foundation & Plinth',
    kn: 'ಅಡಿಪಾಯ ಮತ್ತು ಬುನಾದಿ',
    desc: 'Use OPC 53 with a precise water-cement ratio of 0.45. Vibrate thoroughly to eliminate voids. Cure continuously for 14 days.',
    product: 'UltraTech OPC 53',
    spec: 'IS 12269 · 53 MPa · w/c 0.45',
  },
  {
    no: '02', title: 'Exterior Walling',
    kn: 'ಹೊರಗಿನ ಗೋಡೆಗಳು',
    desc: 'Apply UltraTech Weather Pro for damp-proofing and efflorescence resistance. Two-coat plaster system on brick or block.',
    product: 'Weather Pro PPC',
    spec: 'IS 1489 · Hydrophobic · 2-coat',
    img: 'assets/residential-wall-plaster.jpg',
  },
  {
    no: '03', title: 'Slab & Roofing',
    kn: 'ಚಾವಣಿ ಮತ್ತು ಸ್ಲ್ಯಾಬ್',
    desc: 'RMC M25 grade for seamless, crack-free casting. Pump-delivered for large-pour uniformity. Ponding cure for 7 days minimum.',
    product: 'UltraTech RMC',
    spec: 'M25 · pump-grade · 20mm agg.',
  },
];

const ApplicationGuide = () => (
  <section style={{ padding: '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 }}>02 / GUIDE</div>
        <div>
          <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>Application Expert Guide</div>
          <h2 className="ra-display-m" style={{ marginBottom: 14 }}>Right Grade.<br/>Right Place.</h2>
          <p style={{ color: 'var(--ra-muted)', fontSize: 16, lineHeight: 1.7, maxWidth: 560 }}>
            Five decades of on-site learning, distilled. Tell our team your application —
            we'll route you to the exact grade, mix and cure protocol.
          </p>
        </div>
      </div>

      <div style={{ borderTop: '2px solid var(--ra-ink)' }}>
        {APP_GUIDE.map((row, i) => (
          <div key={row.no} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr 1.3fr 1fr auto',
            gap: 32, padding: '36px 0', borderBottom: '1px solid var(--ra-border)',
            alignItems: 'center'
          }}>
            {row.img ? (
              <div style={{ position: 'relative', width: 120, height: 120, overflow: 'hidden' }}>
                <img src={row.img} alt={row.title}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
                <div className="ra-display-l" style={{
                  position: 'absolute', top: 0, right: 4,
                  fontSize: 72, lineHeight: 0.9, color: '#fff',
                  textShadow: '0 2px 6px rgba(0,0,0,0.6)'
                }}>{row.no}</div>
              </div>
            ) : (
              <div className="ra-display-l" style={{ fontSize: 72, lineHeight: 0.9, color: 'var(--ra-ink)' }}>
                {row.no}
              </div>
            )}
            <div>
              <h3 className="ra-h1" style={{ fontSize: 26 }}>{row.title}</h3>
              <div className="ra-kn-label" style={{ marginTop: 8, color: 'var(--ra-muted)' }}>{row.kn}</div>
            </div>
            <p style={{ color: 'var(--ra-muted)', fontSize: 15, lineHeight: 1.65, margin: 0 }}>
              {row.desc}
            </p>
            <div style={{ background: 'var(--ra-bg-alt)', padding: '14px 16px', borderLeft: '3px solid var(--ra-yellow)' }}>
              <div className="ra-label" style={{ marginBottom: 6 }}>Recommended</div>
              <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 16 }}>
                {row.product}
              </div>
              <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 10.5, marginTop: 6 }}>{row.spec}</div>
            </div>
            <a href="#" className="ra-btn ra-btn--ghost ra-btn--sm">
              Ask Expert
              <RaIcon name="arrow-up-right" size={12} stroke={2.5}/>
            </a>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ================== DELIVERY NETWORK STATS ================== */
const UnmatchedDelivery = () => (
  <section style={{ background: 'var(--ra-ink)', color: '#fff', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0, opacity: 0.4,
      backgroundImage: 'linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px)',
      backgroundSize: '64px 64px', 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 / LOGISTICS</div>
        <div>
          <div className="ra-label ra-label-tick" style={{ color: 'var(--ra-yellow)', marginBottom: 20 }}>
            Delivery
          </div>
          <h2 className="ra-display-l" style={{ color: '#fff', maxWidth: 960 }}>
            We Deliver<br/>
            <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 14px' }}>Across Mysore.</span>
          </h2>
          <p style={{ color: '#B8B8B8', maxWidth: 620, marginTop: 24, marginBottom: 0, fontSize: 17, lineHeight: 1.65 }}>
            Cement and building materials delivered directly to your site across
            Mysuru, Mandya, Hunsur and Nanjangud. Contact us to schedule
            delivery coordinated with your project timeline.
          </p>
          <div className="ra-kn-strap" style={{ color: '#8A8A8A', fontSize: 14, marginTop: 48, lineHeight: 1.8 }}>
            ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ನೇರ ತಲುಪಿಸುವಿಕೆ
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, background: '#2A2A2A', marginBottom: 48 }}>
        {/* 24HR */}
        <div style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '44px 36px', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="ra-label ra-label-tick">Turnaround</div>
            <div className="ra-kn-label" style={{ color: 'var(--ra-ink-2)', marginTop: 10 }}>ಆರ್ಡರ್‌ನಿಂದ ತಲುಪುವವರೆಗೆ</div>
          </div>
          <div>
            <div className="ra-display-l" style={{ fontSize: 120, lineHeight: 0.9 }}>24<span style={{ fontSize: 72 }}>HR</span></div>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 16, letterSpacing: 1.5, marginTop: 10 }}>
              Order to Site
            </div>
          </div>
        </div>

        {/* MYSORE & MANDYA */}
        <div style={{ background: 'var(--ra-ink)', padding: '44px 36px', minHeight: 280, border: '1px solid #2A2A2A', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="ra-label" style={{ color: 'var(--ra-yellow)' }}>Coverage Zones</div>
            <div className="ra-kn-label" style={{ color: '#8A8A8A', marginTop: 10 }}>ಕಾರ್ಯಾಚರಣೆ ಪ್ರದೇಶ</div>
          </div>
          <div>
            <RaIcon name="pin" size={22} stroke={2} style={{ color: 'var(--ra-yellow)', marginBottom: 14 }}/>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 30, lineHeight: 1.1, color: '#fff' }}>
              Mysore<br/>&amp; Mandya
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8, marginTop: 18 }}>
              {['Mysuru City', 'Hunsur', 'Nanjangud', 'Mandya', 'KR Nagar', 'Srirangapatna'].map(z => (
                <div key={z} className="ra-mono" style={{ color: '#C9BFB2', fontSize: 11, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 5, height: 5, background: 'var(--ra-yellow)', display: 'inline-block' }}/>
                  {z}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* CERTIFIED BATCH */}
        <div style={{ background: 'var(--ra-ink)', padding: '44px 36px', minHeight: 280, border: '1px solid #2A2A2A', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="ra-label" style={{ color: 'var(--ra-yellow)' }}>Certified Batch</div>
            <div className="ra-kn-label" style={{ color: '#8A8A8A', marginTop: 10 }}>ಪ್ರಮಾಣೀಕೃತ ಗುಣಮಟ್ಟ</div>
          </div>
          <div>
            <div className="ra-display-l" style={{ fontSize: 96, lineHeight: 0.9, color: '#fff' }}>
              <span style={{ color: 'var(--ra-yellow)' }}>100</span>%
            </div>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 16, letterSpacing: 1.5, color: '#fff', marginTop: 10 }}>
              Lab-Tested Cubes
            </div>
            <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11, marginTop: 10 }}>
              7-DAY · 28-DAY · REPORTED
            </div>
          </div>
        </div>
      </div>

      {/* delivery CTA bar */}
      <div style={{ borderTop: '1px solid #2A2A2A', paddingTop: 36, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
        <div>
          <div className="ra-label" style={{ color: 'var(--ra-yellow)', marginBottom: 14 }}>Schedule Your Delivery</div>
          <div style={{ color: '#B8B8B8', fontSize: 15, lineHeight: 1.6, maxWidth: 560 }}>
            Contact us with your project location and required date — we coordinate delivery directly with your site timeline across Mysuru, Mandya, Hunsur and Nanjangud.
          </div>
        </div>
        <a href="https://wa.me/919448055225?text=Hi%2C+I%27d+like+to+schedule+a+delivery+for+my+project." className="ra-btn ra-btn--yellow ra-btn--lg">
          Schedule Delivery
          <RaIcon name="arrow-right" size={14} stroke={2.5}/>
        </a>
      </div>
    </div>
  </section>
);

/* ================== CHAT WITH US — floating ================== */
const LiveQuoteButton = () => (
  <a href="#" style={{
    position: 'fixed', bottom: 24, right: 24, zIndex: 90,
    background: '#2F7D3B', color: '#fff', textDecoration: 'none',
    padding: '14px 20px', display: 'inline-flex', alignItems: 'center', gap: 12,
    fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase',
    fontSize: 13, letterSpacing: 1.5, boxShadow: '0 10px 30px rgba(0,0,0,0.25)',
    border: '2px solid #256831'
  }}>
    <span style={{ position: 'relative', width: 10, height: 10 }}>
      <span style={{ position: 'absolute', inset: 0, background: '#8FE39F', borderRadius: '50%' }}/>
      <span style={{ position: 'absolute', inset: 0, background: '#8FE39F', borderRadius: '50%', animation: 'raPulse 1.8s ease-out infinite' }}/>
    </span>
    Chat With Us
    <RaIcon name="arrow-up-right" size={14} stroke={2.5}/>
    <style>{`
      @keyframes raPulse {
        0% { transform: scale(1); opacity: .7; }
        80% { transform: scale(2.8); opacity: 0; }
        100% { opacity: 0; }
      }
    `}</style>
  </a>
);

Object.assign(window, { ApplicationGuide, UnmatchedDelivery, LiveQuoteButton });