const { useState, useEffect, useMemo, useRef } = React;

// ============================================================================
// DATA
// ============================================================================

const PORTFOLIO = [
  { id: 'pkg-eid',     img: 'media/product-packaging-01.webp',         title: 'Eid Mubarak gift set',          tag: 'PACKAGING',   cat: 'packaging', size: 'wide' },
  { id: 'card-emboss', img: 'media/product-embossed-business-cards.webp', title: 'Embossed business cards',    tag: 'CARDS',       cat: 'cards',     size: 'tall' },
  { id: 'book-coffee', img: 'media/product-coffeetable-book.webp',     title: 'Coffee-table book',             tag: 'BOOKS',       cat: 'books',     size: 'med' },
  { id: 'tech-video',  img: 'media/product-video-brochure.webp',       title: 'Video brochure',                tag: 'TECHNOLOGY',  cat: 'technology', size: 'med' },
  { id: 'pkg-sunset',  img: 'media/product-packaging-02.webp',         title: 'Bespoke gift packaging',        tag: 'PACKAGING',   cat: 'packaging', size: 'tall' },
  { id: 'corp-tender', img: 'media/product-tender-proposal-folder.webp', title: 'Tender proposal folder',      tag: 'CORPORATE',   cat: 'corporate', size: 'sm' },
  { id: 'corp-letter', img: 'media/product-letterhead-stationery.webp',title: 'Letterhead & stationery',       tag: 'CORPORATE',   cat: 'corporate', size: 'sm' },
  { id: 'mkt-poster',  img: 'media/product-posters.webp',              title: 'Poster series',                 tag: 'MARKETING',   cat: 'marketing', size: 'sm' },
  { id: 'pf-01',       img: 'media/portfolio-01.webp',                  title: 'Notebook collection',          tag: 'BOOKS',       cat: 'books',     size: 'sm' },
  { id: 'tech-wrap',   img: 'media/product-tech-wrap.webp',             title: 'Abu Dhabi launch wrap',        tag: 'MARKETING',   cat: 'marketing', size: 'wide' },
  { id: 'lbl-cosmet',  img: 'media/product-cosmetic-labels.webp',       title: 'Cosmetic labels',              tag: 'LABELS',      cat: 'packaging', size: 'tall' },
  { id: 'pf-02',       img: 'media/portfolio-02.webp',                  title: 'On-demand book',               tag: 'BOOKS',       cat: 'books',     size: 'med' },
  { id: 'card-vouch',  img: 'media/product-qr-voucher-card.webp',       title: 'QR voucher cards',             tag: 'TECHNOLOGY',  cat: 'technology', size: 'med' },
];

const PRODUCT_CATEGORIES = [
  {
    id: 'business-cards',
    num: '01',
    title: 'Business cards',
    desc: 'Original, premium and luxury cards — foiled, embossed, edge-painted, on heavyweight stocks.',
    img:  'media/product-business-cards.webp',
    types: ['Original', 'Premium', 'Luxury', 'Letterpress', 'Foiled', 'Embossed'],
  },
  {
    id: 'books',
    num: '02',
    title: 'Books',
    desc: 'On-demand, coffee-table, photo, look, story, recipe, children\u2019s, school, thesis, memoirs.',
    img:  'media/product-corporate-books.webp',
    types: ['Coffee-table', 'On-demand', 'Photo', 'Look book', 'Memoirs', 'Children\u2019s board'],
  },
  {
    id: 'corporate',
    num: '03',
    title: 'Corporate printing',
    desc: 'Profiles, annual reports, certificates, letterheads, diaries, journals, invitations, folders.',
    img:  'media/product-corporate-diaries.webp',
    types: ['Company profile', 'Annual report', 'Letterheads', 'Diaries & journals', 'Invitations', 'Folders'],
  },
  {
    id: 'marketing',
    num: '04',
    title: 'Marketing collateral',
    desc: 'Brochures, posters, roll-ups, danglers, vouchers, gift cards, calendars, placemats, coasters.',
    img:  'media/product-retail-danglers.webp',
    types: ['Brochures & flyers', 'Posters', 'Roll-up banners', 'Danglers', 'Vouchers', 'Calendars'],
  },
  {
    id: 'labels-packaging',
    num: '05',
    title: 'Labels & packaging',
    desc: 'Rigid, luxury, gift, festive, handover, e-commerce and influencer boxes. Bags, stickers, labels.',
    img:  'media/product-packaging-01.webp',
    types: ['Rigid boxes', 'Luxury boxes', 'E-commerce', 'Shopping bags', 'Stickers', 'Labels'],
  },
  {
    id: 'technology',
    num: '06',
    title: 'Technology',
    desc: 'NFC cards, QR & barcode, variable-data, video brochures (4.3" / 7" / 10" screen).',
    img:  'media/product-video-brochure.webp',
    types: ['NFC cards', 'QR / barcode', 'Variable-data', 'Video brochures', 'Business-card video', 'Smart packaging'],
    featured: true,
  },
];

const LOUNGES = [
  {
    id: 'd3',
    name: 'd3 lounge',
    since: 'Dubai Design District · since 2021',
    addr: 'Building 1B, Retail 3, Dubai Design District, Dubai',
    phone: '+971 4 878 0054',
    email: 'd3info@printerydubai.com',
    img: 'media/lounge-d3-01.webp',
    note: 'The first premium print lounge at d3.',
  },
  {
    id: 'difc',
    name: 'DIFC lounge',
    since: 'Central Park Towers · since 2017',
    addr: 'P2-124, Central Park Towers, DIFC, P.O. Box 507199, Dubai',
    phone: '+971 50 160 7042',
    email: 'sales@printerydubai.com',
    img: 'media/lounge-02.webp',
    note: 'Our first outlet — opened February 2017.',
  },
  {
    id: 'auh',
    name: 'Abu Dhabi lounge',
    since: 'Y Tower, Capital Centre · 2025',
    addr: 'Y Tower, Unit 7 & 12, Ground Floor, Al Rawdah, Capital Centre',
    phone: '+971 50 160 7042',
    email: 'auh@printery.ae',
    img: 'media/lounge-abu-dhabi-2025.webp',
    note: 'Our newest lounge — serving the capital.',
  },
];

// ============================================================================
// PRIMITIVES
// ============================================================================

function LogoGlyph({ size = 28 }) {
  // tangram-style P glyph derived from the official logo
  return (
    <svg className="logo-glyph" width={size} height={size} viewBox="0 0 64 64" fill="none">
      <polygon points="32,4 56,4 56,28" fill="var(--tg-purple)" />
      <polygon points="32,4 32,28 56,28" fill="var(--tg-yellow)" />
      <polygon points="8,28 32,28 8,52" fill="var(--tg-green)" />
      <polygon points="32,28 56,28 56,52 32,52" fill="var(--tg-teal)" />
      <polygon points="8,52 32,52 32,60 8,60" fill="var(--tg-orange)" />
      <polygon points="32,52 56,52 56,60 32,60" fill="var(--tg-red)" />
      <rect x="4" y="4" width="6" height="24" fill="var(--ink)" />
    </svg>
  );
}

function Wordmark() {
  return (
    <a href="#top" className="wordmark" aria-label="Printery home">
      <LogoGlyph />
      <span>print<span className="em">ery</span></span>
    </a>
  );
}

function ArrowR({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M2 8h12M9 3l5 5-5 5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowUpRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M4 12L12 4M6 4h6v6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function TangramStrip({ density = 'subtle' }) {
  if (density === 'off') return null;
  const palette = ['--tg-red','--tg-orange','--tg-yellow','--tg-green','--tg-teal','--tg-blue','--tg-purple','--tg-plum'];
  const widths = density === 'loud'
    ? [8, 14, 4, 18, 6, 22, 10, 18]
    : density === 'medium'
      ? [16, 8, 24, 6, 18, 12, 8, 8]
      : [40, 6, 30, 8, 6, 6, 0, 4];
  const total = widths.reduce((a,b)=>a+b, 0);
  return (
    <div className="tangram-strip" aria-hidden="true">
      {palette.map((p, i) => (
        <span key={p} style={{ background: `var(${p})`, flexGrow: widths[i] / total }} />
      ))}
    </div>
  );
}

// ============================================================================
// NAV
// ============================================================================

function Nav({ onQuote }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <header className="nav" data-comment-anchor="nav">
        <div className="nav-inner">
          <Wordmark />
          <nav className="nav-links">
            <a href="#portfolio">Portfolio</a>
            <a href="#products">Products</a>
            <a href="#sustainability">Sustainability</a>
            <a href="#lounges">Lounges</a>
            <a href="#about">About</a>
          </nav>
          <div className="nav-cta">
            <a href="tel:+97148780054" className="btn btn-ghost" aria-label="Call d3 lounge">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3h3l2 4-2 1c1 2 3 4 5 5l1-2 4 2v3a1 1 0 01-1 1A12 12 0 013 4a1 1 0 011-1z"/></svg>
              +971 4 878 0054
            </a>
            <button className="btn btn-primary" onClick={onQuote}>
              Get a quote <ArrowR />
            </button>
            <button
              className="btn btn-ghost"
              style={{ display: 'none', padding: '10px 14px' }}
              id="mobile-toggle"
              onClick={() => setOpen(true)}
              aria-label="Open menu"
            >
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 4h12M2 8h12M2 12h12"/></svg>
            </button>
          </div>
        </div>
      </header>

      {open && (
        <div className="mobile-menu">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 24 }}>
            <Wordmark />
            <button className="btn btn-ghost" onClick={() => setOpen(false)} style={{ padding: '10px 14px' }}>Close</button>
          </div>
          {['Portfolio','Products','Sustainability','Lounges','About'].map(n => (
            <a key={n} href={`#${n.toLowerCase()}`} onClick={() => setOpen(false)}>{n}</a>
          ))}
          <button className="btn btn-primary" onClick={() => { setOpen(false); onQuote(); }} style={{ alignSelf:'flex-start', marginTop: 16 }}>
            Get a quote <ArrowR />
          </button>
        </div>
      )}
    </>
  );
}

// ============================================================================
// HERO
// ============================================================================

function HeroSplit({ onQuote }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}>
              <span style={{display:'inline-block', width:6, height:6, background:'var(--accent)', borderRadius:'50%', marginRight:8, verticalAlign:'middle'}}></span>
              EST. 2014 · DUBAI · FSC CERTIFIED
            </div>
            <h1>
              Premium print,<br/>
              <em>crafted</em> in Dubai<br/>
              since 2014.
            </h1>
            <p className="hero-sub">
              A premium print lounge in d3, DIFC and Abu Dhabi &mdash; bespoke printing, packaging and corporate stationery, made on an FSC-certified, solar-powered press.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onQuote}>Get a quote <ArrowR /></button>
              <a href="#portfolio" className="btn btn-ghost">Explore the portfolio <ArrowR /></a>
            </div>
            <div className="hero-meta">
              <span><strong>3</strong>lounges</span>
              <span><strong>500+</strong>finished pieces</span>
              <span><strong>FSC</strong>certified paper</span>
              <span><strong>100%</strong>solar-powered plant</span>
            </div>
          </div>
          <div className="hero-image-wrap">
            <div className="hero-image">
              <img src="media/lounge-d3-01.webp" alt="The Printery lounge at Dubai Design District" loading="eager" />
            </div>
            <div className="hero-caption">d3 lounge · Building 1B, Retail 3</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroFull({ onQuote }) {
  return (
    <section className="hero-full" id="top" data-screen-label="01 Hero" style={{ padding: 0 }}>
      <div className="hero-full-image">
        <img src="media/lounge-d3-01.webp" alt="The Printery lounge at Dubai Design District" loading="eager" />
        <div className="hero-full-overlay" />
        <div className="container hero-full-content">
          <div className="eyebrow" style={{ color:'color-mix(in oklab, var(--paper) 80%, transparent)', marginBottom: 24 }}>
            EST. 2014 · DUBAI · FSC CERTIFIED
          </div>
          <h1>
            Premium print, <em>crafted</em> in Dubai since 2014.
          </h1>
          <p className="hero-full-sub">
            A premium print lounge in d3, DIFC and Abu Dhabi &mdash; bespoke printing, packaging and corporate stationery, made on an FSC-certified, solar-powered press.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onQuote} style={{ background: 'var(--paper)', color: 'var(--ink)' }}>Get a quote <ArrowR /></button>
            <a href="#portfolio" className="btn btn-on-dark-ghost">Explore the portfolio <ArrowR /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// CREDIBILITY STRIP
// ============================================================================

function CredibilityStrip() {
  const items = [
    { num: 'Since 2014', label: 'Founded as Dubai\u2019s premium print lounge' },
    { num: '3 lounges',  label: 'd3 · DIFC · Abu Dhabi Capital Centre' },
    { num: 'FSC',        label: 'Certified paper · tree-free & seed stocks' },
    { num: 'Solar',      label: 'Powered by an on-site solar plant' },
  ];
  return (
    <div className="container">
      <div className="creds">
        <div className="creds-grid">
          {items.map((it, i) => (
            <div className="cred-item" key={i}>
              <div className="num serif">{it.num}</div>
              <div className="label">{it.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// PORTFOLIO
// ============================================================================

function Portfolio({ onQuote }) {
  const [filter, setFilter] = useState('all');
  const filters = [
    { id: 'all',        label: 'All work' },
    { id: 'packaging',  label: 'Packaging' },
    { id: 'cards',      label: 'Business cards' },
    { id: 'books',      label: 'Books' },
    { id: 'corporate',  label: 'Corporate' },
    { id: 'marketing',  label: 'Marketing' },
    { id: 'technology', label: 'Technology' },
  ];

  const items = useMemo(() => {
    return filter === 'all' ? PORTFOLIO : PORTFOLIO.filter(p => p.cat === filter);
  }, [filter]);

  return (
    <section id="portfolio" data-screen-label="02 Portfolio">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">— Showcase</div>
            <h2>A portfolio of <em>finished work</em>.</h2>
          </div>
          <div className="right">
            <p>Paper, finish and detail you can feel. Every piece is made bespoke for a real client &mdash; offset or digital, foil or emboss, soft-touch or uncoated, here in our Dubai press.</p>
          </div>
        </div>

        <div className="filters">
          {filters.map(f => (
            <button
              key={f.id}
              className={`filter-chip ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}
            >
              {f.label}
              {filter === f.id && f.id !== 'all' && <span style={{ marginLeft: 6, opacity: 0.6 }}>×</span>}
            </button>
          ))}
          <span style={{ marginLeft: 'auto', alignSelf: 'center', fontSize: 12, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.12em' }}>
            {String(items.length).padStart(2,'0')} / {String(PORTFOLIO.length).padStart(2,'0')}
          </span>
        </div>

        <div className="portfolio-grid">
          {items.map((p, i) => (
            <div key={p.id} className={`pf-item pf-${p.size}`}>
              <img src={p.img} alt={p.title} loading="lazy" />
              <div className="pf-meta">
                <div>
                  <div className="tag">{p.tag}</div>
                  <div className="ttl">{p.title}</div>
                </div>
                <ArrowUpRight size={18} />
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16 }}>
          <p style={{ fontSize: 13, color:'var(--muted)', margin: 0, maxWidth: '48ch' }}>
            Client names appear only with permission. Want a closer look at any piece? Visit the d3 lounge to see, feel and discuss the finishes.
          </p>
          <button className="btn btn-ghost" onClick={onQuote}>Start a commission <ArrowR /></button>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PRODUCTS HUB
// ============================================================================

function Products({ onQuote }) {
  return (
    <section id="products" style={{ background: 'var(--paper-2)' }} data-screen-label="03 Products">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">— Six categories</div>
            <h2>Everything we make, <em>made well</em>.</h2>
          </div>
          <div className="right">
            <p>Six real categories built from twenty-plus production lines. Each item is quoted to the project &mdash; no fixed price lists, no boxed kits. Pick a category to start your enquiry.</p>
          </div>
        </div>

        <div className="products-grid">
          {PRODUCT_CATEGORIES.map(p => (
            <article key={p.id} className="prod-card" onClick={onQuote}>
              <div className="prod-thumb">
                <img src={p.img} alt={p.title} loading="lazy" />
              </div>
              <div className="prod-arrow">
                <ArrowUpRight />
              </div>
              <div className="prod-body">
                <div className="prod-num">{p.num} {p.featured ? '· DIFFERENTIATOR' : ''}</div>
                <h3 className="prod-title">{p.title}</h3>
                <p className="prod-desc">{p.desc}</p>
                <div className="prod-types">
                  {p.types.map(t => <span key={t}>{t}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// RIBBON (rolling line)
// ============================================================================

function Ribbon() {
  const phrases = [
    'Bespoke printing',
    'Custom packaging',
    'Corporate stationery',
    'NFC & video brochures',
    'On-demand books',
    'Luxury business cards',
  ];
  const Line = () => (
    <span>
      {phrases.map((p, i) => (
        <React.Fragment key={i}>
          <span><em>·</em>&nbsp;{p}</span>
          <span className="dot"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="ribbon" aria-hidden="true">
      <div className="ribbon-track">
        <Line /><Line />
      </div>
    </div>
  );
}

// ============================================================================
// SUSTAINABILITY
// ============================================================================

function Sustainability() {
  return (
    <section className="sustain" id="sustainability" data-screen-label="04 Sustainability">
      <div className="container">
        <div className="sustain-grid">
          <div className="sustain-image">
            <img src="media/sustainability-tree-free-paper.webp" alt="A booklet printed on tree-free paper" loading="lazy" />
            <div className="sustain-badges">
              <div className="sustain-badge"><span className="dot"></span>FSC Certified</div>
              <div className="sustain-badge"><span className="dot"></span>Solar-powered</div>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--leaf)' }}>— Sustainability</div>
            <h2>Carbon-neutral, <em>eco-friendly</em>, sustainable.</h2>
            <p style={{ fontSize: 17, color:'var(--ink-soft)', lineHeight: 1.65, margin: '0 0 8px', maxWidth: '52ch' }}>
              FSC-certified paper, tree-free and seed stocks, vegetable inks &mdash; and a solar-powered plant that enables continuous and sustainable production. Beautiful print and a clear conscience, in equal measure.
            </p>
            <ul className="sustain-list">
              <li>FSC-certified mixed-source paper</li>
              <li>Tree-free agricultural-pulp stocks</li>
              <li>Plantable seed-paper invitations</li>
              <li>Vegetable-based offset inks</li>
              <li>On-site solar power array</li>
              <li>Recyclable / compostable finishes</li>
            </ul>
            <div style={{ display:'flex', gap: 12, marginTop: 32 }}>
              <a href="#products" className="btn btn-ghost" style={{ borderColor: 'var(--leaf)', color: 'var(--leaf)' }}>
                See sustainable options <ArrowR />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// LOUNGES
// ============================================================================

function Lounges({ onQuote }) {
  return (
    <section id="lounges" data-screen-label="05 Lounges">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">— Visit us</div>
            <h2>Three <em>print lounges</em>.</h2>
          </div>
          <div className="right">
            <p>The lounge is where the work happens. Bring artwork, sample stocks and finishes, see the press in motion. Walk-ins welcome &mdash; consultations by appointment.</p>
          </div>
        </div>

        <div className="lounges-grid">
          {LOUNGES.map(l => (
            <article key={l.id} className="lounge-card">
              <div className="lounge-image">
                <img src={l.img} alt={l.name} loading="lazy" />
              </div>
              <div className="lounge-body">
                <h3 className="lounge-name">{l.name}</h3>
                <div className="lounge-since">{l.since}</div>
                <p className="lounge-addr">{l.addr}</p>
                <div className="lounge-contact">
                  <a href={`tel:${l.phone.replace(/\s/g,'')}`}>{l.phone}</a>
                  <a href={`mailto:${l.email}`}>{l.email}</a>
                </div>
                <p style={{ fontSize: 13, color:'var(--muted)', fontStyle:'italic', margin: '0 0 16px' }}>{l.note}</p>
                <div className="lounge-footer">
                  <button className="btn btn-ghost" onClick={onQuote} style={{ padding: '10px 16px', fontSize: 13 }}>
                    Book a visit <ArrowR />
                  </button>
                  <span style={{ fontSize: 11, fontFamily:'JetBrains Mono, monospace', color:'var(--muted)', letterSpacing:'0.14em' }}>
                    MON–SAT
                  </span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <p style={{ marginTop: 24, fontSize: 12, color:'var(--muted)', textAlign:'center' }}>
          Hours per public listing &mdash; please confirm by phone before visiting.
        </p>
      </div>
    </section>
  );
}

// ============================================================================
// ABOUT
// ============================================================================

function About() {
  return (
    <section id="about" style={{ background: 'var(--paper-2)' }} data-screen-label="06 About">
      <div className="container">
        <div className="about-grid">
          <div className="about-image">
            <img src="media/who-we-are.webp" alt="Inside the Printery showroom" loading="lazy" />
          </div>
          <div className="about-body">
            <div className="eyebrow">— About</div>
            <h2>A craft house, <em>not a print shop</em>.</h2>
            <p>
              Founded in 2014, Printery is a creative print production house &mdash; a place where designers, agencies and businesses come to make printed work that lives up to its design. Three lounges across Dubai and Abu Dhabi, an FSC-certified press, and a team obsessed with paper, finish and the small details that turn a print job into an object worth keeping.
            </p>
            <p>
              We work in two directions: a bespoke route for commissions, books, packaging and limited editions &mdash; and a B2B route for corporate stationery, tenders and ongoing programmes. The brief is always the same: make it well.
            </p>
            <div className="about-stats">
              <div className="about-stat"><strong>11+</strong><span>Years in Dubai</span></div>
              <div className="about-stat"><strong>3</strong><span>Lounges</span></div>
              <div className="about-stat"><strong>500+</strong><span>Bespoke commissions</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// QUOTE BAND
// ============================================================================

function QuoteBand({ onQuote }) {
  return (
    <section className="quote-band" data-screen-label="07 Quote CTA" style={{ padding: '96px 0' }}>
      <div className="container">
        <div>
          <div className="eyebrow" style={{ color: 'color-mix(in oklab, var(--paper) 65%, transparent)' }}>— Start the work</div>
          <h2 style={{ marginTop: 16 }}>Have a project?<br/><em>Start a quote</em> or commission.</h2>
          <p>
            Tell us about the piece &mdash; quantity, finish, stock, deadline &mdash; and we&rsquo;ll come back within one working day with a quote, paper samples and a proof plan.
          </p>
        </div>
        <div>
          <div className="quote-band-ctas">
            <button className="btn btn-on-dark" onClick={onQuote}>Get a quote <ArrowR /></button>
            <a className="btn btn-on-dark-ghost" href="https://wa.me/971501607042?text=Hi%20Printery%2C%20I%27d%20like%20a%20quote%20for...">
              WhatsApp +971 50 160 7042
            </a>
          </div>
          <div style={{ display:'flex', gap: 32, marginTop: 32, flexWrap:'wrap' }}>
            <div>
              <div className="eyebrow" style={{ color:'color-mix(in oklab, var(--paper) 60%, transparent)', marginBottom: 4 }}>CALL d3</div>
              <a href="tel:+97148780054" style={{ color:'var(--paper)', fontSize: 18, fontFamily:'Fraunces, serif' }}>+971 4 878 0054</a>
            </div>
            <div>
              <div className="eyebrow" style={{ color:'color-mix(in oklab, var(--paper) 60%, transparent)', marginBottom: 4 }}>EMAIL</div>
              <a href="mailto:sales@printerydubai.com" style={{ color:'var(--paper)', fontSize: 18, fontFamily:'Fraunces, serif' }}>sales@printerydubai.com</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// FOOTER
// ============================================================================

function Footer() {
  return (
    <footer data-screen-label="08 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <Wordmark />
            <p>Premium print, crafted in Dubai since 2014. A premium print lounge in d3, DIFC and Abu Dhabi.</p>
            <div style={{ marginTop: 24 }}>
              <TangramStrip density="loud" />
            </div>
          </div>
          <div className="footer-col">
            <h4>Products</h4>
            <ul>
              <li><a href="#products">Business cards</a></li>
              <li><a href="#products">Books</a></li>
              <li><a href="#products">Corporate</a></li>
              <li><a href="#products">Marketing</a></li>
              <li><a href="#products">Labels & packaging</a></li>
              <li><a href="#products">Technology</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>The studio</h4>
            <ul>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#sustainability">Sustainability</a></li>
              <li><a href="#lounges">Lounges</a></li>
              <li><a href="#about">About</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Lounges</h4>
            <ul>
              <li>Dubai Design District (d3)</li>
              <li>DIFC, Central Park Towers</li>
              <li>Abu Dhabi, Capital Centre</li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:+97148780054">+971 4 878 0054</a></li>
              <li><a href="https://wa.me/971501607042">WhatsApp 050 160 7042</a></li>
              <li><a href="mailto:sales@printerydubai.com">sales@printerydubai.com</a></li>
              <li><a href="https://instagram.com/printery.dxb">Instagram</a></li>
              <li><a href="https://linkedin.com/company/printerydubai">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© Printery {new Date().getFullYear()} · printerydubai.com · A creative print production house</div>
          <div>FSC Certified · Solar-powered · Made in Dubai</div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================================
// QUOTE MODAL
// ============================================================================

function QuoteModal({ open, onClose, prefillCategory }) {
  const [stage, setStage] = useState('form'); // form | sent
  const [data, setData] = useState({
    category: prefillCategory || 'business-cards',
    name: '', company: '', email: '', phone: '',
    qty: '', notes: '', deadline: '',
  });

  useEffect(() => {
    if (open) { setStage('form'); setData(d => ({ ...d, category: prefillCategory || 'business-cards' })); }
  }, [open, prefillCategory]);

  useEffect(() => {
    const onEsc = e => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, [open, onClose]);

  if (!open) return null;

  const submit = e => {
    e.preventDefault();
    setStage('sent');
  };

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3l10 10M13 3L3 13" strokeLinecap="round"/></svg>
        </button>

        {stage === 'form' && (
          <>
            <div className="modal-head">
              <div className="eyebrow" style={{ marginBottom: 12 }}>— Request a quote</div>
              <h3>Tell us about <em>the piece</em>.</h3>
              <p>One working day to come back with a quote, paper samples and a proof plan.</p>
            </div>
            <div className="modal-body">
              <form onSubmit={submit}>
                <div className="form-grid">
                  <div className="field full">
                    <label>What are we making?</label>
                    <select value={data.category} onChange={e => update('category', e.target.value)}>
                      {PRODUCT_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.title}</option>)}
                      <option value="other">Something else / bespoke</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Your name</label>
                    <input type="text" value={data.name} onChange={e => update('name', e.target.value)} placeholder="Jane Designer" required />
                  </div>
                  <div className="field">
                    <label>Company</label>
                    <input type="text" value={data.company} onChange={e => update('company', e.target.value)} placeholder="Studio or organisation" />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" value={data.email} onChange={e => update('email', e.target.value)} placeholder="you@studio.com" required />
                  </div>
                  <div className="field">
                    <label>Phone (incl. country code)</label>
                    <input type="tel" value={data.phone} onChange={e => update('phone', e.target.value)} placeholder="+971 …" />
                  </div>
                  <div className="field">
                    <label>Quantity</label>
                    <input type="text" value={data.qty} onChange={e => update('qty', e.target.value)} placeholder="e.g. 250 boxes, 1000 cards" />
                  </div>
                  <div className="field">
                    <label>Deadline</label>
                    <input type="text" value={data.deadline} onChange={e => update('deadline', e.target.value)} placeholder="Target delivery date" />
                  </div>
                  <div className="field full">
                    <label>Size, finish, stock notes</label>
                    <textarea value={data.notes} onChange={e => update('notes', e.target.value)} placeholder="Tell us about size, paper, finishes (foil, emboss, soft-touch), special requirements…"></textarea>
                  </div>
                  <div className="field full">
                    <label>Artwork (optional)</label>
                    <div className="file-drop">
                      Drop PDF, AI or PSD here &middot; or browse files
                    </div>
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 28, gap: 16, flexWrap:'wrap' }}>
                  <p style={{ fontSize: 12, color:'var(--muted)', margin:0, maxWidth: '34ch' }}>
                    Submitting also opens a pre-filled WhatsApp to <strong>+971 50 160 7042</strong>.
                  </p>
                  <button type="submit" className="btn btn-primary">Send the brief <ArrowR /></button>
                </div>
              </form>
            </div>
          </>
        )}

        {stage === 'sent' && (
          <div style={{ padding: '56px 40px', textAlign: 'center' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Sent</div>
            <h3 style={{ fontFamily:'Fraunces, serif', fontWeight: 400, fontSize: 36, margin: '0 0 12px', letterSpacing: '-0.02em' }}>
              Thank you. <em style={{ fontStyle:'italic', fontWeight: 300, color:'var(--accent)' }}>We&rsquo;re on it.</em>
            </h3>
            <p style={{ color:'var(--ink-soft)', maxWidth: '40ch', margin: '0 auto 32px' }}>
              You&rsquo;ll hear back within one working day. In the meantime, drop into the d3 lounge to feel the stocks in person.
            </p>
            <div style={{ display:'flex', gap: 12, justifyContent:'center', flexWrap:'wrap' }}>
              <button className="btn btn-ghost" onClick={onClose}>Close</button>
              <a className="btn btn-primary" href="https://wa.me/971501607042">Open WhatsApp <ArrowR /></a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================================
// APP
// ============================================================================

function App() {
  const useTweaksHook = window.useTweaks || (d => [d, () => {}]);
  const [t, setTweak] = useTweaksHook(PRINTERY_TWEAK_DEFAULTS);

  const [quoteOpen, setQuoteOpen] = useState(false);
  const [prefill, setPrefill] = useState(null);

  // apply accent
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  const openQuote = (cat) => { setPrefill(cat || null); setQuoteOpen(true); };

  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;

  return (
    <>
      <Nav onQuote={() => openQuote()} />

      {t.heroLayout === 'full' ? <HeroFull onQuote={() => openQuote()} /> : <HeroSplit onQuote={() => openQuote()} />}

      <CredibilityStrip />

      <Portfolio onQuote={() => openQuote()} />

      <TangramStrip density={t.motif} />

      <Products onQuote={() => openQuote()} />

      <Ribbon />

      <Sustainability />

      <Lounges onQuote={() => openQuote()} />

      <About />

      <QuoteBand onQuote={() => openQuote()} />

      <Footer />

      {t.showWhatsapp && (
        <a className="wa-fab" href="https://wa.me/971501607042?text=Hi%20Printery%2C%20I%27d%20like%20a%20quote%20for..." aria-label="WhatsApp">
          <svg width="26" height="26" viewBox="0 0 32 32" fill="currentColor"><path d="M16 3C9 3 3 9 3 16c0 2.3.6 4.5 1.8 6.4L3 29l6.8-1.8C11.7 28.4 13.8 29 16 29c7 0 13-6 13-13S23 3 16 3zm7.3 18.2c-.3.9-1.7 1.7-2.4 1.8-.6.1-1.4.1-2.3-.1-.5-.2-1.2-.4-2.1-.8-3.7-1.6-6.1-5.4-6.3-5.7-.2-.2-1.5-2-1.5-3.8s.9-2.7 1.3-3.1c.4-.4.8-.5 1.1-.5h.8c.3 0 .6 0 .9.7.3.7 1 2.5 1.1 2.7.1.2.1.4 0 .7-.1.2-.2.4-.4.6-.2.2-.4.5-.5.7-.2.2-.4.4-.2.8.2.4 1 1.6 2.1 2.6 1.5 1.3 2.7 1.7 3.1 1.9.4.2.6.2.9-.1.2-.3.9-1.1 1.2-1.5.3-.4.5-.3.9-.2.4.1 2.3 1.1 2.7 1.3.4.2.6.3.7.5.1.1.1.9-.2 1.8z"/></svg>
        </a>
      )}

      <QuoteModal open={quoteOpen} onClose={() => setQuoteOpen(false)} prefillCategory={prefill} />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Brand accent" />
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#2A3651', '#B23A3A', '#3D5B47', '#5C3A52']}
          />
          <TweakSection label="Hero layout" />
          <TweakRadio
            label="Hero"
            value={t.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: 'Editorial' },
              { value: 'full',  label: 'Full bleed' },
            ]}
          />
          <TweakSection label="Tangram motif" />
          <TweakRadio
            label="Motif"
            value={t.motif}
            onChange={v => setTweak('motif', v)}
            options={[
              { value: 'off',    label: 'Off' },
              { value: 'subtle', label: 'Sub' },
              { value: 'medium', label: 'Med' },
              { value: 'loud',   label: 'Loud' },
            ]}
          />
          <TweakSection label="Floating WhatsApp" />
          <TweakToggle label="Show FAB" value={t.showWhatsapp} onChange={v => setTweak('showWhatsapp', v)} />
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);