// Shared icons + small components

const Icon = {
  Arrow: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  ArrowUp: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7" />
      <polyline points="7 7 17 7 17 17" />
    </svg>
  ),
  Upload: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <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>
  ),
  Whatsapp: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <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.198-.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.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.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-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
    </svg>
  ),
  Phone: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z" />
    </svg>
  ),
  Mail: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
      <polyline points="22,6 12,13 2,6" />
    </svg>
  ),
  Pin: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  Clock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  X: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  Plus: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  ),
  Menu: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  ),
  Print: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 6 2 18 2 18 9" />
      <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
      <rect x="6" y="14" width="12" height="8" />
    </svg>
  ),
  Card: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="5" width="20" height="14" rx="2" />
      <line x1="2" y1="10" x2="22" y2="10" />
    </svg>
  ),
  Banner: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="3" width="16" height="14" rx="1" />
      <line x1="12" y1="17" x2="12" y2="21" />
      <line x1="9" y1="21" x2="15" y2="21" />
    </svg>
  ),
  Doc: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <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" />
      <line x1="8" y1="13" x2="16" y2="13" />
      <line x1="8" y1="17" x2="13" y2="17" />
    </svg>
  ),
  Copy: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  ),
  Camera: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
      <circle cx="12" cy="13" r="4" />
    </svg>
  ),
  Gift: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 12 20 22 4 22 4 12" />
      <rect x="2" y="7" width="20" height="5" />
      <line x1="12" y1="22" x2="12" y2="7" />
      <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
      <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
    </svg>
  ),
  Pen: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 19l7-7 3 3-7 7-3-3z" />
      <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
      <line x1="2" y1="2" x2="9.586" y2="9.586" />
      <circle cx="11" cy="11" r="2" />
    </svg>
  ),
  Bolt: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </svg>
  ),
  Shield: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  ),
  Drop: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
    </svg>
  ),
  FB: () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" /></svg>),
  LI: () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>),
  IG: () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" /></svg>),
};

// =====================
// Navbar
// =====================
const NAV_ITEMS = [
  { key: "home", label: "Home" },
  { key: "services", label: "Services" },
  { key: "why", label: "Why Colorwings" },
  { key: "gallery", label: "Gallery" },
  { key: "about", label: "About" },
  { key: "contact", label: "Contact" }
];

function Navbar({ route, onNavigate }) {
  const [open, setOpen] = React.useState(false);
  const isActive = (k) => {
    if (k === "services") return route.startsWith("services") || route.startsWith("service:");
    return route === k;
  };
  return (
    <React.Fragment>
      <header className="nav">
        <div className="container nav-inner">
          <div className="nav-logo" onClick={() => { onNavigate("home"); setOpen(false); }}>
            <img src="media/colorwings-logo.webp" alt="Colorwings" />
          </div>
          <nav className="nav-links">
            {NAV_ITEMS.map(it => (
              <div key={it.key} className={"nav-link " + (isActive(it.key) ? "active" : "")} onClick={() => onNavigate(it.key)}>
                {it.label}
              </div>
            ))}
          </nav>
          <div className="nav-cta">
            <a className="btn btn-secondary btn-sm" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
              <Icon.Whatsapp size={14} /> WhatsApp
            </a>
            <button className="btn btn-primary btn-sm" onClick={() => onNavigate("upload")}>
              <Icon.Upload size={14} /> Upload File
            </button>
            <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
              {open ? <Icon.X size={22} /> : <Icon.Menu size={22} />}
            </button>
          </div>
        </div>
      </header>
      {open && (
        <div className="nav-mobile">
          {NAV_ITEMS.map(it => (
            <div key={it.key} className={"nav-link " + (isActive(it.key) ? "active" : "")} onClick={() => { onNavigate(it.key); setOpen(false); }}>
              {it.label}
            </div>
          ))}
          <div className="nav-link" onClick={() => { onNavigate("upload"); setOpen(false); }}>Upload Your File</div>
          <div className="nav-link" onClick={() => { onNavigate("careers"); setOpen(false); }}>Careers</div>
        </div>
      )}
    </React.Fragment>
  );
}

// =====================
// Mobile bottom bar + WA FAB
// =====================
function MobileBar({ onNavigate }) {
  return (
    <div className="mobile-bar">
      <button className="btn btn-primary" onClick={() => onNavigate("upload")}>
        <Icon.Upload size={14} /> Upload File
      </button>
      <a className="btn btn-wa" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
        <Icon.Whatsapp size={14} /> WhatsApp
      </a>
      <a className="btn btn-ghost" href={window.CW_DATA.contact.phoneHref}>
        <Icon.Phone size={14} />
      </a>
    </div>
  );
}

function WhatsappFab() {
  return (
    <a className="fab-wa" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <Icon.Whatsapp size={26} />
    </a>
  );
}

// =====================
// Footer
// =====================
function Footer({ onNavigate }) {
  const c = window.CW_DATA.contact;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">Colorwings</div>
            <p className="footer-tag">Digital &amp; offset printing in Dubai. Upload your file, we&apos;ll print it — business cards to billboards, A5 to A0, from a small shop in Barsha Heights.</p>
            <div className="footer-socials">
              <a href="#" aria-label="Facebook"><Icon.FB /></a>
              <a href="#" aria-label="Instagram"><Icon.IG /></a>
              <a href="#" aria-label="LinkedIn"><Icon.LI /></a>
            </div>
          </div>
          <div>
            <h5>Services</h5>
            {window.CW_DATA.services.slice(0, 6).map(s => (
              <div key={s.slug} className="footer-link" onClick={() => onNavigate("service:" + s.slug)}>{s.name}</div>
            ))}
          </div>
          <div>
            <h5>Studio</h5>
            <div className="footer-link" onClick={() => onNavigate("why")}>Why Colorwings</div>
            <div className="footer-link" onClick={() => onNavigate("gallery")}>Gallery</div>
            <div className="footer-link" onClick={() => onNavigate("about")}>About</div>
            <div className="footer-link" onClick={() => onNavigate("careers")}>Careers</div>
            <div className="footer-link" onClick={() => onNavigate("contact")}>Contact</div>
          </div>
          <div>
            <h5>Visit</h5>
            <div style={{fontSize: 14, color: "rgba(255,255,255,0.65)", lineHeight: 1.55}}>
              {c.address1}<br/>{c.address2}<br/>{c.address3}
            </div>
            <div style={{marginTop: 14, fontSize: 14}}>
              <a className="footer-link" href={c.phoneHref}>{c.phone}</a>
              <a className="footer-link" href={c.whatsappHref}>{c.whatsapp} · WhatsApp</a>
              <a className="footer-link" href={"mailto:" + c.emailOrders}>{c.emailOrders}</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Colorwings Maps &amp; Plans Photocopying Services LLC. Dubai, U.A.E.</div>
          <div style={{display:"flex", gap: 16, alignItems: "center"}}>
            <div className="cmyk-bar"><span className="c"></span><span className="m"></span><span className="y"></span><span className="k"></span></div>
            <span>Printed in CMYK since day one.</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// =====================
// Service Icon mapper
// =====================
function ServiceIcon({ slug }) {
  const map = {
    "digital-printing": <Icon.Print />,
    "offset-printing": <Icon.Print />,
    "large-format-signage": <Icon.Banner />,
    "business-stationery": <Icon.Card />,
    "copying-binding-plotting": <Icon.Copy />,
    "id-passport-photos": <Icon.Camera />,
    "promotional-items": <Icon.Gift />,
    "prepress-design": <Icon.Pen />
  };
  return <div className="service-icon">{map[slug] || <Icon.Doc />}</div>;
}

// Make global
Object.assign(window, { Icon, Navbar, MobileBar, WhatsappFab, Footer, ServiceIcon });
