/* =========================================================
   RAGHUVEER AGENCIES — ABOUT PAGE
   Legacy, founder's promise, timeline, trust metrics, pillars
   ========================================================= */

/* ================== HERO ================== */
const AboutHero = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: '88px 0 72px', borderBottom: '1px solid var(--ra-border)' }}>
      <div className="ra-container">
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 24 }}>
          03 · ABOUT / LEGACY DOSSIER
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.15fr 1fr', gap: 56, alignItems: 'end' }}>
          <div>
            <div className="ra-label ra-label-tick" style={{ marginBottom: 28 }}>Legacy Established 1972</div>
            <h1 className="ra-display-xl" style={{ lineHeight: 0.86, marginBottom: 0 }}>
              Building Mysore<br/>
              for <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>54 years.</span>
            </h1>
            <div className="ra-kn-strap" style={{ color: 'var(--ra-muted)', marginTop: 28, lineHeight: 1.7, fontSize: 17 }}>
              ೫೪ ವರ್ಷಗಳಿಂದ ಮೈಸೂರಿನ ಅಡಿಪಾಯ · ಉತ್ಪಾದನೆ ಪ್ರಾಮಾಣಿಕತೆ ಮತ್ತು ವಿಶ್ವಾಸ
            </div>
            <p style={{ fontSize: 20, color: 'var(--ra-muted)', maxWidth: 620, marginTop: 32, lineHeight: 1.6 }}>
              Authorized UltraTech Cement dealers committed to the structural integrity
              of Karnataka's architectural heritage.
            </p>

            <div style={{ marginTop: 40, display: 'inline-flex', alignItems: 'center', gap: 18 }}>
              <div style={{
                background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
                padding: '20px 24px', display: 'inline-flex', alignItems: 'center', gap: 16
              }}>
                <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 900, fontSize: 40, lineHeight: 1 }}>54+</div>
                <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 13, letterSpacing: 1.5, lineHeight: 1.2 }}>
                  Years<br/>Of Excellence
                </div>
              </div>
              <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2 }}>
                AUTHORIZED<br/>ULTRATECH · MYSURU
              </div>
            </div>
          </div>

          {/* Founder portrait */}
          <div style={{ position: 'relative', minHeight: isMobile ? 300 : 560, height: '100%', background: '#1A1A1A', overflow: 'hidden' }}>
            <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' }}
            />
            {/* caption overlay */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              background: 'linear-gradient(transparent, rgba(0,0,0,0.85))',
              padding: '40px 24px 24px'
            }}>
              <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 20, color: '#fff', letterSpacing: '0.01em' }}>
                D. Keerthi Kumar
              </div>
              <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, color: 'var(--ra-yellow)', marginTop: 4 }}>
                FOUNDER · EST. 1972
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ================== TECHNICAL + FOUNDER PROMISE ================== */
const AboutTechFounder = () => {
  const isMobile = useIsMobile();
  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: 56 }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>01 / ETHOS</div>
          <h2 className="ra-display-l" style={{ maxWidth: 1020, lineHeight: 0.95 }}>
            Technical precision meets<br/>
            <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>local reliability.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
          {/* LIGHT — Technical Support */}
          <div style={{
            background: '#fff', border: '1px solid var(--ra-border)',
            padding: 48, minHeight: 460,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
          }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 32 }}>
                <div className="ra-label ra-label-tick">For Every Site</div>
                <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11 }}>01 / 02</div>
              </div>

              {/* Technical Support icon — calipers + blueprint grid */}
              <div style={{ marginBottom: 28 }}>
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" style={{ color: 'var(--ra-ink)' }}>
                  <rect x="8" y="8" width="48" height="48"/>
                  <path d="M8 20h48M8 32h48M8 44h48M20 8v48M32 8v48M44 8v48"/>
                  <path d="M20 32l6 6 12-12" stroke="#F0C000" strokeWidth="3" fill="none"/>
                </svg>
              </div>

              <h3 className="ra-display-s" style={{ fontSize: 40, lineHeight: 1, marginBottom: 20 }}>
                Technical<br/>Support.
              </h3>
              <p style={{ color: 'var(--ra-muted)', lineHeight: 1.7, maxWidth: 460, marginBottom: 0 }}>
                Our team provides expert guidance on mix designs and compressive
                strength for every scale of project.
              </p>
            </div>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, marginTop: 32, borderTop: '1px solid var(--ra-border)' }}>
              {[
                'Mix design consultation (M15 – M80)',
                'Compressive strength advisory',
                'Grade selection by application'
              ].map(item => (
                <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--ra-border)' }}>
                  <RaIcon name="check" size={16} stroke={2.5} style={{ color: 'var(--ra-ink)' }} />
                  <span style={{ fontSize: 14 }}>{item}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* DARK — Founder's Promise */}
          <div style={{
            background: 'var(--ra-ink)', color: '#fff',
            padding: 48, minHeight: 460,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            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: '48px 48px', opacity: 0.45, pointerEvents: 'none'
            }} />

            <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', marginBottom: 32 }}>
              <div className="ra-label ra-label--on-dark ra-label-tick" style={{ color: '#F0C000' }}>The Founder's Promise</div>
              <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11 }}>02 / 02</div>
            </div>

            <div style={{ position: 'relative' }}>
              <div style={{
                fontFamily: 'var(--ra-font-display)', color: 'var(--ra-yellow)',
                fontSize: 120, lineHeight: 0.8, fontWeight: 900, marginBottom: -20
              }}>“</div>
              <blockquote style={{
                fontFamily: 'var(--ra-font-display)', fontWeight: 700,
                fontSize: 28, lineHeight: 1.25, color: '#fff', margin: 0,
                letterSpacing: '-0.01em', maxWidth: 540
              }}>
                "Mysore's legacy is built on culture, music, art, and yoga — a foundation carried in every Mysorean. We reflect that same strength and trust in everything we do."
              </blockquote>
              <div className="ra-kn-strap" style={{ color: '#8A8A8A', marginTop: 20, fontSize: 16, lineHeight: 1.8, maxWidth: 540 }}>
                "ಮೈಸೂರಿನ ಪರಂಪರೆಯು ಸಂಸ್ಕೃತಿ, ಸಂಗೀತ, ಕಲೆ ಮತ್ತು ಯೋಗದ ಮೇಲೆ ನಿರ್ಮಿತವಾಗಿದೆ — ಪ್ರತಿಯೊಬ್ಬ ಮೈಸೂರಿಗನ ಹೃದಯದಲ್ಲಿ ಹರಿಯುವ ಅಡಿಪಾಯ. ನಾವು ಮಾಡುವ ಪ್ರತಿಯೊಂದರಲ್ಲೂ ಅದೇ ಶಕ್ತಿ ಮತ್ತು ವಿಶ್ವಾಸವನ್ನು ಪ್ರತಿಫಲಿಸುತ್ತೇವೆ."
              </div>
            </div>

            <div style={{ position: 'relative', marginTop: 32, paddingTop: 20, borderTop: '1px solid #2A2A2A', display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 16 }}>
              <div>
                <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 18, textTransform: 'uppercase', color: '#fff' }}>
                  D. Keerthi Kumar
                </div>
                <div className="ra-mono" style={{ color: '#B8B8B8', fontSize: 12, marginTop: 4, letterSpacing: 1.5 }}>
                  FOUNDER · RAGHUVEER AGENCIES · EST. 1972
                </div>
              </div>
              <img
                src="assets/about-founder-portrait.png"
                alt="D. Keerthi Kumar — Founder, Raghuveer Agencies"
                style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover', border: '2px solid var(--ra-yellow)' }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ================== LEGACY TIMELINE ================== */
const AboutTimeline = () => {
  const isMobile = useIsMobile();
  const entries = [
    { year: '1972', title: 'The Inception', kn: 'ಆರಂಭ', img: 'assets/about-timeline-1972.jpg',
      desc: 'Founded by Shri D. Keerthi Kumar with a single vision to bring world-class building materials to the historic city of Mysore.' },
    { year: '1998', title: 'UltraTech Partnership', kn: 'ಸಂಬಂಧ',
      desc: 'Forged a strategic alliance with UltraTech Cement (formerly L&T), becoming the region\'s first premium authorized distributor.' },
    { year: '2024', title: 'Technological Leap', kn: 'ಡಿಜಿಟಲ್ ಯುಗ',
      desc: 'Launching digital estimation tools and an expanded product range to serve modern construction at every scale.' },
  ];

  return (
    <section style={{ padding: '104px 0', borderBottom: '1px solid var(--ra-border)', background: 'var(--ra-bg-alt)' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, marginBottom: 80 }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>02 / TIMELINE</div>
          <div>
            <h2 className="ra-display-l" style={{ lineHeight: 0.95, marginBottom: 14 }}>
              The <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>Legacy.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ra-muted)', maxWidth: 600, lineHeight: 1.65 }}>
              Three defining chapters — one family, one city, five decades of structural trust.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 2, background: 'var(--ra-border)' }}>
          {entries.map((e, i) => (
            <div key={e.year} style={{
              background: 'var(--ra-bg)', padding: '56px 40px 48px',
              minHeight: 420, position: 'relative', overflow: 'hidden',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
              {/* Ghost year behind */}
              <div style={{
                position: 'absolute', top: -26, right: -20,
                fontFamily: 'var(--ra-font-display)', fontWeight: 900,
                fontSize: 220, lineHeight: 1,
                color: 'var(--ra-ink)', opacity: 0.04,
                letterSpacing: '-0.04em', pointerEvents: 'none'
              }}>{e.year}</div>

              <div style={{ position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
                  <div style={{ width: 12, height: 12, background: 'var(--ra-yellow)' }} />
                  <div className="ra-mono" style={{ fontSize: 12, letterSpacing: 2, color: 'var(--ra-muted)' }}>
                    CHAPTER {String(i + 1).padStart(2, '0')}
                  </div>
                </div>

                <div style={{
                  fontFamily: 'var(--ra-font-display)', fontWeight: 900,
                  fontSize: 88, lineHeight: 0.9, letterSpacing: '-0.03em',
                  marginBottom: 20
                }}>
                  {e.year}
                </div>

                <div style={{
                  fontFamily: 'var(--ra-font-display)', fontWeight: 800,
                  fontSize: 22, textTransform: 'uppercase', letterSpacing: '0.01em',
                  marginBottom: 8, lineHeight: 1.15
                }}>
                  {e.title}
                </div>
                <div className="ra-kn-label" style={{ color: 'var(--ra-muted)', marginBottom: 20 }}>
                  {e.kn}
                </div>
              </div>

              {e.img && (
                <img src={e.img} alt={e.title}
                  style={{ width: '100%', height: 140, objectFit: 'cover', marginBottom: 16, display: 'block' }} />
              )}
              <p style={{
                position: 'relative',
                fontSize: 15, lineHeight: 1.65, color: 'var(--ra-ink)',
                margin: 0, borderTop: '1px solid var(--ra-border)', paddingTop: 20
              }}>
                {e.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AboutHero, AboutTechFounder, AboutTimeline });