); } /* ============================================================ * FLOATING PARTICLES + BACKGROUND GRID * ==========================================================*/ function FloatingParticles({ count = 26 }) { const particles = useMemo( () => Array.from({ length: count }).map((_, i) => ({ left: Math.random() * 100, duration: 18 + Math.random() * 18, delay: -Math.random() * 25, size: 1 + Math.random() * 2.5, drift: (Math.random() - 0.5) * 200, // every fourth particle gets the lilac secondary lilac: i % 4 === 0, })), [count] ); return ( ); } function BackgroundGrid() { const { scrollY } = useScroll(); const y = useTransform(scrollY, (v) => v * 0.08); return ( ); } /* ============================================================ * LOADING SCREEN * ==========================================================*/ function LoadingScreen({ onDone }) { const [pct, setPct] = useState(0); useEffect(() => { const start = performance.now(); const total = 2400; let raf; const tick = (now) => { const t = Math.min(1, (now - start) / total); setPct(Math.round(t * 100)); if (t < 1) raf = requestAnimationFrame(tick); else setTimeout(onDone, 350); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [onDone]); return (

ADAS · ARCHITECTURE STUDIO EST · MMXIV

LOADING ATELIER {String(pct).padStart(3, '0')}%

); } /* ============================================================ * NAVBAR + FOOTER + THEME TOGGLE * ==========================================================*/ const NAV = [ { to: '/', label: 'Home', i: '01' }, { to: '/about', label: 'About', i: '02' }, { to: '/services', label: 'Services', i: '03' }, { to: '/projects', label: 'Projects', i: '04' }, { to: '/contact', label: 'Contact', i: '05' }, ]; /* Strip white from logo.jpg and produce BOTH a white-stroke and a dark-stroke version */ let _logoSrcCache = null; // { light, dark } function useTransparentLogo(srcPath = './logo.jpg', threshold = 235) { const [pair, setPair] = useState(_logoSrcCache); useEffect(() => { if (_logoSrcCache) { setPair(_logoSrcCache); return; } const img = new Image(); img.src = srcPath; img.onload = () => { try { // Inset crop to drop the printed border around the JPG canvas. const inset = Math.round(Math.min(img.naturalWidth, img.naturalHeight) * 0.10); const cropW = img.naturalWidth - inset * 2; const cropH = img.naturalHeight - inset * 2; const make = (strokeR, strokeG, strokeB) => { const c = document.createElement('canvas'); c.width = cropW; c.height = cropH; const ctx = c.getContext('2d'); ctx.drawImage(img, inset, inset, cropW, cropH, 0, 0, cropW, cropH); const d = ctx.getImageData(0, 0, cropW, cropH); const px = d.data; for (let i = 0; i < px.length; i += 4) { const r = px[i], g = px[i + 1], b = px[i + 2]; if (r > threshold && g > threshold && b > threshold) { px[i + 3] = 0; continue; } if (g > 120 && g > r + 20 && g > b + 20) continue; // lime bar px[i] = strokeR; px[i + 1] = strokeG; px[i + 2] = strokeB; } ctx.putImageData(d, 0, 0); return c.toDataURL('image/png'); }; _logoSrcCache = { light: make(255, 255, 255), // white strokes — for dark backgrounds dark: make(0x23, 0x1f, 0x20), // ink-900 strokes — for light backgrounds }; setPair(_logoSrcCache); } catch (e) { console.warn('[logo] canvas fallback:', e?.message); } }; }, [srcPath, threshold]); return pair; } function Logo({ className = '', dark = false }) { const pair = useTransparentLogo(); // Fallback: use raw jpg until processed const src = pair ? (dark ? pair.dark : pair.light) : './logo.jpg'; return ( ADAS

Architecture Studio Jeddah · KSA ); } function ThemeToggle() { const { theme, setTheme } = useTheme(); const isDark = theme === 'dark'; return ( ); } function Navbar({ onOpenMenu }) { const { scrollY } = useScroll(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const unsub = scrollY.on('change', (v) => setScrolled(v > 30)); return () => unsub(); }, [scrollY]); return (

Start a Project

); } function MobileMenu({ open, onClose }) { return ( {open && (

office@adas.com.sa

JEDDAH · KSA

)} ); } function Footer() { return ( ); } /* ============================================================ * REVEAL + IMAGE * ==========================================================*/ function Reveal({ children, delay = 0, y = 30, className = '' }) { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-10% 0px -10% 0px' }); return ( {children} ); } function SplitHeading({ text, className = '', delay = 0 }) { const words = text.split(' '); return ( {words.map((w, i) => ( {w} {i < words.length - 1 ? ' ' : ''} ))} ); } function PrettyImg({ src, fallback, alt, className = '', objectPosition, ...rest }) { const [loaded, setLoaded] = useState(false); const [current, setCurrent] = useState(src); return (

setLoaded(true)} onError={(e) => { if (fallback && current !== fallback) { setLoaded(false); setCurrent(fallback); } else { e.currentTarget.style.opacity = 0; } }} initial={{ scale: 1.08, opacity: 0 }} animate={{ scale: loaded ? 1 : 1.08, opacity: loaded ? 1 : 0 }} transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }} style={objectPosition ? { objectPosition } : undefined} className="crisp-img h-full w-full object-cover" />

); } /* ============================================================ * HOME PAGE * ==========================================================*/ function HomeHero() { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] }); const y = useTransform(scrollYProgress, [0, 1], ['0%', '30%']); const scale = useTransform(scrollYProgress, [0, 1], [1, 1.1]); const opacity = useTransform(scrollYProgress, [0, 0.85], [1, 0]); return (

ARCHITECTURE · INTERIOR DESIGN · INNOVATION

{' '}

ADAS is a premier architecture and interior design studio crafting environments of lasting distinction across Saudi Arabia and beyond. Explore Portfolio → Start a Conversation

Now Drawing

Private Palace

Jeddah · Residential

KSA2023

SCROLL

); } function Marquee() { return (

{[...PRESS, ...PRESS, ...PRESS].map((p, i) => ( ◆ {p} ))}

); } function Counter({ value, suffix = '' }) { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-20% 0px' }); const [n, setN] = useState(0); useEffect(() => { if (!inView) return; let raf; const dur = 1800; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - t, 3); setN(Math.round(value * eased)); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, value]); return {n}{suffix}; } function StatsBand() { return (

{STATS.map((s, i) => (

{s.label}

))}

); } function PhilosophyStrip() { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] }); const x = useTransform(scrollYProgress, [0, 1], ['10%', '-30%']); return (

Architecture · Interiors · Urbanism · Visualization ·

— OUR THESIS

Slow drawings,
long buildings.

{[ { t: 'Cinematic', d: 'We design as a film director composes a frame — light, line, shadow and silence as raw material.' }, { t: 'Considered', d: 'Each building begins with a question, not a brief. We refuse to draw what we have not first defended.' }, { t: 'Crafted', d: 'From the joinery to the masterplan, we sweat the millimetres. Buildings are read at arms length.' }, { t: 'Climate-Aware', d: 'Every line carries an embodied carbon cost. We design like the next century is already here.' }, ].map((b, i) => (

{b.t}

{b.d}

))}

); } function FeaturedSlider() { const featured = PROJECTS.slice(0, 5); const [i, setI] = useState(0); const next = () => setI((p) => (p + 1) % featured.length); const prev = () => setI((p) => (p - 1 + featured.length) % featured.length); useEffect(() => { const id = setInterval(next, 6500); return () => clearInterval(id); }, []); const p = featured[i]; return (

— FEATURED WORK

Selected projects, in motion.

View All →

{p.category} · {p.year}

{p.title}

{p.location} · {p.size}

); } function BlueprintSection() { const [hover, setHover] = useState(null); const [picked, setPicked] = useState(null); const rooms = [ { id: 'a', label: 'Atrium', x: 16, y: 18, w: 40, h: 28, info: 'Atrium · 220 m² · 9.6m clear height · north-lit', photo: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=900&q=80' }, { id: 'b', label: 'Library', x: 60, y: 18, w: 28, h: 28, info: 'Library · 96 m² · oak millwork · 4,200 volumes', photo: 'https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=900&q=80' }, { id: 'c', label: 'Salon', x: 16, y: 50, w: 28, h: 28, info: 'Salon · 88 m² · fluted plaster · concealed AV', photo: 'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=900&q=80' }, { id: 'd', label: 'Garden', x: 48, y: 50, w: 40, h: 28, info: 'Garden Court · 160 m² · monolithic basalt floor', photo: 'https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=900&q=80' }, ]; return (

— ANATOMY OF A PROJECT

Step inside a working blueprint.

Click a room name to see how it looks in the real world. Every room we draw has a story — and a number. This is the ground floor of Atelier 9, our Paris residence on Rue de Sévigné.

{rooms.map((r) => (

{picked === r.id && (

{r.label.toUpperCase()} · IN SITU

)}

))}

ADAS · DWG · A-101 · 1:50

SHEET 04 / 28

{hover && ( {rooms.find((r) => r.id === hover)?.info} )}

); } function ProcessSection() { const steps = [ { n: '01', t: 'Listen', d: 'A long conversation about site, brief, climate and ambition.' }, { n: '02', t: 'Draw', d: 'Sketches by hand, then in plan, section and model — all in dialogue.' }, { n: '03', t: 'Test', d: 'We build the building four times in software before we touch a stone.' }, { n: '04', t: 'Deliver', d: 'On site, in fabrication, at every joint. We do not leave the room.' }, ]; return (

— THE METHOD

Four rooms in one house.

We do not split design and delivery. The same team that draws the first line walks the building on opening day.

{steps.map((s, i) => (

{s.n}

{s.t}

{s.d}

))}

); } function CTABand() { return (

A new building to draw?

We accept four new projects each year. If yours feels right for our table, we would be glad to talk.

Start the Conversation See the Work →

); } function HomePage() { return ( <> ); } /* ============================================================ * PAGE HEADER (shared) * ==========================================================*/ function PageHeader({ tag, title, subtitle, accent }) { return (

{tag}

{accent && ( <>{' '} )}

{subtitle && (

{subtitle}

)}

); } /* ============================================================ * ABOUT PAGE * ==========================================================*/ function AboutStory() { return (

JEDDAH · STUDIO ATELIER · 2024

— OUR STORY

A consultancy built on excellence.

ADAS Architecture is a multidisciplinary architectural consultancy firm specializing in architecture, interior design, supervision and design management services.

Driven by innovation, precision and a commitment to excellence, the studio delivers tailored design solutions that balance functionality, aesthetics and long-term value.

Through a collaborative and client-focused approach, ADAS Architecture creates distinctive environments that reflect the identity of each project while enhancing the human experience and shaping meaningful spaces across Saudi Arabia.

80+

Projects

Years

Team Members

); } function VisionMission() { const items = [ { tag: 'Vision', t: 'A leading consultancy, recognised by its work.', d: 'To become a leading architectural consultancy firm recognised for delivering innovative, human-centred and timeless design solutions that positively shape communities, enhance lifestyles and contribute to the future of the built environment in Saudi Arabia and beyond.' }, { tag: 'Mission', t: 'Visions translated into distinctive spaces.', d: 'To deliver high-quality architectural, interior design and consultancy services through creativity, technology and professional excellence — understanding our clients\' visions and transforming them into functional, sustainable and visually distinctive spaces that promote wellbeing, identity and long-term value.' }, ]; return (

{items.map((it, i) => (

{it.tag[0]}

{it.tag}

{it.t}

{it.d}

))}

); } function TimelineSection() { return (

— OUR EXPERIENCE

Six years, one continuous line.

{TIMELINE.map((t, i) => (

{t.year}

{t.t}

{t.d}

))}

); } function PersonIcon({ gender = 'm', className = '' }) { // female: flared body coming to a centre point + feet · male: trapezoid body return ( ); } function TeamSection() { return (

— THE STUDIO

The hands behind the lines.

{TEAM.map((m, i) => (

{m.icon ? (

) : ( )}

{String(i + 1).padStart(2, '0')}

{m.name}

{m.role}

{m.bio}

))}

{/* DESIGN TEAM */}

— DESIGN TEAM

The people at the drawing boards.

{DESIGN_TEAM.map((m, i) => (

{m.name}

{m.role}

))}

); } function PhilosophyDeep() { const pillars = [ { n: '01', t: 'Material before form', d: 'We begin every project by walking through a yard of stone, a workshop of oak, a foundry of cast aluminium. The material teaches us what to draw.' }, { n: '02', t: 'The drawing is the building', d: 'A bad drawing makes a worse building. We treat every line, hatch and section call-out as the building itself, drawn small.' }, { n: '03', t: 'Slowness as a discipline', d: 'We schedule against pace. Every project is given the time it needs — and refused the time it does not.' }, { n: '04', t: 'Climate as a client', d: 'The next century is our other client, sitting silently beside the first one. Every decision is negotiated with it in mind.' }, ]; return (

— PHILOSOPHY

Four principles pinned to every wall.

{pillars.map((p, i) => (

{p.n}

{p.t}

{p.d}

))}

); } function AboutPage() { return ( <> ); } /* ============================================================ * SERVICES PAGE * ==========================================================*/ function ServiceCard({ s, i }) { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-15% 0px' }); const navigate = useNavigate(); return ( navigate('/book/' + s.id)} role="button" className="group relative isolate flex h-full flex-col overflow-hidden rounded-2xl border border-ink-900/10 bg-white p-8 transition-colors duration-700 hover:border-gold-400/40 md:p-10">

{ const r = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%'); e.currentTarget.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%'); }} className="absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" style={{ background: 'radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(202,184,232,0.28), rgba(155,204,83,0.10) 35%, transparent 60%)' }} />

{s.no} — Service

→

{s.name}

{s.blurb}

{s.detail}

{pt}

{s.id === 's5' ? 'Enrol Now →' : 'Book a Session →'}

); } function ServicesPage() { return ( <>

{SERVICES.map((s, i) => )}

); } /* ============================================================ * PROJECTS PAGE * ==========================================================*/ function BeforeAfter() { const [pos, setPos] = useState(50); const wrapRef = useRef(null); const dragging = useRef(false); const onMove = useCallback((clientX) => { if (!wrapRef.current) return; const r = wrapRef.current.getBoundingClientRect(); const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); setPos(p); }, []); useEffect(() => { const move = (e) => { if (!dragging.current) return; onMove(e.touches ? e.touches[0].clientX : e.clientX); }; const up = () => (dragging.current = false); window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move, { passive: true }); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; }, [onMove]); return (

— BEFORE / AFTER

A site, re-imagined.

Drag the line: the same plot of land before our intervention, and after. Linear Park Reimagined — Seoul, 2024.

← BEFORE·AFTER →

{ dragging.current = true; onMove(e.clientX); }} onTouchStart={(e) => { dragging.current = true; onMove(e.touches[0].clientX); }}>

‹›

BEFORE

AFTER

); } function ProjectsGrid() { const [active, setActive] = useState('All'); const [openId, setOpenId] = useState(null); const [hoverIdx, setHoverIdx] = useState(0); const filtered = useMemo(() => (active === 'All' ? PROJECTS : PROJECTS.filter((p) => p.category === active)), [active]); const open = filtered.find((p) => p.id === openId) || PROJECTS.find((p) => p.id === openId); useEffect(() => { setHoverIdx(0); }, [active]); useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); return (

{/* Filter pills */}

{CATEGORIES.map((c) => ( ))} {String(filtered.length).padStart(2, '0')} / {String(PROJECTS.length).padStart(2, '0')} PROJECTS

{/* Expanding horizontal-strip accordion (desktop) */}

{filtered.map((p, i) => { const isHover = hoverIdx === i; return ( ); })}

{/* Mobile fallback: clean stacked cards */}

{filtered.map((p, i) => ( ))}

{filtered.length === 0 && (

No projects in this category yet.

)}

{open && setOpenId(null)} />}

); } function ProjectModal({ project, onClose }) { return ( e.stopPropagation()} className="glass relative max-h-[88vh] w-[min(1100px,96vw)] overflow-y-auto rounded-2xl">

{project.category} · {project.year}

{project.title}

{project.location} · {project.size}

{project.tagline}

{project.title} was developed across an eighteen-month design phase and twenty-six months of construction. The project was led from our {project.location.split(',')[0]} desk, with structural and façade consultation through our engineering atelier. The building opened in {project.year} to public and critical reception.

The design centres on a single material gesture — a continuous architectural line that binds the elevation, the section and the plan. Inside, light is treated as a primary material; outside, the building keeps a quiet conversation with its city.

{[['Role', project.role], ['Location', project.location], ['Size', project.size], ['Year', project.year], ['Status', 'Built'], ['Award', 'Domus 100, 2024'] ].map(([k, v]) => (

{k}

{v}

))}

Press

Featured in Dezeen, Domus, Wallpaper* and Frame magazine.

); } function ProjectsPage() { return ( <> ); } /* ============================================================ * CONTACT PAGE * ==========================================================*/ function Field({ label, value, onChange, type = 'text', required, placeholder }) { return (

{label}

); } function ContactForm() { const [data, setData] = useState({ name: '', email: '', budget: '', service: 'Architectural Design', message: '' }); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); setSending(true); setTimeout(() => { setSending(false); setSent(true); }, 1100); }; return (

{sent && (

Letter received.

Thank you, {data.name || 'friend'}. One of our partners will write back within two working days.

)}

Service

Tell us about the project

</div>
        <div className="flex flex-wrap items-center justify-between gap-4">
          <p className="stamp text-ink-700/50">WE REPLY WITHIN 2 WORKING DAYS</p>
          <button type="submit" disabled={sending}
            className="magnetic-btn group inline-flex items-center gap-3 rounded-full bg-gold-400 px-8 py-3.5 stamp text-ink-950 transition hover:bg-gold-300 disabled:opacity-60">
            {sending ? 'SENDING…' : 'SEND THE LETTER'}
            <span className="inline-block transition-transform group-hover:translate-x-1">→</span>
          </button>
        </div>
      </form>
    </div>
  );
}

function FuturisticMap() {
  return (
    <section className="relative isolate overflow-hidden border-t border-ink-900/10 bg-white py-24">
      <div className="mx-auto w-[min(1500px,94vw)]">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <p className="stamp text-gold-300">— FIND THE STUDIO</p>
            <Reveal>
              <h2 className="mt-3 font-display text-5xl leading-tight md:text-6xl">
                Three workrooms, <span className="font-titling not-italic font-medium text-gold-500">one practice</span>.
              </h2>
            </Reveal>
          </div>
        </div>
        <div className="mt-10 grid grid-cols-12 gap-6">
          <div className="col-span-12 lg:col-span-8">
            <div className="relative aspect-[16/10] overflow-hidden rounded-2xl border border-gold-400/20 bg-bone-100">
              <svg viewBox="0 0 1200 720" className="absolute inset-0 h-full w-full">
                <defs>
                  <pattern id="mapgrid" width="60" height="60" patternUnits="userSpaceOnUse">
                    <path d="M60 0 L0 0 0 60" fill="none" stroke="rgba(155,204,83,0.15)" strokeWidth="0.5" />
                  </pattern>
                  <radialGradient id="ping" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stopColor="#b8dc7a" stopOpacity="0.9" />
                    <stop offset="60%" stopColor="#9bcc53" stopOpacity="0.2" />
                    <stop offset="100%" stopColor="#9bcc53" stopOpacity="0" />
                  </radialGradient>
                </defs>
                <rect width="1200" height="720" fill="url(#mapgrid)" />
                <g fill="none" stroke="rgba(155,204,83,0.45)" strokeWidth="1.1" strokeLinejoin="round">
                  <path d="M180 290 Q260 240 320 280 Q360 320 340 380 Q300 430 250 410 Q200 380 180 340 Z" />
                  <path d="M520 200 Q620 180 690 240 Q760 320 730 400 Q650 450 580 420 Q500 360 520 280 Z" />
                  <path d="M820 240 Q920 220 990 280 Q1060 350 1010 420 Q930 460 860 410 Q800 340 820 280 Z" />
                  <path d="M360 460 Q420 480 460 520 Q470 580 420 600 Q360 590 340 540 Z" />
                </g>
                <g fill="none" stroke="#9bcc53" strokeWidth="1.2" strokeDasharray="6 6" opacity="0.7">
                  <motion.path d="M610 340 Q780 200 920 320"
                    initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }}
                    transition={{ duration: 2, ease: 'easeInOut' }} viewport={{ once: true }} />
                  <motion.path d="M610 340 Q500 240 420 300"
                    initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }}
                    transition={{ duration: 2, delay: 0.3, ease: 'easeInOut' }} viewport={{ once: true }} />
                </g>
                {[
                  { x: 610, y: 360, name: 'JEDDAH', tag: 'STUDIO', big: true },
                  { x: 670, y: 340, name: 'RIYADH', tag: 'ACTIVE PROJECT' },
                  { x: 620, y: 320, name: 'AL ULA', tag: 'RESORT' },
                ].map((p) => (
                  <g key={p.name} transform={`translate(${p.x},${p.y})`}>
                    <motion.circle r="40" fill="url(#ping)"
                      animate={{ scale: [0.6, 1.4], opacity: [0.7, 0] }}
                      transition={{ duration: 2.4, repeat: Infinity, ease: 'easeOut' }} />
                    <circle r={p.big ? 10 : 7} fill="#9bcc53" />
                    <circle r={p.big ? 4 : 3} fill="#231f20" />
                    <g transform="translate(16, 4)" style={{ fontFamily: 'JetBrains Mono', letterSpacing: '0.3em' }}>
                      <text fontSize="12" fill="#f4eada">{p.name}</text>
                      <text fontSize="9" y="14" fill="#9bcc53">{p.tag}</text>
                    </g>
                  </g>
                ))}
              </svg>
              <div className="absolute left-4 top-4 stamp text-gold-300/80">ADAS · GLOBAL ATLAS · 2026</div>
              <div className="absolute bottom-4 right-4 stamp text-gold-300/60">PROJ · MOLLWEIDE</div>
            </div>
          </div>
          <div className="col-span-12 space-y-3 lg:col-span-4">
            {[
              { city: 'Jeddah', addr: 'Jada 30, Al-Madinah Rd, Obhor Al-Janobiya', tag: 'STUDIO' },
              { city: 'Riyadh', addr: 'Knowledge City Business Park · On-site', tag: 'PROJECT' },
              { city: 'Al Ula', addr: 'Al Ula Resort · Active site', tag: 'PROJECT' },
            ].map((o, i) => (
              <Reveal key={o.city} delay={i * 0.08}>
                <div className="glass flex items-center justify-between rounded-2xl p-5">
                  <div>
                    <p className="stamp text-gold-300">{o.tag}</p>
                    <p className="mt-1 font-display text-2xl">{o.city}</p>
                    <p className="text-sm text-ink-800/70">{o.addr}</p>
                  </div>
                  <span className="grid h-10 w-10 place-items-center rounded-full border border-ink-900/12 text-ink-800/70">→</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <>
      <PageHeader tag="— LET'S CONNECT" title="Get in" accent="Touch."
        subtitle="Tell us about your project and our team will respond within 24 hours. Architecture, interiors, supervision, BIM courses or a quick consultation — we're listening." />
      <section className="relative pb-24">
        <div className="mx-auto grid w-[min(1500px,94vw)] grid-cols-12 gap-10">
          <div className="col-span-12 lg:col-span-7"><ContactForm /></div>
          <div className="col-span-12 space-y-5 lg:col-span-5">
            <div className="glass rounded-2xl p-8">
              <p className="stamp text-gold-300">— WRITE TO US</p>
              <p className="mt-4 font-display text-3xl leading-tight">office@adas.com.sa</p>
              <p className="mt-1 stamp text-ink-700/50">NEW PROJECTS · PRESS · GENERAL</p>
              <div className="mt-6 border-t border-ink-900/10 pt-6">
                <p className="font-display text-2xl">+966 55 859 3937</p>
                <p className="mt-1 stamp text-ink-700/50">WHATSAPP · 09 — 17 GMT+3</p>
              </div>
              <div className="mt-6 border-t border-ink-900/10 pt-6">
                <p className="font-display text-2xl">Jada 30, Al-Madinah Rd</p>
                <p className="mt-1 text-ink-800/70">Obhor Al-Janobiya, Jeddah</p>
              </div>
            </div>
            <div className="glass rounded-2xl p-8">
              <p className="stamp text-gold-300">— FOLLOW US</p>
              <div className="mt-5 grid grid-cols-3 gap-3">
                {[
                  { l: 'WhatsApp', h: '+966 55 859 3937' }, { l: 'Instagram', h: '@adas.architecture' },
                  { l: 'LinkedIn', h: '/adas-architecture' }, { l: 'Behance', h: '/adasarchitecture' },
                  { l: 'X', h: '@adas_ksa' }, { l: 'Maps', h: 'View on Google' },
                ].map((s) => (
                  <a href="#" onClick={(e) => e.preventDefault()} key={s.l}
                    className="group flex flex-col items-start rounded-xl border border-ink-900/10 p-3 transition hover:border-gold-300">
                    <span className="stamp text-ink-700/50 group-hover:text-gold-300">{s.l}</span>
                    <span className="mt-1 text-sm text-ink-900">{s.h}</span>
                  </a>
                ))}
              </div>
            </div>
            <div className="glass rounded-2xl p-8">
              <p className="stamp text-gold-300">— OPENING HOURS</p>
              <div className="mt-4 space-y-2 text-ink-800/80">
                <div className="flex justify-between"><span>Sun — Thu</span><span className="stamp text-ink-700/70">09:00 — 18:00</span></div>
                <div className="flex justify-between"><span>Fri</span><span className="stamp text-ink-700/70">10:00 — 14:00</span></div>
                <div className="flex justify-between"><span>Sat</span><span className="stamp text-ink-700/70">CLOSED</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <FuturisticMap />
    </>
  );
}

/* ============================================================
 *  FLOATING ACTIONS + EASTER EGG
 * ==========================================================*/

const KONAMI = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

/* ============================================================
 *  PAGE SWITCHER (uses our hash router)
 * ==========================================================*/

/* ============================================================
 *  BOOK PAGE — multi-step sign-up → calendar → confirm/pay
 *  Note: real email + payment require a backend or 3rd-party
 *  service (Stripe, EmailJS, Formspree). This UI simulates both.
 * ==========================================================*/

const ENGINEERS = [
  { id: 'kareem', name: 'Abdulkareem Adas',     role: 'Chairman · CPO',       email: 'abdulkareem.a@adas.com.sa', img: './Abdulkareem-Adas.jpeg' },
  { id: 'mohsin', name: 'Dr. Abdulmohsin Adas', role: 'Vice Chairman · CEO',  email: 'abdulmohsin.a@adas.com.sa', img: './Dr.Abdulmohsin-Adas.jpeg' },
];

/* Per-service default contact (the user can still pick the other engineer) */
const TEAM_DEFAULT = {
  s1: 'kareem', s2: 'mohsin', s3: 'kareem',
  s4: 'mohsin', s5: 'mohsin', s6: 'mohsin',
};

/* 17:00 — 21:00, evening sessions */
const TIME_SLOTS = ['17:00', '18:00', '19:00', '20:00', '21:00'];

/* Bookings backend — paste your Google Apps Script Web App URL (ends with /exec).
 * Leave '' to run the site without availability sync (nothing is closed/saved). */
const BOOKINGS_API = '';

/* A slot is unique per date + time + engineer; a Revit course is unique per week + engineer. */
const slotKey = (date, time, eng) => `S|${date}|${time}|${eng}`;
const weekKey = (week, eng) => `W|${week}|${eng}`;

/* Revit / BIM packages — split by track (Student / Professional) */
const REVIT_PACKS = {
  professional: [
    { id: 'p-beg',  label: 'Revit Beginner — 7 days',     fee: 2000, suffix: 'SAR', sub: '7-day course · 3-hour sessions per day' },
    { id: 'p-adv',  label: 'Revit Advanced — 7 days',     fee: 3000, suffix: 'SAR', sub: '7-day course · 3-hour sessions per day' },
  ],
  student: [
    { id: 's-beg',  label: 'Revit Beginner — 7 days',          fee: 1800, suffix: 'SAR',     sub: '7-day course · student rate' },
    { id: 's-adv',  label: 'Revit Advanced — 7 days',          fee: 2200, suffix: 'SAR',     sub: '7-day course · student rate' },
  ],
};

/* 1-on-1 Consulting — split by track (Professional / Student) */
const CONSULT_PACKS = {
  professional: [
    { id: 'c-bim', label: 'BIM Professional Session', fee: 300, suffix: 'SAR', sub: '60-minute one-to-one technical support' },
    { id: 'c-rev', label: 'Design Review Session',    fee: 500, suffix: 'SAR', sub: '60-minute professional consultation' },
  ],
  student: [
    { id: 'c-int',  label: 'Graduation Project — Intensive',  fee: 700,  suffix: 'SAR',     sub: '2-hour one-time comprehensive review' },
    { id: 'c-ment', label: 'Graduation Project — Mentorship', fee: 1200, suffix: 'SAR / mo', sub: '4 physical + 4 online sessions / month' },
  ],
};

/* services that use the 2-track picker + payment flow */
const TRACK_PACKS = { s5: REVIT_PACKS, s6: CONSULT_PACKS };
const TRACK_META = {
  s5: {
    label: 'REVIT / BIM TRAINING',
    intro: 'Different packages and rates for students and professionals. Pick the one that fits you.',
    professional: 'For architects, engineers, BIM coordinators and offices.',
    student: 'For architecture & engineering students working on academic projects.',
  },
  s6: {
    label: '1-ON-1 CONSULTING',
    intro: 'Sessions and rates for students and professionals. Pick the track that fits you.',
    professional: 'One-to-one technical support and design reviews for practitioners.',
    student: 'Graduation-project reviews and mentorship for students.',
  },
};
const fmtSAR = (n) => n.toLocaleString('en-US');

function fmtDate(iso) {
  if (!iso) return '';
  const [y, m, d] = iso.split('-').map(Number);
  const dt = new Date(y, m - 1, d);
  return dt.toLocaleDateString('en-GB', {
    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
  });
}

const isoOf = (d) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

/* upcoming course weeks — each starts on a Saturday (KSA work week Sat–Thu) */
function upcomingWeeks(count = 8) {
  const t = new Date();
  const d = new Date(t.getFullYear(), t.getMonth(), t.getDate());
  d.setDate(d.getDate() + (((6 - d.getDay() + 7) % 7) || 7)); // next Saturday
  const out = [];
  for (let i = 0; i < count; i++) {
    out.push(isoOf(d));
    d.setDate(d.getDate() + 7);
  }
  return out;
}

/* "6 — 12 Jun 2026" : the 7-day span of a course week from its Saturday start */
function fmtWeekRange(iso) {
  if (!iso) return '';
  const [y, m, d] = iso.split('-').map(Number);
  const start = new Date(y, m - 1, d);
  const end = new Date(y, m - 1, d + 6);
  const sameMonth = start.getMonth() === end.getMonth();
  const sd = start.getDate();
  const ed = end.getDate();
  const sMon = start.toLocaleDateString('en-GB', { month: 'short' });
  const eMon = end.toLocaleDateString('en-GB', { month: 'short' });
  return sameMonth
    ? `${sd} — ${ed} ${eMon} ${end.getFullYear()}`
    : `${sd} ${sMon} — ${ed} ${eMon} ${end.getFullYear()}`;
}

function MiniCalendar({ value, onPick }) {
  const today = new Date();
  const [view, setView] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
  const monthStart = new Date(view.getFullYear(), view.getMonth(), 1);
  const monthEnd = new Date(view.getFullYear(), view.getMonth() + 1, 0);
  const startWeekday = monthStart.getDay(); // 0 Sun
  const daysInMonth = monthEnd.getDate();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(view.getFullYear(), view.getMonth(), d));

return (
    <div>
      <div className="flex items-center justify-between">
        <button onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))}
          className="grid h-9 w-9 place-items-center rounded-full border border-ink-900/12 text-ink-800/70 hover:border-gold-300 hover:text-gold-600">←</button>
        <span className="stamp text-ink-800">{monthLabel}</span>
        <button onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))}
          className="grid h-9 w-9 place-items-center rounded-full border border-ink-900/12 text-ink-800/70 hover:border-gold-300 hover:text-gold-600">→</button>
      </div>
      <div className="mt-4 grid grid-cols-7 gap-1 text-center stamp text-ink-700/50">
        {['S','M','T','W','T','F','S'].map((d, i) => <span key={i}>{d}</span>)}
      </div>
      <div className="mt-1 grid grid-cols-7 gap-1">
        {cells.map((d, i) => {
          if (!d) return <span key={i} className="aspect-square" />;
          const dStr = fmt(d);
          const disabled = isPast(d) || isFri(d);
          const picked = value === dStr;
          return (
            <button key={i}
              disabled={disabled}
              onClick={() => onPick(dStr)}
              className={
                'aspect-square rounded-md text-sm transition ' +
                (picked
                  ? 'bg-gold-400 text-ink-900 font-semibold'
                  : disabled
                  ? 'text-ink-700/25'
                  : 'text-ink-900 hover:bg-gold-400/15')
              }>
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function BookPage() {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const serviceId = pathname.split('/')[2] || 's1';
  const service = SERVICES.find((s) => s.id === serviceId) || SERVICES[0];
  const isRevit = service.id === 's5';
  const trackPackData = TRACK_PACKS[service.id] || null;  // s5 (Revit) & s6 (Consulting)
  const isTracked = !!trackPackData;
  const [engineerId, setEngineerId] = useState(TEAM_DEFAULT[service.id] || 'kareem');
  const team = ENGINEERS.find((e) => e.id === engineerId) || ENGINEERS[0];
  const [trackId, setTrackId] = useState(null);  // 'professional' | 'student'
  const [packId, setPackId] = useState(null);
  const packs = trackId && trackPackData ? trackPackData[trackId] : [];
  const pack = packs.find((p) => p.id === packId) || packs[0] || (trackPackData ? trackPackData.professional[0] : null);
  const chooseTrack = (t) => { setTrackId(t); setPackId(trackPackData[t][0].id); };
  const [payMethod, setPayMethod] = useState('mada');  // mada | visa | master | amex | apple | bank
  const [bankAck, setBankAck] = useState(false);

const [step, setStep] = useState(1);
  const [data, setData] = useState({
    name: '', email: '', phone: '', company: '', message: '',
    date: '', time: '', week: '',
    card: '', exp: '', cvv: '', cardName: '',
  });
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e?.target ? e.target.value : e }));

/* Shared availability — taken slots fetched from the bookings sheet on mount */
  const [taken, setTaken] = useState([]);
  useEffect(() => {
    if (!BOOKINGS_API) return;
    let alive = true;
    fetch(BOOKINGS_API)
      .then((r) => r.json())
      .then((d) => { if (alive && d && d.ok) setTaken(d.slots || []); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);
  const takenSet = useMemo(() => {
    const s = new Set();
    taken.forEach((b) => {
      if (b.week) s.add(weekKey(b.week, b.engineerId));
      else if (b.date && b.time) s.add(slotKey(b.date, b.time, b.engineerId));
    });
    return s;
  }, [taken]);
  const isSlotTaken = (date, time) => takenSet.has(slotKey(date, time, engineerId));
  const isWeekTaken = (week) => takenSet.has(weekKey(week, engineerId));

const canStep1 = data.name && /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email) && data.phone.length >= 6;
  const canStep2 = isRevit
    ? (!!data.week && !isWeekTaken(data.week))
    : (data.date && data.time && !isSlotTaken(data.date, data.time));
  const cardValid = data.card.replace(/\s/g,'').length >= 12 && data.exp && data.cvv && data.cardName;
  const isCardMethod = ['mada','visa','master','amex'].includes(payMethod);
  const canStep3 = !isTracked
    || payMethod === 'apple'
    || (payMethod === 'bank' && bankAck)
    || (isCardMethod && cardValid);

/* ── TRACK PICKER (Revit & Consulting — shown before anything else) ── */
  if (isTracked && !trackId) {
    const meta = TRACK_META[service.id];
    return (
      <section className="relative isolate min-h-screen overflow-hidden bg-bone-50 pt-32 pb-24">
        <div className="absolute inset-0 bg-blueprint-grid bg-grid opacity-20" />
        <FloatingParticles count={12} />
        <div className="relative mx-auto w-[min(960px,94vw)]">
          <button onClick={() => navigate('/services')}
            className="stamp text-ink-700/60 hover:text-gold-600">← Back to Services</button>
          <p className="mt-6 stamp text-gold-500">— {service.no} · {meta.label}</p>
          <h1 className="mt-3 font-display text-4xl leading-tight md:text-6xl">
            Choose your <span className="font-titling not-italic font-medium text-gold-500">track</span>.
          </h1>
          <p className="mt-4 max-w-xl text-ink-800/70">
            {meta.intro}
          </p>
          <div className="mt-10 grid grid-cols-1 gap-5 md:grid-cols-2">
            {[
              { id: 'professional', t: 'Professional', d: meta.professional },
              { id: 'student',      t: 'Student',      d: meta.student },
            ].map((tr) => (
              <button key={tr.id}
                onClick={() => chooseTrack(tr.id)}
                className="group relative isolate flex h-full flex-col overflow-hidden rounded-2xl border border-ink-900/10 bg-white p-8 text-left transition hover:border-gold-400/60 hover:shadow-soft">
                <p className="stamp text-gold-500">— {tr.id === 'student' ? 'STUDENT TRACK' : 'PROFESSIONAL TRACK'}</p>
                <h3 className="mt-3 font-display text-3xl text-ink-900">{tr.t}</h3>
                <p className="mt-3 text-sm text-ink-800/70">{tr.d}</p>
                <div className="mt-5 flex items-baseline gap-2">
                  <span className="stamp text-ink-700/60">From</span>
                  <span className="font-display text-2xl text-gold-600">{fmtSAR(Math.min(...trackPackData[tr.id].map((p) => p.fee)))}</span>
                  <span className="stamp text-ink-700/60">SAR</span>
                </div>
                <ul className="mt-5 space-y-1 text-sm text-ink-800/80">
                  {trackPackData[tr.id].map((p) => (
                    <li key={p.id} className="flex items-center justify-between gap-2 border-t border-ink-900/8 py-1.5">
                      <span>{p.label}</span>
                      <span className="stamp text-ink-700/60">{fmtSAR(p.fee)}</span>
                    </li>
                  ))}
                </ul>
                <span className="magnetic-btn mt-6 inline-flex items-center gap-2 self-start rounded-full bg-gold-400 px-5 py-2 stamp text-ink-900 transition group-hover:bg-gold-500 group-hover:text-white">
                  Continue as {tr.t} →
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>
    );
  }

/* ── DONE STATE ── */
  if (done) {
    return (
      <section className="relative isolate min-h-screen overflow-hidden bg-bone-50 pt-40 pb-24">
        <FloatingParticles count={18} />
        <div className="relative mx-auto w-[min(720px,92vw)] text-center">
          <svg viewBox="0 0 60 60" className="mx-auto h-20 w-20 text-gold-500">
            <motion.circle cx="30" cy="30" r="26" fill="none" stroke="currentColor" strokeWidth="1"
              initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 0.8 }} />
            <motion.path d="M18 30 L27 39 L43 22" fill="none" stroke="currentColor" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round"
              initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 0.6, delay: 0.6 }} />
          </svg>
          <p className="mt-6 stamp text-gold-500">— BOOKING CONFIRMED</p>
          <h1 className="mt-3 font-display text-4xl leading-tight md:text-5xl">
            {isTracked ? 'Payment received.' : 'Session booked.'}
          </h1>
          <p className="mx-auto mt-4 max-w-md text-ink-800/75">
            {isRevit
              ? `Thank you, ${data.name}. Your enrolment for ${service.name} is confirmed.`
              : `Thank you, ${data.name}. Your ${service.name} session is confirmed.`}
          </p>
          <div className="glass mx-auto mt-8 grid max-w-md grid-cols-2 gap-y-3 rounded-2xl p-6 text-left">
            <span className="stamp text-ink-700/60">Service</span><span className="text-ink-900">{service.name}</span>
            <span className="stamp text-ink-700/60">Date</span><span className="text-ink-900">{fmtDate(data.date)}</span>
            <span className="stamp text-ink-700/60">Time</span><span className="text-ink-900">{data.time}</span>
            <span className="stamp text-ink-700/60">With</span><span className="text-ink-900">{team.name}</span>
            <span className="stamp text-ink-700/60">Notice</span>
            <span className="text-ink-800/80">
              We've emailed <span className="text-gold-600">{team.email}</span> with your booking details.
              You'll receive a copy at <span className="text-gold-600">{data.email}</span>.
            </span>
          </div>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <button onClick={() => navigate('/services')}
              className="magnetic-btn rounded-full bg-gold-400 px-7 py-3 stamp text-ink-900 hover:bg-gold-500 hover:text-white">
              Back to Services
            </button>
            <button onClick={() => navigate('/')}
              className="magnetic-btn rounded-full border border-ink-900/20 px-7 py-3 stamp text-ink-900 hover:border-gold-400">
              Home →
            </button>
          </div>
        </div>
      </section>
    );
  }

/* ── ACTIVE FORM ── */
  return (
    <section className="relative isolate overflow-hidden bg-bone-50 pt-32 pb-24">
      <div className="absolute inset-0 bg-blueprint-grid bg-grid opacity-20" />
      <FloatingParticles count={12} />
      <div className="relative mx-auto w-[min(960px,94vw)]">
        <button onClick={() => navigate('/services')}
          className="stamp text-ink-700/60 hover:text-gold-600">← Back to Services</button>
        <p className="mt-6 stamp text-gold-500">— {service.no} · {service.name.toUpperCase()}</p>
        <h1 className="mt-3 font-display text-4xl leading-tight md:text-6xl">
          {isRevit ? 'Enrol in' : 'Book a session for'}{' '}
          <span className="font-titling not-italic font-medium text-gold-500">{service.name}</span>.
        </h1>
        <p className="mt-4 max-w-xl text-ink-800/70">{service.detail}</p>

{/* Stepper */}
        <div className="mt-10 flex items-center gap-2">
          {[
            { n: 1, t: 'Your details' },
            { n: 2, t: isRevit ? 'Session information' : 'Pick a slot' },
            { n: 3, t: isTracked ? 'Payment' : 'Confirm' },
          ].map((st, i, arr) => (
            <React.Fragment key={st.n}>
              <div className="flex items-center gap-2">
                <span className={'grid h-7 w-7 place-items-center rounded-full stamp ' +
                  (step >= st.n ? 'bg-gold-400 text-ink-900' : 'bg-ink-900/10 text-ink-700/60')}>
                  {st.n}
                </span>
                <span className={'stamp ' + (step >= st.n ? 'text-ink-900' : 'text-ink-700/50')}>{st.t}</span>
              </div>
              {i < arr.length - 1 && <span className="mx-2 h-px flex-1 bg-ink-900/10" />}
            </React.Fragment>
          ))}
        </div>

<div className="mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
          {/* Active step */}
          <div className="lg:col-span-2">
            <AnimatePresence mode="wait">
              <motion.div key={step}
                initial={{ opacity: 0, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -8 }}
                transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
                className="glass rounded-2xl p-8 md:p-10">
                {step === 1 && (
                  <>
                    <p className="stamp text-gold-500">— STEP 01</p>
                    <h2 className="mt-2 font-display text-3xl">Tell us who you are.</h2>
                    <div className="mt-6 grid grid-cols-1 gap-5 md:grid-cols-2">
                      <Field label="Full name" value={data.name} onChange={set('name')} required placeholder="Khalid Al-Rashid" />
                      <Field label="Email" type="email" value={data.email} onChange={set('email')} required placeholder="you@email.com" />
                      <Field label="Phone / WhatsApp" type="tel" value={data.phone} onChange={set('phone')} required placeholder="+966 …" />
                      <Field label="Company (optional)" value={data.company} onChange={set('company')} placeholder="Studio / Firm" />
                    </div>
                    <div className="mt-5">
                      <label className="stamp text-ink-700/60">A few words about your project</label>
                      <textarea rows={4} value={data.message} onChange={set('message')}
                        className="mt-2 w-full resize-none border-b border-ink-900/12 bg-transparent py-3 text-ink-900 outline-none transition placeholder:text-ink-700/40 focus:border-gold-400"
                        placeholder="Site, programme, deadline — anything that helps us prepare." />
                    </div>
                  </>
                )}
                {step === 2 && (
                  <>
                    <p className="stamp text-gold-500">— STEP 02</p>
                    <h2 className="mt-2 font-display text-3xl">
                      {isRevit ? 'Pick your instructor & week.' : 'Pick your engineer, date & time.'}
                    </h2>
                    <p className="mt-2 text-sm text-ink-800/70">
                      {isRevit
                        ? 'Courses run Sat — Thu, 17:00 — 21:00 · 3-hour sessions per day · Fridays closed.'
                        : 'Sat — Thu, 17:00 — 21:00 · Fridays closed.'}
                    </p>

{/* Engineer picker */}
                    <p className="mt-6 stamp text-ink-700/60">Meet with</p>
                    <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                      {ENGINEERS.map((eng) => {
                        const active = engineerId === eng.id;
                        return (
                          <button key={eng.id}
                            onClick={() => setEngineerId(eng.id)}
                            className={
                              'group flex items-center gap-3 rounded-xl border p-3 text-left transition ' +
                              (active
                                ? 'border-gold-400 bg-gold-400/10 ring-1 ring-gold-400'
                                : 'border-ink-900/12 bg-white hover:border-gold-400/60')
                            }>
                            <span className="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-bone-100">
                              <img src={eng.img} alt={eng.name} className="h-full w-full object-cover" draggable="false" />
                            </span>
                            <span className="flex flex-col">
                              <span className="font-display text-lg leading-tight text-ink-900">{eng.name}</span>
                              <span className="stamp text-[9px] text-gold-600">{eng.role}</span>
                            </span>
                            {active && <span className="ml-auto stamp text-gold-600">SELECTED</span>}
                          </button>
                        );
                      })}
                    </div>

{isRevit ? (
                      <div className="mt-8">
                        <p className="stamp text-ink-700/60">Choose a course week</p>
                        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
                          {upcomingWeeks(8).map((wk) => {
                            const active = data.week === wk;
                            const booked = isWeekTaken(wk);
                            return (
                              <button key={wk}
                                disabled={booked}
                                title={booked ? 'Already booked' : undefined}
                                onClick={() => set('week')(wk)}
                                className={
                                  'flex items-center justify-between gap-2 rounded-lg border px-4 py-3 text-left text-sm transition ' +
                                  (active
                                    ? 'border-gold-400 bg-gold-400/10 ring-1 ring-gold-400'
                                    : booked
                                    ? 'border-ink-900/8 bg-ink-900/[0.02] text-ink-700/30'
                                    : 'border-ink-900/12 bg-white hover:border-gold-400/60')
                                }>
                                <span className={booked ? 'text-ink-700/40 line-through' : 'text-ink-900'}>{fmtWeekRange(wk)}</span>
                                {booked ? <span className="stamp text-ink-700/40">BOOKED</span> : active && <span className="stamp text-gold-600">SELECTED</span>}
                              </button>
                            );
                          })}
                        </div>
                        {data.week && (
                          <p className="mt-4 text-sm text-ink-800/70">
                            Selected week: <span className="text-gold-600">{fmtWeekRange(data.week)}</span>
                          </p>
                        )}
                      </div>
                    ) : (
                    <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
                      <MiniCalendar value={data.date} onPick={(d) => setData((p) => ({ ...p, date: d, time: '' }))} />
                      <div>
                        <p className="stamp text-ink-700/60">Time slots</p>
                        <div className="mt-3 grid grid-cols-3 gap-2">
                          {TIME_SLOTS.map((t) => {
                            const booked = data.date && isSlotTaken(data.date, t);
                            return (
                            <button key={t}
                              disabled={!data.date || booked}
                              title={booked ? 'Already booked' : undefined}
                              onClick={() => set('time')(t)}
                              className={
                                'rounded-md px-3 py-2 text-sm stamp transition ' +
                                (data.time === t
                                  ? 'bg-gold-400 text-ink-900'
                                  : booked
                                  ? 'border border-ink-900/8 text-ink-700/30 line-through'
                                  : data.date
                                  ? 'border border-ink-900/12 text-ink-800/80 hover:border-gold-400'
                                  : 'border border-ink-900/8 text-ink-700/30')
                              }>
                              {t}
                            </button>
                            );
                          })}
                        </div>
                        {data.date && (
                          <p className="mt-4 text-sm text-ink-800/70">
                            Selected: <span className="text-gold-600">{fmtDate(data.date)}{data.time && ' · ' + data.time}</span>
                          </p>
                        )}
                      </div>
                    </div>
                    )}
                  </>
                )}
                {step === 3 && !isTracked && (
                  <>
                    <p className="stamp text-gold-500">— STEP 03</p>
                    <h2 className="mt-2 font-display text-3xl">Confirm your booking.</h2>
                    <p className="mt-2 text-sm text-ink-800/70">A summary email goes to you and to {team.name}.</p>
                    <div className="mt-6 grid grid-cols-2 gap-y-3 rounded-xl border border-ink-900/10 bg-white p-6">
                      <span className="stamp text-ink-700/60">Service</span><span className="text-ink-900">{service.name}</span>
                      <span className="stamp text-ink-700/60">Date</span><span className="text-ink-900">{fmtDate(data.date)}</span>
                      <span className="stamp text-ink-700/60">Time</span><span className="text-ink-900">{data.time}</span>
                      <span className="stamp text-ink-700/60">With</span><span className="text-ink-900">{team.name}</span>
                      <span className="stamp text-ink-700/60">Name</span><span className="text-ink-900">{data.name}</span>
                      <span className="stamp text-ink-700/60">Email</span><span className="text-ink-900">{data.email}</span>
                      <span className="stamp text-ink-700/60">Phone</span><span className="text-ink-900">{data.phone}</span>
                    </div>
                  </>
                )}
                {step === 3 && isTracked && (
                  <>
                    <p className="stamp text-gold-500">— STEP 03 · PAYMENT</p>
                    <h2 className="mt-2 font-display text-3xl">{isRevit ? 'Secure your seat.' : 'Secure your session.'}</h2>
                    <p className="mt-2 text-sm text-ink-800/70">
                      {pack.label} — {pack.sub}
                    </p>
                    <div className="mt-6 flex items-end justify-between rounded-xl bg-gold-400/15 px-5 py-4">
                      <div>
                        <p className="stamp text-ink-700/70">Total to pay · {pack.label}</p>
                        <p className="mt-1 font-display text-3xl text-ink-900">{fmtSAR(pack.fee)} <span className="text-base">{pack.suffix}</span></p>
                      </div>
                      <p className="stamp text-gold-600">VAT INCLUDED</p>
                    </div>

{/* Payment method picker */}
                    <p className="mt-6 stamp text-ink-700/60">Payment method</p>
                    <div className="mt-3 grid grid-cols-3 gap-2 sm:grid-cols-6">
                      {[
                        { id: 'mada',   label: 'mada' },
                        { id: 'visa',   label: 'VISA' },
                        { id: 'master', label: 'Mastercard' },
                        { id: 'amex',   label: 'AMEX' },
                        { id: 'apple',  label: ' Pay' },
                        { id: 'bank',   label: 'Bank' },
                      ].map((m) => {
                        const active = payMethod === m.id;
                        return (
                          <button key={m.id}
                            onClick={() => setPayMethod(m.id)}
                            className={
                              'group flex h-16 items-center justify-center rounded-lg border transition ' +
                              (active
                                ? 'border-gold-400 bg-gold-400/10 ring-1 ring-gold-400'
                                : 'border-ink-900/10 bg-white hover:border-gold-400/60')
                            }>
                            <PayMark id={m.id} />
                          </button>
                        );
                      })}
                    </div>

{/* Method-specific content */}
                    <div className="mt-6">
                      {isCardMethod && (
                        <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                          <Field label="Cardholder name" value={data.cardName} onChange={set('cardName')} required placeholder="As printed on card" />
                          <Field label="Card number" value={data.card} onChange={(e) => set('card')({ target: { value: e.target.value.replace(/[^0-9 ]/g,'').slice(0,19) } })} required
                            placeholder={
                              payMethod === 'mada'   ? '4464 0000 0000 0000' :
                              payMethod === 'amex'   ? '3700 000000 00000' :
                              payMethod === 'master' ? '5400 0000 0000 0000' :
                                                       '4242 4242 4242 4242'
                            } />
                          <Field label="Expiry (MM/YY)" value={data.exp} onChange={(e) => set('exp')({ target: { value: e.target.value.replace(/[^0-9/]/g,'').slice(0,5) } })} required placeholder="08/27" />
                          <Field label={payMethod === 'amex' ? 'CID (4 digits)' : 'CVV'} type="password" value={data.cvv} onChange={(e) => set('cvv')({ target: { value: e.target.value.replace(/\D/g,'').slice(0,4) } })} required placeholder={payMethod === 'amex' ? '••••' : '•••'} />
                        </div>
                      )}

{payMethod === 'apple' && (
                        <div className="rounded-xl border border-ink-900/10 bg-white p-6 text-center">
                          <PayMark id="apple" className="mx-auto h-8 w-auto" />
                          <p className="mt-3 text-sm text-ink-800/70">
                            Tap <strong>Pay {fmtSAR(pack.fee)} SAR</strong> below — you'll be asked to confirm with Face ID / Touch ID on your Apple device.
                          </p>
                        </div>
                      )}

{payMethod === 'bank' && (
                        <div className="rounded-xl border border-ink-900/10 bg-white p-6">
                          <p className="stamp text-ink-700/60">Bank Transfer · Wire to</p>
                          <div className="mt-3 grid grid-cols-1 gap-2 text-sm md:grid-cols-2">
                            <p className="flex justify-between gap-3 md:col-span-2"><span className="shrink-0 text-ink-700/60">Beneficiary</span><span className="text-right text-ink-900">Abdulkareem Adas and Partners Company for Engineering</span></p>
                            <p className="flex justify-between"><span className="text-ink-700/60">Bank</span><span className="text-ink-900">SNB (Saudi National Bank)</span></p>
                            <p className="flex justify-between"><span className="text-ink-700/60">Account No.</span><span className="font-mono text-ink-900">01400003824808</span></p>
                            <p className="flex justify-between md:col-span-2"><span className="text-ink-700/60">IBAN</span><span className="font-mono text-ink-900">SA59 1000 0001 4000 0382 4808</span></p>
                            <p className="flex justify-between"><span className="text-ink-700/60">SWIFT</span><span className="font-mono text-ink-900">NCBKSAJE</span></p>
                            <p className="flex justify-between"><span className="text-ink-700/60">Reference</span><span className="text-gold-600">ADAS-{(pack.id||'').toUpperCase()}-{(data.name||'').split(' ')[0].toUpperCase()}</span></p>
                          </div>
                          <label className="mt-5 flex items-start gap-2 text-sm text-ink-800/80">
                            <input type="checkbox" checked={bankAck} onChange={(e)=>setBankAck(e.target.checked)}
                              className="mt-0.5 h-4 w-4 accent-gold-500" />
                            I have made the transfer of <strong> {fmtSAR(pack.fee)} SAR </strong> using the above reference. We will verify and confirm by email.
                          </label>
                        </div>
                      )}
                    </div>

<p className="mt-4 text-xs text-ink-700/50">
                      🔒 Test mode — no real charge. In production, a payment gateway (HyperPay / Stripe / Apple Pay) handles the actual transaction.
                    </p>
                  </>
                )}
              </motion.div>
            </AnimatePresence>

{/* Nav buttons */}
            <div className="mt-6 flex items-center justify-between">
              <button
                disabled={step === 1 || busy}
                onClick={() => setStep((s) => s - 1)}
                className="rounded-full border border-ink-900/15 px-6 py-3 stamp text-ink-800 transition disabled:opacity-40 hover:border-gold-400">
                ← Back
              </button>
              {step < 3 ? (
                <button
                  disabled={(step === 1 && !canStep1) || (step === 2 && !canStep2)}
                  onClick={() => setStep((s) => s + 1)}
                  className="magnetic-btn rounded-full bg-gold-400 px-7 py-3 stamp text-ink-900 transition hover:bg-gold-500 hover:text-white disabled:opacity-40 disabled:hover:bg-gold-400 disabled:hover:text-ink-900">
                  Continue →
                </button>
              ) : (
                <button
                  disabled={!canStep3 || busy}
                  onClick={submit}
                  className="magnetic-btn rounded-full bg-gold-400 px-7 py-3 stamp text-ink-900 transition hover:bg-gold-500 hover:text-white disabled:opacity-40">
                  {busy ? (isTracked ? 'PROCESSING PAYMENT…' : 'SENDING…') : (isTracked ? ('PAY ' + fmtSAR(pack.fee) + ' SAR') : 'CONFIRM BOOKING')}
                </button>
              )}
            </div>
          </div>

{/* Summary side panel */}
          <aside className="glass h-fit rounded-2xl p-6">
            <p className="stamp text-gold-500">— BOOKING SUMMARY</p>
            <h3 className="mt-3 font-display text-2xl">{service.name}</h3>
            <p className="mt-1 text-sm italic text-gold-600">{service.blurb}</p>

{isTracked ? (
              /* selectable package list (filtered by chosen track) */
              <div className="mt-5 space-y-2">
                <div className="flex items-center justify-between">
                  <span className="stamp text-gold-600">{trackId === 'student' ? 'STUDENT TRACK' : 'PROFESSIONAL TRACK'}</span>
                  <button onClick={() => { setTrackId(null); setPackId(null); }}
                    className="stamp text-ink-700/60 underline-offset-2 hover:text-gold-600 hover:underline">
                    Change
                  </button>
                </div>
                {packs.map((p) => {
                  const active = p.id === packId;
                  return (
                    <button
                      key={p.id}
                      onClick={() => setPackId(p.id)}
                      className={
                        'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left text-sm transition ' +
                        (active
                          ? 'border-gold-400 bg-gold-400/10 ring-1 ring-gold-400'
                          : 'border-ink-900/10 bg-white hover:border-gold-400/60')
                      }>
                      <span className="flex items-center gap-2">
                        <span className={'grid h-4 w-4 place-items-center rounded-full border ' + (active ? 'border-gold-500 bg-gold-400' : 'border-ink-900/25')}>
                          {active && <span className="block h-1.5 w-1.5 rounded-full bg-ink-900" />}
                        </span>
                        <span className="leading-tight text-ink-900">{p.label}</span>
                      </span>
                      <span className={'stamp shrink-0 ' + (active ? 'text-gold-600' : 'text-ink-700/60')}>
                        {fmtSAR(p.fee)}
                      </span>
                    </button>
                  );
                })}
                <p className="px-1 text-xs text-ink-700/60">{pack.sub}</p>
              </div>
            ) : (
              <ul className="mt-5 space-y-2 text-sm text-ink-800/80">
                {service.points.map((pt) => (
                  <li key={pt} className="flex items-center gap-2">
                    <span className="block h-px w-3 bg-gold-400" />{pt}
                  </li>
                ))}
              </ul>
            )}

<div className="mt-6 border-t border-ink-900/10 pt-5 space-y-2 text-sm">
              <p className="flex justify-between"><span className="stamp text-ink-700/60">With</span><span className="text-ink-900">{team.name}</span></p>
              {isRevit
                ? (data.week && <p className="flex justify-between"><span className="stamp text-ink-700/60">Week</span><span className="text-ink-900">{fmtWeekRange(data.week)}</span></p>)
                : (
                  <>
                    {data.date && <p className="flex justify-between"><span className="stamp text-ink-700/60">Date</span><span className="text-ink-900">{fmtDate(data.date)}</span></p>}
                    {data.time && <p className="flex justify-between"><span className="stamp text-ink-700/60">Time</span><span className="text-ink-900">{data.time}</span></p>}
                  </>
                )}
              {isTracked && (
                <p className="flex justify-between">
                  <span className="stamp text-ink-700/60">Fee</span>
                  <span className="text-ink-900">{fmtSAR(pack.fee)} {pack.suffix}</span>
                </p>
              )}
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function PageSwitcher() {
  const { pathname } = useLocation();
  let Page = HomePage;
  if (pathname === '/about') Page = AboutPage;
  else if (pathname === '/services') Page = ServicesPage;
  else if (pathname === '/projects') Page = ProjectsPage;
  else if (pathname === '/contact') Page = ContactPage;
  else if (pathname.startsWith('/book/')) Page = BookPage;

useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [pathname]);

return (
    <AnimatePresence mode="wait" initial={false}>
      <motion.main key={pathname}
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -10 }}
        transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
        className="relative">
        <CurtainSweep keyId={pathname} />
        <Page />
      </motion.main>
    </AnimatePresence>
  );
}

function CurtainSweep({ keyId }) {
  return (
    <motion.div key={'sweep-' + keyId}
      initial={{ scaleY: 1 }} animate={{ scaleY: 0 }}
      transition={{ duration: 0.85, ease: [0.77, 0, 0.18, 1] }}
      style={{ transformOrigin: 'top' }}
      className="pointer-events-none fixed inset-0 z-[110] bg-white">
      <div className="absolute inset-0 grid place-items-center">
        <svg viewBox="0 0 40 40" className="h-12 w-12 text-gold-300 opacity-80">
          <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
            <path d="M6 32 L20 8 L34 32" />
            <path d="M12 24 L28 24" />
          </g>
        </svg>
      </div>
    </motion.div>
  );
}

/* ============================================================
 *  APP ROOT
 * ==========================================================*/

function AppShell() {
  const [loading, setLoading] = useState(true);
  const [menu, setMenu] = useState(false);
  const [theme, setTheme] = useState('light');

useLayoutEffect(() => {
    const root = document.documentElement;
    if (theme === 'dark') { root.classList.add('dark'); root.classList.remove('light'); }
    else { root.classList.remove('dark'); }
  }, [theme]);

return (
    <ThemeCtx.Provider value={{ theme, setTheme }}>
      <BackgroundGrid />
      <CustomCursor />
      <EasterEgg />

<AnimatePresence>
        {loading && <LoadingScreen onDone={() => setLoading(false)} />}
      </AnimatePresence>

<Navbar onOpenMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} />

<Footer />
      <FloatingActions />
    </ThemeCtx.Provider>
  );
}

function App() {
  return (
    <HashRouter>
      <AppShell />
    </HashRouter>
  );
}

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