// All page components — Home, Services index, Service detail, Upload, Gallery,
// Why, About, Careers, Contact

// ============= HOME =============
function HomePage({ onNavigate }) {
  const services = window.CW_DATA.services;
  return (
    <div className="page-enter">
      {/* Hero */}
      <section className="hero" data-screen-label="01 Home / Hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow">Barsha Heights · Tecom · Dubai</div>
              <h1>
                <span className="ink">Digital &amp; offset printing in Dubai —</span>{" "}
                <em>upload your file,</em>{" "}
                <span className="ink">we&apos;ll print it.</span>
              </h1>
              <p className="hero-sub">
                Business cards to billboards. A5 to A0. Same-day on print-ready artwork,
                delivered across Dubai or ready to pick up from our shop in DAMAC Smart Heights.
              </p>
              <div className="hero-cta-row">
                <button className="btn btn-primary btn-lg" onClick={() => onNavigate("upload")}>
                  <Icon.Upload size={16} /> Upload Your File
                </button>
                <a className="btn btn-wa btn-lg" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                  <Icon.Whatsapp size={16} /> WhatsApp Us
                </a>
              </div>
              <div className="hero-meta">
                <div className="hero-meta-item"><Icon.Bolt size={14} /> <span><b style={{color: "var(--cw-ink)"}}>Same-day</b> on ready artwork</span></div>
                <div className="hero-meta-item"><Icon.Drop size={14} /> 25+ print services</div>
                <div className="hero-meta-item"><Icon.Shield size={14} /> Trusted by Tecom corporates since 2014</div>
              </div>
            </div>
            <div className="hero-art" aria-hidden="true">
              <div className="upload-mock">
                <div className="upload-mock-head">
                  <div style={{display:"flex", alignItems:"center", gap: 8}}>
                    <div className="upload-mock-dot"></div>
                    <div className="upload-mock-title">Order #CW-2614</div>
                  </div>
                  <div className="tag teal">Live</div>
                </div>
                <div className="upload-mock-drop">
                  <Icon.Upload size={28} />
                  <div style={{fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15}}>Drop files here</div>
                  <div style={{fontSize: 12, color: "var(--cw-muted)"}}>PDF, AI, EPS, JPG, ZIP — up to 200 MB</div>
                </div>
                <div className="upload-mock-files">
                  <div className="upload-mock-file">
                    <div className="ext">PDF</div>
                    <div className="name">brand-brochure_v3.pdf</div>
                    <div className="size">4.2 MB</div>
                  </div>
                  <div className="upload-mock-file">
                    <div className="ext">AI</div>
                    <div className="name">business-card.ai</div>
                    <div className="size">1.1 MB</div>
                  </div>
                </div>
                <div className="upload-mock-progress"><span></span></div>
              </div>
            </div>
          </div>
        </div>
        {/* Hero bar */}
        <div className="hero-bar">
          <div className="container hero-bar-inner">
            <div className="hero-bar-item"><Icon.Pin size={14} /> <span><b>DAMAC Smart Heights</b> · Barsha Heights</span></div>
            <div className="hero-bar-item"><Icon.Clock size={14} /> Mon–Sat · <b>08:00 – 20:00</b></div>
            <div className="hero-bar-item"><Icon.Phone size={14} /> <b>+971 4 277 1587</b></div>
            <div className="hero-bar-item"><Icon.Mail size={14} /> <b>prints@colorwings.ae</b></div>
          </div>
        </div>
      </section>

      {/* Services grid */}
      <section className="section" data-screen-label="01 Home / Services">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">What we print</div>
              <h2 className="section-title">Eight categories, one print shop.</h2>
            </div>
            <p className="section-sub">From a single passport photo to a thousand-piece corporate order — pick the category that matches your job.</p>
          </div>
          <div className="services-grid">
            {services.map(s => (
              <div key={s.slug} className="service-card" onClick={() => onNavigate("service:" + s.slug)}>
                <div className="num">{s.num}</div>
                <ServiceIcon slug={s.slug} />
                <h3>{s.name}</h3>
                <div className="desc">{s.tagline}</div>
                <div className="card-foot">
                  <div className="from-chip"><span className="dot"></span> {s.priceTbd ? "Quote on upload" : "From AED 40"}</div>
                  <div className="arrow"><Icon.ArrowUp size={12} /></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section section-tight" style={{background: "var(--cw-mist)", borderTop: "1px solid var(--cw-line)", borderBottom: "1px solid var(--cw-line)"}} data-screen-label="01 Home / How it works">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">How it works</div>
              <h2 className="section-title">Three steps, no phone tag.</h2>
            </div>
            <p className="section-sub">Most quotes back the same hour. Most jobs printed the same day — if your file is press-ready.</p>
          </div>
          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <h4>Upload your file</h4>
              <p>Drag-and-drop a PDF, AI, EPS, JPG, PNG or ZIP. Tell us quantity, size and stock. You&apos;ll get an auto-confirmation email with your order reference.</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h4>We quote &amp; confirm</h4>
              <p>Our team checks your artwork, flags any bleed or colour issues, and replies with a price and timeline — usually within the hour during shop hours.</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h4>We print &amp; deliver</h4>
              <p>Approve the proof and we print. Pick up from the shop in Tecom or have it couriered across Dubai. Same-day delivery on standard jobs.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Why teaser */}
      <section className="section why" data-screen-label="01 Home / Why">
        <div className="container">
          <div className="why-grid">
            <div>
              <div className="section-eyebrow">Reviews</div>
              <h2 className="section-title">A small team that just gets it done.</h2>
              <p style={{marginTop: 20, color: "rgba(255,255,255,0.65)", fontSize: 17, lineHeight: 1.5, maxWidth: 500}}>
                Two-to-ten staff, one shop, and the Tecom-tower regulars who keep coming back. The work&apos;s not glamorous — letterheads, copies, roll-ups, photo prints — but it has to be right, and it has to be on time.
              </p>
              <div className="why-stats">
                <div className="why-stat">
                  <div className="num">25+</div>
                  <div className="label">Print services under one roof</div>
                </div>
                <div className="why-stat">
                  <div className="num">15 min</div>
                  <div className="label">Walk-in passport photos</div>
                </div>
                <div className="why-stat">
                  <div className="num">A5 → A0</div>
                  <div className="label">Sizes printed in-house</div>
                </div>
                <div className="why-stat">
                  <div className="num">3.6 / 5</div>
                  <div className="label">Google rating (19 reviews)</div>
                </div>
              </div>
              <div style={{marginTop: 32}}>
                <button className="btn btn-primary" onClick={() => onNavigate("why")}>Why Colorwings <Icon.Arrow /></button>
              </div>
            </div>
            <div>
              {window.CW_DATA.reviews.map((r, i) => (
                <div key={i} className="review-card">
                  <div className="review-stars">{"★".repeat(r.stars) + "☆".repeat(5-r.stars)}</div>
                  <div className="review-quote">&ldquo;{r.quote}&rdquo;</div>
                  <div className="review-attr">— {r.who}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery strip */}
      <section className="section" data-screen-label="01 Home / Gallery">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Recent work</div>
              <h2 className="section-title">Off the presses.</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNavigate("gallery")}>See full gallery <Icon.Arrow /></button>
          </div>
          <div className="gallery-strip">
            {window.CW_DATA.gallery.slice(0, 6).map((g, i) => (
              <div key={i} className="gallery-tile" onClick={() => onNavigate("gallery")}>
                <img src={g.src} alt={g.label} loading="lazy" />
                <div className="tile-label">{g.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact strip */}
      <section className="contact-strip section-tight" data-screen-label="01 Home / Contact strip">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-cell">
              <div className="label">Visit</div>
              <div className="val">Shop 6A, DAMAC Smart Heights<br/>Barsha Heights, Dubai</div>
            </div>
            <div className="contact-cell">
              <div className="label">Open</div>
              <div className="val">Mon–Sat<br/>08:00 – 20:00</div>
            </div>
            <div className="contact-cell">
              <div className="label">Call / WhatsApp</div>
              <div className="val">
                <a href={window.CW_DATA.contact.phoneHref}>{window.CW_DATA.contact.phone}</a><br/>
                <a href={window.CW_DATA.contact.whatsappHref}>{window.CW_DATA.contact.whatsapp}</a>
              </div>
            </div>
            <div className="contact-cell">
              <div className="label">Email</div>
              <div className="val">
                <a href={"mailto:" + window.CW_DATA.contact.emailOrders}>{window.CW_DATA.contact.emailOrders}</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= SERVICES INDEX =============
function ServicesIndex({ onNavigate }) {
  return (
    <div className="page-enter" data-screen-label="02 Services index">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Services</div>
          <h1>Eight things we print — and one form to start any of them.</h1>
          <p className="lead">From a single Emirates-ID photo to a 5,000-piece offset run, every job starts the same way: upload your file or tell us what you need.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="services-grid">
            {window.CW_DATA.services.map(s => (
              <div key={s.slug} className="service-card" onClick={() => onNavigate("service:" + s.slug)}>
                <div className="num">{s.num}</div>
                <ServiceIcon slug={s.slug} />
                <h3>{s.name}</h3>
                <div className="desc">{s.tagline}</div>
                <div className="card-foot">
                  <div className="from-chip"><span className="dot"></span> {s.priceTbd ? "Quote on upload" : "From AED 40"}</div>
                  <div className="arrow"><Icon.ArrowUp size={12} /></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= SERVICE DETAIL =============
function ServiceDetail({ slug, onNavigate }) {
  const s = window.CW_DATA.services.find(x => x.slug === slug);
  const [openFaq, setOpenFaq] = React.useState(0);
  if (!s) return <div className="container section">Service not found</div>;

  const faqs = [
    { q: "What file formats do you accept?", a: "We accept PDF, AI, EPS, JPG, PNG, ZIP and RAR. For print-quality results we recommend press-ready PDF/X-1a or a vector AI/EPS with fonts outlined and 3 mm bleed." },
    { q: "How fast can you turn this around?", a: "Most digital jobs are same-day on print-ready artwork received before noon. Offset and finished jobs (lamination, foiling, binding) typically need 1–5 working days depending on quantity and finish." },
    { q: "Do you deliver across Dubai?", a: "Yes — we deliver to Dubai addresses with our own courier, and ship anywhere in the U.A.E. via standard carriers. Pickup from the shop in Barsha Heights is always free." },
    { q: "Can you fix my file if it isn't print-ready?", a: "Yes. Our prepress team checks every file for bleed, colour space and resolution. Minor fixes are free; bigger rebuilds are quoted before we start." }
  ];

  return (
    <div className="page-enter" data-screen-label={`03 Service / ${s.name}`}>
      <section className="page-head">
        <div className="container">
          <div className="crumb">
            <a onClick={() => onNavigate("home")}>Home</a> / <a onClick={() => onNavigate("services")}>Services</a> / {s.name}
          </div>
          <h1>{s.name}</h1>
          <p className="lead">{s.tagline} {s.blurb}</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="svc-layout">
            <div>
              <div className="section-eyebrow" style={{color: "var(--cw-red)"}}>What we print</div>
              <h2 style={{fontSize: 28, marginBottom: 8}}>Common items in this category</h2>
              <ul className="svc-bullets">
                {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>

              <div className="specs">
                {s.specs.map((sp, i) => (
                  <div key={i} className="specs-row">
                    <div className="k">{sp.k}</div>
                    <div className="v">{sp.v}</div>
                  </div>
                ))}
              </div>

              <div className="callout" style={{marginTop: 32}}>
                <b>Pricing note.</b> Print pricing depends on artwork, stock, finish and run-size — we'll send a written quote within the hour. The "from" prices on this site are placeholders until our rate card is verified.
              </div>

              <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, marginTop: 56, marginBottom: 18}}>Samples</h3>
              <div style={{display:"grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12}}>
                {s.samples.map((src, i) => (
                  <div key={i} className="gallery-tile" style={{aspectRatio: "1 / 1", borderRadius: "var(--radius-lg)"}}>
                    <img src={src} alt="Sample" loading="lazy" />
                  </div>
                ))}
              </div>

              <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, marginTop: 56, marginBottom: 8}}>FAQ</h3>
              <div>
                {faqs.map((f, i) => (
                  <div key={i} className={"faq-item " + (openFaq === i ? "open" : "")} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <div className="faq-q">{f.q} <div className="plus"><Icon.Plus size={16} /></div></div>
                    <div className="faq-a">{f.a}</div>
                  </div>
                ))}
              </div>
            </div>

            <aside className="svc-side">
              <div className="quote-card">
                <div className="tag red" style={{marginBottom: 14}}>Start an order</div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, marginBottom: 14, letterSpacing: "-0.02em"}}>Get a quote in under an hour.</h3>
                <div className="price-from">
                  <span className="label">From</span>
                  <span className="val">{s.priceFrom}</span>
                </div>
                <div className="turnaround"><b>Turnaround:</b> {s.turnaround}</div>
                <div className="actions">
                  <button className="btn btn-primary" onClick={() => onNavigate("upload", { service: s.slug })}>
                    <Icon.Upload size={14} /> Upload your file
                  </button>
                  <a className="btn btn-wa" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                    <Icon.Whatsapp size={14} /> WhatsApp us
                  </a>
                  <a className="btn btn-ghost" href={window.CW_DATA.contact.phoneHref}>
                    <Icon.Phone size={14} /> Call the shop
                  </a>
                </div>
              </div>
              <div style={{marginTop: 24, padding: "20px 22px", background: "var(--cw-mist)", borderRadius: "var(--radius-lg)", fontSize: 13, color: "var(--cw-ink-soft)", lineHeight: 1.55}}>
                <div className="tip-label">Print-ready checklist</div>
                CMYK colour mode · 300 DPI minimum · 3 mm bleed · fonts outlined or embedded · single PDF preferred.
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= UPLOAD =============
function UploadPage({ onNavigate, preselect }) {
  const [files, setFiles] = React.useState([]);
  const [over, setOver] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [ref, setRef] = React.useState("");
  const [form, setForm] = React.useState({
    name: "",
    company: "",
    email: "",
    phone: "",
    service: preselect || "",
    qty: "",
    size: "",
    stock: "",
    finish: "",
    deadline: "",
    delivery: "Pickup at the shop",
    notes: "",
    consent: true,
  });
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (preselect) setForm(f => ({...f, service: preselect}));
  }, [preselect]);

  const onChange = (k, v) => setForm(f => ({...f, [k]: v}));

  const handleFiles = (list) => {
    const arr = Array.from(list).map(f => ({
      name: f.name,
      size: f.size,
      type: (f.name.split(".").pop() || "").toUpperCase()
    }));
    setFiles(prev => [...prev, ...arr]);
  };

  const onDrop = (e) => {
    e.preventDefault();
    setOver(false);
    if (e.dataTransfer.files) handleFiles(e.dataTransfer.files);
  };

  const submit = (e) => {
    e.preventDefault();
    const r = "CW-" + Math.floor(1000 + Math.random() * 9000) + "-" + new Date().getFullYear().toString().slice(-2);
    setRef(r);
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const reset = () => {
    setSubmitted(false);
    setFiles([]);
    setForm({
      name: "", company: "", email: "", phone: "",
      service: "", qty: "", size: "", stock: "", finish: "",
      deadline: "", delivery: "Pickup at the shop", notes: "", consent: true
    });
  };

  const fmtSize = (b) => {
    if (b < 1024) return b + " B";
    if (b < 1024 * 1024) return (b / 1024).toFixed(1) + " KB";
    return (b / (1024 * 1024)).toFixed(2) + " MB";
  };

  if (submitted) {
    return (
      <div className="page-enter" data-screen-label="04 Upload / Success">
        <section className="page-head">
          <div className="container">
            <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Upload your file / Confirmation</div>
            <h1>Order received.</h1>
            <p className="lead">Thanks — we&apos;ve got your files. A team member will check your artwork and reply with a quote, usually within the hour during shop hours.</p>
          </div>
        </section>
        <section className="section">
          <div className="container" style={{maxWidth: 720, margin: "0 auto"}}>
            <div className="success">
              <div className="check"><Icon.Check size={28} /></div>
              <h3>Your order is in the queue</h3>
              <p>We&apos;ve sent a confirmation to <b>{form.email || "your email"}</b>. Keep this reference handy if you call or WhatsApp us about the job.</p>
              <div className="success-ref">Reference: <b>{ref}</b></div>
              <div style={{display:"flex", justifyContent:"center", gap: 10, flexWrap:"wrap"}}>
                <a className="btn btn-wa" href={window.CW_DATA.contact.whatsappHref + "%0A%0AOrder%20Ref%3A%20" + ref} target="_blank" rel="noopener">
                  <Icon.Whatsapp size={14} /> WhatsApp the shop with this ref
                </a>
                <button className="btn btn-ghost" onClick={reset}>Start another order</button>
                <button className="btn btn-secondary" onClick={() => onNavigate("home")}>Back to home</button>
              </div>
            </div>

            <div style={{marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}}>
              <div className="step">
                <div className="step-num">01</div>
                <h4>Artwork check</h4>
                <p>We verify bleed, colour space, resolution and fonts.</p>
              </div>
              <div className="step">
                <div className="step-num">02</div>
                <h4>Written quote</h4>
                <p>You get a final price + delivery date in writing.</p>
              </div>
              <div className="step">
                <div className="step-num">03</div>
                <h4>Approve &amp; print</h4>
                <p>Reply &ldquo;approved&rdquo; and we go to press.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter" data-screen-label="04 Upload">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Upload your file</div>
          <h1>Upload your file. Get a quote.</h1>
          <p className="lead">Drop your artwork and tell us what you need — we&apos;ll come back with a price and timeline. No login, no minimum order, no surprises on stock or finish.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="upload-page">
            <form className="upload-form" onSubmit={submit}>
              <div className={"drop " + (over ? "over" : "")}
                onDragOver={(e) => { e.preventDefault(); setOver(true); }}
                onDragLeave={() => setOver(false)}
                onDrop={onDrop}
                onClick={() => inputRef.current && inputRef.current.click()}
              >
                <Icon.Upload size={32} />
                <h3 style={{marginTop: 12}}>Drag &amp; drop your files</h3>
                <p>or click to browse — PDF, AI, EPS, JPG, PNG, ZIP, RAR</p>
                <input ref={inputRef} type="file" multiple style={{display:"none"}}
                  onChange={(e) => handleFiles(e.target.files)} />
                <button type="button" className="btn btn-secondary" onClick={(e) => { e.stopPropagation(); inputRef.current && inputRef.current.click(); }}>
                  Browse files
                </button>
                <div className="types">MAX 200 MB PER FILE · UP TO 10 FILES</div>
              </div>

              {files.length > 0 && (
                <div className="file-list">
                  {files.map((f, i) => (
                    <div key={i} className="file-row">
                      <div className="ext">{f.type.slice(0, 3) || "FILE"}</div>
                      <div className="info">
                        <div className="name">{f.name}</div>
                        <div className="meta">{fmtSize(f.size)}</div>
                      </div>
                      <button type="button" className="x" onClick={() => setFiles(files.filter((_, idx) => idx !== i))} aria-label="Remove">
                        <Icon.X size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              <div style={{marginTop: 32, paddingTop: 32, borderTop: "1px solid var(--cw-line)"}}>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 18}}>Order details</h3>

                <div className="row-2">
                  <div className="field">
                    <label>Full name *</label>
                    <input required value={form.name} onChange={(e) => onChange("name", e.target.value)} placeholder="e.g. Sarah Khan" />
                  </div>
                  <div className="field">
                    <label>Company</label>
                    <input value={form.company} onChange={(e) => onChange("company", e.target.value)} placeholder="Optional" />
                  </div>
                </div>

                <div className="row-2">
                  <div className="field">
                    <label>Email *</label>
                    <input required type="email" value={form.email} onChange={(e) => onChange("email", e.target.value)} placeholder="you@example.com" />
                  </div>
                  <div className="field">
                    <label>Mobile *</label>
                    <input required value={form.phone} onChange={(e) => onChange("phone", e.target.value)} placeholder="+971 5x xxx xxxx" />
                  </div>
                </div>

                <div className="row-2">
                  <div className="field">
                    <label>Service *</label>
                    <select required value={form.service} onChange={(e) => onChange("service", e.target.value)}>
                      <option value="">Select a service…</option>
                      {window.CW_DATA.services.map(s => <option key={s.slug} value={s.slug}>{s.name}</option>)}
                      <option value="other">Other / mixed</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Quantity *</label>
                    <input required value={form.qty} onChange={(e) => onChange("qty", e.target.value)} placeholder="e.g. 200 cards, 1 roll-up" />
                  </div>
                </div>

                <div className="row-2">
                  <div className="field">
                    <label>Size</label>
                    <input value={form.size} onChange={(e) => onChange("size", e.target.value)} placeholder="A4, 85×55 mm, 80×200 cm…" />
                  </div>
                  <div className="field">
                    <label>Stock / material</label>
                    <input value={form.stock} onChange={(e) => onChange("stock", e.target.value)} placeholder="350 gsm matte, vinyl, foam board…" />
                  </div>
                </div>

                <div className="row-2">
                  <div className="field">
                    <label>Finish</label>
                    <input value={form.finish} onChange={(e) => onChange("finish", e.target.value)} placeholder="Matte lamination, spot UV, eyelets…" />
                  </div>
                  <div className="field">
                    <label>Needed by</label>
                    <input type="date" value={form.deadline} onChange={(e) => onChange("deadline", e.target.value)} />
                  </div>
                </div>

                <div className="field">
                  <label>Delivery preference</label>
                  <select value={form.delivery} onChange={(e) => onChange("delivery", e.target.value)}>
                    <option>Pickup at the shop (Barsha Heights)</option>
                    <option>Delivery — Dubai</option>
                    <option>Courier — U.A.E.</option>
                  </select>
                </div>

                <div className="field">
                  <label>Notes for the team</label>
                  <textarea value={form.notes} onChange={(e) => onChange("notes", e.target.value)} placeholder="Anything we should know — pantone match, double-sided, urgent, special finish, etc."></textarea>
                </div>

                <div style={{display:"flex", gap: 10, alignItems:"start", marginBottom: 24, fontSize: 13, color: "var(--cw-muted)"}}>
                  <input id="consent" type="checkbox" checked={form.consent} onChange={(e) => onChange("consent", e.target.checked)} style={{marginTop: 3}} />
                  <label htmlFor="consent" style={{fontSize: 13, fontFamily: "var(--font-body)", textTransform: "none", letterSpacing: 0, color: "var(--cw-muted)"}}>
                    Email me a confirmation and store these files securely while my order is open.
                  </label>
                </div>

                <div style={{display:"flex", gap: 10, flexWrap:"wrap", alignItems:"center"}}>
                  <button className="btn btn-primary btn-lg" type="submit" disabled={files.length === 0}>
                    <Icon.Upload size={16} /> Send my order
                  </button>
                  <a className="btn btn-wa btn-lg" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                    <Icon.Whatsapp size={16} /> Or WhatsApp instead
                  </a>
                  {files.length === 0 && (
                    <div style={{fontSize: 12, color: "var(--cw-muted)"}}>Add at least one file to continue.</div>
                  )}
                </div>
              </div>
            </form>

            <aside className="upload-side">
              <h3>Why upload?</h3>
              <div className="tip">
                <span className="tip-label">Fastest path</span>
                Uploading is the quickest way to a real quote — our team can see your artwork, check the file, and reply with a price + delivery date in writing.
              </div>
              <div className="tip">
                <span className="tip-label">Print-ready</span>
                CMYK colour · <b>300 DPI</b> minimum · <b>3 mm bleed</b> on all sides · fonts outlined or embedded · single PDF preferred.
              </div>
              <div className="tip">
                <span className="tip-label">Accepted formats</span>
                PDF, AI, EPS, PSD, INDD, JPG, PNG, TIFF, ZIP, RAR. Max 200 MB per file. If your file is bigger, WhatsApp us a WeTransfer link.
              </div>
              <div className="tip">
                <span className="tip-label">Privacy</span>
                Your files stay private. We use them only to produce your order, and remove them from our servers 30 days after the job is closed.
              </div>
              <div style={{marginTop: 24, padding: "20px 22px", background: "var(--cw-ink)", color: "white", borderRadius: "var(--radius-lg)"}}>
                <div className="tip-label" style={{color: "var(--cw-yellow)"}}>Need a hand?</div>
                <p style={{fontSize: 14, color: "rgba(255,255,255,0.8)", margin: "8px 0 16px"}}>
                  Not sure which stock or finish? WhatsApp us a quick description and we&apos;ll talk you through it.
                </p>
                <a className="btn btn-wa" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener" style={{width: "100%", justifyContent: "center"}}>
                  <Icon.Whatsapp size={14} /> Chat on WhatsApp
                </a>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= GALLERY =============
function GalleryPage({ onNavigate }) {
  const cats = ["All", ...Array.from(new Set(window.CW_DATA.gallery.map(g => g.cat)))];
  const [cat, setCat] = React.useState("All");
  const [light, setLight] = React.useState(null);
  const items = cat === "All" ? window.CW_DATA.gallery : window.CW_DATA.gallery.filter(g => g.cat === cat);
  return (
    <div className="page-enter" data-screen-label="05 Gallery">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Gallery</div>
          <h1>Off the presses.</h1>
          <p className="lead">A working portfolio of jobs we've printed — corporate branding, retail signage, walk-in copy work, and the everyday small-run things that make up most of a day in Tecom.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="gallery-filters">
            {cats.map(c => (
              <div key={c} className={"chip " + (cat === c ? "active" : "")} onClick={() => setCat(c)}>{c}</div>
            ))}
          </div>
          <div className="gallery-grid">
            {items.map((g, i) => (
              <div key={i} className="gallery-tile" onClick={() => setLight(g)}>
                <img src={g.src} alt={g.label} loading="lazy" />
                <div className="tile-label">{g.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      {light && (
        <div className="lightbox" onClick={() => setLight(null)}>
          <button className="lightbox-close" onClick={(e) => { e.stopPropagation(); setLight(null); }}><Icon.X size={20} /></button>
          <img src={light.src} alt={light.label} onClick={(e) => e.stopPropagation()} />
        </div>
      )}
    </div>
  );
}

// ============= WHY =============
function WhyPage({ onNavigate }) {
  return (
    <div className="page-enter" data-screen-label="06 Why">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Why Colorwings</div>
          <h1>A small print shop that takes the work seriously.</h1>
          <p className="lead">Two-to-ten staff. One shop in Tecom. Twenty-five-plus print services, and a quiet stream of urgent jobs that need to be right before 5pm.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="values">
            <div className="value">
              <div className="icon"><Icon.Bolt size={24} /></div>
              <h4>Same-day, when it&apos;s possible.</h4>
              <p>Walk-in copying, plotting, lamination and passport photos are done while you wait. Most digital print on ready artwork goes the same day.</p>
            </div>
            <div className="value">
              <div className="icon"><Icon.Shield size={24} /></div>
              <h4>One shop, one team.</h4>
              <p>No order-routing or middlemen. You speak to the same people who print your job — easier to fix things when they need fixing.</p>
            </div>
            <div className="value">
              <div className="icon"><Icon.Drop size={24} /></div>
              <h4>Print-ready or not.</h4>
              <p>Our prepress team checks every file. Minor fixes are on us; bigger rebuilds we quote before we touch them. Either way you'll know.</p>
            </div>
          </div>

          <div style={{marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start"}}>
            <div>
              <div className="section-eyebrow" style={{color: "var(--cw-red)"}}>From the queue</div>
              <h2 style={{fontSize: 36, marginBottom: 24, letterSpacing: "-0.03em"}}>What we hear back.</h2>
              {window.CW_DATA.reviews.map((r, i) => (
                <div key={i} style={{borderTop: "1px solid var(--cw-line)", padding: "28px 0"}}>
                  <div style={{color: "var(--cw-orange)", fontSize: 14, letterSpacing: 2, marginBottom: 10}}>
                    {"★".repeat(r.stars) + "☆".repeat(5-r.stars)}
                  </div>
                  <div style={{fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.4, letterSpacing: "-0.01em", marginBottom: 10}}>
                    &ldquo;{r.quote}&rdquo;
                  </div>
                  <div style={{fontSize: 13, color: "var(--cw-muted)"}}>— {r.who}</div>
                </div>
              ))}
              <div style={{marginTop: 24, fontSize: 13, color: "var(--cw-muted)"}}>
                Honest baseline: 3.6 / 5 on Google (19 reviews). We're working on the bits that don't get five stars — response time mainly — and that's part of why we built this new ordering flow.
              </div>
            </div>
            <div>
              <div className="about-photo">
                <div className="placeholder-photo">
                  <div className="ph-label">Image to come</div>
                  <div className="ph-title">Shopfront &amp; press, Barsha Heights</div>
                  <div style={{fontSize: 13, color: "var(--cw-muted)", fontFamily: "var(--font-mono)", marginTop: 8}}>Owned shopfront photo pending</div>
                </div>
              </div>
              <div className="callout" style={{marginTop: 24}}>
                <b>Owned photography is on the way.</b> The site is being rebuilt with real shop, press, and finished-work shots — replacing the template stock that came with the old site.
              </div>
            </div>
          </div>

          <div style={{marginTop: 80, padding: 56, background: "var(--cw-ink)", color: "white", borderRadius: "var(--radius-lg)", textAlign: "center"}}>
            <div style={{fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--cw-yellow)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 16}}>Start a job</div>
            <h2 style={{fontSize: 40, marginBottom: 16, letterSpacing: "-0.03em", color: "white"}}>Got a file? Send it over.</h2>
            <p style={{fontSize: 17, color: "rgba(255,255,255,0.7)", maxWidth: 540, margin: "0 auto 28px"}}>One form, any service. We&apos;ll quote you within the hour during shop hours.</p>
            <div style={{display:"flex", gap: 10, justifyContent:"center", flexWrap: "wrap"}}>
              <button className="btn btn-primary btn-lg" onClick={() => onNavigate("upload")}>
                <Icon.Upload size={16} /> Upload Your File
              </button>
              <a className="btn btn-wa btn-lg" href={window.CW_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                <Icon.Whatsapp size={16} /> WhatsApp Us
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= ABOUT =============
function AboutPage({ onNavigate }) {
  return (
    <div className="page-enter" data-screen-label="07 About">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / About</div>
          <h1>About Colorwings.</h1>
          <p className="lead">Officially registered as <b>Colorwings Maps &amp; Plans Photocopying Services LLC</b>. Trading from Barsha Heights, serving Tecom.</p>
        </div>
      </section>
      <section className="section">
        <div className="container about-grid">
          <div className="prose">
            <p>Colorwings is a small digital and offset printing press in Barsha Heights, Dubai. The shop sits on the ground floor of DAMAC Smart Heights, a few minutes' walk from the metro and the cluster of Tecom towers it serves every day.</p>
            <p>The catalogue is wide on purpose: business cards, brochures, letterheads, banners, roll-ups, foam board, vinyl, photo printing, AutoCAD plotting, mug printing, t-shirts, ID and passport photos, binding, lamination, scanning. If it can be printed onto something, the team here usually prints it.</p>
            <h2>Where the name comes from</h2>
            <p>The "color wings" mark — the bird-shaped CMYK swoosh you see on the door and the flyers — has been around since the shop opened. We've kept it.</p>
            <h2>What we&apos;re changing</h2>
            <p>The old website was a single-page restaurant template with a disabled contact form and a 2020 COVID-floor-sticker hero. The new site puts the upload flow front and centre, gives every service its own page, and shows real work instead of stock photos. It's a rebuild, not a refresh.</p>
            <div className="callout">
              <b>Founding year &amp; full team page</b> — to follow once confirmed with the owner. We don't invent figures.
            </div>
          </div>
          <div>
            <div className="about-photo">
              <div className="placeholder-photo">
                <div className="ph-label">Photo to come</div>
                <div className="ph-title">Inside the shop</div>
                <div style={{fontSize: 13, color: "var(--cw-muted)", fontFamily: "var(--font-mono)", marginTop: 8}}>Owned interior photo pending</div>
              </div>
            </div>
            <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12}}>
              <div className="about-photo" style={{aspectRatio: "1 / 1"}}>
                <div className="placeholder-photo">
                  <div className="ph-title" style={{fontSize: 14}}>Wide-format plotter</div>
                </div>
              </div>
              <div className="about-photo" style={{aspectRatio: "1 / 1"}}>
                <div className="placeholder-photo">
                  <div className="ph-title" style={{fontSize: 14}}>The team</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= CAREERS =============
function CareersPage({ onNavigate }) {
  return (
    <div className="page-enter" data-screen-label="08 Careers">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Careers</div>
          <h1>Want to print things for a living?</h1>
          <p className="lead">We hire press operators, prepress &amp; design support, and front-desk staff. If you know your way around a Heidelberg, a Roland plotter, or a passport-photo crop — say hello.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1.2fr 1fr", gap: 56}}>
            <div className="prose">
              <p>We're a small team, so every role wears more than one hat. You'll likely run the press, talk to clients, fix files, and help out at the front desk on a busy Saturday.</p>
              <h2>What we look for</h2>
              <ul style={{paddingLeft: 18, lineHeight: 1.7}}>
                <li>Hands-on experience with digital or offset printing equipment</li>
                <li>Comfortable in Adobe Illustrator, InDesign and Photoshop for prepress fixes</li>
                <li>Spoken English; Arabic, Hindi or Urdu a bonus for walk-in service</li>
                <li>The temperament to handle a rush order without losing the rest of the day</li>
              </ul>
              <h2>How to apply</h2>
              <p>Send your CV, a short note about what you've been printing lately, and any portfolio links to <a href={"mailto:" + window.CW_DATA.contact.emailCareers} style={{color: "var(--cw-red)"}}><b>{window.CW_DATA.contact.emailCareers}</b></a>. We read every email; we reply to the ones that look like a fit.</p>
            </div>
            <div>
              <div className="career-card" style={{margin: 0, flexDirection: "column", alignItems: "flex-start"}}>
                <div className="tag red">Open roles</div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, marginTop: 16, letterSpacing: "-0.02em"}}>Press Operator</h3>
                <p style={{color: "var(--cw-muted)", fontSize: 14, marginTop: 6}}>Digital + offset. Full-time. Tecom. UAE driving licence a plus.</p>
                <div style={{height: 1, background: "var(--cw-line)", width: "100%", margin: "20px 0"}}></div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "-0.02em"}}>Prepress &amp; Design Support</h3>
                <p style={{color: "var(--cw-muted)", fontSize: 14, marginTop: 6}}>Adobe CC + bleed/CMYK comfort. Full-time. Tecom.</p>
                <div style={{height: 1, background: "var(--cw-line)", width: "100%", margin: "20px 0"}}></div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "-0.02em"}}>Front-desk &amp; walk-in service</h3>
                <p style={{color: "var(--cw-muted)", fontSize: 14, marginTop: 6}}>Customer-facing. Multilingual a bonus. Full-time, Mon–Sat.</p>
                <a className="btn btn-primary" href={"mailto:" + window.CW_DATA.contact.emailCareers + "?subject=Application%20—%20Colorwings"} style={{marginTop: 24}}>
                  <Icon.Mail size={14} /> Email your CV
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============= CONTACT =============
function ContactPage({ onNavigate }) {
  const c = window.CW_DATA.contact;
  return (
    <div className="page-enter" data-screen-label="09 Contact">
      <section className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => onNavigate("home")}>Home</a> / Contact</div>
          <h1>Come by. Call. WhatsApp.</h1>
          <p className="lead">We're on the ground floor of DAMAC Smart Heights, opposite the Damac metro station. Free street parking right outside.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="contact-layout">
            <div className="contact-list">
              <div className="contact-item">
                <div className="label">Address</div>
                <h3>Shop 6A, Ground Floor</h3>
                <p>DAMAC Smart Heights, Barsha Heights (Tecom)<br/>Dubai, U.A.E. · P.O. Box 336738</p>
                <a className="btn btn-ghost btn-sm" href={`https://www.google.com/maps?q=${c.geo.lat},${c.geo.lng}`} target="_blank" rel="noopener" style={{marginTop: 14}}>
                  <Icon.Pin size={14} /> Open in Google Maps
                </a>
              </div>
              <div className="contact-item">
                <div className="label">Hours</div>
                <h3>Mon – Sat · 08:00 – 20:00</h3>
                <p>Sunday closed. Most walk-in jobs (passport photos, copies, lamination, binding) are done while you wait.</p>
              </div>
              <div className="contact-item">
                <div className="label">Phone &amp; WhatsApp</div>
                <h3><a href={c.phoneHref}>{c.phone}</a></h3>
                <p>Landline · shop reception</p>
                <h3 style={{marginTop: 12}}><a href={c.whatsappHref}>{c.whatsapp}</a></h3>
                <p>WhatsApp for quick quotes and file links</p>
              </div>
              <div className="contact-item">
                <div className="label">Email</div>
                <h3><a href={"mailto:" + c.emailOrders}>{c.emailOrders}</a></h3>
                <p>For orders &amp; quotes</p>
                <h3 style={{marginTop: 12}}><a href={"mailto:" + c.emailCareers}>{c.emailCareers}</a></h3>
                <p>For careers / CV applications</p>
              </div>
            </div>
            <div>
              <div className="map-frame">
                <iframe
                  title="Google Maps for Colorwings in DAMAC Smart Heights"
                  src={`https://www.google.com/maps?q=${c.geo.lat},${c.geo.lng}&z=16&output=embed`}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
              <div className="callout" style={{marginTop: 20}}>
                <b>Visit the shop</b> — the live map opens at the Barsha Heights shop pin.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ServicesIndex, ServiceDetail, UploadPage, GalleryPage, WhyPage, AboutPage, CareersPage, ContactPage });