// Direction A — Editorial Scandinavian
// Big serif display, oat/off-white, generous whitespace, magazine spreads.

const A_PALETTE = {
  bg: '#f6f3ec',
  paper: '#fbfaf6',
  ink: '#1c1a16',
  muted: '#6b6660',
  line: '#d8d3c8',
  accent: '#3a3a35',
};

const A_PHOTOS = {
  hero: 'https://moosecondoreno.ca/wp-content/uploads/2023/02/condor-enovation-interior-design-toronto-1920x850.jpg',
  kitchen: 'https://moosecondoreno.ca/wp-content/uploads/2019/04/condo-kitchen-renovation-769x490.jpg',
  bathroom: 'https://moosecondoreno.ca/wp-content/uploads/2021/06/Condo-Bathroom-Remodeling-769x490.jpg',
  bedroom: 'https://moosecondoreno.ca/wp-content/uploads/2020/09/luxury-bedroom-with-floor-carpet-art-paintng-wall-decor-condo-renovations-north-york-769x490.jpg',
  living: 'https://moosecondoreno.ca/wp-content/uploads/2019/07/new-modern-city-loft-apartment-renovation-365x245.jpg',
  storage: 'https://moosecondoreno.ca/wp-content/uploads/2022/07/condo-storage-solutions-1000x380.jpg',
  full: 'https://moosecondoreno.ca/wp-content/uploads/2022/07/complete-condo-renovation-toronto-769x490.jpg',
  dining: 'https://moosecondoreno.ca/wp-content/uploads/2022/07/modern-condo-design-dining-room-365x245.jpg',
  detail: 'https://moosecondoreno.ca/wp-content/uploads/2022/07/condo-innterio-reno-toronto-1.jpg',
  hero2: 'https://moosecondoreno.ca/wp-content/uploads/2023/02/Condo-Renovation-Markham-3-1872x828.jpg',
  hero3: 'https://moosecondoreno.ca/wp-content/uploads/2021/06/Condo-Kitchen-Renovation-scaled-1920x850.jpg',
};

function A_Antlers({ size = 24, stroke = 1.5 }) {
  return (
    <svg viewBox="0 0 60 40" width={size * 60 / 40} height={size} fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, display: 'block' }}>
      <path d="M30 40 L30 22" />
      <path d="M30 22 C 24 16, 14 10, 4 6" />
      <path d="M4 6 L 0 4" />
      <path d="M4 6 L 2 0" />
      <path d="M20 12 L 14 10" />
      <path d="M20 12 L 18 4" />
      <path d="M30 22 C 36 16, 46 10, 56 6" />
      <path d="M56 6 L 60 4" />
      <path d="M56 6 L 58 0" />
      <path d="M40 12 L 46 10" />
      <path d="M40 12 L 42 4" />
    </svg>
  );
}

function A_Nav({ page, setPage, scrollRef }) {
  const items = ['Home', 'Services', 'Projects', 'Process', 'About', 'Contact'];
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const overlay = page === 'Home' && !scrolled;

  React.useEffect(() => {
    setScrolled(false);
    const el = scrollRef && scrollRef.current;
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 80);
    el.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, [page, scrollRef]);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const fg = overlay ? '#fbfaf6' : A_PALETTE.ink;
  const muted = overlay ? 'rgba(251,250,246,0.65)' : A_PALETTE.muted;

  return (
    <React.Fragment>
      <header style={{
        position: overlay ? 'absolute' : 'sticky', top: 0, left: 0, right: 0, zIndex: 20,
        background: overlay ? 'transparent' : 'rgba(246,243,236,0.92)',
        backdropFilter: overlay ? 'none' : 'blur(8px)',
        WebkitBackdropFilter: overlay ? 'none' : 'blur(8px)',
        borderBottom: overlay ? '1px solid transparent' : `1px solid ${A_PALETTE.line}`,
        transition: 'background .35s ease, border-color .35s ease, color .35s ease',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px 56px' }}>
          <div onClick={() => setPage('Home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
            <img src="images/logo.png" alt="Moose Condo Reno — Standard of Excellence" style={{ height: 56, width: 'auto', display: 'block', filter: overlay ? 'brightness(0) invert(1)' : 'brightness(0)', transition: 'filter .35s ease' }} />
          </div>
          <nav style={{ display: 'flex', gap: 32 }}>
            {items.map((i) => (
              <a key={i} onClick={() => setPage(i)} style={{
                cursor: 'pointer', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.4, textTransform: 'uppercase',
                color: page === i ? fg : muted, fontWeight: page === i ? 500 : 400,
                borderBottom: page === i ? `1px solid ${fg}` : `1px solid transparent`, paddingBottom: 2,
                transition: 'color .35s ease, border-color .35s ease',
              }}>{i}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'Inter, sans-serif', fontSize: 12, color: fg, letterSpacing: 0.4, transition: 'color .35s ease' }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: '#7aa07a' }} />
            437‑771‑5353
          </div>
          <button
            id="mm-burger"
            onClick={() => setMenuOpen(true)}
            aria-label="Open menu"
            style={{
              display: 'none', background: 'transparent', border: 'none', cursor: 'pointer',
              padding: 8, color: fg, transition: 'color .35s ease',
            }}>
            <svg width="26" height="18" viewBox="0 0 26 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="2" y1="3" x2="24" y2="3" />
              <line x1="2" y1="9" x2="24" y2="9" />
              <line x1="2" y1="15" x2="24" y2="15" />
            </svg>
          </button>
        </div>
      </header>

      {menuOpen ? (
        <div
          id="mm-menu"
          style={{
            position: 'fixed', inset: 0, zIndex: 100,
            background: 'rgba(20,18,15,0.97)',
            backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
            color: A_PALETTE.bg,
            display: 'flex', flexDirection: 'column',
            padding: '20px 24px 40px',
            animation: 'mmFade .25s ease',
          }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <img src="images/logo.png" alt="Moose Condo Reno" style={{ height: 28, width: 'auto', filter: 'brightness(0) invert(1)' }} />
            <button
              id="mm-close"
              onClick={() => setMenuOpen(false)}
              aria-label="Close menu"
              style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 8, color: A_PALETTE.bg }}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="3" y1="3" x2="19" y2="19" />
                <line x1="19" y1="3" x2="3" y2="19" />
              </svg>
            </button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 56, paddingLeft: 4 }}>
            {items.map((i) => (
              <a
                key={i}
                onClick={() => { setPage(i); setMenuOpen(false); }}
                style={{
                  cursor: 'pointer',
                  fontFamily: 'Fraunces, serif', fontSize: 40, fontWeight: 300, letterSpacing: -0.8,
                  color: page === i ? A_PALETTE.bg : 'rgba(246,243,236,0.55)',
                }}>{i}</a>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', paddingTop: 32, borderTop: '1px solid rgba(246,243,236,0.15)', fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(246,243,236,0.75)', lineHeight: 1.7 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: '#7aa07a' }} />
              <a href="tel:+14377715353" style={{ color: 'inherit' }}>437‑771‑5353</a>
            </div>
            <div>info@moosecondoreno.ca</div>
            <div>7250 Keele St #161, Concord ON</div>
          </div>
        </div>
      ) : null}
    </React.Fragment>
  );
}

function A_Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const root = el.closest('[data-scrollroot]') || null;
    const io = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && setShown(true)), { root, threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(24px)',
      transition: `opacity .9s ease ${delay}ms, transform .9s cubic-bezier(.2,.7,.3,1) ${delay}ms`,
    }}>{children}</div>
  );
}

function A_Marquee({ items, dir = 1, speed = 50 }) {
  return (
    <div style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
      <div style={{ display: 'inline-flex', gap: 40, paddingRight: 40, animation: `aMarquee${dir > 0 ? 'L' : 'R'} ${speed}s linear infinite` }}>
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 40 }}>
            {t}
            <span style={{ width: 6, height: 6, borderRadius: 3, background: A_PALETTE.muted, opacity: 0.5 }} />
          </span>
        ))}
      </div>
      <style>{`
        @keyframes aMarqueeL { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
        @keyframes aMarqueeR { from{transform:translateX(-33.333%)} to{transform:translateX(0)} }
      `}</style>
    </div>
  );
}

function A_Ticker() {
  const [t, setT] = React.useState(new Date());
  React.useEffect(() => { const i = setInterval(() => setT(new Date()), 1000); return () => clearInterval(i); }, []);
  const tor = t.toLocaleTimeString('en-CA', { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'America/Toronto' });
  return <span style={{ fontVariantNumeric: 'tabular-nums' }}>TOR {tor}</span>;
}

function A_Home() {
  const [hover, setHover] = React.useState(null);
  return (
    <main>
      {/* Hero — kinetic */}
      <section style={{ position: 'relative', height: 820, overflow: 'hidden', background: 'linear-gradient(180deg, #22201b 0%, #1c1a16 55%, #161310 100%)' }}>
        <img src={A_PHOTOS.hero} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.78 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,26,22,0.55) 0%, rgba(28,26,22,0.15) 35%, rgba(28,26,22,0.85) 100%)' }} />

<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '60px 56px 80px', color: '#fff' }}>
          <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 132, lineHeight: 0.92, letterSpacing: -3.5, margin: 0, maxWidth: 1200 }}>
            Toronto condo renovations,<br /><em style={{ fontWeight: 300 }}>done turnkey.</em>
          </h1>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 64, gap: 56 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.65, maxWidth: 420, opacity: 0.92 }}>
              <span style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontSize: 18 }}>Moose Condo Reno</span> — turnkey design, build, and finishing for condo owners across Toronto and the GTA. Twelve years, five hundred and forty homes.
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <button style={{ background: '#fbfaf6', color: A_PALETTE.ink, border: 'none', padding: '20px 28px', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', cursor: 'pointer' }}>Book a consultation →</button>
              <button style={{ background: 'transparent', color: '#fbfaf6', border: '1px solid rgba(251,250,246,0.5)', padding: '20px 28px', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', cursor: 'pointer' }}>See projects</button>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee strip */}
      <div style={{ borderBottom: `1px solid ${A_PALETTE.line}`, padding: '22px 0', fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 300, fontSize: 26, letterSpacing: -0.4, color: A_PALETTE.ink, background: A_PALETTE.bg }}>
        <A_Marquee items={['Complete renovation','Kitchen','Bathroom','Bedroom','Storage','Lighting','Millwork','Stone','Oak','Tile']} />
      </div>

      {/* Index strip — like a magazine ToC */}
      <section style={{ padding: '32px 56px', background: A_PALETTE.bg, borderBottom: `1px solid ${A_PALETTE.line}`, display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 24, fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted }}>
        {[['01','About us'],['02','Services'],['03','Projects'],['04','Process'],['05','Contact']].map(([n, l]) => (
          <div key={n} style={{ display: 'flex', justifyContent: 'space-between', borderTop: `1px solid ${A_PALETTE.ink}`, paddingTop: 16 }}>
            <span style={{ color: A_PALETTE.ink, fontWeight: 500 }}>{n}</span><span>{l}</span>
          </div>
        ))}
      </section>

      {/* Manifesto + side image collage */}
      <section style={{ padding: '160px 56px 120px', background: A_PALETTE.bg }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 56, alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 10 }}>Our approach</div>
              <img src={A_PHOTOS.detail} style={{ width: '100%', height: 380, objectFit: 'cover', marginTop: 32 }} />
              <div style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 300, fontSize: 16, color: A_PALETTE.muted, marginTop: 14, lineHeight: 1.5 }}>
                A recent Yorkville kitchen — custom oak cabinetry, quartz counters, integrated lighting.
              </div>
            </div>
            <div style={{ paddingTop: 24 }}>
              <p style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 46, lineHeight: 1.18, letterSpacing: -0.8, margin: 0, color: A_PALETTE.ink }}>
                One project lead, <em>from drawings to keys.</em> No subcontracted chaos, no mystery line items.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.75, color: A_PALETTE.muted, marginTop: 40, maxWidth: 600 }}>
                Moose Condo Reno is a turnkey condo renovation studio based in Toronto. We work with owners across the GTA on full renovations, kitchens, bathrooms, and storage — always within Ontario Building Code and condo bylaws, always with one project manager from start to finish. No subcontracted chaos. No mystery line items.
              </p>
              <div style={{ display: 'flex', gap: 16, marginTop: 36, alignItems: 'center', fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted }}>
                <span style={{ borderBottom: `1px solid ${A_PALETTE.ink}`, paddingBottom: 6, color: A_PALETTE.ink }}>Read more →</span>
                <span>Mark Tarchini · Founder</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 80 }}>
              <img src={A_PHOTOS.kitchen} style={{ width: '100%', height: 220, objectFit: 'cover' }} />
              <img src={A_PHOTOS.bathroom} style={{ width: '100%', height: 280, objectFit: 'cover' }} />
            </div>
          </div>
        </A_Reveal>
      </section>

      {/* About us — On the road */}
      <section style={{ padding: '0 56px 140px', background: A_PALETTE.bg, borderBottom: `1px solid ${A_PALETTE.line}` }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <img src="images/team.jpg" style={{ width: '100%', height: 560, objectFit: 'cover' }} />
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 20 }}>About us</div>
              <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 64, fontWeight: 300, letterSpacing: -1.4, lineHeight: 1, margin: 0, color: A_PALETTE.ink }}>
                On the road, on the day, <em>on budget.</em>
              </h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.8, color: A_PALETTE.muted, marginTop: 32, maxWidth: 540 }}>
                Moose Condo Reno was founded on a simple idea: every renovation should run through a single project lead, end to end. No subcontracted chaos, no mystery line items, no project managers who blame each other.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.8, color: A_PALETTE.muted, marginTop: 16, maxWidth: 540 }}>
                Twelve years and five hundred and forty condos in, our vans still pull up at every site personally — picking up materials, meeting condo boards, walking sites at 8am. We handle drawings, board approvals, trades, materials, and finishing — turnkey, on time, and within budget.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.8, color: A_PALETTE.muted, marginTop: 16, maxWidth: 540 }}>
                The work is what it is: physical, careful, and finished on the day we said it would be.
              </p>
              <div style={{ marginTop: 36, display: 'flex', gap: 16, alignItems: 'center', fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted, paddingTop: 24, borderTop: `1px solid ${A_PALETTE.line}` }}>
                <span style={{ color: A_PALETTE.ink, fontWeight: 500 }}>Mark Tarchini</span>
                <span>· Founder · Project Lead</span>
              </div>
            </div>
          </div>
        </A_Reveal>
      </section>

      {/* Stats band — counters */}
      <section style={{ background: 'linear-gradient(180deg, #22201b 0%, #1c1a16 55%, #161310 100%)', color: A_PALETTE.bg, padding: '90px 56px', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 22, left: 56, right: 56, display: 'flex', justifyContent: 'space-between', fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: 1.6, color: 'rgba(246,243,236,0.5)' }}>
          <span>By the numbers</span><span>2014 — 2026</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32 }}>
          {[
            ['540+', 'Homes renovated', 'across the GTA'],
            ['12', 'Years in practice', 'since founding'],
            ['11 wks', 'Median duration', 'plan to keys'],
            ['100%', 'On-budget delivery', 'transparent pricing'],
          ].map(([n, l, s], i) => (
            <A_Reveal key={n} delay={i * 80}>
              <div style={{ borderTop: '1px solid rgba(246,243,236,0.2)', paddingTop: 24 }}>
                <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 88, letterSpacing: -2.5, lineHeight: 1, color: A_PALETTE.bg }}>{n}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontSize: 18, marginTop: 18, color: A_PALETTE.bg }}>{l}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, marginTop: 6, color: 'rgba(246,243,236,0.6)', letterSpacing: 0.4 }}>{s}</div>
              </div>
            </A_Reveal>
          ))}
        </div>
      </section>

      {/* Services index */}
      <section style={{ padding: '0 56px 140px', background: A_PALETTE.bg }}>
        <A_Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${A_PALETTE.line}`, paddingTop: 28, marginBottom: 56 }}>
            <div style={{ fontFamily: 'Fraunces, serif', fontSize: 44, fontWeight: 300, letterSpacing: -0.8 }}>Services</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted }}>What we do</div>
          </div>
        </A_Reveal>
        {[
          { n: '01', t: 'Complete Condo Renovation', d: 'A full reimagining — layout, finishes, mechanicals.', img: A_PHOTOS.full },
          { n: '02', t: 'Kitchen Renovation', d: 'Custom cabinetry, stone, and considered lighting.', img: A_PHOTOS.kitchen },
          { n: '03', t: 'Bathroom Renovation', d: 'Walk-in showers, integrated storage, warm materials.', img: A_PHOTOS.bathroom },
          { n: '04', t: 'Bedroom Renovation', d: 'Built-ins, soft lighting, restorative palettes.', img: A_PHOTOS.bedroom },
          { n: '05', t: 'Storage Solutions', d: 'Discreet storage that reads as architecture.', img: A_PHOTOS.storage },
        ].map((s, i) => (
          <A_Reveal key={s.n} delay={i * 60}>
            <div style={{ display: 'grid', gridTemplateColumns: '60px 200px 1fr 280px', gap: 32, alignItems: 'center', padding: '32px 0', borderBottom: `1px solid ${A_PALETTE.line}`, cursor: 'pointer' }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: A_PALETTE.muted, letterSpacing: 0.6 }}>{s.n}</div>
              <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 400, letterSpacing: -0.4 }}>{s.t}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: A_PALETTE.muted, lineHeight: 1.6 }}>{s.d}</div>
              <img src={s.img} style={{ width: 280, height: 160, objectFit: 'cover' }} />
            </div>
          </A_Reveal>
        ))}
      </section>

      {/* Kinetic giant word */}
      <section style={{ padding: '120px 0 60px', background: A_PALETTE.bg, overflow: 'hidden', borderTop: `1px solid ${A_PALETTE.line}` }}>
        <div style={{ padding: '40px 56px 0', display: 'flex', justifyContent: 'space-between', fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted }}>
          <span>Recent projects</span><span>Six builds · 2024–2026</span>
        </div>
        <div style={{ marginTop: 40, fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 280, letterSpacing: -8, lineHeight: 0.85, color: A_PALETTE.ink, whiteSpace: 'nowrap' }}>
          <A_Marquee items={['Recent', 'Projects', 'Toronto', 'GTA']} speed={80} />
        </div>
      </section>

      {/* Featured spread — three-up */}
      <section style={{ padding: '40px 56px 140px', background: A_PALETTE.bg }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'flex-end' }}>
            <div style={{ position: 'relative' }}>
              <img src={A_PHOTOS.detail} style={{ width: '100%', height: 640, objectFit: 'cover' }} />
              <div style={{ position: 'absolute', top: 20, left: 20, fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', background: 'rgba(28,26,22,0.7)', color: A_PALETTE.bg, padding: '6px 10px' }}>Project 03 / 06</div>
            </div>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
                <span>Featured Project</span><span>↗ Case study</span>
              </div>
              <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 64, fontWeight: 300, lineHeight: 0.98, letterSpacing: -1.6, margin: 0 }}>
                Yorkville two-bedroom: <em>opened layout,</em> new kitchen.
              </h3>
              <div style={{ marginTop: 28, fontFamily: 'Inter, sans-serif', fontSize: 14, color: A_PALETTE.muted, lineHeight: 1.75 }}>
                Stripped to the slab and rebuilt: open-plan kitchen with quartz counters and custom oak cabinetry, two bathrooms refit with walk-in showers, integrated storage in every closet. Eleven weeks from drawings to handover, on the original budget.
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, marginTop: 40, paddingTop: 24, borderTop: `1px solid ${A_PALETTE.line}` }}>
                {[['Year','2024'],['Sq.ft','1,180'],['Rooms','5'],['Duration','11 wks']].map(([k,v]) => (
                  <div key={k}>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted }}>{k}</div>
                    <div style={{ fontFamily: 'Fraunces, serif', fontSize: 26, marginTop: 6, fontWeight: 300 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 32 }}>
                <img src={A_PHOTOS.kitchen} style={{ width: '100%', height: 200, objectFit: 'cover' }} />
                <img src={A_PHOTOS.bathroom} style={{ width: '100%', height: 200, objectFit: 'cover' }} />
              </div>
            </div>
          </div>
        </A_Reveal>
      </section>

      {/* Why */}
      <section style={{ padding: '120px 56px', background: A_PALETTE.paper, borderTop: `1px solid ${A_PALETTE.line}`, borderBottom: `1px solid ${A_PALETTE.line}` }}>
        <A_Reveal>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 56 }}>Why Moose</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', columnGap: 56, rowGap: 64 }}>
            {[
              ['Experienced Condo Professionals','We navigate building rules, approvals, and noise restrictions.'],
              ['Licensed & Insured','Fully licensed, insured, and compliant with regulatory standards.'],
              ['One-Stop Shop','From planning and design to construction, all under one roof.'],
              ['Competitive Pricing','Transparent pricing, no hidden costs, completed on budget.'],
              ['Financing Available','Flexible options to renovate confidently and pay over time.'],
              ['Free Design Consultation','Explore layouts, materials, and finishes with our designers.'],
            ].map(([t, d], i) => (
              <A_Reveal key={t} delay={i * 50}>
                <div>
                  <div style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 300, fontSize: 22, color: A_PALETTE.muted, marginBottom: 8 }}>0{i + 1}</div>
                  <div style={{ fontFamily: 'Fraunces, serif', fontSize: 24, fontWeight: 400, letterSpacing: -0.3, marginBottom: 12 }}>{t}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.7, color: A_PALETTE.muted }}>{d}</div>
                </div>
              </A_Reveal>
            ))}
          </div>
        </A_Reveal>
      </section>

      {/* Testimonials — three columns */}
      <section style={{ padding: '140px 56px', background: A_PALETTE.paper, borderTop: `1px solid ${A_PALETTE.line}` }}>
        <A_Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 80 }}>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 64, letterSpacing: -1.4, margin: 0 }}>What our <em>clients say.</em></h3>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted }}>Testimonials</div>
          </div>
        </A_Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 40 }}>
          {[
            { q: 'Mark and the entire Moose team kept us in the loop through every step and stayed true to schedule. We love our new condo.', n: 'Maria', l: 'Vaughan · Two-bedroom' },
            { q: 'They understood the building rules better than the property manager did. The kitchen is a quiet miracle of storage.', n: 'David & Anne', l: 'Liberty Village · Kitchen' },
            { q: 'Eleven weeks, on the day. The bathroom feels like a small hotel we never want to leave.', n: 'Joon', l: 'Yonge & Eg · Bathroom' },
          ].map((t, i) => (
            <A_Reveal key={t.n} delay={i * 80}>
              <div style={{ borderTop: `1px solid ${A_PALETTE.ink}`, paddingTop: 28 }}>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 60, lineHeight: 0.4, color: A_PALETTE.muted, marginBottom: 16 }}>“</div>
                <p style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 22, lineHeight: 1.4, letterSpacing: -0.3, margin: 0, color: A_PALETTE.ink }}>{t.q}</p>
                <div style={{ marginTop: 32, fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.4, textTransform: 'uppercase', color: A_PALETTE.muted }}>
                  <div style={{ color: A_PALETTE.ink }}>{t.n}</div>
                  <div style={{ marginTop: 4 }}>{t.l}</div>
                </div>
              </div>
            </A_Reveal>
          ))}
        </div>
      </section>

      {/* CTA — full bleed */}
      <section style={{ position: 'relative', height: 640, overflow: 'hidden', background: 'linear-gradient(180deg, #22201b 0%, #1c1a16 55%, #161310 100%)', color: A_PALETTE.bg }}>
        <img src={A_PHOTOS.bedroom} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.45 }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '60px 56px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', opacity: 0.7 }}>
            <span>Get started</span><span>Bedroom · Yonge & Eglinton</span>
          </div>
          <div>
            <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 168, fontWeight: 300, letterSpacing: -4, lineHeight: 0.9, margin: 0 }}>
              Free consultation,<br /><em>no obligation.</em>
            </h3>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 48 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.7, opacity: 0.85, maxWidth: 460 }}>
                Free consultation. No obligation. Tell us about your space, your timeline, and how you live — we'll bring the rest.
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <button style={{ background: A_PALETTE.bg, color: A_PALETTE.ink, border: 'none', padding: '20px 28px', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', cursor: 'pointer' }}>Schedule a consultation →</button>
                <button style={{ background: 'transparent', color: A_PALETTE.bg, border: '1px solid rgba(246,243,236,0.5)', padding: '20px 28px', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', cursor: 'pointer' }}>437‑771‑5353</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <A_Footer />
    </main>
  );
}

function A_Footer() {
  return (
    <footer style={{ background: 'linear-gradient(180deg, #22201b 0%, #1c1a16 55%, #161310 100%)', color: '#bcb6ab', padding: '64px 56px 32px', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, paddingBottom: 56, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
        <div>
          <img src="images/logo.png" alt="Moose Condo Reno — Standard of Excellence" style={{ height: 110, width: 'auto', display: 'block', filter: 'brightness(0) invert(1)' }} />
          <div style={{ marginTop: 24, lineHeight: 1.7, maxWidth: 320 }}>
            7250 Keele St, Unit 161<br />Concord, ON L4K 1Z8
          </div>
        </div>
        {[
          ['Services', ['Complete Renovation','Kitchen','Bathroom','Bedroom','Storage']],
          ['Studio', ['About','Process','Projects','Careers','Journal']],
          ['Contact', ['437‑771‑5353','info@moosecondoreno.ca','Mon–Sun · 8am–8pm']],
        ].map(([t, items]) => (
          <div key={t}>
            <div style={{ color: '#f6f3ec', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', marginBottom: 18 }}>{t}</div>
            {items.map((i) => <div key={i} style={{ marginBottom: 10, lineHeight: 1.5 }}>{i}</div>)}
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 28, display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: 0.4, color: '#7d7870' }}>
        <div>© 2026 Moose Condo Reno</div>
        <div>Toronto · GTA · Ontario</div>
      </div>
    </footer>
  );
}

function A_Services() {
  return (
    <main style={{ background: A_PALETTE.bg }}>
      <section style={{ padding: '120px 56px 80px' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16 }}>§ Services</div>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: -2, margin: 0, maxWidth: 1000 }}>
          Five disciplines, <em>one studio.</em>
        </h1>
        <div style={{ marginTop: 32, fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.7, color: A_PALETTE.muted, maxWidth: 620 }}>
          Every service is delivered turnkey — concept, drawings, board approvals, trades, finishing — managed by a single project lead.
        </div>
      </section>

      {[
        { t: 'Complete Condo Renovation', d: 'A full reimagining of how a condo lives — layout, finishes, mechanicals, lighting. We work from raw slab or carefully renovate around what already exists.', img: A_PHOTOS.full, items: ['Layout & space planning','Mechanical & electrical','Custom millwork','Lighting design'] },
        { t: 'Kitchen Renovation', d: 'Custom cabinetry, stone counters, integrated appliances, and considered lighting — kitchens that anchor the whole plan.', img: A_PHOTOS.kitchen, items: ['Custom cabinetry','Stone & quartz counters','Appliance integration','Bespoke island'] },
        { t: 'Bathroom Renovation', d: 'Walk-in showers, integrated storage, warm materials, and the small details — niche shelves, drain placement, lighting temperature — that take a bathroom from fine to felt.', img: A_PHOTOS.bathroom, items: ['Walk-in showers','Heated floors','Custom vanities','Tile & stone'] },
        { t: 'Bedroom Renovation', d: 'Built-in wardrobes, layered lighting, and restorative palettes — bedrooms shaped around how you actually sleep and dress.', img: A_PHOTOS.bedroom, items: ['Built-in wardrobes','Layered lighting','Acoustic treatments','Bespoke headboards'] },
        { t: 'Storage Solutions', d: 'Discreet, architectural storage. We hide the things that make a condo feel cluttered without giving up an inch of square footage.', img: A_PHOTOS.storage, items: ['Entry & mudroom','Pantry systems','Closet build-outs','Under-stair & nook'] },
      ].map((s, i) => (
        <A_Reveal key={s.t}>
          <section style={{ padding: '80px 56px', borderTop: `1px solid ${A_PALETTE.line}`, display: 'grid', gridTemplateColumns: i % 2 ? '1fr 1.4fr' : '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
            {i % 2 === 0 ? <img src={s.img} style={{ width: '100%', height: 460, objectFit: 'cover' }} /> : null}
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted }}>0{i + 1} / 05</div>
              <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 56, fontWeight: 300, letterSpacing: -1, lineHeight: 1, margin: '12px 0 24px' }}>{s.t}</h2>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.75, color: A_PALETTE.muted, maxWidth: 520 }}>{s.d}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {s.items.map((it) => <li key={it} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: A_PALETTE.ink, paddingTop: 12, borderTop: `1px solid ${A_PALETTE.line}` }}>— {it}</li>)}
              </ul>
            </div>
            {i % 2 === 1 ? <img src={s.img} style={{ width: '100%', height: 460, objectFit: 'cover' }} /> : null}
          </section>
        </A_Reveal>
      ))}

      <A_Footer />
    </main>
  );
}

function A_Projects() {
  const projects = [
    { t: 'Yorkville · two-bedroom', y: '2024', img: A_PHOTOS.detail, sf: '1,180 sf' },
    { t: 'King West · loft', y: '2024', img: A_PHOTOS.living, sf: '920 sf' },
    { t: 'North York · suite', y: '2023', img: A_PHOTOS.kitchen, sf: '1,400 sf' },
    { t: 'Mississauga · pied-à-terre', y: '2023', img: A_PHOTOS.bathroom, sf: '780 sf' },
    { t: 'Vaughan · master suite', y: '2023', img: A_PHOTOS.bedroom, sf: '1,050 sf' },
    { t: 'Scarborough · open plan', y: '2022', img: A_PHOTOS.dining, sf: '1,220 sf' },
  ];
  const [filter, setFilter] = React.useState('All');
  return (
    <main style={{ background: A_PALETTE.bg }}>
      <section style={{ padding: '120px 56px 56px' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16 }}>§ Projects</div>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: -2, margin: 0 }}>
          Selected <em>work.</em>
        </h1>
        <div style={{ marginTop: 48, display: 'flex', gap: 24, borderTop: `1px solid ${A_PALETTE.line}`, paddingTop: 24 }}>
          {['All','Kitchens','Bathrooms','Full Renovations','Bedrooms'].map((f) => (
            <a key={f} onClick={() => setFilter(f)} style={{
              cursor: 'pointer', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.4, textTransform: 'uppercase',
              color: filter === f ? A_PALETTE.ink : A_PALETTE.muted, fontWeight: filter === f ? 500 : 400,
              borderBottom: filter === f ? `1px solid ${A_PALETTE.ink}` : '1px solid transparent', paddingBottom: 4,
            }}>{f}</a>
          ))}
        </div>
      </section>
      <section style={{ padding: '0 56px 140px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        {projects.map((p, i) => (
          <A_Reveal key={p.t} delay={(i % 2) * 80}>
            <div style={{ cursor: 'pointer' }}>
              <img src={p.img} style={{ width: '100%', height: 480, objectFit: 'cover' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 18, paddingTop: 14, borderTop: `1px solid ${A_PALETTE.line}` }}>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 400, letterSpacing: -0.3 }}>{p.t}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.4, color: A_PALETTE.muted }}>{p.y} · {p.sf}</div>
              </div>
            </div>
          </A_Reveal>
        ))}
      </section>
      <A_Footer />
    </main>
  );
}

function A_Process() {
  const steps = [
    ['Initial Consultation','We talk about your project, your goals, budget, timeline, and condo requirements.'],
    ['Floor Plans & Renderings','Designers shape a layout around your space, lifestyle, and needs. Showroom visit included.'],
    ['Condo Board Approvals','We prepare and submit drawings and documentation for board sign-off.'],
    ['Project Management','A dedicated PM oversees scheduling, trades, materials, and quality.'],
    ['Construction & Finishing','Skilled renovators build with care, prioritizing safety and minimum disruption.'],
    ['Final Walkthrough','A thorough inspection ensures the work meets our standard and your expectations.'],
  ];
  return (
    <main style={{ background: A_PALETTE.bg }}>
      <section style={{ padding: '120px 56px 80px' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16 }}>§ Process</div>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: -2, margin: 0, maxWidth: 1000 }}>
          Six steps, <em>one project lead.</em>
        </h1>
      </section>
      <section style={{ padding: '0 56px 140px' }}>
        {steps.map((s, i) => (
          <A_Reveal key={s[0]} delay={i * 60}>
            <div style={{ display: 'grid', gridTemplateColumns: '120px 320px 1fr', gap: 40, alignItems: 'flex-start', padding: '48px 0', borderTop: `1px solid ${A_PALETTE.line}` }}>
              <div style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 300, fontSize: 56, color: A_PALETTE.muted, lineHeight: 1 }}>0{i + 1}</div>
              <div style={{ fontFamily: 'Fraunces, serif', fontSize: 30, fontWeight: 400, letterSpacing: -0.4, lineHeight: 1.15 }}>{s[0]}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.7, color: A_PALETTE.muted, maxWidth: 540 }}>{s[1]}</div>
            </div>
          </A_Reveal>
        ))}
      </section>
      <A_Footer />
    </main>
  );
}

function A_Contact() {
  return (
    <main style={{ background: A_PALETTE.bg }}>
      <section style={{ padding: '120px 56px 80px' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16 }}>§ Contact</div>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: -2, margin: 0 }}>
          Tell us about <em>the space.</em>
        </h1>
      </section>
      <section style={{ padding: '0 56px 140px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 28 }}>
            {['First name','Last name','Email','Phone'].map((p) => (
              <label key={p} style={{ display: 'block' }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 8 }}>{p}</div>
                <input style={{ width: '100%', border: 'none', borderBottom: `1px solid ${A_PALETTE.line}`, background: 'transparent', padding: '8px 0', fontFamily: 'Inter, sans-serif', fontSize: 15, outline: 'none' }} />
              </label>
            ))}
          </div>
          <label style={{ display: 'block', marginBottom: 28 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 8 }}>Interested in</div>
            <select style={{ width: '100%', border: 'none', borderBottom: `1px solid ${A_PALETTE.line}`, background: 'transparent', padding: '8px 0', fontFamily: 'Inter, sans-serif', fontSize: 15, outline: 'none' }}>
              <option>Complete renovation</option><option>Kitchen</option><option>Bathroom</option><option>Bedroom</option><option>Storage</option>
            </select>
          </label>
          <label style={{ display: 'block', marginBottom: 36 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 8 }}>About the project</div>
            <textarea rows={4} style={{ width: '100%', border: 'none', borderBottom: `1px solid ${A_PALETTE.line}`, background: 'transparent', padding: '8px 0', fontFamily: 'Inter, sans-serif', fontSize: 15, outline: 'none', resize: 'none' }} />
          </label>
          <button style={{ background: 'linear-gradient(180deg, #22201b 0%, #1c1a16 55%, #161310 100%)', color: A_PALETTE.bg, border: 'none', padding: '18px 36px', fontFamily: 'Inter, sans-serif', fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', cursor: 'pointer' }}>Send →</button>
        </div>
        <aside>
          <img src={A_PHOTOS.detail} style={{ width: '100%', height: 360, objectFit: 'cover', marginBottom: 40 }} />
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 8 }}>Studio</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, lineHeight: 1.5 }}>7250 Keele St, Unit 161<br />Concord, ON L4K 1Z8</div>
          <div style={{ marginTop: 28, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.8, color: A_PALETTE.muted }}>
            437‑771‑5353<br />info@moosecondoreno.ca<br />Every day · 8am – 8pm
          </div>
        </aside>
      </section>
      <A_Footer />
    </main>
  );
}

function A_About() {
  return (
    <main style={{ background: A_PALETTE.bg }}>
      <section style={{ padding: '120px 56px 80px' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted, marginBottom: 16 }}>§ The Studio</div>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: -2, margin: 0, maxWidth: 1100 }}>
          A studio shaped around <em>how a place is made.</em>
        </h1>
      </section>

      <section style={{ padding: '0 56px 120px' }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, borderTop: `1px solid ${A_PALETTE.line}`, paddingTop: 56 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted }}>§ 01 — Approach</div>
            <div>
              <p style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 32, lineHeight: 1.3, letterSpacing: -0.5, margin: 0 }}>
                Moose Condo Reno is a Toronto-based renovation studio. We believe the best work is quiet, considered, and delivered without drama. Twelve years and 540+ condos in, we still take projects one at a time.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.75, color: A_PALETTE.muted, marginTop: 32, maxWidth: 620 }}>
                Every renovation runs through a single project lead. We handle drawings, board approvals, trades, materials, and finishing — turnkey, on time, and within budget.
              </p>
            </div>
          </div>
        </A_Reveal>
      </section>

      <section style={{ padding: '0 56px 120px' }}>
        <A_Reveal>
          <img src="images/team.jpg" style={{ width: '100%', height: 560, objectFit: 'cover' }} />
          <div style={{ marginTop: 14, fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 300, fontSize: 16, color: A_PALETTE.muted }}>
            Plate II — Our team on the road, across Toronto and the GTA.
          </div>
        </A_Reveal>
      </section>

      <section style={{ padding: '0 56px 140px' }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, borderTop: `1px solid ${A_PALETTE.line}`, paddingTop: 56 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted }}>§ 02 — In numbers</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32 }}>
              {[['12','Years'],['540+','Condos'],['3 wks','Avg. build'],['4.9','Rating']].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: 'Fraunces, serif', fontSize: 64, fontWeight: 300, letterSpacing: -1.5, lineHeight: 1, color: A_PALETTE.ink }}>{n}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: A_PALETTE.muted, marginTop: 12, letterSpacing: 1.2, textTransform: 'uppercase' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </A_Reveal>
      </section>

      <section style={{ padding: '0 56px 140px' }}>
        <A_Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, borderTop: `1px solid ${A_PALETTE.line}`, paddingTop: 56 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: A_PALETTE.muted }}>§ 03 — Service Areas</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 300 }}>
              {['Toronto','North York','Mississauga','Vaughan','Markham','Brampton','Etobicoke','Richmond Hill','Scarborough','Oakville','Burlington','Hamilton','Aurora','Newmarket','Barrie','Milton','Ajax','Innisfil'].map((c) => (
                <div key={c} style={{ paddingTop: 14, borderTop: `1px solid ${A_PALETTE.line}` }}>{c}</div>
              ))}
            </div>
          </div>
        </A_Reveal>
      </section>

      <A_Footer />
    </main>
  );
}

function SiteA() {
  const [page, setPage] = React.useState('Home');
  const ref = React.useRef(null);
  React.useEffect(() => { if (ref.current) ref.current.scrollTop = 0; }, [page]);
  const Page = { Home: A_Home, Services: A_Services, Projects: A_Projects, Process: A_Process, About: A_About, Contact: A_Contact }[page];
  return (
    <div ref={ref} data-scrollroot style={{ minHeight: '100vh', background: A_PALETTE.bg, color: A_PALETTE.ink, position: 'relative' }}>
      <A_Nav page={page} setPage={setPage} scrollRef={ref} />
      <Page />
    </div>
  );
}

window.SiteA = SiteA;
