/* =========================================================
   RAGHUVEER AGENCIES — ABOUT PAGE PART 2
   Trust metrics, three pillars, final CTA
   ========================================================= */

/* ================== TRUST METRICS — DARK ================== */
const AboutTrustMetrics = () => {
  const isMobile = useIsMobile();
  const stats = [
    { n: '12,000+', l: 'Homes Built', kn: 'ಕಟ್ಟಿದ ಮನೆಗಳು' },
    { n: '450+',    l: 'Industrial Projects', kn: 'ಕೈಗಾರಿಕಾ ಯೋಜನೆಗಳು' },
    { n: '1.2M',    l: 'Tons Delivered', kn: 'ವಿತರಿಸಿದ ಟನ್' },
  ];
  return (
    <section style={{ background: 'var(--ra-ink)', color: '#fff', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px)',
        backgroundSize: '64px 64px', opacity: 0.5, pointerEvents: 'none'
      }} />

      <div className="ra-container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 72 }}>
          <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 12, letterSpacing: 2 }}>03 / PROOF</div>
          <div>
            <div className="ra-label ra-label--on-dark ra-label-tick" style={{ color: '#F0C000', marginBottom: 18 }}>
              Measured in decades
            </div>
            <h2 className="ra-display-l" style={{ color: '#fff', maxWidth: 960, lineHeight: 0.95 }}>
              Trust, <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 14px' }}>quantified.</span>
            </h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 2, background: '#2A2A2A' }}>
          {stats.map((s, i) => (
            <div key={s.l} style={{
              background: 'var(--ra-ink)', padding: '60px 40px 48px',
              minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative', overflow: 'hidden'
            }}>
              <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, color: '#F0C000' }}>
                METRIC {String(i+1).padStart(2,'0')}
              </div>
              <div>
                <div className="ra-display-xl" style={{
                  color: '#fff', fontSize: 100, lineHeight: 0.85,
                  letterSpacing: '-0.03em', marginBottom: 14
                }}>{s.n}</div>
                <div style={{
                  fontFamily: 'var(--ra-font-display)', fontWeight: 800,
                  fontSize: 22, textTransform: 'uppercase', color: '#fff', letterSpacing: '0.01em'
                }}>{s.l}</div>
                <div className="ra-kn-label" style={{ color: '#8A8A8A', marginTop: 10 }}>{s.kn}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ================== THREE PILLARS ================== */
const AboutPillars = () => {
  const isMobile = useIsMobile();
  const pillars = [
    {
      tag: 'Pillar 01',
      t: 'Authorized Supply',
      kn: 'ಅಧಿಕೃತ ಪೂರೈಕೆ',
      desc: 'Genuine batch-certified UltraTech cement direct from manufacturing plants.',
      icon: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="2.4">
          <path d="M8 18l20-10 20 10v20L28 48 8 38V18z"/>
          <path d="M8 18l20 10 20-10M28 28v20"/>
          <path d="M20 34l4 4 10-10" stroke="#F0C000" strokeWidth="3"/>
        </svg>
      ),
    },
    {
      tag: 'Pillar 02',
      t: 'Technical Expertise',
      kn: 'ತಾಂತ್ರಿಕ ಪರಿಣತಿ',
      desc: 'Expert guidance on product selection, mix design and compressive strength optimization.',
      icon: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="2.4">
          <rect x="6" y="8" width="44" height="40"/>
          <path d="M6 20h44M16 8v40M36 8v40"/>
          <path d="M22 32l4 4 8-8" stroke="#F0C000" strokeWidth="3"/>
        </svg>
      ),
    },
    {
      tag: 'Pillar 03',
      t: 'Local Knowledge',
      kn: 'ಸ್ಥಳೀಯ ಅರಿವು',
      desc: '54 years embedded in Mysuru\'s construction ecosystem across residential, commercial and infrastructure.',
      icon: (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="2.4">
          <path d="M28 50c-10-10-18-18-18-30a18 18 0 1136 0c0 12-8 20-18 30z"/>
          <circle cx="28" cy="20" r="6" fill="#F0C000" stroke="none"/>
        </svg>
      ),
    },
  ];

  return (
    <section style={{ padding: '104px 0', borderBottom: '1px solid var(--ra-border)' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 64 }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>04 / PILLARS</div>
          <div>
            <h2 className="ra-display-l" style={{ lineHeight: 0.95, marginBottom: 16 }}>
              Three <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>pillars.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ra-muted)', maxWidth: 620, lineHeight: 1.65 }}>
              The structural standards we hold ourselves to — on every bag, every mix and every handshake.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 2, background: 'var(--ra-border)' }}>
          {pillars.map((p, i) => (
            <div key={p.t} style={{
              background: '#fff', padding: '56px 40px',
              minHeight: 420, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative'
            }}>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
                  <div className="ra-label ra-label-tick">{p.tag}</div>
                  <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, color: 'var(--ra-muted)' }}>
                    0{i+1} / 03
                  </div>
                </div>
                <div style={{ color: 'var(--ra-ink)', marginBottom: 28 }}>{p.icon}</div>
                <h3 style={{
                  fontFamily: 'var(--ra-font-display)', fontWeight: 900,
                  fontSize: 36, lineHeight: 0.98, margin: 0, textTransform: 'uppercase',
                  letterSpacing: '-0.01em', marginBottom: 10
                }}>
                  {p.t}
                </h3>
                <div className="ra-kn-label" style={{ color: 'var(--ra-muted)', marginBottom: 24 }}>
                  {p.kn}
                </div>
              </div>
              <p style={{
                fontSize: 15, lineHeight: 1.65, color: 'var(--ra-ink)',
                margin: 0, borderTop: '1px solid var(--ra-border)', paddingTop: 20
              }}>
                {p.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ================== FINAL CTA ================== */
const AboutFinalCTA = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ra-ink)', color: '#fff', padding: '140px 0 120px', position: 'relative', overflow: 'hidden' }}>
      {/* grid bg */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px)',
        backgroundSize: '64px 64px'
      }} />
      {/* large 54 ghost */}
      <div style={{
        position: 'absolute', top: -60, right: -60,
        fontFamily: 'var(--ra-font-display)', fontWeight: 900,
        fontSize: 520, lineHeight: 1, color: '#F0C000',
        opacity: 0.08, letterSpacing: '-0.05em', pointerEvents: 'none'
      }}>54</div>

      <div className="ra-container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="ra-mono" style={{ color: '#F0C000', fontSize: 12, letterSpacing: 2 }}>05 / BUILD WITH US</div>
          <div className="ra-label ra-label--on-dark ra-label-tick" style={{ color: '#F0C000' }}>
            Half a century of proof
          </div>
        </div>

        <h2 className="ra-display-xl" style={{
          color: '#fff', lineHeight: 0.88, maxWidth: 1200, marginBottom: 56
        }}>
          Building your future<br/>
          on <span style={{ background: 'var(--ra-yellow)', color: 'var(--ra-ink)', padding: '0 14px' }}>54 years</span> of proof.
        </h2>

        <div className="ra-kn-strap" style={{ color: '#B8B8B8', fontSize: 15, marginBottom: 56, lineHeight: 1.8 }}>
          ನಿಮ್ಮ ಯೋಜನೆಯ ಅಡಿಪಾಯ · ನಮ್ಮ ೫೪ ವರ್ಷಗಳ ಅನುಭವ
        </div>

        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <a href="Contact.html" className="ra-btn ra-btn--yellow ra-btn--lg">
            Start Your Project
            <RaIcon name="arrow-right" size={14} stroke={2.5} />
          </a>
          <a href="Contact.html" className="ra-btn ra-btn--ghost-on-dark ra-btn--lg">
            Contact Us
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AboutTrustMetrics, AboutPillars, AboutFinalCTA });