// Shared shell: Logo, Nav, Footer, TrustStrip, MobiBar, common UI
const { useState, useEffect, useRef, useCallback, createContext, useContext } = React;

// ---- Routing context ----
const RouterCtx = createContext({ route: 'home', go: () => {} });
const useRouter = () => useContext(RouterCtx);

// ---- Constants ----
const PHONE = '+971 55 166 8588';
const PHONE_RAW = '+971551668588';
const WA_NUMBER = '971551668588';
const EMAIL = 'info@arabianprints.com';
const ADDRESS_LINE_1 = 'Al Quoz Industrial Area 2';
const ADDRESS_LINE_2 = 'Dubai, United Arab Emirates';

function waLink(text) {
  return `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;
}

// ---- Logo ----
function Logo({ onDark }) {
  return (
    <div className={"logo" + (onDark ? " on-dark" : "")}>
      <div className="logo-mark">
        Arabian Prints<span className="dot" aria-hidden="true"></span>
      </div>
      <div className="logo-lockup">Print · Sign · Exhibition</div>
    </div>
  );
}

// ---- Nav ----
function Nav() {
  const { route, go } = useRouter();
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'products', label: 'Products' },
    { id: 'portfolio', label: 'Portfolio' },
    { id: 'upload', label: 'Upload & Order' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <header className="nav">
      <div className="wrap nav-row">
        <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <Logo />
        </a>
        <nav className="nav-links">
          {links.map(l => (
            <a key={l.id}
               href="#"
               className={route === l.id || (l.id === 'products' && route === 'product') ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(l.id); }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-cta">
          <a className="btn btn-ghost btn-sm" href={`tel:${PHONE_RAW}`} aria-label="Call">
            <PhoneIcon /><span style={{display:'inline-block'}}>Call</span>
          </a>
          <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>
            Get a Quote <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

// ---- Footer ----
function Footer() {
  const { go } = useRouter();
  return (
    <>
      <div className="color-bar" aria-hidden="true">
        <div style={{background:'var(--cyan)'}}></div>
        <div style={{background:'var(--magenta)'}}></div>
        <div style={{background:'#FFE000'}}></div>
        <div style={{background:'var(--ink)'}}></div>
      </div>
      <footer className="footer">
        <div className="wrap">
          <div className="footer-grid">
            <div>
              <Logo onDark />
              <p style={{marginTop: 20, fontSize: 14, color: 'var(--paper-2)', maxWidth: 36+'ch'}}>
                Dubai's reliable print partner since 2010. Business cards, signage, banners, exhibition graphics — designed free, printed in 24 hours, delivered free across the UAE.
              </p>
              <div style={{display:'flex', gap: 10, marginTop: 20}}>
                <a className="btn btn-wa btn-sm" href={waLink('Hi Arabian Prints, I would like to chat about a print job.')} target="_blank" rel="noopener">
                  <WaIcon /> WhatsApp
                </a>
                <a className="btn btn-ghost btn-sm" style={{borderColor:'rgba(255,255,255,0.25)', color:'white'}} href={`tel:${PHONE_RAW}`}>
                  <PhoneIcon /> {PHONE}
                </a>
              </div>
            </div>
            <div className="footer-col">
              <h4>Products</h4>
              <a href="#" onClick={(e) => { e.preventDefault(); go('product'); }}>Business Cards</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Flyers &amp; Leaflets</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Roll-up Banners</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Signage &amp; Signboards</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Exhibition Graphics</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Vehicle Wraps</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>T-shirts &amp; Merch</a>
            </div>
            <div className="footer-col">
              <h4>Order</h4>
              <a href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>Get a Quote</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('upload'); }}>Upload &amp; Order</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go('portfolio'); }}>Portfolio</a>
              <a href={waLink('Hi Arabian Prints, I would like a quote.')} target="_blank" rel="noopener">WhatsApp Order</a>
              <a href={`mailto:${EMAIL}`}>Email Us</a>
            </div>
            <div className="footer-col">
              <h4>Contact</h4>
              <a href={`tel:${PHONE_RAW}`}>{PHONE}</a>
              <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
              <div style={{padding:'5px 0', fontSize: 14, color:'var(--paper-2)'}}>
                {ADDRESS_LINE_1}<br/>{ADDRESS_LINE_2}
              </div>
              <div style={{padding:'5px 0', fontSize: 14, color:'var(--muted-2)', fontFamily:'var(--font-mono)', fontSize: 12, letterSpacing:'0.05em'}}>
                24/7 sales desk
              </div>
            </div>
          </div>
          <div className="footer-meta">
            <div>© 2026 Arabian Prints. All rights reserved.</div>
            <div>PRINT · SIGN · EXHIBITION — Your reliable print partner</div>
          </div>
        </div>
      </footer>
    </>
  );
}

// ---- Trust strip ----
function TrustStrip() {
  return (
    <section className="trust">
      <div className="wrap">
        <div className="trust-row">
          <div className="trust-cell">
            <div className="trust-num">01 / Speed</div>
            <div className="trust-label">24-hour turnaround</div>
            <div className="trust-sub">Order by 11am, ready next-day 7pm</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">02 / Design</div>
            <div className="trust-label">Free design</div>
            <div className="trust-sub">Bundled with every print job</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">03 / Payment</div>
            <div className="trust-label">No advance payment</div>
            <div className="trust-sub">Pay only when you're happy</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">04 / Delivery</div>
            <div className="trust-label">Free UAE delivery</div>
            <div className="trust-sub">Anywhere, on orders over AED 200</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Mobile bottom bar ----
function MobiBar() {
  const { go } = useRouter();
  return (
    <div className="mobi-bar">
      <a className="q" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>Quote</a>
      <a href={waLink('Hi Arabian Prints, I would like a quote.')} target="_blank" rel="noopener">WhatsApp</a>
      <a href={`tel:${PHONE_RAW}`}>Call</a>
    </div>
  );
}

// ---- Icons (minimal, monoline) ----
function PhoneIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.93.36 1.84.7 2.7a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.38-1.38a2 2 0 0 1 2.11-.45c.86.34 1.77.57 2.7.7A2 2 0 0 1 22 16.92Z"/></svg>);
}
function WaIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.5 3.5A11 11 0 0 0 3.6 17l-1.6 5 5.1-1.5a11 11 0 0 0 5.4 1.4 11 11 0 0 0 8-18.4Zm-8 17.1a9 9 0 0 1-4.7-1.3l-.3-.2-3 .9.9-3-.2-.3a9.1 9.1 0 1 1 16.4-5.3 9 9 0 0 1-9 8.9Zm5-6.7-1.6-.6c-.2-.1-.4 0-.6.2l-.6.7c-.1.1-.3.2-.5 0a7.4 7.4 0 0 1-3.7-3.2c-.1-.2 0-.4.1-.5l.4-.5c.1-.1.1-.2.2-.4 0-.1 0-.3-.1-.4L9.5 8c-.1-.4-.3-.3-.5-.3h-.4a.9.9 0 0 0-.7.3 2.8 2.8 0 0 0-.9 2.1 4.8 4.8 0 0 0 1 2.6 11 11 0 0 0 4.4 3.9c1.3.6 1.9.5 2.5.4a2.5 2.5 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.1-.4-.3Z"/></svg>);
}
function ArrowIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>);
}
function UploadIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>);
}
function FileIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>);
}
function XIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>);
}

// ---- Section header ----
function SectionHead({ eyebrow, title, right }) {
  return (
    <div className="sec-head">
      <div>
        {eyebrow && <div className="eyebrow" style={{marginBottom: 16}}>{eyebrow}</div>}
        <h2 className="h-section">{title}</h2>
      </div>
      {right && <div>{right}</div>}
    </div>
  );
}

// ---- Helper: format file size ----
function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + ' KB';
  return (bytes/(1024*1024)).toFixed(1) + ' MB';
}

// ---- Scroll to top on route change ----
function ScrollTopOnRoute({ route }) {
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);
  return null;
}

// Export to window
Object.assign(window, {
  RouterCtx, useRouter,
  PHONE, PHONE_RAW, WA_NUMBER, EMAIL, ADDRESS_LINE_1, ADDRESS_LINE_2,
  waLink, formatSize,
  Logo, Nav, Footer, TrustStrip, MobiBar,
  PhoneIcon, WaIcon, ArrowIcon, UploadIcon, FileIcon, XIcon,
  SectionHead, ScrollTopOnRoute,
});
