/* global React */
// Home page sections 3 — Product Catalog + Delivery Network
const { useState: useStateHome3 } = React;

/* ================== PRODUCT CATALOG ================== */
const CATALOG = [
  {
    id: 'opc53', cat: 'OPC 53', tag: 'Bestseller · ಅತ್ಯುತ್ತಮ',
    name: 'UltraTech OPC 53',
    kn: 'ಎತ್ತರದ ಕಟ್ಟಡಗಳು ಮತ್ತು ಸೇತುವೆಗಳಿಗೆ',
    blurb: 'Ordinary Portland Cement, compressive strength 53 MPa minimum. Best for high-rise, columns, precast and bridges.',
    specs: [['Compressive Strength','53 MPa MIN'], ['Conforms to', 'IS 12269:2013'], ['Setting (initial)','45 min'], ['Fineness','≥ 225 m²/kg']],
    feature: false,
  },
  {
    id: 'ppc', cat: 'PPC', tag: 'Most ordered',
    name: 'UltraTech PPC',
    kn: 'ಪ್ಲಾಸ್ಟರಿಂಗ್ ಮತ್ತು ಸಾಮಾನ್ಯ ಕೆಲಸಗಳಿಗೆ',
    blurb: 'Portland Pozzolana Cement with fly ash. Workable, low-heat, resistant to sulphate — ideal for plaster and general construction.',
    specs: [['Setting (initial)','30 min'], ['Soundness','0.6 mm'], ['Conforms to', 'IS 1489 Pt.1'], ['Shelf life','3 months']],
    feature: false,
  },
  {
    id: 'rmc', cat: 'RMC', tag: 'Scheduled Delivery',
    name: 'Ready Mix Concrete',
    kn: 'ಯೋಜಿತ ಎರಕಕ್ಕಾಗಿ · ನೇರ ಸೈಟ್‌ಗೆ',
    blurb: 'Plant-batched concrete delivered direct to your pour. Every truck cube-tested, every dispatch logged.',
    specs: [['Strength Grades','M20 – M50'], ['Mixer capacity','6 – 10 m³'], ['Coverage','Mysuru · Mandya'], ['Scheduling','Site-coordinated']],
    feature: true,
  },
];

const CatalogCard = ({ p }) => {
  const dark = p.feature;
  return (
    <article style={{
      background: dark ? 'var(--ra-ink)' : '#fff',
      color: dark ? '#fff' : 'var(--ra-ink)',
      border: dark ? '1px solid var(--ra-ink)' : '1px solid var(--ra-border)',
      display: 'flex', flexDirection: 'column',
      position: 'relative'
    }}>
      {/* image */}
      <div style={{
        aspectRatio: '4/3',
        background: dark ? '#0E0E0E' : '#EDE6DD',
        position: 'relative', overflow: 'hidden'
      }}>
        <img
          src={p.id === 'opc53' ? 'assets/product-opc53-bag.jpg'
             : p.id === 'ppc'   ? 'assets/product-ppc-bag.jpg'
             :                    'assets/product-rmc-truck.jpg'}
          alt={p.name}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          }}
        />
        {dark && (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)',
            pointerEvents: 'none'
          }} />
        )}
        {dark && <div style={{ position: 'absolute', top: 0, right: 0, width: 72, height: 72, background: 'var(--ra-yellow)' }} />}
        <div style={{ position: 'absolute', left: 22, bottom: 22, zIndex: 1 }}>
          <div className="ra-label" style={{
            color: dark ? '#F0C000' : 'var(--ra-ink)',
            background: dark ? 'transparent' : 'var(--ra-yellow)',
            padding: dark ? 0 : '4px 8px',
            marginBottom: 6
          }}>{p.cat}</div>
          <div className="ra-display-s" style={{
            color: dark ? '#fff' : 'var(--ra-ink)',
            fontSize: 32, lineHeight: 0.95,
            textShadow: dark ? '0 1px 2px rgba(0,0,0,0.6)' : '0 1px 0 rgba(255,255,255,0.4)'
          }}>
            {p.cat === 'RMC' ? 'M20–M50' : p.cat === 'OPC 53' ? '53 MPa' : '30 MIN'}
          </div>
        </div>
      </div>

      {/* body */}
      <div style={{ padding: '26px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <span className="ra-label" style={{ color: dark ? '#F0C000' : undefined }}>{p.cat}</span>
          <span className={'ra-badge ' + (dark ? 'ra-badge--yellow' : 'ra-badge--solid')}>{p.tag}</span>
        </div>
        <h3 className="ra-h3" style={{ fontSize: 24, color: dark ? '#fff' : 'var(--ra-ink)' }}>{p.name}</h3>
        <div className="ra-kn-label" style={{ marginTop: 8, color: dark ? '#B8B8B8' : 'var(--ra-muted)' }}>{p.kn}</div>
        <p style={{ marginTop: 14, color: dark ? '#B8B8B8' : 'var(--ra-muted)', fontSize: 14, lineHeight: 1.65 }}>
          {p.blurb}
        </p>

        <dl style={{
          marginTop: 18, marginBottom: 0,
          borderTop: dark ? '1px solid #2A2A2A' : '1px solid var(--ra-border)',
        }}>
          {p.specs.map(([k, v]) => (
            <div key={k} style={{
              display: 'flex', justifyContent: 'space-between', padding: '12px 0',
              borderBottom: dark ? '1px solid #2A2A2A' : '1px solid var(--ra-border)'
            }}>
              <dt className="ra-label" style={{ color: dark ? '#8A8A8A' : 'var(--ra-muted)' }}>{k}</dt>
              <dd className="ra-mono" style={{ margin: 0, fontSize: 12, color: dark ? '#fff' : 'var(--ra-ink)' }}>{v}</dd>
            </div>
          ))}
        </dl>

        <a href="#" className="ra-btn ra-btn--yellow" style={{ marginTop: 22, width: '100%', justifyContent: 'center' }}>
          Request Quote
          <RaIcon name="arrow-right" size={14} stroke={2.5} />
        </a>
      </div>
    </article>
  );
};

const ProductCatalog = () => {
  const isMobile = useIsMobile();
  const TABS = ['All Products', 'OPC 53', 'PPC', 'RMC', 'Building Solutions'];
  const [active, setActive] = useStateHome3('All Products');
  const filtered = (active === 'All Products' || active === 'Building Solutions') ? CATALOG : CATALOG.filter(p => p.cat === active);

  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 auto', gap: 48, marginBottom: 40, alignItems: 'end' }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>03 / CATALOG</div>
          <div>
            <div className="ra-label" style={{ marginBottom: 14 }}>Product Catalog · ಉತ್ಪನ್ನಗಳು</div>
            <h2 className="ra-display-m">Every Grade.<br />Every Pour.</h2>
          </div>
          <a href="#" className="ra-btn ra-btn--ghost">
            Full datasheet library
            <RaIcon name="arrow-up-right" size={14} stroke={2.5} />
          </a>
        </div>

        {/* filter tabs */}
        <div style={{
          display: 'flex', gap: 0, borderTop: '1px solid var(--ra-border)',
          borderBottom: '1px solid var(--ra-border)', marginBottom: 40
        }}>
          {TABS.map(t => {
            const isActive = t === active;
            return (
              <button key={t} onClick={() => setActive(t)} style={{
                background: isActive ? 'var(--ra-ink)' : 'transparent',
                color: isActive ? '#fff' : 'var(--ra-ink)',
                border: 0,
                padding: '18px 28px',
                fontFamily: 'var(--ra-font-display)',
                fontWeight: 800, textTransform: 'uppercase',
                fontSize: 13, letterSpacing: '1.5px', cursor: 'pointer',
                borderRight: '1px solid var(--ra-border)',
                display: 'flex', alignItems: 'center', gap: 10,
                whiteSpace: 'nowrap'
              }}>
                {t}
                <span className="ra-mono" style={{
                  fontSize: 10, opacity: 0.6, fontWeight: 400,
                  color: isActive ? '#F0C000' : 'var(--ra-muted)'
                }}>
                  {t === 'All Products' ? `(${CATALOG.length})` : t === 'Building Solutions' ? '(15+)' : `(${CATALOG.filter(p => p.cat === t).length})`}
                </span>
              </button>
            );
          })}
        </div>

        {/* ALL PRODUCTS: 3 product cards + compact Building Solutions card in 4-col grid */}
        {active !== 'Building Solutions' && (
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
            {(active === 'All Products' ? CATALOG : CATALOG.filter(p => p.cat === active)).map(p => <CatalogCard key={p.id} p={p} />)}
            {active === 'All Products' && (
              <div style={{
                background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
                padding: 28, display: 'flex', flexDirection: 'column',
                justifyContent: 'space-between', gap: 16, cursor: 'pointer'
              }} onClick={() => setActive('Building Solutions')}>
                <div>
                  <div className="ra-mono" style={{ fontSize: 10, letterSpacing: 2, fontWeight: 700, marginBottom: 12, opacity: 0.7 }}>
                    BUILDING SOLUTIONS · 15+ PRODUCTS
                  </div>
                  <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 900, fontSize: 26, lineHeight: 1, marginBottom: 14 }}>
                    Complete<br/>Range.
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.6, opacity: 0.75 }}>
                    Waterproofing · Tile Adhesives<br/>Plasters · Repair Products
                  </div>
                </div>
                <div>
                  <a href="Products.html#building-solutions" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    background: 'var(--ra-ink)', color: 'var(--ra-yellow)',
                    padding: '10px 16px', fontSize: 11, fontWeight: 800,
                    letterSpacing: 1.5, textDecoration: 'none', marginBottom: 16
                  }} onClick={e => e.stopPropagation()}>
                    VIEW FULL RANGE →
                  </a>
                  <div>
                    <img src="assets/ultratech-building-solutions-logo.png"
                      alt="UltraTech Building Solutions"
                      style={{ height: 28, objectFit: 'contain', display: 'block', mixBlendMode: 'multiply' }} />
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* BUILDING SOLUTIONS tab: full-width expanded card */}
        {active === 'Building Solutions' && (
          <div style={{ background: 'var(--ra-ink)', color: '#fff', padding: 56, display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 8 }}>
              <div style={{ width: 12, height: 12, background: 'var(--ra-yellow)' }} />
              <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, color: 'var(--ra-yellow)' }}>COMPLETE ULTRATECH RANGE</div>
              <div style={{ background: '#fff', padding: '3px 8px', marginLeft: 8 }}>
                <img src="assets/ultratech-building-solutions-logo.png" alt="UltraTech Building Solutions" style={{ height: 28, objectFit: 'contain', display: 'block' }} />
              </div>
            </div>
            <h3 className="ra-display-s" style={{ fontSize: 40, lineHeight: 1, color: '#fff', marginBottom: 0 }}>
              Complete Building<br/>Solutions.
            </h3>
            <p style={{ fontSize: 18, color: '#B8B8B8', lineHeight: 1.7, maxWidth: 680 }}>
              Waterproofing, tile adhesives, plasters, repair products and grouts — the complete UltraTech range for every stage of construction.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 4 }}>
              {['Waterproofing', 'Tile Adhesives', 'Plasters', 'Repair Products', 'Grouts', 'Masonry'].map(cat => (
                <span key={cat} style={{ background: 'rgba(240,192,0,0.12)', border: '1px solid rgba(240,192,0,0.3)', color: 'var(--ra-yellow)', padding: '6px 14px', fontSize: 12, letterSpacing: 1.5, fontWeight: 700 }}>{cat}</span>
              ))}
            </div>
            <div style={{ marginTop: 8 }}>
              <a href="Products.html#building-solutions" className="ra-btn ra-btn--yellow">
                VIEW FULL RANGE →
              </a>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

/* ================== DELIVERY NETWORK ================== */
const DeliveryNetwork = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ra-ink)', color: '#fff', padding: isMobile ? '48px 0' : '96px 0', position: 'relative', overflow: 'hidden' }}>
      {/* subtle grid */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        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 }}>04 / DELIVERY</div>
          <div>
            <div className="ra-label ra-label--on-dark ra-label-tick" style={{ color: '#F0C000', marginBottom: 20 }}>
              Delivery
            </div>
            <h2 className="ra-display-l" style={{ color: '#fff', maxWidth: 960 }}>
              We deliver across<br />
              <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 14px' }}>Mysore.</span>
            </h2>
            <p style={{ color: '#B8B8B8', maxWidth: 640, marginTop: 24, fontSize: 17, lineHeight: 1.6 }}>
              Cement and building materials delivered directly to your site across
              Mysuru, Mandya, Hunsur and Nanjangud. Contact us to schedule delivery
              for your project.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 2, background: '#2A2A2A' }}>
          {[
            { no: '01', t: 'Mysuru & Mandya', kn: 'ಮೈಸೂರು · ಮಂಡ್ಯ', s: 'Core delivery districts', yellow: true },
            { no: '02', t: 'All Project Sizes', kn: 'ಎಲ್ಲಾ ಗಾತ್ರಗಳು', s: 'From single bags to bulk orders', yellow: false },
            { no: '03', t: 'Scheduled Delivery', kn: 'ನಿಗದಿತ ವಿತರಣೆ', s: 'Coordinated with your site timeline', yellow: false },
          ].map(b => (
            <div key={b.no} style={{
              background: b.yellow ? 'var(--ra-yellow)' : 'var(--ra-ink)',
              color: b.yellow ? 'var(--ra-ink)' : '#fff',
              padding: '48px 36px', minHeight: 320,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
              <div>
                <div className="ra-mono" style={{
                  fontSize: 11, letterSpacing: 2,
                  color: b.yellow ? 'var(--ra-ink-2)' : '#8A8A8A'
                }}>{b.no}</div>
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--ra-font-display)', fontWeight: 900,
                  textTransform: 'uppercase', fontSize: 36, lineHeight: 1.02,
                  letterSpacing: '-0.01em'
                }}>{b.t}</div>
                <div className="ra-kn-label" style={{
                  color: b.yellow ? 'var(--ra-ink-2)' : '#8A8A8A',
                  marginTop: 12
                }}>{b.kn}</div>
                <div style={{
                  marginTop: 20, paddingTop: 16,
                  borderTop: `1px solid ${b.yellow ? 'rgba(26,26,26,0.25)' : '#2A2A2A'}`,
                  fontSize: 15, lineHeight: 1.5,
                  color: b.yellow ? 'var(--ra-ink-2)' : '#C9BFB2'
                }}>{b.s}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 20
        }}>
          <div>
            <div className="ra-h2" style={{ color: '#fff', fontSize: 30, marginBottom: 8 }}>
              Plan your next delivery.
            </div>
            <div className="ra-kn-strap" style={{ color: '#B8B8B8', fontSize: 14 }}>
              ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ನೇರವಾಗಿ ತಲುಪಿಸುತ್ತೇವೆ
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#" className="ra-btn ra-btn--yellow ra-btn--lg">
              Request Delivery Quote
              <RaIcon name="arrow-right" size={14} stroke={2.5} />
            </a>
            <a href="tel:+919448055225" className="ra-btn ra-btn--ghost-on-dark ra-btn--lg">
              <RaIcon name="phone" size={14} stroke={2.5} />
              Call +91 94480 55225
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};


/* ================== FOUNDER MESSAGE ================== */
const FounderMessage = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ra-bg-alt)', borderTop: '1px solid var(--ra-border)' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        minHeight: isMobile ? 'auto' : 560,
      }}>
        {/* Left — Founder photo */}
        <div style={{
          position: 'relative',
          minHeight: isMobile ? 400 : 560,
          overflow: 'hidden',
          order: isMobile ? 0 : 0,
        }}>
          <img
            src="assets/about-founder-portrait.png"
            alt="D. Keerthi Kumar — Founder, Raghuveer Agencies"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center top',
              display: 'block',
            }}
          />
          {/* Subtle gradient overlay at bottom */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: 120,
            background: 'linear-gradient(transparent, rgba(0,0,0,0.25))',
            pointerEvents: 'none',
          }} />
        </div>

        {/* Right — Message content */}
        <div style={{
          padding: isMobile ? '48px var(--ra-gutter)' : '64px 72px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          background: 'var(--ra-bg-alt)',
        }}>
          {/* Label */}
          <div style={{
            fontFamily: 'var(--ra-font-body)',
            fontSize: 11, letterSpacing: '2px',
            color: 'var(--ra-muted)', textTransform: 'uppercase',
            marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 24, height: 1, background: 'var(--ra-muted)', display: 'inline-block' }} />
            A MESSAGE FROM OUR FOUNDER
          </div>

          {/* Headline */}
          <h2 style={{
            fontFamily: 'var(--ra-font-display)',
            fontWeight: 900, fontSize: isMobile ? 36 : 48,
            lineHeight: 1.05, letterSpacing: '-0.02em',
            color: 'var(--ra-ink)', margin: 0,
          }}>
            Built on Mysore&rsquo;s<br />Legacy.
          </h2>

          {/* English quote */}
          <p style={{
            fontSize: 18, lineHeight: 1.75,
            color: 'var(--ra-ink)', marginTop: 32,
            maxWidth: 560,
          }}>
            &ldquo;Mysore&rsquo;s legacy is built on culture, music, art, and yoga &mdash; a foundation carried in every Mysorean. We reflect that same strength and trust in everything we do. For 54 years, every bag of cement that has left our yard has carried the weight of that promise.&rdquo;
          </p>

          {/* Kannada */}
          <div className="ra-kn-strap" style={{
            fontSize: 17, lineHeight: 1.8, color: '#666', marginTop: 24, maxWidth: 560,
          }}>
            ಮೈಸೂರಿನ ಪರಂಪರೆಯು ಸಂಸ್ಕೃತಿ, ಸಂಗೀತ, ಕಲೆ ಮತ್ತು ಯೋಗದ ಮೇಲೆ ನಿರ್ಮಿತವಾಗಿದೆ — ಪ್ರತಿಯೊಬ್ಬ ಮೈಸೂರಿಗನ ಹೃದಯದಲ್ಲಿ ಹರಿಯುವ ಅಡಿಪಾಯ. ನಾವು ಮಾಡುವ ಪ್ರತಿಯೊಂದರಲ್ಲೂ ಅದೇ ಶಕ್ತಿ ಮತ್ತು ವಿಶ್ವಾಸವನ್ನು ಪ್ರತಿಫಲಿಸುತ್ತೇವೆ.
          </div>

          {/* Divider */}
          <div style={{ borderTop: '1px solid var(--ra-border)', width: 64, marginTop: 48, marginBottom: 24 }} />

          {/* Attribution */}
          <div>
            <div style={{
              fontFamily: 'var(--ra-font-display)', fontWeight: 900,
              fontSize: 18, letterSpacing: '1px', color: 'var(--ra-ink)',
            }}>
              D. KEERTHI KUMAR
            </div>
            <div style={{
              fontFamily: 'var(--ra-font-body)', fontSize: 11,
              letterSpacing: '2px', color: 'var(--ra-muted)',
              textTransform: 'uppercase', marginTop: 4,
            }}>
              FOUNDER · RAGHUVEER AGENCIES
            </div>
            <div style={{
              fontFamily: 'var(--ra-font-body)', fontSize: 11,
              letterSpacing: '2px', color: 'var(--ra-muted)',
              textTransform: 'uppercase', marginTop: 2,
            }}>
              EST. 1972 · MYSURU
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProductCatalog, DeliveryNetwork, FounderMessage });