// Services, Gallery, About, Contact pages
const { Reveal, ParallaxPhoto, navigate, Icon } = window.Sky;

// ============================================================
// SERVICES PAGE
// ============================================================
const SERVICES_DATA = [
  {
    id: 'hardwood',
    title: 'Hardwood Installation',
    sub: 'Solid & engineered',
    img: 'assets/photos/walnut-tile-floor.jpg',
    desc: 'Site-finished or pre-finished hardwood, installed plank-by-plank with attention to grain match, transitions, and stair noses. Oak, maple, walnut, hickory.',
    included: ['Subfloor inspection & flatness check', 'Acclimatization (3–7 days on site)', 'Custom transitions, reducers & T-moulds', 'Quarter-round or shoe moulding', 'Dust-extracted cuts indoors'],
    timeline: '3–6 days for a typical main floor',
  },
  {
    id: 'lvp',
    title: 'Laminate & Vinyl Plank',
    sub: 'LVP / SPC click-lock',
    img: 'assets/photos/install-walnut-progress.jpg',
    desc: 'Waterproof luxury vinyl plank — perfect for basements, kitchens, kid-and-pet households, and anywhere you want hardwood looks without the worry. Floating or glue-down.',
    included: ['Underlayment supplied & installed', 'Waterproof seams & expansion gaps', 'Quarter-round & trim work', 'Door undercuts handled', 'Old floor removal & haul-away'],
    timeline: '2–4 days for a typical basement',
  },
  {
    id: 'engineered',
    title: 'Engineered Hardwood',
    sub: 'Stable. Real wood. Below-grade-friendly.',
    img: 'assets/photos/marble-bath-progress.jpg',
    desc: 'Real hardwood veneer over a dimensionally-stable core — the right choice for radiant heat, basements, and condos. Wide planks up to 9".',
    included: ['Glue-down or floating install', 'Radiant-heat compatible', 'Wide-plank specialty (7–9")', 'Stair treads & risers', 'Shoe / quarter-round'],
    timeline: '3–5 days for 800–1200 sqft',
  },
  {
    id: 'tile',
    title: 'Tile & Stone',
    sub: 'Bathrooms, showers, kitchens, foyers',
    img: 'assets/photos/marble-shower-glass.jpg',
    desc: 'Porcelain, ceramic, marble, mosaic. Hex, herringbone, large-format. Waterproofed showers with proper slope, niches, and curbless options.',
    included: ['Waterproofing (Schluter / RedGard)', 'Custom niches & benches', 'Heated floor wire (NuHeat)', 'Large-format (24" / 48") capable', 'Grout & sealing included'],
    timeline: '5–10 days for a full bathroom',
  },
  {
    id: 'refinish',
    title: 'Refinishing & Repair',
    sub: 'Bring tired hardwood back',
    img: 'assets/photos/install-walnut-progress.jpg',
    desc: 'Sand, stain and refinish existing hardwood floors. Board replacement for water damage, pet stains, creaks, and squeaks. Dustless sanding system.',
    included: ['Dustless sanding (90%+ less dust)', 'Stain matching to existing', 'Water-based or oil polyurethane', 'Single board replacement', 'Squeak repair from above'],
    timeline: '4–6 days incl. cure time',
  },
  {
    id: 'subfloor',
    title: 'Subfloor Prep',
    sub: 'The work nobody sees, but everyone feels',
    img: 'assets/photos/install-large-tile.jpg',
    desc: 'Self-levelling, plywood overlay, joist sistering, moisture mitigation. The difference between a floor that lasts 30 years and one that telegraphs every flaw.',
    included: ['Self-levelling underlayment', 'Plywood / cement-board overlay', 'Moisture testing & vapor barrier', 'Joist sistering for sag', 'Squeak elimination'],
    timeline: '1–2 days, prior to flooring',
  },
];

function ServicesHero() {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 80 }}>
      <div className="container">
        <Reveal><span className="rule-eye eyebrow">Services</span></Reveal>
        <Reveal delay={100}>
          <h1 style={{ marginTop: 24, maxWidth: 980, fontSize: 'clamp(44px, 6vw, 88px)', fontWeight: 300 }}>
            Six things I do.<br/>All of them, <em style={{ fontStyle: 'italic', color: '#2F6E9E' }}>well</em>.
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ marginTop: 32, maxWidth: 620, fontSize: 18, color: 'var(--muted)' }}>
            I'd rather do six things excellently than twenty things adequately. If a job doesn't fit one of these categories, I'll tell you who to call.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function ServiceBlock({ s, idx }) {
  const flip = idx % 2 === 1;
  return (
    <Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', padding: '80px 0', borderTop: '1px solid var(--hairline)' }} className="svc-block">
        <div style={{ order: flip ? 2 : 1 }}>
          <div style={{ aspectRatio: '4/5', borderRadius: 14, overflow: 'hidden' }}>
            <ParallaxPhoto src={s.img} alt={s.title.replace(/&amp;/g, '&')} loading="lazy" style={{ width: '100%', height: '100%' }} />
          </div>
        </div>
        <div style={{ order: flip ? 1 : 2 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span style={{ fontFamily: 'Fraunces', fontStyle: 'italic', color: 'var(--sky-deep)', fontSize: 24 }}>0{idx + 1}</span>
            <span className="eyebrow" dangerouslySetInnerHTML={{ __html: s.sub }} />
          </div>
          <h2 style={{ marginTop: 16 }} dangerouslySetInnerHTML={{ __html: s.title }} />
          <p style={{ marginTop: 20, color: 'var(--muted)', fontSize: 16, maxWidth: 480 }}>{s.desc}</p>
          <div style={{ marginTop: 32, padding: '24px 0', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What's included</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {s.included.map(i => (
                <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--sky-deep)', marginTop: 4, flexShrink: 0 }}><Icon.Check /></span>
                  <span dangerouslySetInnerHTML={{ __html: i }} />
                </li>
              ))}
            </ul>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 28, gap: 24, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow">Typical timeline</div>
              <div style={{ marginTop: 6, fontFamily: 'Fraunces', fontSize: 22, color: 'var(--walnut)' }}>{s.timeline}</div>
            </div>
            <a className="btn btn-walnut btn-arrow btn-primary" href="#/contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Quote this work</a>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function ServicesPage() {
  return (
    <div className="page" data-screen-label="02 Services">
      <ServicesHero />
      <div className="container" style={{ paddingBottom: 40 }}>
        {SERVICES_DATA.map((s, i) => <ServiceBlock key={s.id} s={s} idx={i} />)}
        <div style={{ borderTop: '1px solid var(--hairline)' }} />
      </div>
      <style>{`@media (max-width: 880px) { .svc-block { grid-template-columns: 1fr !important; gap: 40px !important; } .svc-block > div:first-child { order: 1 !important; } .svc-block > div:last-child { order: 2 !important; } }`}</style>
    </div>
  );
}

// ============================================================
// GALLERY PAGE
// ============================================================
const GALLERY = [
  { src: 'assets/photos/walnut-tile-floor.jpg',         cat: 'tile',     loc: 'Cambridge',  mat: 'Wood-look porcelain, 8"×48"', sqft: 920 },
  { src: 'assets/photos/marble-shower-glass.jpg',       cat: 'tile',     loc: 'Waterloo',   mat: 'Carrara marble, 12"×24"',     sqft: 65 },
  { src: 'assets/photos/marble-bathroom-full.jpg',      cat: 'tile',     loc: 'Kitchener',  mat: 'Calacatta porcelain slabs',   sqft: 110 },
  { src: 'assets/photos/white-marble-shower.jpg',       cat: 'tile',     loc: 'Guelph',     mat: 'Polished marble, hex floor',  sqft: 80 },
  { src: 'assets/photos/gold-marble-bath.jpg',          cat: 'tile',     loc: 'Waterloo',   mat: 'Calacatta gold, large-format', sqft: 95 },
  { src: 'assets/photos/black-hardware-shower.jpg',     cat: 'tile',     loc: 'Kitchener',  mat: 'Grey marble, basketweave',    sqft: 70 },
  { src: 'assets/photos/install-walnut-progress.jpg',   cat: 'tile',     loc: 'Cambridge',  mat: 'Wood-look plank install',     sqft: 920 },
  { src: 'assets/photos/install-grey-tile-foyer.jpg',   cat: 'tile',     loc: 'Kitchener',  mat: 'Grey terrazzo-look porcelain', sqft: 240 },
  { src: 'assets/photos/onyx-shower.jpg',               cat: 'tile',     loc: 'Waterloo',   mat: 'Onyx-look porcelain, bookmatched', sqft: 85 },
  { src: 'assets/photos/onyx-progress.jpg',             cat: 'repairs',  loc: 'Waterloo',   mat: 'Onyx panels — install in progress', sqft: 85 },
  { src: 'assets/photos/hex-marble-bath.jpg',           cat: 'tile',     loc: 'Guelph',     mat: 'Hex shower wall + marble floor', sqft: 105 },
  { src: 'assets/photos/chevron-backsplash.jpg',        cat: 'tile',     loc: 'Kitchener',  mat: 'Marble chevron backsplash',   sqft: 28 },
  { src: 'assets/photos/kitchen-grey-cabinets.jpg',     cat: 'lvp',      loc: 'Cambridge',  mat: 'LVP w/ subway backsplash',    sqft: 380 },
  { src: 'assets/photos/kitchen-subway-grey.jpg',       cat: 'tile',     loc: 'Waterloo',   mat: 'Grey subway backsplash',      sqft: 32 },
  { src: 'assets/photos/marble-bath-progress.jpg',      cat: 'tile',     loc: 'Kitchener',  mat: 'Marble bathroom — mid-install', sqft: 130 },
  { src: 'assets/photos/white-marble-shower-2.jpg',     cat: 'tile',     loc: 'Guelph',     mat: 'White marble + marble bench', sqft: 95 },
  { src: 'assets/photos/large-format-black.jpg',        cat: 'tile',     loc: 'Cambridge',  mat: 'Black large-format, commercial', sqft: 4200 },
  { src: 'assets/photos/tile-shower-grey.jpg',          cat: 'tile',     loc: 'Waterloo',   mat: 'Grey marble walls, mosaic floor', sqft: 88 },
  { src: 'assets/photos/restaurant-tile-entry.jpg',     cat: 'tile',     loc: 'Kitchener',  mat: 'Striated marble plank',       sqft: 320 },
  { src: 'assets/photos/restaurant-marble-stripe.jpg',  cat: 'tile',     loc: 'Kitchener',  mat: 'Striated marble — full floor', sqft: 320 },
  { src: 'assets/photos/blue-tile-herringbone.jpg',     cat: 'tile',     loc: 'Guelph',     mat: 'Blue herringbone + zellige',  sqft: 180 },
  { src: 'assets/photos/blue-grey-stripe.jpg',          cat: 'tile',     loc: 'Guelph',     mat: 'Blue zellige feature wall',   sqft: 95 },
  { src: 'assets/photos/install-large-tile.jpg',        cat: 'repairs',  loc: 'Cambridge',  mat: 'Subfloor + LVT install',      sqft: 4200 },
  { src: 'assets/photos/onyx-shower.jpg',               cat: 'hardwood', loc: 'Waterloo',   mat: 'Engineered oak, wide plank',  sqft: 1100 },
];

const CATS = [
  { id: 'all', label: 'All work' },
  { id: 'tile', label: 'Tile &amp; Stone' },
  { id: 'hardwood', label: 'Hardwood' },
  { id: 'lvp', label: 'Vinyl &amp; LVP' },
  { id: 'repairs', label: 'Repairs &amp; Prep' },
];

function GalleryPage() {
  const [filter, setFilter] = React.useState('all');
  const [open, setOpen] = React.useState(null);

  const filtered = filter === 'all' ? GALLERY : GALLERY.filter(g => g.cat === filter);

  React.useEffect(() => {
    if (open == null) return;
    const handler = (e) => {
      if (e.key === 'Escape') setOpen(null);
      if (e.key === 'ArrowRight') setOpen(o => Math.min(filtered.length - 1, o + 1));
      if (e.key === 'ArrowLeft') setOpen(o => Math.max(0, o - 1));
    };
    window.addEventListener('keydown', handler);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', handler); document.body.style.overflow = ''; };
  }, [open, filtered.length]);

  return (
    <div className="page" data-screen-label="03 Gallery">
      <section style={{ paddingTop: 96, paddingBottom: 56 }}>
        <div className="container">
          <Reveal><span className="rule-eye eyebrow">Gallery</span></Reveal>
          <Reveal delay={100}>
            <h1 style={{ marginTop: 24, maxWidth: 1000, fontWeight: 300 }}>
              Real jobs. Real homes.<br/>Mostly across <em style={{ fontStyle: 'italic', color: '#2F6E9E' }}>Waterloo Region</em>.
            </h1>
          </Reveal>
        </div>
      </section>

      {/* Filter chips */}
      <div className="container" style={{ paddingBottom: 32 }}>
        <Reveal>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', padding: '20px 0' }}>
            <span className="eyebrow" style={{ alignSelf: 'center', marginRight: 16 }}>Filter</span>
            {CATS.map(c => (
              <button key={c.id} onClick={() => setFilter(c.id)} style={{
                background: filter === c.id ? 'var(--walnut)' : 'transparent',
                color: filter === c.id ? 'var(--cream)' : 'var(--walnut)',
                border: '1px solid ' + (filter === c.id ? 'var(--walnut)' : 'var(--hairline)'),
                padding: '8px 16px',
                borderRadius: 999,
                fontSize: 13,
                fontWeight: 450,
                transition: 'all .15s ease',
              }} dangerouslySetInnerHTML={{ __html: c.label + (filter === c.id ? '' : '') }} />
            ))}
            <span style={{ marginLeft: 'auto', alignSelf: 'center', fontSize: 13, color: 'var(--muted)' }}>{filtered.length} projects</span>
          </div>
        </Reveal>
      </div>

      {/* Masonry grid via column-count */}
      <div className="container" style={{ paddingBottom: 100 }}>
        <div style={{ columnCount: 3, columnGap: 16 }} className="masonry">
          {filtered.map((g, i) => (
            <button key={i} onClick={() => setOpen(i)} aria-label={`View project: ${g.mat}, ${g.loc}`} style={{
              display: 'block', width: '100%', breakInside: 'avoid', marginBottom: 16,
              border: 'none', padding: 0, background: 'transparent', cursor: 'pointer',
              borderRadius: 10, overflow: 'hidden', position: 'relative',
            }} className="masonry-item">
              <img src={g.src} alt={`${g.mat} — ${g.loc}, ON`} loading="lazy" decoding="async" style={{ width: '100%', display: 'block', transition: 'transform .8s ease' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(27,19,14,0.72) 100%)', opacity: 0, transition: 'opacity .25s ease' }} className="overlay">
                <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16, color: '#F5F1EA', textAlign: 'left' }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.8 }}>{g.loc}</div>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 18, marginTop: 4 }} dangerouslySetInnerHTML={{ __html: g.mat }} />
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {open != null && (
        <div onClick={() => setOpen(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(20,14,10,0.92)',
          zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: 'pageIn .3s ease',
        }}>
          <button aria-label="Close lightbox" onClick={(e) => { e.stopPropagation(); setOpen(null); }} style={{ position: 'absolute', top: 24, right: 24, background: 'rgba(245,241,234,0.1)', color: 'var(--cream)', border: '1px solid rgba(245,241,234,0.2)', borderRadius: 999, width: 44, height: 44 }}>✕</button>
          <button aria-label="Previous image" onClick={(e) => { e.stopPropagation(); setOpen(o => Math.max(0, o - 1)); }} disabled={open === 0} style={{ position: 'absolute', left: 24, top: '50%', transform: 'translateY(-50%)', background: 'rgba(245,241,234,0.1)', color: 'var(--cream)', border: '1px solid rgba(245,241,234,0.2)', borderRadius: 999, width: 48, height: 48, fontSize: 20, opacity: open === 0 ? 0.3 : 1 }}>←</button>
          <button aria-label="Next image" onClick={(e) => { e.stopPropagation(); setOpen(o => Math.min(filtered.length - 1, o + 1)); }} disabled={open === filtered.length - 1} style={{ position: 'absolute', right: 24, top: '50%', transform: 'translateY(-50%)', background: 'rgba(245,241,234,0.1)', color: 'var(--cream)', border: '1px solid rgba(245,241,234,0.2)', borderRadius: 999, width: 48, height: 48, fontSize: 20, opacity: open === filtered.length - 1 ? 0.3 : 1 }}>→</button>
          <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex', gap: 32, alignItems: 'center', maxWidth: '90vw', maxHeight: '88vh' }} className="lightbox-inner">
            <img src={filtered[open].src} alt="" style={{ maxHeight: '88vh', maxWidth: '60vw', borderRadius: 8, boxShadow: 'var(--shadow-lg)' }} />
            <div style={{ color: 'var(--cream)', maxWidth: 320, fontSize: 14 }}>
              <div className="eyebrow" style={{ color: 'rgba(245,241,234,0.55)' }}>Project · {open + 1} of {filtered.length}</div>
              <h3 style={{ color: 'var(--cream)', marginTop: 12, fontSize: 32 }} dangerouslySetInnerHTML={{ __html: filtered[open].mat }} />
              <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid rgba(245,241,234,0.15)', display: 'grid', gap: 14 }}>
                <div><div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Location</div><div style={{ marginTop: 4 }}>{filtered[open].loc}, ON</div></div>
                <div><div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Material</div><div style={{ marginTop: 4 }} dangerouslySetInnerHTML={{ __html: filtered[open].mat }} /></div>
                <div><div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Square footage</div><div style={{ marginTop: 4 }}>{filtered[open].sqft.toLocaleString()} sqft</div></div>
              </div>
              <a className="btn btn-sky btn-arrow" href="#/contact" onClick={(e) => { setOpen(null); navigate('contact'); }} style={{ marginTop: 32 }}>Quote a similar project</a>
            </div>
          </div>
        </div>
      )}

      <style>{`
        .masonry-item:hover img { transform: scale(1.04); }
        .masonry-item:hover .overlay { opacity: 1; }
        @media (max-width: 1080px) { .masonry { column-count: 2 !important; } }
        @media (max-width: 560px) { .masonry { column-count: 1 !important; } .lightbox-inner { flex-direction: column !important; gap: 16px !important; } .lightbox-inner img { max-width: 92vw !important; max-height: 60vh !important; } }
      `}</style>
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
function AboutPage() {
  return (
    <div className="page" data-screen-label="04 About">
      <section style={{ paddingTop: 96, paddingBottom: 80 }}>
        <div className="container-narrow">
          <Reveal><span className="rule-eye eyebrow">About</span></Reveal>
          <Reveal delay={100}>
            <h1 style={{ marginTop: 24, fontWeight: 300 }}>
              I'm Diyako. I install floors<br/>like they're going in <em style={{ fontStyle: 'italic', color: '#2F6E9E' }}>my own house</em>.
            </h1>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'flex-start' }} className="about-grid">
            <Reveal>
              <div style={{ aspectRatio: '4/5', borderRadius: 14, overflow: 'hidden', position: 'sticky', top: 100 }}>
                <ParallaxPhoto src="assets/photos/install-walnut-progress.jpg" alt="Installation in progress" style={{ width: '100%', height: '100%' }} />
              </div>
            </Reveal>
            <div>
              <Reveal delay={100}>
                <p style={{ fontFamily: 'Fraunces', fontSize: 28, lineHeight: 1.4, color: 'var(--walnut)', fontWeight: 300 }}>
                  Twelve years ago I picked up a trowel for the first time on a basement reno in Kitchener. I've been laying floors ever since — quietly, without a flashy storefront, building a business on referrals.
                </p>
              </Reveal>
              <Reveal delay={200}>
                <div style={{ marginTop: 40, display: 'grid', gap: 20, color: 'var(--muted)', fontSize: 16, maxWidth: 560 }}>
                  <p>Sky Flooring is just me. There's no sales team, no foreman, no rotating crew of subs you've never met. When you call, you get me. When the truck pulls up, it's me. When the job is done, the warranty is mine to honour.</p>
                  <p>That setup has limits — I can only take on so many jobs a year. But it also means I can stand on every floor I've ever installed and tell you exactly how it was done.</p>
                  <p>I work mostly in Kitchener, Waterloo, Cambridge and Guelph, with the occasional larger commercial job further out. Hardwood, vinyl plank, and tile are my bread and butter. Bathrooms and kitchens are my favourite rooms.</p>
                </div>
              </Reveal>
              <Reveal delay={320}>
                <div style={{ marginTop: 56, padding: 32, background: 'var(--cream-soft)', borderRadius: 14 }}>
                  <h2 style={{ fontSize: 24 }}>What I'd want, if I were hiring me</h2>
                  <ul style={{ listStyle: 'none', padding: 0, marginTop: 20, display: 'grid', gap: 12 }}>
                    {[
                      'A real, written quote — not a number scribbled on the back of a card',
                      'Someone who shows up on time and texts back the same day',
                      'Drop cloths from the front door to the work area',
                      'A walk-through at the end where you point and I fix',
                      'A receipt that survives a future buyer\'s home inspection',
                    ].map(t => (
                      <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15 }}>
                        <span style={{ color: 'var(--sky-deep)', marginTop: 4, flexShrink: 0 }}><Icon.Check /></span>
                        <span>{t}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </Reveal>
              <Reveal delay={420}>
                <div style={{ marginTop: 56, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <a className="btn btn-sky btn-arrow" href="#/contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Get a quote</a>
                  <a className="btn btn-ghost btn-arrow" href="#/gallery" onClick={(e) => { e.preventDefault(); navigate('gallery'); }}>See my work</a>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: 'var(--cream-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="stats-grid">
            {[
              ['12+', 'Years installing'],
              ['200+', 'Homes finished'],
              ['$2M+', 'Liability insured'],
              ['Same day', 'Callbacks'],
            ].map(([n, l]) => (
              <Reveal key={l}>
                <div style={{ borderTop: '1px solid var(--hairline-strong)', paddingTop: 24 }}>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 56, lineHeight: 1, fontWeight: 300, color: 'var(--walnut)' }}>{n}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 12, letterSpacing: '0.06em' }}>{l}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <style>{`
        @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr !important; } .about-grid > div:first-child { position: static !important; max-width: 480px; } }
        @media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </div>
  );
}

// ============================================================
// CONTACT (phone-only)
// ============================================================
function ContactPage() {
  return (
    <div className="page" data-screen-label="05 Contact">
      <section style={{ paddingTop: 96, paddingBottom: 56 }}>
        <div className="container">
          <Reveal><span className="rule-eye eyebrow">Contact</span></Reveal>
          <Reveal delay={100}>
            <h1 style={{ marginTop: 24, maxWidth: 1000, fontWeight: 300 }}>
              Just give me a <em style={{ fontStyle: 'italic', color: '#2F6E9E' }}>call</em>.<br/>That's how this works.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ marginTop: 28, maxWidth: 560, fontSize: 18, color: 'var(--muted)' }}>
              No forms, no chatbots. Pick up the phone — we'll talk through your project, book a free in-home estimate, and you'll have a written quote within a few days.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <Reveal>
            <a href="tel:+12269887694" style={{
              display: 'block',
              background: 'var(--walnut)', color: 'var(--cream)',
              borderRadius: 18, padding: '64px 56px',
              textDecoration: 'none', position: 'relative', overflow: 'hidden',
              transition: 'transform .25s ease, box-shadow .25s ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 32 }} className="phone-card">
                <div>
                  <div className="eyebrow" style={{ color: 'rgba(245,241,234,0.55)' }}>Call Diyako directly</div>
                  <div style={{ fontFamily: 'Fraunces', fontWeight: 300, fontSize: 'clamp(48px, 8vw, 96px)', lineHeight: 1, marginTop: 16, letterSpacing: '-0.02em' }}>
                    (226) 988-7694
                  </div>
                  <div style={{ marginTop: 24, color: 'rgba(245,241,234,0.7)', fontSize: 15 }}>
                    Tap to call · Mon–Sat · 8 a.m.–8 p.m.
                  </div>
                </div>
                <div style={{ width: 96, height: 96, borderRadius: 999, background: 'var(--sky)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }} className="phone-icon">
                  <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13 1.05.37 2.07.72 3.06a2 2 0 0 1-.45 2.11L8.09 10.21a16 16 0 0 0 6 6l1.32-1.32a2 2 0 0 1 2.11-.45c1 .35 2 .59 3.06.72A2 2 0 0 1 22 16.92z"/></svg>
                </div>
              </div>
            </a>
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }} className="contact-info-grid">
            <Reveal delay={80}>
              <InfoBlock label="Hours" body="Monday – Saturday" sub="8 a.m. – 8 p.m." />
            </Reveal>
            <Reveal delay={160}>
              <InfoBlock label="Service area" body="Kitchener · Waterloo" sub="Cambridge · Guelph + surrounding" />
            </Reveal>
            <Reveal delay={240}>
              <InfoBlock label="Owner" body="Diyako" sub="Owner-operated · Fully insured" />
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <Reveal>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
              <div>
                <span className="rule-eye eyebrow">Where I work</span>
                <h2 style={{ marginTop: 16, fontSize: 'clamp(28px, 3vw, 44px)' }}>Waterloo Region &amp; surrounding.</h2>
              </div>
              <a className="btn btn-ghost btn-arrow" href="https://www.google.com/maps/place/Kitchener,+ON" target="_blank" rel="noopener noreferrer">Open in Google Maps</a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--hairline)', aspectRatio: '16/9', background: 'var(--paper)' }}>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d92456.32!2d-80.5494!3d43.4516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1700000000000"
                width="100%"
                height="100%"
                style={{ border: 0, display: 'block' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Sky Flooring service area — Kitchener, Waterloo, Cambridge, Guelph"
              ></iframe>
            </div>
          </Reveal>
        </div>
      </section>
      <style>{`
        @media (max-width: 720px) {
          .phone-card { grid-template-columns: 1fr !important; gap: 24px !important; }
          .phone-icon { width: 64px !important; height: 64px !important; }
          .contact-info-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function InfoBlock({ label, body, sub }) {
  return (
    <div style={{ borderTop: '1px solid var(--hairline-strong)', paddingTop: 20 }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>{label}</div>
      <div style={{ fontFamily: 'Fraunces', fontSize: 24, color: 'var(--walnut)', lineHeight: 1.3 }}>{body}</div>
      {sub && <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 8 }}>{sub}</div>}
    </div>
  );
}

function _UnusedMap() {
  return (
    <div style={{ aspectRatio: '4/3', background: 'var(--paper)', position: 'relative' }}>
      <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M20 0H0V20" fill="none" stroke="#D9CFC0" strokeWidth="0.5" opacity="0.5"/>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#grid2)"/>
        <path d="M40 200 Q 80 120 160 100 Q 240 80 320 130 Q 360 180 340 230 Q 280 270 200 260 Q 100 250 40 200 Z" fill="#DFEBF4" stroke="#4A90C7" strokeWidth="1" opacity="0.8"/>
        <circle cx="180" cy="170" r="40" fill="#4A90C7" opacity="0.15"/>
        <circle cx="180" cy="170" r="80" fill="#4A90C7" opacity="0.07"/>
        <circle cx="180" cy="170" r="6" fill="#2F6E9E"/>
        <text x="190" y="174" fontSize="11" fontFamily="Inter" fill="#2B1F18" fontWeight="500">Kitchener (HQ)</text>
        {[
          { x: 200, y: 145, name: 'Waterloo' },
          { x: 235, y: 210, name: 'Cambridge' },
          { x: 105, y: 145, name: 'Guelph' },
        ].map(c => (
          <g key={c.name}>
            <circle cx={c.x} cy={c.y} r="4" fill="#2B1F18"/>
            <text x={c.x + 8} y={c.y + 4} fontSize="10" fontFamily="Inter" fill="#2B1F18">{c.name}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

window.ServicesPage = ServicesPage;
window.GalleryPage = GalleryPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;