// Product detail (Business Cards) + Products hub
const { useState: useStateP, useMemo: useMemoP } = React;

// ---- Products hub (lightweight, lists all) ----
function ProductsHub() {
  const { go } = useRouter();
  return (
    <main>
      <section className="page-head">
        <div className="wrap">
          <div className="crumbs" style={{marginBottom: 18}}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Home</a>
            <span>/</span>
            <span style={{color:'var(--ink)'}}>Products</span>
          </div>
          <div className="page-head-row">
            <h1>Products &amp; services.<br/><span style={{color:'var(--muted)'}}>Every print format we run.</span></h1>
            <p className="lead">Each product page lists prices in plain HTML — no quote needed to know what something costs. Need something not listed? <a href="#" onClick={(e) => { e.preventDefault(); go('quote'); }} style={{color:'var(--cta)'}}>Ask for a custom quote</a>.</p>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="products">
            {PRODUCTS.map((p, i) => <ProductCard key={p.id} p={p} n={i + 1} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Business Cards detail page ----

const BC_QUANTITIES = [
  { qty: 250,   express: 65,   premium: 145 },
  { qty: 500,   express: 99,   premium: 250 },
  { qty: 1000,  express: 175,  premium: 450 },
  { qty: 2500,  express: 395,  premium: 990 },
  { qty: 5000,  express: 725,  premium: 1850 },
  { qty: 10000, express: 1290, premium: 3450 },
];

const BC_STOCKS = ['400gsm Smooth White', 'Pearl White', 'Craft (Recycled)', 'Ice Gold', 'PVC White Plastic', 'Textured Paper'];
const BC_FINISHES = ['Matt laminated', '3D UV embossed', 'Gold foil', 'Silver foil', 'Spot UV', 'Rounded corners', 'Die-cut'];
const BC_SIZES = ['90 × 55 mm', '85 × 55 mm', '91 × 55 mm'];

function ProductBusinessCards() {
  const { go } = useRouter();
  const [tier, setTier] = useStateP('express');   // express | premium
  const [qty, setQty] = useStateP(500);
  const [size, setSize] = useStateP('90 × 55 mm');
  const [stock, setStock] = useStateP('400gsm Smooth White');
  const [finish, setFinish] = useStateP('Matt laminated');

  const price = useMemoP(() => {
    const row = BC_QUANTITIES.find(r => r.qty === qty);
    return row ? row[tier] : 0;
  }, [tier, qty]);

  const turnaround = tier === 'express' ? '24 hours' : '2 working days';
  const tierLabel = tier === 'express' ? 'Express' : 'Premium';

  const quoteMsg = `Hi Arabian Prints, I'd like a quote for ${tierLabel} Business Cards — ${qty} cards, ${size}, ${stock}, ${finish}. AED ${price} (24h turnaround). Can you confirm and arrange?`;

  return (
    <main>
      {/* Hero */}
      <section className="prod-hero">
        <div className="prod-hero-text">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Home</a>
            <span>/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Products</a>
            <span>/</span>
            <span style={{color:'var(--ink)'}}>Business Cards</span>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 18}}>SKU · 01 Business Cards</div>
            <h1 className="h-display" style={{fontSize:'clamp(40px, 5.5vw, 80px)'}}>
              500 cards.<br/>
              <span style={{color:'var(--muted)'}}>From AED 99.</span><br/>
              Printed overnight.
            </h1>
          </div>
          <p className="lead" style={{maxWidth:'52ch'}}>
            Full-colour, matt laminated both sides. 400gsm white card. Free design, free UAE delivery, no advance payment — and we'll match any cheaper quote you can find in Dubai.
          </p>
          <div style={{display:'flex', gap: 12, 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 Artwork</a>
          </div>
        </div>
        <div className="prod-hero-img">
          <img src="media/business-cards-design-01.webp" alt="Business cards — die-cut shape" className="fit-bc-design" />
        </div>
      </section>

      {/* Two tiers */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="01 / Pick your tier"
            title="Two ways to print 500 cards."
          />
          <div className="tiers">
            <div className={"tier" + (tier === 'express' ? ' featured' : '')} onClick={() => setTier('express')} style={{cursor:'pointer'}}>
              {tier === 'express' && <div className="tier-flag">Selected</div>}
              <div className="ix">Tier A · Express</div>
              <div className="tier-name">Express Business Cards</div>
              <div className="tier-price">
                <span className="tier-price-from">From</span>
                <span className="tier-price-cur">AED</span>
                <span className="tier-price-amt">99</span>
                <span className="tier-price-from" style={{marginLeft: 6}}>/ 500</span>
              </div>
              <div className="tier-sub">24-hour turnaround. Free design. The fastest, cheapest way to a stack of 500.</div>
              <div className="tier-features">
                <div className="tier-feature">400gsm Smooth White Card</div>
                <div className="tier-feature">Matt laminated both sides</div>
                <div className="tier-feature">4/4 full colour, front + back</div>
                <div className="tier-feature">Free design + free UAE delivery</div>
              </div>
            </div>
            <div className={"tier" + (tier === 'premium' ? ' featured' : '')} onClick={() => setTier('premium')} style={{cursor:'pointer'}}>
              {tier === 'premium' && <div className="tier-flag">Selected</div>}
              <div className="ix">Tier B · Premium</div>
              <div className="tier-name">Premium Business Cards</div>
              <div className="tier-price">
                <span className="tier-price-from">From</span>
                <span className="tier-price-cur">AED</span>
                <span className="tier-price-amt">250</span>
                <span className="tier-price-from" style={{marginLeft: 6}}>/ 500</span>
              </div>
              <div className="tier-sub">For when the card has to do the talking — stocks, embossing and foils that feel hand-finished.</div>
              <div className="tier-features">
                <div className="tier-feature">Choose: Pearl, Craft, Ice Gold, PVC, Textured</div>
                <div className="tier-feature">3D UV emboss, gold/silver foil, spot UV</div>
                <div className="tier-feature">Rounded corners or die-cut shapes</div>
                <div className="tier-feature">2 working day turnaround</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Configurator + price grid */}
      <section className="section" style={{background:'var(--paper-2)'}}>
        <div className="wrap">
          <SectionHead
            eyebrow="02 / Configure"
            title="Tap your way to a price."
          />

          <div className="form-grid">
            <div>
              <div style={{marginBottom: 28}}>
                <label className="eyebrow no-rule" style={{marginBottom: 12, display:'block'}}>Quantity</label>
                <div className="pill-row">
                  {BC_QUANTITIES.map(r => (
                    <button key={r.qty} className={"pill" + (qty === r.qty ? ' active' : '')} onClick={() => setQty(r.qty)}>
                      {r.qty.toLocaleString()}
                    </button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom: 28}}>
                <label className="eyebrow no-rule" style={{marginBottom: 12, display:'block'}}>Size</label>
                <div className="pill-row">
                  {BC_SIZES.map(s => (
                    <button key={s} className={"pill" + (size === s ? ' active' : '')} onClick={() => setSize(s)}>{s}</button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom: 28}}>
                <label className="eyebrow no-rule" style={{marginBottom: 12, display:'block'}}>Card Stock</label>
                <div className="pill-row">
                  {BC_STOCKS.map(s => (
                    <button key={s} className={"pill" + (stock === s ? ' active' : '')} onClick={() => setStock(s)}>{s}</button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom: 12}}>
                <label className="eyebrow no-rule" style={{marginBottom: 12, display:'block'}}>Finish</label>
                <div className="pill-row">
                  {BC_FINISHES.map(s => (
                    <button key={s} className={"pill" + (finish === s ? ' active' : '')} onClick={() => setFinish(s)}>{s}</button>
                  ))}
                </div>
              </div>
            </div>

            <div className="aside" style={{position:'sticky', top: 96}}>
              <div className="eyebrow no-rule" style={{marginBottom: 16}}>Your spec</div>
              <h3>{tierLabel} Business Cards</h3>
              <div className="row">
                <div className="k">Quantity</div>
                <div className="v">{qty.toLocaleString()} cards</div>
              </div>
              <div className="row">
                <div className="k">Size</div>
                <div className="v">{size}</div>
              </div>
              <div className="row">
                <div className="k">Stock</div>
                <div className="v">{stock}</div>
              </div>
              <div className="row">
                <div className="k">Finish</div>
                <div className="v">{finish}</div>
              </div>
              <div className="row">
                <div className="k">Turnaround</div>
                <div className="v">{turnaround}</div>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop: 22, paddingTop: 18, borderTop:'1px solid var(--line)'}}>
                <span style={{fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--muted)', letterSpacing: '0.08em', textTransform:'uppercase'}}>Total</span>
                <span style={{fontFamily:'var(--font-display)', fontSize: 40, fontWeight: 600, letterSpacing:'-0.025em'}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize: 13, color:'var(--muted)', marginRight: 6}}>AED</span>
                  {price.toLocaleString()}
                </span>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap: 10, marginTop: 20}}>
                <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>Continue to Quote <span className="btn-arrow">→</span></a>
                <a className="btn btn-wa" href={waLink(quoteMsg)} target="_blank" rel="noopener"><WaIcon /> Send on WhatsApp</a>
                <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); go('upload'); }}><UploadIcon /> Upload artwork now</a>
              </div>
              <p style={{fontSize: 12, color:'var(--muted)', marginTop: 14, lineHeight: 1.4}}>
                No advance payment. Free design and delivery included.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Volume price table */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="03 / Buy more, save more"
            title="Volume pricing."
          />
          <div style={{border:'1px solid var(--line)', background:'var(--paper)'}}>
            <table className="table">
              <thead>
                <tr>
                  <th>Quantity</th>
                  <th>Express (24h)</th>
                  <th>Premium (2 days)</th>
                  <th>Per card (Express)</th>
                  <th>Save vs. 250 unit</th>
                </tr>
              </thead>
              <tbody>
                {BC_QUANTITIES.map((r, i) => {
                  const base = BC_QUANTITIES[0];
                  const perCard = (r.express / r.qty).toFixed(2);
                  const baseRate = base.express / base.qty;
                  const savings = baseRate > 0 ? Math.round((1 - (r.express / r.qty) / baseRate) * 100) : 0;
                  return (
                    <tr key={r.qty}>
                      <td className="num">{r.qty.toLocaleString()} cards</td>
                      <td className="num price">AED {r.express.toLocaleString()}</td>
                      <td className="num">AED {r.premium.toLocaleString()}</td>
                      <td className="num muted">AED {perCard}</td>
                      <td className="num" style={{color: savings > 0 ? 'var(--cta)' : 'var(--muted)'}}>{savings > 0 ? `−${savings}%` : '—'}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Spec grid */}
      <section className="section" style={{background:'var(--paper-2)'}}>
        <div className="wrap">
          <SectionHead
            eyebrow="04 / Full spec"
            title="Sizes, stocks and finishes."
          />
          <div className="spec-grid" style={{background:'white'}}>
            <div className="spec-cell">
              <h4>Sizes</h4>
              <ul>
                {BC_SIZES.map(s => <li key={s}>{s}</li>)}
                <li>Custom shapes on request</li>
              </ul>
            </div>
            <div className="spec-cell">
              <h4>Card stocks</h4>
              <ul>
                {BC_STOCKS.map(s => <li key={s}>{s}</li>)}
              </ul>
            </div>
            <div className="spec-cell">
              <h4>Finishes</h4>
              <ul>
                {BC_FINISHES.map(s => <li key={s}>{s}</li>)}
              </ul>
            </div>
            <div className="spec-cell">
              <h4>Colour modes</h4>
              <ul>
                <li>4/4 — full colour front &amp; back</li>
                <li>4/1 — full colour front, black back</li>
                <li>4/0 — single-sided full colour</li>
              </ul>
            </div>
            <div className="spec-cell">
              <h4>Turnaround</h4>
              <ul>
                <li>Express — 24 hours from artwork approval</li>
                <li>Premium — 2 working days</li>
                <li>Order cutoff — 11:00 GST</li>
                <li>Pickup ready — next day 19:00</li>
              </ul>
            </div>
            <div className="spec-cell">
              <h4>Included</h4>
              <ul>
                <li>Free design (one round of revisions)</li>
                <li>Free UAE delivery on orders ≥ AED 200</li>
                <li>No advance payment</li>
                <li>100% satisfaction guarantee</li>
              </ul>
            </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}}>Ready when you are</div>
              <h2 className="h-section">500 cards on your desk by tomorrow evening.</h2>
            </div>
            <div className="cta-actions">
              <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-wa btn-lg" href={waLink(quoteMsg)} target="_blank" rel="noopener"><WaIcon /> WhatsApp</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ProductsHub, ProductBusinessCards });