/* global React */
// Contact Page — Foundation, map, direct connect, verification

const ContactHero = () => (
  <section style={{ padding: '88px 0 64px', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 48, marginBottom: 40 }}>
        <div className="ra-label ra-label-tick">Direct line to the yard</div>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, textAlign: 'right', whiteSpace: 'nowrap' }}>
          YARD · MYSURU 570004<br/>
          15 MIN FROM PALACE · 24/7 DISPATCH
        </div>
      </div>
      <h1 className="ra-display-xl" style={{ lineHeight: 0.88, marginBottom: 48 }}>
        Establish your<br/>
        <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>foundation.</span>
      </h1>
      <p style={{ fontSize: 19, color: 'var(--ra-muted)', maxWidth: 680, margin: 0, lineHeight: 1.6 }}>
        Authorized UltraTech Cement Distributor serving Mysore's residential
        and industrial expansion since 1972.
      </p>
    </div>
  </section>
);

const MapPanel = () => (
  <div style={{ position: 'relative', aspectRatio: '5/6', background: '#1A1A1A', border: '1px solid var(--ra-border)', overflow: 'hidden' }}>
    <img
      src="assets/contact-store-exterior-1.png"
      alt="Raghuveer Agencies — 672, 10th Cross, Basaveshwara Road, Mysuru"
      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
    />
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
      padding: '40px 24px 20px'
    }}>
      <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, color: 'var(--ra-yellow)', marginBottom: 6 }}>OUR PREMISES</div>
      <div style={{ fontSize: 14, color: '#fff', lineHeight: 1.5 }}>
        672, 10th Cross, Basaveshwara Road<br/>Mysuru 570004
      </div>
    </div>
  </div>
);

const ContactGrid = () => (
  <section style={{ padding: '56px 0' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
        <MapPanel/>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {/* Yellow direct connect */}
          <a href="https://wa.me/919448055225" style={{
            textDecoration: 'none', background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
            padding: 36, display: 'flex', flexDirection: 'column', gap: 16
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2 }}>01 · DIRECT CONNECT</div>
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="#1A1A1A" strokeWidth="2.3">
                <path d="M4 24l2-6a10 10 0 1 1 4 4l-6 2z"/>
                <path d="M10 12c1 3 3 5 6 6l2-2 3 1-1 3c-4 1-8-1-11-4s-5-7-4-11l3-1 1 3-2 2z" fill="#1A1A1A"/>
              </svg>
            </div>
            <div className="ra-h1" style={{ fontSize: 32, lineHeight: 1 }}>WhatsApp instant quotes.</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 4 }}>
              <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>+91 94480 55225</div>
              <RaIcon name="arrow-right" size={18} stroke={2.5}/>
            </div>
          </a>

          {/* Phone + email stacked */}
          {[
            { no: '02', t: 'Sales Support', v: '+91 94480 55225', sub: 'Technical + dispatch desk', icon: (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z"/>
              </svg>
            ) },
            { no: '03', t: 'Email', v: 'sales@raghuveeragencies.com', sub: 'Tenders · industrial RFQs', icon: (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="5" width="18" height="14"/>
                <path d="M3 7l9 7 9-7"/>
              </svg>
            ) },
          ].map(c => (
            <div key={c.no} style={{
              background: '#fff', border: '1px solid var(--ra-border)',
              padding: 28, display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20, alignItems: 'center'
            }}>
              <div style={{ width: 54, height: 54, background: 'var(--ra-bg-alt)', border: '1px solid var(--ra-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ra-ink)' }}>
                {c.icon}
              </div>
              <div>
                <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 6 }}>{c.no} · {c.t.toUpperCase()}</div>
                <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em' }}>{c.v}</div>
                <div style={{ color: 'var(--ra-muted)', fontSize: 13, marginTop: 4 }}>{c.sub}</div>
              </div>
              <RaIcon name="arrow-up-right" size={14} stroke={2}/>
            </div>
          ))}

          {/* Hours */}
          <div style={{ background: 'var(--ra-ink)', color: '#fff', padding: 28 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center' }}>
              <div>
                <div className="ra-mono" style={{ color: 'var(--ra-yellow)', fontSize: 11, letterSpacing: 2, marginBottom: 6 }}>04 · YARD HOURS</div>
                <div style={{ display: 'flex', gap: 28, marginTop: 14 }}>
                  <div>
                    <div className="ra-label" style={{ color: '#8A8A8A' }}>Mon – Sat</div>
                    <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 22, marginTop: 6, whiteSpace: 'nowrap' }}>08:00 – 20:00</div>
                  </div>
                  <div style={{ width: 1, background: '#2A2A2A' }}/>
                  <div>
                    <div className="ra-label" style={{ color: '#8A8A8A' }}>Sunday</div>
                    <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 22, marginTop: 6 }}>Closed</div>
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: '#3FCF6A', borderRadius: '50%', boxShadow: '0 0 0 4px rgba(63,207,106,0.2)' }}/>
                <span className="ra-mono" style={{ fontSize: 10, letterSpacing: 2, color: '#3FCF6A' }}>OPEN NOW</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ContactThreeCol = () => (
  <section style={{ padding: '40px 0 120px' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--ra-border)', background: '#fff' }}>
        {/* Regional Presence */}
        <div style={{ padding: 36, borderRight: '1px solid var(--ra-border)' }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>A / LOCATION</div>
          <h3 className="ra-h1" style={{ fontSize: 22, marginBottom: 18 }}>Regional Presence</h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              '15 min from Mysore Palace',
              'Adjacent to Belagola Industrial Area',
              'Direct access to Hebbal Industrial Area',
              'Ring-road dispatch to Mandya & Hassan',
            ].map(it => (
              <li key={it} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--ra-muted)', lineHeight: 1.5 }}>
                <span style={{ width: 6, height: 6, background: 'var(--ra-yellow)', marginTop: 8, flexShrink: 0 }}/>
                {it}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 22, padding: 14, background: 'var(--ra-bg-alt)', border: '1px solid var(--ra-border)' }}>
            <div className="ra-label" style={{ color: 'var(--ra-muted)', marginBottom: 6 }}>Full Address</div>
            <div style={{ fontFamily: 'var(--ra-font-display)', fontSize: 14, fontWeight: 600, lineHeight: 1.5 }}>
              672, 10th Cross, Basaveshwara Rd,<br/>
              Mysuru, Karnataka 570004
            </div>
          </div>
        </div>

        {/* Operating Hours */}
        <div style={{ padding: 36, borderRight: '1px solid var(--ra-border)', background: 'var(--ra-yellow)' }}>
          <div className="ra-mono" style={{ fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>B / HOURS</div>
          <h3 className="ra-h1" style={{ fontSize: 22, marginBottom: 18 }}>Operating Hours</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--ra-font-display)' }}>
            <tbody>
              {[
                ['Monday', '08:00 – 20:00'],
                ['Tuesday', '08:00 – 20:00'],
                ['Wednesday', '08:00 – 20:00'],
                ['Thursday', '08:00 – 20:00'],
                ['Friday', '08:00 – 20:00'],
                ['Saturday', '08:00 – 20:00'],
                ['Sunday', 'Closed'],
              ].map(([d, h], i) => (
                <tr key={d} style={{ borderBottom: i < 6 ? '1px solid rgba(26,26,26,0.15)' : 'none' }}>
                  <td style={{ padding: '10px 0', fontWeight: 600, fontSize: 14 }}>{d}</td>
                  <td style={{ padding: '10px 0', textAlign: 'right', fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap' }}>{h}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="ra-mono" style={{ fontSize: 10, letterSpacing: 2, marginTop: 16 }}>
            EMERGENCY DISPATCH · 24/7 ON CALL
          </div>
        </div>

        {/* Verification */}
        <div style={{ padding: 36, background: 'var(--ra-ink)', color: '#fff' }}>
          <div className="ra-mono" style={{ color: 'var(--ra-yellow)', fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>C / VERIFICATION</div>
          <h3 className="ra-h1" style={{ fontSize: 22, marginBottom: 18, color: '#fff' }}>Credentials</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { t: 'ISO 9001:2015', s: 'Quality Management System', ic: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0C000" strokeWidth="2">
                  <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>
                </svg>
              ) },
              { t: 'UltraTech Star Dealer', s: 'Platinum tier · Karnataka region', ic: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0C000" strokeWidth="2">
                  <path d="M12 2l3 7h7l-5.5 4.5L18 20l-6-4-6 4 1.5-7.5L2 9h7z"/>
                </svg>
              ) },
              { t: 'BIS Licensed Distributor', s: 'IS 12269 / IS 1489 certified supply', ic: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0C000" strokeWidth="2">
                  <path d="M12 2L3 6v6c0 5 4 9 9 10 5-1 9-5 9-10V6l-9-4z"/>
                  <path d="M8 12l3 3 5-5"/>
                </svg>
              ) },
              { t: 'GST · 29AABCR1972K1Z5', s: 'Registered Karnataka trader', ic: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0C000" strokeWidth="2">
                  <rect x="4" y="4" width="16" height="16"/>
                  <path d="M8 10h8M8 14h8"/>
                </svg>
              ) },
            ].map(v => (
              <div key={v.t} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #2A2A2A' }}>
                <div style={{ width: 40, height: 40, border: '1px solid #2A2A2A', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {v.ic}
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 14, textTransform: 'uppercase' }}>{v.t}</div>
                  <div style={{ color: '#8A8A8A', fontSize: 12, marginTop: 2 }}>{v.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { ContactHero, ContactGrid, ContactThreeCol });