/* global React */
// Products Page — Hero + Core Catalog
const { useState: useStateProd } = React;

/* ================== PRODUCTS HERO ================== */
const ProductsHero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: '80px 0 72px', borderBottom: '1px solid var(--ra-border)' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>Authorized Distributor · Since 1972</div>
            <div className="ra-kn-strap" style={{ marginBottom: 28, color: 'var(--ra-muted)', fontSize: 15 }}>
              ಅಧಿಕೃತ ವಿತರಕರು · ಮೈಸೂರು
            </div>
            <h1 className="ra-display-l" style={{ lineHeight: 0.92, marginBottom: 28 }}>
              Strength in<br/>Every<br/>
              <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>Molecule.</span>
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ra-muted)', maxWidth: 520, marginBottom: 36 }}>
              UltraTech is India's No.1 Cement. We provide the foundation for Mysore's
              icons of tomorrow — every grade, every grain, tested and certified.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="ra-btn ra-btn--yellow ra-btn--lg">
                Request a Quote
                <RaIcon name="arrow-right" size={14} stroke={2.5} />
              </a>
              <a href="#catalog" className="ra-btn ra-btn--ghost ra-btn--lg">Browse catalog</a>
            </div>

            {/* proof row */}
            <div style={{
              marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)',
              borderTop: '1px solid var(--ra-border)', paddingTop: 24, gap: 24
            }}>
              {[
                ['ISI Certified', 'IS 12269 · IS 1489'],
                ['Batch Tested', 'Every truck, every bag'],
                ['BIS Licensed', 'Authorized UltraTech'],
              ].map(([t, s]) => (
                <div key={t}>
                  <div className="ra-h3" style={{ fontSize: 16 }}>{t}</div>
                  <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, marginTop: 6 }}>{s}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Concrete texture panel */}
          <div style={{ position: 'relative', height: isMobile ? 320 : 620, background: 'var(--ra-ink)', overflow: 'hidden' }}>
            <img
              src="assets/products-hero-concrete.jpg"
              alt="Concrete surface detail"
              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.35) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.7) 100%)'
            }} />

            {/* HUD */}
            <div style={{ position: 'absolute', top: 24, left: 24, right: 160, display: 'flex', justifyContent: 'space-between', gap: 16, color: '#fff' }}>
              <div className="ra-label ra-label--on-dark" style={{ whiteSpace: 'nowrap' }}>Surface · 7-day cure</div>
              <div className="ra-mono" style={{ fontSize: 11, color: '#EDEDED', whiteSpace: 'nowrap' }}>SAMPLE · M35 / C53</div>
            </div>
            <div style={{
              position: 'absolute', top: 0, right: 0, width: 140, height: 140,
              background: 'var(--ra-yellow)', display: 'flex', flexDirection: 'column',
              justifyContent: 'flex-end', padding: 18
            }}>
              <div className="ra-label">Compressive</div>
              <div className="ra-h1" style={{ fontSize: 40, lineHeight: 0.95 }}>53<br/>MPa</div>
            </div>
            {/* callouts */}
            <div style={{ position: 'absolute', bottom: 28, left: 24, right: 24, color: '#fff', display: 'flex', justifyContent: 'space-between', gap: 20 }}>
              <div>
                <div className="ra-label ra-label--on-dark">Fineness</div>
                <div className="ra-display-s" style={{ color: '#fff', fontSize: 26 }}>≥ 225 m²/kg</div>
              </div>
              <div>
                <div className="ra-label ra-label--on-dark">Initial Set</div>
                <div className="ra-display-s" style={{ color: '#fff', fontSize: 26 }}>45 MIN</div>
              </div>
              <div>
                <div className="ra-label ra-label--on-dark">Soundness</div>
                <div className="ra-display-s" style={{ color: '#fff', fontSize: 26 }}>≤ 10 mm</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ================== CORE CATALOG ================== */
const BagIllo = ({ label = 'OPC 53', sub = '50 KG' }) => {
  const src = label.indexOf('PPC') >= 0
    ? 'assets/product-ppc-bag.jpg'
    : 'assets/product-opc53-bag.jpg';
  return (
    <div style={{ width: '100%', height: '100%', background: '#F5F0EB', position: 'relative' }}>
      <img
        src={src} alt={label + ' cement bag'}
        style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', padding: 16 }}
      />
      <div style={{
        position: 'absolute', bottom: 12, left: 12,
        fontFamily: 'var(--ra-font-mono)', fontSize: 10, letterSpacing: 2,
        color: 'var(--ra-muted)', background: 'rgba(255,255,255,0.85)', padding: '4px 8px'
      }}>{label} · {sub}</div>
    </div>
  );
};

const PlasterIllo = () => (
  <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id="wallGrad" x1="0" x2="1">
        <stop offset="0" stopColor="#E8E0D4"/>
        <stop offset="1" stopColor="#C9BFB2"/>
      </linearGradient>
    </defs>
    <rect width="400" height="300" fill="url(#wallGrad)"/>
    {/* brick lines peeking */}
    <g stroke="#B8A994" strokeWidth="1" opacity="0.35">
      {Array.from({length: 12}).map((_,i)=>(
        <line key={i} x1="0" y1={i*26} x2="400" y2={i*26}/>
      ))}
    </g>
    {/* wet plaster smears */}
    <g fill="#D9D0BF" opacity="0.9">
      <path d="M60 40 Q200 50 340 80 L340 180 Q200 160 60 200 Z"/>
    </g>
    {/* trowel */}
    <g transform="translate(260,150) rotate(18)">
      <rect x="0" y="0" width="110" height="18" fill="#C9BFB2" stroke="#8A7E6A" strokeWidth="1"/>
      <rect x="108" y="5" width="28" height="8" fill="#6B5B4A"/>
      <rect x="134" y="2" width="46" height="14" fill="#3A2E22"/>
    </g>
    {/* plaster bucket silhouette */}
    <g transform="translate(30,220)">
      <path d="M0 0 L80 0 L72 56 L8 56 Z" fill="#1A1816"/>
      <rect x="0" y="-4" width="80" height="6" fill="#0A0A08"/>
      <path d="M18 8 Q40 -6 62 8" fill="none" stroke="#0A0A08" strokeWidth="2"/>
    </g>
    {/* worker silhouette */}
    <g transform="translate(160,130)" fill="#1A1816">
      <circle cx="16" cy="10" r="9"/>
      <path d="M4 18 Q16 14 28 18 L30 48 L2 48 Z"/>
      <rect x="8" y="46" width="8" height="22"/>
      <rect x="18" y="46" width="8" height="22"/>
    </g>
  </svg>
);

const RMCTruckIllo = () => (
  <div style={{ width: '100%', height: '100%', position: 'relative', background: '#1A1A1A' }}>
    <img
      src="assets/product-rmc-truck.jpg"
      alt="UltraTech Ready Mix Concrete delivery truck"
      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) 40%, rgba(0,0,0,0.55) 100%)'
    }}/>
  </div>
);

const CATALOG_PRODUCTS = [
  {
    id: 'opc53', type: 'bagged', tag: 'PREMIUM SELECTION',
    title: 'OPC 53 Grade',
    kn: 'ಎತ್ತರದ ಕಟ್ಟಡಗಳಿಗೆ ಮತ್ತು ಸೇತುವೆಗಳಿಗೆ',
    blurb: 'Ordinary Portland Cement Grade 53. High-strength for industrial, high-rise and infrastructure. The spine of Mysore\'s new skyline.',
    specs: [['Compressive Strength', '53 MPa MIN'], ['Setting Time', '30 Minutes'], ['Optimal For', 'RCC, Pre-cast, Heavy Industrial'], ['Standard', 'IS 12269:2013']],
    link: 'Download Data Sheet',
    illo: <BagIllo label="OPC 53" sub="50 KG"/>
  },
  {
    id: 'ppc', type: 'bagged', tag: 'MOST POPULAR',
    title: 'UltraTech PPC',
    kn: 'ಪ್ಲಾಸ್ಟರಿಂಗ್ ಮತ್ತು ಬ್ರಿಕ್‌ವರ್ಕ್‌ಗೆ',
    blurb: 'Portland Pozzolana Cement. Exceptional durability and chemical-attack resistance. Ideal for marine, residential and brickwork.',
    specs: [['Durability', 'Extreme · Chemical resistant'], ['Workability', 'High · Fly-ash blended'], ['Optimal For', 'Plaster, Brickwork, Marine'], ['Standard', 'IS 1489 · Pt.1']],
    link: 'Explore Applications',
    illo: <PlasterIllo/>
  },
];

const CoreCatalog = () => {
  const isMobile = useIsMobile();
  const [filter, setFilter] = useStateProd('All');
  const tabs = ['All', 'Bagged', 'Bulk (RMC)'];
  const match = (p) => filter === 'All' || (filter === 'Bagged' && p.type === 'bagged') || (filter === 'Bulk (RMC)' && p.type === 'rmc');

  return (
    <section id="catalog" 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 }}>01 / CATALOG</div>
          <div>
            <div className="ra-label ra-label-tick" style={{ marginBottom: 14 }}>Our Core Catalog · ಉತ್ಪನ್ನಗಳು</div>
            <h2 className="ra-display-m">Technical Grade Specs<br/>for Precision Engineering.</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>

        {/* filters */}
        <div style={{
          display: 'flex', borderTop: '1px solid var(--ra-border)',
          borderBottom: '1px solid var(--ra-border)', marginBottom: 32
        }}>
          <div style={{
            padding: '18px 28px', fontFamily: 'var(--ra-font-display)', fontWeight: 800,
            textTransform: 'uppercase', fontSize: 13, letterSpacing: 1.5,
            color: 'var(--ra-muted)', borderRight: '1px solid var(--ra-border)'
          }}>Filter:</div>
          {tabs.map(t => {
            const active = filter === t;
            return (
              <button key={t} onClick={() => setFilter(t)} style={{
                background: active ? 'var(--ra-ink)' : 'transparent',
                color: active ? '#fff' : 'var(--ra-ink)', border: 0,
                padding: '18px 28px', fontFamily: 'var(--ra-font-display)',
                fontWeight: 800, textTransform: 'uppercase', fontSize: 13,
                letterSpacing: 1.5, cursor: 'pointer',
                borderRight: '1px solid var(--ra-border)', whiteSpace: 'nowrap'
              }}>{t}</button>
            );
          })}
        </div>

        {/* 2x2 grid — 2 products, RMC dark, CTA yellow */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
          {CATALOG_PRODUCTS.filter(match).map(p => (
            <article key={p.id} style={{
              background: '#fff', border: '1px solid var(--ra-border)',
              display: 'flex', flexDirection: 'column'
            }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', position: 'relative' }}>
                {p.illo}
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  background: 'var(--ra-ink)',
                  padding: '6px 10px', fontFamily: 'var(--ra-font-body)',
                  fontSize: 10, letterSpacing: 2, fontWeight: 700,
                  whiteSpace: 'nowrap', color: '#F0C000'
                }}><span style={{ color: '#F0C000' }}>{p.tag}</span></div>
              </div>
              <div style={{ padding: '28px 28px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 className="ra-h1" style={{ fontSize: 30 }}>{p.title}</h3>
                <div className="ra-kn-label" style={{ marginTop: 8, color: 'var(--ra-muted)' }}>{p.kn}</div>
                <p style={{ color: 'var(--ra-muted)', fontSize: 14.5, lineHeight: 1.65, marginTop: 14 }}>{p.blurb}</p>
                <dl style={{ marginTop: 18, marginBottom: 0, borderTop: '1px solid var(--ra-border)' }}>
                  {p.specs.map(([k, v]) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 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' }}>{v}</dd>
                    </div>
                  ))}
                </dl>
                <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <a href="#" style={{
                    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
                  }}>
                    {p.link}
                    <RaIcon name="arrow-right" size={12} stroke={2.5}/>
                  </a>
                  <a href="#" className="ra-btn ra-btn--yellow ra-btn--sm">
                    Check Today's Price →
                  </a>
                </div>
              </div>
            </article>
          ))}

          {/* RMC — black card */}
          {(filter === 'All' || filter === 'Bulk (RMC)') && (
            <article style={{ background: 'var(--ra-ink)', color: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', position: 'relative' }}>
                <RMCTruckIllo/>
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
                  padding: '6px 10px', fontFamily: 'var(--ra-font-body)',
                  fontSize: 10, letterSpacing: 2, fontWeight: 700,
                  whiteSpace: 'nowrap'
                }}>BULK · RMC</div>
              </div>
              <div style={{ padding: '28px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 className="ra-h1" style={{ fontSize: 30, color: '#fff' }}>UltraTech RMC</h3>
                <div className="ra-kn-label" style={{ marginTop: 8, color: '#8A8A8A' }}>ನೇರ ಸೈಟ್‌ಗೆ ತಲುಪಿಸುತ್ತೇವೆ</div>
                <p style={{ color: '#B8B8B8', fontSize: 14.5, lineHeight: 1.65, marginTop: 14 }}>
                  Precision-mixed concrete from computerized batching plants. Every truck lab-tested,
                  every dispatch logged.
                </p>
                <dl style={{ marginTop: 18, borderTop: '1px solid #2A2A2A', marginBottom: 0 }}>
                  {[['Delivery', '24 / 7'], ['Mix Design', 'M10 – M80'], ['Quality', '100% Lab Tested'], ['Fleet', '14 Authorized']].map(([k, v]) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid #2A2A2A', gap: 16 }}>
                      <dt className="ra-label" style={{ color: '#8A8A8A' }}>{k}</dt>
                      <dd className="ra-mono" style={{ margin: 0, fontSize: 12, color: '#fff', whiteSpace: 'nowrap' }}>{v}</dd>
                    </div>
                  ))}
                </dl>
                <a href="#" className="ra-btn ra-btn--yellow" style={{ marginTop: 22, width: '100%', justifyContent: 'center' }}>
                  Request a Quote
                  <RaIcon name="arrow-right" size={14} stroke={2.5}/>
                </a>
              </div>
            </article>
          )}

          {/* Cost calculator — yellow card */}
          {filter === 'All' && (
            <article style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4/3', position: 'relative', background: 'var(--ra-yellow)', overflow: 'hidden' }}>
                <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }}>
                  {/* blueprint grid */}
                  <g stroke="#1A1A1A" strokeWidth="0.8" opacity="0.25">
                    {Array.from({length: 20}).map((_,i)=><line key={'h'+i} x1="0" y1={i*18} x2="400" y2={i*18}/>)}
                    {Array.from({length: 25}).map((_,i)=><line key={'v'+i} x1={i*18} y1="0" x2={i*18} y2="300"/>)}
                  </g>
                  {/* floor plan sketch */}
                  <g stroke="#1A1A1A" strokeWidth="3" fill="none">
                    <rect x="70" y="70" width="260" height="160"/>
                    <line x1="180" y1="70" x2="180" y2="150"/>
                    <line x1="180" y1="150" x2="330" y2="150"/>
                    <line x1="100" y1="150" x2="180" y2="150"/>
                    <rect x="210" y="170" width="40" height="60" fill="#1A1A1A" opacity="0.15"/>
                  </g>
                  {/* dimension labels */}
                  <g fontFamily="monospace" fontSize="10" fill="#1A1A1A">
                    <text x="190" y="60">12.5 M</text>
                    <text x="40" y="160">8.0 M</text>
                    <text x="210" y="260">RCC · M25</text>
                  </g>
                  {/* ruler */}
                  <g stroke="#1A1A1A" strokeWidth="1.5" fill="#1A1A1A">
                    <line x1="70" y1="250" x2="330" y2="250"/>
                    {Array.from({length: 14}).map((_,i)=><line key={i} x1={70+i*20} y1="246" x2={70+i*20} y2="254" strokeWidth="1"/>)}
                  </g>
                </svg>
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  background: 'var(--ra-ink)', color: 'var(--ra-yellow)',
                  padding: '6px 10px', fontFamily: 'var(--ra-font-body)',
                  fontSize: 10, letterSpacing: 2, fontWeight: 700,
                  whiteSpace: 'nowrap'
                }}>FREE TOOL</div>
              </div>
              <div style={{ padding: '28px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div className="ra-label" style={{ marginBottom: 10 }}>For Homeowners &amp; Contractors</div>
                <h3 className="ra-h1" style={{ fontSize: 30 }}>Construction<br/>Cost Calculator</h3>
                <div className="ra-kn-label" style={{ marginTop: 8, color: 'var(--ra-ink-2)' }}>ನಿಖರ ಅಂದಾಜು · ಉಚಿತ</div>
                <p style={{ color: 'var(--ra-ink-2)', fontSize: 14.5, lineHeight: 1.65, marginTop: 14 }}>
                  Enter your slab dimensions — we calculate exact cement, sand, aggregate and RMC
                  required. Priced in current Mysore market rates.
                </p>
                <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
                  {[['Input', 'L × W × H'], ['Output', 'Bags + m³'], ['Format', 'PDF Quote']].map(([k, v]) => (
                    <div key={k} style={{ background: 'rgba(26,26,26,0.1)', padding: 12 }}>
                      <div className="ra-label" style={{ color: 'var(--ra-ink-2)' }}>{k}</div>
                      <div className="ra-mono" style={{ fontSize: 12, marginTop: 4 }}>{v}</div>
                    </div>
                  ))}
                </div>
                <a href="#" className="ra-btn" style={{ marginTop: 22, width: '100%', justifyContent: 'center', background: 'var(--ra-ink)', borderColor: 'var(--ra-ink)' }}>
                  Start Calculating
                  <RaIcon name="arrow-right" size={14} stroke={2.5}/>
                </a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>
  );
};


/* ================== BUILDING SOLUTIONS TABLE ================== */
const SOLUTIONS = [
  { cat: 'WATERPROOFING', name: 'Seal & Dry', bestFor: 'Flexible waterproofing membrane for terraces and bathrooms' },
  { cat: 'WATERPROOFING', name: 'Flex', bestFor: 'Elastomeric waterproofing for external walls' },
  { cat: 'WATERPROOFING', name: 'HiFlex', bestFor: 'High-performance waterproofing for water tanks and basements' },
  { cat: 'WATERPROOFING', name: 'Mykrofill', bestFor: 'Crystalline waterproofing for concrete structures' },
  { cat: 'TILE ADHESIVES', name: 'TILEFIXO-CT', bestFor: 'Standard ceramic tile adhesive' },
  { cat: 'TILE ADHESIVES', name: 'TILEFIXO-VT', bestFor: 'Vitrified tile adhesive for large format tiles' },
  { cat: 'TILE ADHESIVES', name: 'TILEFIXO-NT', bestFor: 'Non-slip tile adhesive for floors' },
  { cat: 'TILE ADHESIVES', name: 'TILEFIXO-YT', bestFor: 'Heavy duty adhesive for stone and marble' },
  { cat: 'PLASTERS', name: 'Readiplast', bestFor: 'Ready-mix plaster for internal walls, reduces labour time' },
  { cat: 'PLASTERS', name: 'Super Stucco', bestFor: 'Smooth finish plaster for external surfaces' },
  { cat: 'REPAIR PRODUCTS', name: 'Microkrete', bestFor: 'Micro-concrete for structural repairs and thin sections' },
  { cat: 'REPAIR PRODUCTS', name: 'Basekrete', bestFor: 'Cementitious repair mortar for spalled concrete' },
  { cat: 'GROUTS', name: 'Powergrout NS1', bestFor: 'Non-shrink grout for machine bases' },
  { cat: 'GROUTS', name: 'Powergrout NS2', bestFor: 'High-strength precision grout' },
  { cat: 'GROUTS', name: 'Powergrout NS3', bestFor: 'Extended working time grout for large pours' },
  { cat: 'MASONRY', name: 'Fixoblock', bestFor: 'AAC lightweight autoclaved aerated concrete blocks — reduces structural load and improves thermal insulation' },
];

const CAT_COLORS = {
  'WATERPROOFING': '#2563EB',
  'TILE ADHESIVES': '#7C3AED',
  'PLASTERS': '#059669',
  'REPAIR PRODUCTS': '#DC2626',
  'GROUTS': '#D97706',
  'MASONRY': '#374151',
};

const BuildingSolutions = () => {
  const isMobile = useIsMobile();
  return (
  <section id="building-solutions" style={{ padding: isMobile ? '48px 0' : '96px 0', borderTop: '2px solid var(--ra-yellow)', background: 'var(--ra-bg-alt)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 56, alignItems: 'start' }}>
        <div>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>04 / SOLUTIONS</div>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
            <div className="ra-label ra-label-tick">COMPLETE RANGE · ಸಂಪೂರ್ಣ ಶ್ರೇಣಿ</div>
            <div style={{ background: '#fff', padding: '4px 8px', display: 'inline-flex', alignItems: 'center' }}>
              <img src="assets/ultratech-building-solutions-logo.png" alt="UltraTech Building Solutions"
                style={{ height: 40, objectFit: 'contain', display: 'block' }} />
            </div>
          </div>
          <h2 className="ra-display-m" style={{ marginBottom: 16 }}>
            UltraTech<br />
            <span style={{ background: 'var(--ra-yellow)', padding: '0 16px' }}>Building Solutions.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ra-muted)', maxWidth: 600, lineHeight: 1.7 }}>
            Beyond cement — the complete UltraTech system for waterproofing, bonding, finishing and structural repair.
          </p>
        </div>
      </div>

      <div style={{ border: '1px solid var(--ra-border)', overflowX: 'auto', background: '#fff' }}>
        {/* Table header */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 3fr 1fr', background: 'var(--ra-ink)', color: '#fff', padding: '16px 24px' }}>
          <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2 }}>PRODUCT NAME</div>
          <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2 }}>CATEGORY</div>
          <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2 }}>BEST FOR</div>
          <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2 }}>ENQUIRE</div>
        </div>
        {/* Rows */}
        {SOLUTIONS.map((s, i) => (
          <div key={s.name} style={{
            display: 'grid', gridTemplateColumns: '2fr 1.5fr 3fr 1fr',
            padding: '16px 24px', borderBottom: '1px solid var(--ra-border)',
            background: i % 2 === 0 ? '#fff' : '#F9F8F6',
            alignItems: 'center'
          }}>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 15, color: 'var(--ra-ink)' }}>
              {s.name}
            </div>
            <div>
              <span style={{
                fontSize: 10, fontWeight: 700, letterSpacing: 1.5,
                padding: '3px 8px', display: 'inline-block',
                background: CAT_COLORS[s.cat] || '#374151',
                color: '#fff'
              }}>
                {s.cat}
              </span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ra-muted)', lineHeight: 1.5 }}>
              {s.bestFor}
            </div>
            <div>
              <a
                href={'https://wa.me/919448055225?text=' + encodeURIComponent('Hi, I would like to enquire about ' + s.name + ' (UltraTech Building Solutions). Please share pricing and availability.')}
                target="_blank" rel="noopener noreferrer"
                style={{
                  background: '#25D366', color: '#fff',
                  fontSize: 11, fontWeight: 700, letterSpacing: 1,
                  padding: '8px 12px', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  whiteSpace: 'nowrap'
                }}
              >
                WhatsApp
              </a>
            </div>
          </div>
        ))}
        {/* Footer note */}
        <div style={{ padding: '20px 24px', background: 'var(--ra-bg-alt)', borderTop: '2px solid var(--ra-yellow)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="ra-mono" style={{ fontSize: 11, color: 'var(--ra-muted)', letterSpacing: 1.5 }}>
            16 PRODUCTS · AUTHORISED ULTRATECH DEALER · MYSURU
          </div>
          <a href="https://wa.me/919448055225" target="_blank" rel="noopener noreferrer" className="ra-btn ra-btn--yellow ra-btn--sm">
            Enquire All Products
          </a>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { ProductsHero, CoreCatalog, BuildingSolutions });