// Home page
const { useState: useStateH } = React;

const PRODUCTS = [
  { id: 'business-cards', name: 'Business Cards', priceLabel: 'from AED 99', img: 'media/business-cards-design-01.webp', fit: 'fit-bc-design', cat: 'Stationery' },
  { id: 'flyers', name: 'Flyers & Leaflets', priceLabel: 'from AED 350', img: 'media/flyers-01.webp', fit: 'fit-flyer', cat: 'Marketing print' },
  { id: 'roll-up', name: 'Roll-up Banners', priceLabel: 'from AED 145', img: 'media/roll-up-banner-01.webp', fit: 'fit-rollup', cat: 'Large format' },
  { id: 'signage', name: 'Signage & Signboards', priceLabel: 'Quote on request', img: 'media/signage-01.webp', fit: 'fit-signage', cat: 'Signage' },
  { id: 'exhibition', name: 'Exhibition & Events', priceLabel: 'Quote on request', img: 'media/exhibition-shell-scheme-01.webp', fit: 'fit-exhibit', cat: 'Exhibition' },
  { id: 'tshirts', name: 'T-shirts & Merch', priceLabel: 'from AED 35', img: 'media/tshirt-printing-01.webp', fit: 'fit-tshirt', cat: 'Branded merch' },
  { id: 'vehicle', name: 'Vehicle Wraps', priceLabel: 'Quote on request', img: 'media/vehicle-wraps-01.webp', fit: 'fit-vehicle', cat: 'Vehicle graphics' },
  { id: 'letterheads', name: 'Letterheads & Stationery', priceLabel: 'from AED 350', img: 'media/letterheads-01.webp', fit: 'fit-letter', cat: 'Stationery' },
  { id: 'canvas', name: 'Canvas Prints', priceLabel: 'Quote on request', img: 'media/canvas-printing-01.webp', fit: 'fit-canvas', cat: 'Wall art' },
];

function ProductCard({ p, n }) {
  const { go } = useRouter();
  return (
    <a className="product-card" href="#" onClick={(e) => {
      e.preventDefault();
      if (p.id === 'business-cards') go('product');
      else go('products');
    }}>
      <div className="pc-img">
        <img src={p.img} alt={p.name} className={p.fit || ''} />
      </div>
      <div className="pc-body">
        <div className="pc-meta">
          <span>{String(n).padStart(2, '0')} / {p.cat}</span>
          <span className="pc-arrow" aria-hidden="true">↗</span>
        </div>
        <div className="pc-title">{p.name}</div>
        <div className="pc-price">
          {p.priceLabel.startsWith('Quote') ? (
            <span className="muted">{p.priceLabel}</span>
          ) : (
            <span><span className="muted">From</span> <b>AED {p.priceLabel.replace('from AED ', '')}</b></span>
          )}
        </div>
      </div>
    </a>
  );
}

function Home() {
  const { go } = useRouter();
  return (
    <main>
      {/* Hero */}
      <section className="hero">
        <div className="wrap">
          <div className="eyebrow" style={{marginBottom: 28}}>Print · Sign · Exhibition — Est. Dubai</div>
          <div className="hero-grid">
            <div>
              <h1 className="h-display">
                Business cards, banners &amp; signage —<br/>
                <span style={{color:'var(--muted)'}}>designed free, printed in 24 hours,</span><br/>
                delivered free across the UAE.
              </h1>
              <p className="lead" style={{marginTop: 28, maxWidth: '52ch'}}>
                Guaranteed lowest price. No advance payment. Open 24/7 sales desk on WhatsApp. From a 500-card express run to a full exhibition shell-scheme — one reliable partner.
              </p>
              <div style={{display:'flex', gap: 12, marginTop: 36, flexWrap:'wrap'}}>
                <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>
                  Get a Quote <span className="btn-arrow">→</span>
                </a>
                <a className="btn btn-ink btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('upload'); }}>
                  <UploadIcon /> Upload &amp; Order
                </a>
                <a className="btn btn-ghost btn-lg" href={waLink('Hi Arabian Prints, I would like a quote.')} target="_blank" rel="noopener">
                  <WaIcon /> WhatsApp Us
                </a>
              </div>
              <div className="hero-meta">
                <div>Dubai · UAE</div>
                <div>+971 55 166 8588</div>
                <div>24/7</div>
              </div>
            </div>
            <div className="hero-image">
              <img src="media/gallery-post-9.webp" alt="High-speed print press running a colorful job" className="fit-print-press" />
              <div className="hero-image-tag">Index 01 — On press, overnight color</div>
            </div>
          </div>
        </div>
      </section>

      <TrustStrip />

      {/* Product grid */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="01 / What we print"
            title="One print partner. Every format."
            right={<a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>All services <span className="btn-arrow">→</span></a>}
          />
          <div className="products">
            {PRODUCTS.map((p, i) => <ProductCard key={p.id} p={p} n={i + 1} />)}
          </div>
        </div>
      </section>

      {/* Why us */}
      <section className="section" style={{background:'var(--paper-2)'}}>
        <div className="wrap">
          <SectionHead
            eyebrow="02 / Why Arabian Prints"
            title="Fast. Affordable. Dependable."
          />
          <div className="why-grid">
            <div className="why-cell">
              <div className="why-num">01</div>
              <div className="why-h">Guaranteed lowest price</div>
              <p className="why-p">If you find the same job cheaper, we match it. We publish our prices as plain HTML — no surprises baked into a JPEG.</p>
            </div>
            <div className="why-cell">
              <div className="why-num">02</div>
              <div className="why-h">24-hour overnight runs</div>
              <p className="why-p">Order by 11am, pick up the next day by 7pm — or get it shipped free anywhere in the UAE. Express business cards turn round in 24h.</p>
            </div>
            <div className="why-cell">
              <div className="why-num">03</div>
              <div className="why-h">WhatsApp does the heavy lifting</div>
              <p className="why-p">Send artwork, ask questions, reorder a job — all over <a style={{color:'var(--cta)'}} href={waLink('Hi Arabian Prints!')} target="_blank" rel="noopener">+971 55 166 8588</a>, day or night.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio teaser */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="03 / Selected work"
            title="Real jobs, off the press."
            right={<a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); go('portfolio'); }}>View portfolio <span className="btn-arrow">→</span></a>}
          />
          <div className="portfolio-grid">
            <div className="pt-tile"><img src="media/gallery-post-3.webp" alt="CMYK on press" className="fit-cmyk" /><div className="pt-tile-caption">CMYK setup — 5,000 run</div></div>
            <div className="pt-tile"><img src="media/roll-up-banner-01.webp" alt="Retail roll-ups" className="fit-rollup" /><div className="pt-tile-caption">Retail roll-ups</div></div>
            <div className="pt-tile"><img src="media/exhibition-shell-scheme-01.webp" alt="Shell-scheme stand" className="fit-exhibit" /><div className="pt-tile-caption">Shell-scheme stand</div></div>
            <div className="pt-tile"><img src="media/gallery-post-9.webp" alt="On press" className="fit-press" /><div className="pt-tile-caption">Overnight flyer run</div></div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="cta-band">
        <div className="wrap">
          <div className="cta-band-row">
            <div>
              <div className="eyebrow on-dark" style={{marginBottom: 24}}>04 / Two ways to order</div>
              <h2 className="h-section">Send us your file, or tell us what you need — we'll quote in minutes.</h2>
              <p className="lead" style={{marginTop: 18, maxWidth:'52ch'}}>
                Upload your artwork directly and we'll print it. Or describe the job and we'll come back with a price, free design and a delivery slot.
              </p>
            </div>
            <div className="cta-actions">
              <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('upload'); }}>
                <UploadIcon /> Upload &amp; Order
              </a>
              <a className="btn btn-ghost btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>
                Get a Quote <span className="btn-arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Home, PRODUCTS });