/* global React */

/* ============================================================
   RAGHUVEER AGENCIES — SHARED COMPONENTS
   - Logo (wrench icon + wordmark)
   - SiteNav
   - SiteFooter
   - Icon set
   ============================================================ */

const { useState } = React;

const useIsMobile = () => {
  const [isMobile, setIsMobile] = React.useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return isMobile;
};

/* ---------- ICON SET ---------- */
const RaIcon = ({ name, size = 20, stroke = 2, style = {} }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "square", strokeLinejoin: "miter",
    style
  };
  switch (name) {
    case 'wrench':
      // stylized industrial wrench — two open jaws on an angled shaft
      return (
        <svg {...common} viewBox="0 0 32 32">
          <path d="M20.5 4.5a6 6 0 0 0-7.8 7.8L4 21l3 3 8.7-8.7a6 6 0 0 0 7.8-7.8l-3.2 3.2-2.8-.4-.4-2.8z"/>
          <path d="M6.5 21.5l4 4" />
        </svg>
      );
    case 'arrow-right':
      return (<svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case 'arrow-left':
      return (<svg {...common}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>);
    case 'arrow-up-right':
      return (<svg {...common}><path d="M7 17L17 7M9 7h8v8"/></svg>);
    case 'plus':
      return (<svg {...common}><path d="M12 5v14M5 12h14"/></svg>);
    case 'check':
      return (<svg {...common}><path d="M4 12l5 5L20 6"/></svg>);
    case 'phone':
      return (<svg {...common}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>);
    case 'mail':
      return (<svg {...common}><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>);
    case 'pin':
      return (<svg {...common}><path d="M12 22s7-7 7-13a7 7 0 1 0-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case 'menu':
      return (<svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case 'close':
      return (<svg {...common}><path d="M5 5l14 14M19 5L5 19"/></svg>);
    default: return null;
  }
};

/* ---------- LOGO ---------- */
const RaLogo = ({ dark = false, size = 'md', kannada = true }) => {
  // The uploaded logo uses #111111 (ink) + #F0C000 (gold).
  // For dark backgrounds we override those to white + yellow.
  const ink = dark ? '#FFFFFF' : '#111111';
  const gold = dark ? '#F0C000' : '#F0C000';
  const muted = dark ? '#8A8A8A' : '#999999';

  const wordSize = size === 'lg' ? 44 : 42;
  const archWidth = size === 'lg' ? 70 : 80;

  return (
    <a href="index.html" className="ra-logo" style={{
      display: 'inline-flex', alignItems: 'center', gap: 18,
      textDecoration: 'none', color: ink, lineHeight: 1
    }}>
      {/* Kodanda arch mark — extracted from the official SVG, color-aware */}
      <svg viewBox="0 -6 196 120" width={archWidth} height={archWidth * (120/196)} aria-hidden="true" style={{ flexShrink: 0 }}>
        <path d="M22 100 Q98 10 174 100" fill="none" stroke={ink} strokeWidth="3.5" strokeLinecap="round"/>
        <path d="M33 100 Q98 24 163 100" fill="none" stroke={gold} strokeWidth="2" strokeLinecap="round"/>
        <line x1="14" y1="100" x2="182" y2="100" stroke={ink} strokeWidth="2.5"/>
        <line x1="14" y1="100" x2="14" y2="112" stroke={ink} strokeWidth="2.5"/>
        <line x1="182" y1="100" x2="182" y2="112" stroke={ink} strokeWidth="2.5"/>
        <line x1="98" y1="22" x2="98" y2="100" stroke={gold} strokeWidth="1.2" strokeDasharray="4 5" opacity="0.85"/>
        <circle cx="98" cy="11" r="7.5" fill={gold} stroke={ink} strokeWidth="1.5"/>
        <circle cx="98" cy="11" r="3" fill={ink}/>
        <line x1="98" y1="1" x2="98" y2="-3" stroke={ink} strokeWidth="1.5"/>
        <line x1="98" y1="21" x2="98" y2="25" stroke={ink} strokeWidth="1.5"/>
        <line x1="87.5" y1="11" x2="83.5" y2="11" stroke={ink} strokeWidth="1.5"/>
        <line x1="108.5" y1="11" x2="112.5" y2="11" stroke={ink} strokeWidth="1.5"/>
        <line x1="90.6" y1="3.6" x2="87.8" y2="0.8" stroke={ink} strokeWidth="1.5"/>
        <line x1="105.4" y1="3.6" x2="108.2" y2="0.8" stroke={ink} strokeWidth="1.5"/>
        <line x1="90.6" y1="18.4" x2="87.8" y2="21.2" stroke={ink} strokeWidth="1.5"/>
        <line x1="105.4" y1="18.4" x2="108.2" y2="21.2" stroke={ink} strokeWidth="1.5"/>
      </svg>

      <span style={{ display: 'inline-flex', flexDirection: 'column', gap: 3, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: 'Georgia, "Times New Roman", serif',
          fontWeight: 700,
          fontSize: wordSize * 0.5,
          letterSpacing: '0.08em',
          color: ink,
          lineHeight: 1
        }}>
          RAGHUVEER
        </span>
        <span style={{
          fontFamily: 'var(--ra-font-body)',
          fontWeight: 800,
          fontSize: wordSize * 0.22,
          letterSpacing: '0.55em',
          color: gold,
          lineHeight: 1,
          marginTop: 2
        }}>
          AGENCIES
        </span>
        {kannada && (
          <span style={{
            fontFamily: 'var(--ra-font-kannada)',
            fontSize: wordSize * 0.19,
            color: muted,
            letterSpacing: '0.03em',
            marginTop: 4,
            lineHeight: 1.2
          }}>
            {size === 'lg'
              ? 'ಮೈಸೂರಿನ ವಿಶ್ವಾಸಾರ್ಹ ಸಿಮೆಂಟ್ ಡೀಲರ್ · EST. 1972'
              : 'EST. 1972 · ಮೈಸೂರು'}
          </span>
        )}
      </span>
    </a>
  );
};

/* ---------- SITE NAV ---------- */
const NAV_LINKS = [
  { label: 'Home',        href: 'index.html', active: true },
  { label: 'Products',    href: 'Products.html' },
  { label: 'Residential', href: 'Residential.html' },
  { label: 'Industrial',  href: 'Industrial.html' },
  { label: 'Showcase',    href: 'Showcase.html' },
  { label: 'Calculator',  href: 'Calculator.html' },
  { label: 'About',       href: 'About.html' },
];

const SiteNav = ({ active = 'Home' }) => {
  const [open, setOpen] = useState(false);
  return (
    <header className="ra-nav-wrap" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'var(--ra-bg)',
      borderBottom: '1px solid var(--ra-border)'
    }}>
      <style>{`
        .ra-nav-inner { height: var(--ra-nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
        .ra-nav-links { display:flex; align-items:center; gap:24px; }
        .ra-nav-link  { font-family: var(--ra-font-body); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ra-ink); text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent; white-space:nowrap; }
        .ra-nav-link.is-active { font-weight:700; border-bottom-color: var(--ra-yellow); }
        .ra-nav-toggle { display:none; background:transparent; border:1px solid var(--ra-ink); padding:10px; cursor:pointer; color: var(--ra-ink); border-radius: 4px; }
        .ra-nav-cta-lg { display:inline-flex; }
        .ra-nav-cta-sm { display:none; }
        .ra-nav-drawer { display:none; }

        @media (max-width: 1180px) {
          .ra-nav-links { gap: 18px; }
          .ra-nav-link { font-size: 12px; letter-spacing: 1.2px; }
        }
        @media (max-width: 1000px) {
          .ra-nav-links { display: none; }
          .ra-nav-toggle { display:inline-flex; }
          .ra-nav-cta-lg { display:none; }
          .ra-nav-cta-sm { display:inline-flex; }
          .ra-nav-badge-text { display:none; }
          .ra-nav-drawer { display: ${open ? 'block' : 'none'}; border-top: 1px solid var(--ra-border); background: var(--ra-bg); }
          .ra-nav-drawer nav { display:flex; flex-direction:column; padding: 20px var(--ra-gutter) 28px; gap: 4px; }
          .ra-nav-drawer .ra-nav-link { padding: 14px 0; border-bottom: 1px solid var(--ra-border); font-size: 14px; letter-spacing: 2px; }
          .ra-nav-drawer .ra-nav-link.is-active { border-bottom-color: var(--ra-yellow); border-bottom-width: 2px; }
        }
      `}</style>

      <div className="ra-container ra-nav-inner">
        <RaLogo />

        <nav className="ra-nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href}
              className={'ra-nav-link' + (active === l.label ? ' is-active' : '')}>
              {l.label}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* Desktop: WhatsApp + Call Us */}
          <a href="https://wa.me/919448055225?text=Hi%2C+I+need+a+quote+from+Raghuveer+Agencies." target="_blank" rel="noopener noreferrer" className="ra-btn ra-btn--yellow ra-btn--sm ra-nav-cta-lg" style={{ display:'inline-flex', alignItems:'center' }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 6, flexShrink: 0 }}><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.99 2C6.47 2 2 6.47 2 12c0 1.75.46 3.4 1.26 4.84L2 22l5.26-1.24A9.92 9.92 0 0011.99 22C17.52 22 22 17.52 22 12S17.52 2 11.99 2z"/></svg>WHATSAPP US
          </a>
          <a href="tel:+919448055225" className="ra-btn ra-btn--ghost ra-btn--sm ra-nav-cta-lg" style={{ display:'inline-flex', alignItems:'center' }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" style={{ marginRight: 6, flexShrink: 0 }}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>CALL US
          </a>

          <button className="ra-nav-toggle" aria-label="Menu" onClick={() => setOpen(v => !v)}>
            <RaIcon name={open ? 'close' : 'menu'} size={20} stroke={2.2} />
          </button>
        </div>
      </div>

      <div className="ra-nav-drawer">
        <nav>
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href}
              className={'ra-nav-link' + (active === l.label ? ' is-active' : '')}
              onClick={() => setOpen(false)}>
              {l.label}
            </a>
          ))}
        </nav>
      </div>
    </header>
  );
};

/* ---------- SITE FOOTER ---------- */
const FOOTER_COLUMNS = [
  {
    title: 'Product Catalog',
    kn: 'ಉತ್ಪನ್ನಗಳು',
    links: [
      { label: 'UltraTech OPC 53', href: 'Products.html' },
      { label: 'UltraTech PPC', href: 'Products.html' },
      { label: 'Ready Mix Concrete (RMC)', href: 'Products.html' },
      { label: 'Building Solutions', href: 'Products.html#building-solutions' },
      { label: 'Product Datasheets', href: 'Datasheets.html' },
    ],
  },
  {
    title: 'Tools & Resources',
    kn: 'ಸಂಪನ್ಮೂಲಗಳು',
    links: [
      { label: 'Technical Datasheets', href: 'Datasheets.html' },
      { label: 'Material Calculator', href: 'Calculator.html' },
      { label: 'Request Bulk Order', href: 'https://wa.me/919448055225?text=Hi%2C+I+need+to+place+a+bulk+order.' },
      { label: 'Heritage Showcase', href: 'Showcase.html' },
      { label: 'Tender Support', href: 'https://wa.me/919448055225?text=Hi%2C+I+need+tender+support+for+a+project.' },
      { label: 'Delivery Zones', href: 'Delivery.html' },
    ],
  },
  {
    title: 'Contact',
    kn: 'ಸಂಪರ್ಕಿಸಿ',
    links: [
      { label: '+91 94480 55225', href: 'tel:+919448055225' },
      { label: 'sales@raghuveer.co', href: 'mailto:sales@raghuveer.co' },
      { label: '672, 10th Cross, Basaveshwara Rd', href: 'https://maps.google.com/?q=672,+10th+Cross,+Basaveshwara+Rd,+Mysuru+570004', target: '_blank' },
      { label: 'Mysuru 570004, Karnataka', href: 'https://maps.google.com/?q=672,+10th+Cross,+Basaveshwara+Rd,+Mysuru+570004', target: '_blank' },
      { label: 'Mon–Sat: 9:00 AM – 6:00 PM', href: null },
    ],
  },
];

const SiteFooter = () => {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: 'var(--ra-ink)', color: '#EDEDED' }}>
      <div className="ra-container" style={{ padding: '88px 0 40px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : '1.3fr 1fr 1fr 1fr',
          gap: 64,
          paddingBottom: 64,
          borderBottom: '1px solid #2A2A2A'
        }}>
          {/* brand + tagline */}
          <div>
            <RaLogo dark size="lg" />
            <p style={{
              marginTop: 28, marginBottom: 20,
              fontSize: 15, lineHeight: 1.7,
              color: '#B8B8B8', maxWidth: 320
            }}>
              Five decades of supplying UltraTech Cement and Ready Mix Concrete to
              Mysore's homes, temples, factories and landmarks.
            </p>
            <div className="ra-kn-strap" style={{ color: '#8A8A8A', fontSize: 14, marginBottom: 28, maxWidth: 320 }}>
              ೧೯೭೨ ರಿಂದ ಮೈಸೂರನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 28 }}>
              <span className="ra-badge ra-badge--yellow" style={{ borderColor: 'var(--ra-yellow)' }}>
                Authorized Dealer
              </span>
              <span className="ra-badge" style={{ borderColor: '#3A3A3A', color: '#EDEDED' }}>
                GST Verified
              </span>
            </div>
            {/* UltraTech logos */}
            <div>
              <div className="ra-mono" style={{ fontSize: 10, letterSpacing: 2, color: '#8A8A8A', marginBottom: 12 }}>
                AUTHORISED ULTRATECH DEALER
              </div>
              <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
                <div style={{ background: '#fff', padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
                  <img src="assets/ultratech-cement-logo.png" alt="UltraTech Cement" style={{ height: 32, objectFit: 'contain', display: 'block' }} />
                  <img src="assets/ultratech-building-solutions-logo.png" alt="UltraTech Building Solutions" style={{ height: 32, objectFit: 'contain', display: 'block' }} />
                </div>
              </div>
            </div>
          </div>

          {/* link columns */}
          {FOOTER_COLUMNS.map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: 'var(--ra-font-body)',
                fontSize: 11, letterSpacing: '2.5px', textTransform: 'uppercase',
                color: 'var(--ra-accent)', fontWeight: 600,
                marginBottom: 6, display: 'flex', alignItems: 'center', gap: 10
              }}>
                <span style={{ width: 20, height: 2, background: 'var(--ra-yellow)' }} />
                {col.title}
              </div>
              {col.kn && (
                <div style={{
                  fontFamily: 'var(--ra-font-kannada)', fontSize: 12,
                  color: '#8A8A8A', marginBottom: 22
                }}>
                  {col.kn}
                </div>
              )}
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {col.links.map(l => {
                  const label = typeof l === 'object' ? l.label : l;
                  const href = typeof l === 'object' ? l.href : '#';
                  const target = typeof l === 'object' && l.target ? l.target : undefined;
                  return (
                    <li key={label} style={{ marginBottom: 12 }}>
                      {href ? (
                        <a href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} style={{
                          color: '#D4D4D4', textDecoration: 'none',
                          fontSize: 14, lineHeight: 1.5
                        }}>{label}</a>
                      ) : (
                        <span style={{ color: '#B8B8B8', fontSize: 14, lineHeight: 1.5 }}>{label}</span>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>

        {/* bottom bar */}
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 32, flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 12, color: '#8A8A8A', fontFamily: 'var(--ra-font-mono)' }}>
            © 2026 Raghuveer Agencies · All rights reserved.
          </div>
          <div style={{ display: 'flex', gap: 28 }}>
            {[{l:'Terms',h:'Terms.html'},{l:'Privacy',h:'Privacy.html'},{l:'Delivery Policy',h:'Delivery.html'},{l:'Sitemap',h:'Sitemap.html'}].map(({l,h}) => (
              <a key={l} href={h} style={{ color: '#8A8A8A', textDecoration: 'none', fontSize: 11, letterSpacing: '1.5px', textTransform: 'uppercase' }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

/* expose */
Object.assign(window, { RaIcon, RaLogo, SiteNav, SiteFooter });