// Shared atoms: Logo, Nav, Footer, small reused UI
const { useState, useEffect, useMemo, useRef } = React;

// --- LOGO ---------------------------------------------------------------
function AtgLogo({ height = 28, color = 'currentColor' }) {
  // Hand-condensed glyph from media/atg-logo.svg (white→currentColor)
  return (
    <span className="atg-logo" style={{ color, display: 'inline-flex' }}>
      <svg width={(267/54)*height} height={height} viewBox="0 0 267 54" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="A&T Group Interiors">
        <path d="M43.1213 50.3445C40.5005 47.6826 39.032 44.1029 39.0314 40.3741C38.867 38.4047 39.1492 36.4237 39.8572 34.5776C40.5651 32.7316 41.6807 31.0678 43.1213 29.7093L31.8906 0.00761043H22.685C21.6747 -0.0493114 20.6723 0.2142 19.8217 0.760318C18.9711 1.30644 18.3161 2.10706 17.9508 3.04722L0 53.882H11.5595L15.176 42.7324H36.3224L40.0703 53.882H49.6967C47.2256 53.313 44.9542 52.091 43.1213 50.3445ZM18.1349 33.6529L25.6045 10.6593L33.324 33.6529H18.1349Z"/>
        <path d="M103.05 0H63.7157C62.3747 0 61.0859 0.517 60.1266 1.451C59.1674 2.385 58.6145 3.656 58.5869 4.992V9.342H74.6834V53.888H85.9142V9.342H97.7498C98.4445 9.356 99.135 9.230 99.7797 8.972C100.424 8.713 101.010 8.328 101.501 7.838C101.993 7.349 102.380 6.765 102.639 6.123C102.898 5.481 103.024 4.793 103.010 4.101L103.05 0Z"/>
        <path d="M70.1591 28.137C70.288 30.916 69.538 33.666 68.016 35.998C66.004 33.705 61.374 27.914 61.374 27.914C66.227 24.704 68.936 20.931 68.936 16.634C68.978 14.582 68.400 12.564 67.279 10.843H57.219V6.310C50.499 6.493 46.698 10.502 45.699 14.747C45.413 16.198 45.426 17.693 45.738 19.139C46.050 20.585 46.654 21.952 47.514 23.158C48.291 24.383 49.171 25.540 50.144 26.617C45.475 29.382 40.412 31.858 40.412 40.453C40.412 47.305 45.081 53.240 54.983 53.240C57.310 53.350 59.634 52.987 61.816 52.174C63.997 51.361 65.990 50.114 67.674 48.510C68.502 49.532 70.856 52.441 72.066 54H73.381V28.137H70.1591ZM53.642 15.324C53.808 14.811 54.119 14.356 54.536 14.013C55.037 13.585 55.627 13.271 56.263 13.095C56.899 12.918 57.567 12.883 58.218 12.991C58.780 13.028 59.321 13.216 59.784 13.534C60.247 13.852 60.615 14.290 60.848 14.799C61.137 15.514 61.250 16.286 61.177 17.053C61.074 17.874 60.808 18.666 60.394 19.383C59.981 20.100 59.429 20.729 58.770 21.232C58.573 21.390 57.456 22.136 57.061 22.385C56.969 22.294 56.785 22.136 56.693 22.032C55.400 20.735 54.404 19.175 53.773 17.459C53.586 16.764 53.586 16.032 53.773 15.337M52.918 44.999C51.732 44.465 50.745 43.570 50.100 42.442C49.455 41.315 49.185 40.013 49.328 38.723C49.657 35.854 51.630 34.007 54.681 32.172L63.005 42.654C61.361 44.409 56.903 46.899 52.918 45.051"/>
        <path d="M115.628 0H115.144V53.874H115.628V0Z"/>
        <path d="M135.868 3.883C136.810 3.871 137.744 4.062 138.607 4.443C139.469 4.823 140.241 5.384 140.869 6.089L140.112 6.934C139.581 6.321 138.921 5.835 138.179 5.510C137.438 5.186 136.633 5.031 135.825 5.057C131.609 5.057 129.023 8.280 129.023 13.393C129.023 18.506 131.552 21.872 135.739 21.872C137.238 21.933 138.704 21.421 139.840 20.440V14.711H135.453V13.622H141.069V20.927C140.353 21.617 139.506 22.155 138.578 22.510C137.650 22.864 136.660 23.027 135.668 22.990C130.952 22.990 127.766 19.266 127.766 13.393C127.766 7.521 131.066 3.883 135.910 3.883"/>
        <path d="M157.102 22.646L152.129 14.181H148.214V22.646H146.942V4.227H152.186C155.844 4.227 158.245 5.559 158.245 9.082C158.245 12.018 156.401 13.708 153.515 14.095L158.573 22.689L157.102 22.646ZM151.843 13.107C155.115 13.107 156.901 11.803 156.901 9.082C156.901 6.361 155.115 5.315 151.843 5.315H148.214V13.107H151.843Z"/>
        <path d="M162.603 13.365C162.603 7.549 165.761 3.883 170.205 3.883C174.649 3.883 177.764 7.549 177.764 13.365C177.764 19.180 174.606 22.990 170.205 22.990C165.804 22.990 162.603 19.208 162.603 13.365ZM176.421 13.365C176.421 8.280 173.906 5.057 170.205 5.057C166.504 5.057 163.946 8.280 163.946 13.365C163.946 18.449 166.461 21.815 170.205 21.815C173.949 21.815 176.421 18.478 176.421 13.365Z"/>
        <path d="M183.122 4.212H184.394V15.441C184.394 20.326 186.723 21.815 189.309 21.815C191.896 21.815 194.311 20.383 194.311 15.441V4.212H195.539V15.570C195.539 21.299 192.467 22.990 189.309 22.990C186.151 22.990 183.122 21.342 183.122 15.570V4.212Z"/>
        <path d="M202.098 4.212H207.114C211.215 4.212 213.644 5.559 213.644 9.368C213.644 13.178 211.186 14.711 207.114 14.711H203.370V22.631H202.098V4.212ZM206.785 13.651C210.557 13.651 212.329 12.391 212.329 9.354C212.329 6.318 210.529 5.286 206.785 5.286H203.370V13.637L206.785 13.651Z"/>
        <path d="M131.838 32.328H128.595V50.619H131.838V32.328Z"/>
        <path d="M137.768 32.328H141.098L146.814 42.626L148.714 46.508H148.828C148.657 44.632 148.400 42.311 148.400 40.278V32.328H151.386V50.619H148.100L142.384 40.335L140.483 36.439H140.383C140.541 38.373 140.798 40.578 140.798 42.626V50.619H137.726L137.768 32.328Z"/>
        <path d="M161.074 35.078H155.787V32.328H169.548V35.078H164.303V50.633H161.074V35.078Z"/>
        <path d="M173.935 32.328H184.909V35.078H177.164V39.748H183.737V42.483H177.164V47.883H185.180V50.633H173.935V32.328Z"/>
        <path d="M200.169 50.619L196.240 43.457H193.468V50.619H190.238V32.328H196.383C200.169 32.328 203.099 33.675 203.099 37.757C203.174 38.915 202.852 40.065 202.187 41.016C201.522 41.966 200.553 42.661 199.441 42.985L203.799 50.619H200.169ZM193.468 40.894H196.040C198.555 40.894 199.898 39.819 199.898 37.757C199.898 35.694 198.555 34.892 196.040 34.892H193.468V40.894Z"/>
        <path d="M211.500 32.328H208.257V50.619H211.500V32.328Z"/>
        <path d="M216.459 41.395C216.459 35.494 219.760 31.999 224.532 31.999C229.305 31.999 232.563 35.494 232.563 41.395C232.563 47.296 229.276 50.962 224.532 50.962C219.788 50.962 216.459 47.324 216.459 41.395ZM229.319 41.395C229.319 37.313 227.447 34.820 224.604 34.820C221.760 34.820 219.860 37.313 219.860 41.395C219.860 45.477 221.732 48.141 224.604 48.141C227.476 48.141 229.319 45.505 229.319 41.395Z"/>
        <path d="M247.495 50.619L243.566 43.457H240.794V50.619H237.564V32.328H243.695C247.495 32.328 250.425 33.675 250.425 37.757C250.500 38.915 250.178 40.065 249.513 41.016C248.848 41.966 247.879 42.661 246.767 42.985L251.125 50.619H247.495ZM240.794 40.894H243.366C245.881 40.894 247.224 39.819 247.224 37.757C247.224 35.694 245.881 34.892 243.366 34.892H240.794V40.894Z"/>
        <path d="M255.811 46.064C257.093 47.321 258.792 48.061 260.584 48.141C262.627 48.141 263.770 47.210 263.770 45.777C263.770 44.345 262.599 43.801 260.913 43.099L258.426 42.011C257.382 41.685 256.465 41.041 255.804 40.168C255.143 39.295 254.771 38.236 254.740 37.141C254.740 34.276 257.312 31.999 260.855 31.999C262.963 32.002 264.985 32.835 266.485 34.319L264.814 36.382C263.745 35.370 262.339 34.793 260.870 34.763C259.141 34.763 258.012 35.580 258.012 36.911C258.012 38.244 259.441 38.874 260.870 39.490L263.313 40.521C265.499 41.452 267.000 42.813 267.000 45.477C267.000 48.441 264.542 50.905 260.441 50.905C257.987 50.907 255.630 49.940 253.882 48.212L255.811 46.064Z"/>
      </svg>
    </span>
  );
}

// --- NAV ---------------------------------------------------------------
function Nav({ route, go, locale, setLocale }) {
  const items = [
    ['projects', 'Projects'],
    ['sectors', 'Sectors'],
    ['services', 'Services'],
    ['capability', 'Capability'],
    ['about', 'About'],
    ['awards', 'Awards'],
    ['contact', 'Contact'],
  ];
  // On hero pages we let the nav float dark; everything else, light.
  const dark = route === 'home';
  return (
    <nav className={"nav " + (dark ? "is-dark" : "")}>
      <div className="wrap nav-inner">
        <a className="atg-logo-wrap" href="#" onClick={(e)=>{e.preventDefault(); go('home');}} style={{ color: dark ? '#F2EEE5' : 'var(--ink)' }}>
          <AtgLogo height={22} />
        </a>
        <div className="nav-links">
          {items.map(([id, label]) => (
            <a key={id} href={"#" + id} className="nav-link"
               aria-current={route === id ? 'page' : undefined}
               style={{ color: dark ? '#F2EEE5' : 'var(--ink)' }}
               onClick={(e)=>{e.preventDefault(); go(id);}}>
              {label}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <div className="locale" aria-label="Language">
            {['EN','AR','RU','ZH'].map(l => (
              <span key={l} className={l.toLowerCase() === locale ? 'on' : ''}
                    onClick={() => setLocale(l.toLowerCase())}
                    style={{ cursor: 'pointer' }}>{l}</span>
            ))}
          </div>
          <button className={"btn" + (dark ? " btn--inv" : "")} onClick={() => go('contact')}>
            Start a project <span className="arr">→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

// --- FOOTER ------------------------------------------------------------
function Footer({ go }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="row row-12">
          <div className="col-span-5">
            <div style={{ color: '#F2EEE5' }}>
              <AtgLogo height={26} />
            </div>
            <p className="mt-4 lead" style={{ color: '#DDD7C9', maxWidth: '28em' }}>
              <span className="editorial" style={{ color: 'var(--bronze-soft)' }}>Transforming concepts into exceptional spaces</span> &mdash;
              interior fit-out and turnkey design-and-build across the UAE &amp; KSA, since 2009.
            </p>
            <div className="mt-6 badge-strip">
              {window.ATG.ISO.map(i => (
                <span key={i.num} className="badge">
                  <span className="dot"></span> {i.num}
                </span>
              ))}
            </div>
          </div>
          <div className="col-span-7">
            <div className="row row-3" style={{ gap: 32 }}>
              <div>
                <div className="eyebrow no-rule" style={{ color: '#948D7D' }}>Dubai HQ</div>
                <p className="mt-3" style={{ color: '#E7E1D2' }}>
                  804, API World Tower<br/>
                  Sheikh Zayed Road<br/>
                  P.O. Box 184432, UAE
                </p>
                <p className="mt-2" style={{ color: '#E7E1D2' }}>
                  <a href="tel:+97143964121">+971 4 396 4121</a>
                </p>
              </div>
              <div>
                <div className="eyebrow no-rule" style={{ color: '#948D7D' }}>Riyadh</div>
                <p className="mt-3" style={{ color: '#E7E1D2' }}>
                  602, Mazaya Tower<br/>
                  Al Olaya Street<br/>
                  Riyadh, KSA
                </p>
                <p className="mt-2" style={{ color: '#E7E1D2' }}>
                  <a href="tel:+966115120056">+966 11 512 0056</a>
                </p>
              </div>
              <div>
                <div className="eyebrow no-rule" style={{ color: '#948D7D' }}>Get in touch</div>
                <p className="mt-3" style={{ color: '#E7E1D2' }}>
                  <a href="mailto:info@atginteriors.com">info@atginteriors.com</a>
                </p>
                <div className="mt-3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <a href="#" onClick={(e)=>e.preventDefault()}>Instagram</a>
                  <a href="#" onClick={(e)=>e.preventDefault()}>LinkedIn</a>
                  <a href="#" onClick={(e)=>e.preventDefault()}>YouTube</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <hr className="rule mt-8"/>
        <div className="between mt-3" style={{ flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 12, color: '#8E8675', letterSpacing: '0.04em' }}>
            &copy; A&amp;T Group Interiors LLC, 2009&ndash;2026. All photography supplied by clients; rights TBC.
          </div>
          <div style={{ display: 'flex', gap: 18, fontSize: 12, color: '#8E8675', letterSpacing: '0.04em' }}>
            <a href="#" onClick={(e)=>e.preventDefault()}>Privacy</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Cookies</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Careers</a>
            <a href="#" onClick={(e)=>{e.preventDefault(); go('sitemap');}}>Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// --- PROJECT CARD ------------------------------------------------------
function ProjectCard({ p, go, index, big }) {
  const sectorName = (window.ATG.SECTORS.find(s => s.id === p.sector) || {}).name || '';
  return (
    <a className="proj-card" href={"#projects/" + p.id} onClick={(e)=>{e.preventDefault(); go('project:' + p.id);}}>
      <div className="media-card" style={{ aspectRatio: big ? '4/5' : '4/5' }}>
        <img src={p.img} alt={p.name} loading="lazy" className="img-fill" />
        <div className="overlay-text">
          <span className="num">{String(index).padStart(2,'0')} &middot; {p.year}</span>
          <span style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.85)' }}>{sectorName}</span>
        </div>
      </div>
      <div className="pmeta">
        <div>
          <div className="pname">{p.name}</div>
          <div className="ploc">{p.location}</div>
        </div>
        <div className="pchip">{p.scope}</div>
      </div>
    </a>
  );
}

// --- SECTION HEAD ------------------------------------------------------
function SectionHead({ idx, eyebrow, title, lead, side }) {
  return (
    <div className="row row-12" style={{ alignItems: 'baseline' }}>
      <div className="col-span-7">
        <div className="eyebrow">{idx ? <span className="idx tnum">{idx}</span> : null}{eyebrow}</div>
        <h2 className="mt-3">{title}</h2>
      </div>
      <div className="col-span-5">
        {lead && <p className="lead muted">{lead}</p>}
        {side}
      </div>
    </div>
  );
}

// --- STAT BLOCK --------------------------------------------------------
function StatBlock({ s }) {
  return (
    <div>
      <div className="stat-num tnum">{s.num}{s.plus && <span className="pl">+</span>}</div>
      <div className="stat-lbl">{s.lbl}</div>
    </div>
  );
}

// --- CTA BAND ----------------------------------------------------------
function CtaBand({ go }) {
  return (
    <section className="section section--noir">
      <div className="wrap row row-12" style={{ alignItems: 'end' }}>
        <div className="col-span-8">
          <div className="eyebrow" style={{ color: '#ADA89C' }}><span className="idx">07</span>Start a project</div>
          <h2 className="mt-3" style={{ color: '#F2EEE5' }}>
            Tell us what you&rsquo;re building. <span className="editorial" style={{ color: 'var(--bronze-soft)' }}>We&rsquo;ll quote, plan and deliver it turnkey.</span>
          </h2>
          <p className="lead mt-3" style={{ color: '#C8C1B0' }}>
            Sector, project type, location, brief, optional drawings or BOQ &mdash; that&rsquo;s all we need to start a conversation.
            Replies typically within one working day.
          </p>
        </div>
        <div className="col-span-4" style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <button className="btn btn--inv btn--lg" onClick={() => go('contact')}>
            Begin enquiry <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AtgLogo, Nav, Footer, ProjectCard, SectionHead, StatBlock, CtaBand });
