/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

// ===== Content =====
const NAV = [
  { id: 'home', label: 'Home' },
  { id: 'workspace', label: 'Workspace' },
  { id: 'cafe', label: 'Café' },
  { id: 'workshops', label: 'Workshops' },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' },
];

const PILLARS = [
  {
    key: 'workspace', kicker: '01', title: 'Workspace',
    body: 'Offices, meeting rooms, studios and pods. No memberships — work how you need to, by the hour or the month.',
    photo: 'media/techarc-03.webp',
  },
  {
    key: 'cafe', kicker: '02', title: 'Café',
    body: 'Specialty coffee, waffles and a bakery counter to fuel the floor. Open to the public — sit, sip, stay.',
    photo: 'media/techarc-07.webp',
  },
  {
    key: 'workshops', kicker: '03', title: 'Workshops & Events',
    body: 'Host talks, classes and corporate events in a creative warehouse space — branded to fit, sized to scale.',
    photo: 'media/stock-12-workshop-session.webp',
  },
  {
    key: 'maker', kicker: '04', title: 'Maker Heritage',
    body: 'Founded as a place for creatives to make things themselves. Equipment access on request — ask the team.',
    photo: 'media/stock-10-maker-design-desk.webp',
    flagged: true,
  },
];

const TIERS = [
  {
    name: 'Offices',
    illo: 'office',
    desc: 'Private & ready offices, with optional screen and the peace & quiet you need.',
    price: 'from AED 40',
    unit: '/ hour',
    note: 'Hourly & daily options. Monthly on enquiry.',
    capacity: 'Offices 1–6',
    badge: 'Verified rate',
    photo: 'media/techarc-01.webp',
  },
  {
    name: 'Meeting Rooms',
    illo: 'meeting',
    desc: 'Conference room — host a last-minute meeting or run a zoom call without the noise.',
    price: 'Enquire',
    unit: '',
    note: 'Hourly bookings. Up to 10 rooms (directory-reported).',
    capacity: 'MR 1–10',
    photo: 'media/stock-03-meeting-room-corridor.webp',
  },
  {
    name: 'Studios',
    illo: 'studio',
    desc: 'Empty by design — bring your equipment and roll. Sized for shoots, classes, brand activations.',
    price: 'Enquire',
    unit: '',
    note: 'Half-day & full-day. Up to 25 studios (directory-reported).',
    capacity: 'Studios 1–25',
    photo: 'media/techarc-06.webp',
  },
  {
    name: 'Pods',
    illo: 'pod',
    desc: 'Make sure you reserve your favorite pod before it’s taken — heads-down work, between meetings.',
    price: 'Enquire',
    unit: '',
    note: 'Pay-as-you-go. 4 pods on the floor (directory-reported).',
    capacity: 'Pods 1–4',
    photo: 'media/techarc-04.webp',
  },
];

const WORKSHOPS = [
  { date: 'Thu · 28 May', tag: 'Design', title: 'Type as a system — practical exercises for brand teams', who: 'Studio guest', spots: '6 spots' },
  { date: 'Sat · 30 May', tag: 'Maker', title: 'Intro to laser cutting & flat-pack thinking', who: 'In-house', spots: 'Waitlist' },
  { date: 'Tue · 02 Jun', tag: 'Talk',   title: 'Building in public — five Dubai founders in conversation', who: 'Community night', spots: 'Free RSVP' },
  { date: 'Thu · 04 Jun', tag: 'Skill',  title: 'AI for non-engineers: shipping your first prototype', who: 'Workshop', spots: '8 spots' },
];

const CAFE_BITES = [
  { name: 'Filter coffee', meta: 'Single origin · rotating', img: 'media/techarc-08.webp' },
  { name: 'Buttermilk waffles', meta: 'Berries, maple, mascarpone', img: 'media/techarc-07.webp' },
  { name: 'Affogato',  meta: 'Espresso poured over gelato', img: 'media/stock-11-cafe-coffee.webp' },
];

// ===== Tiny SVG bits =====
const ArrowRight = ({ s = 18 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="square" />
  </svg>
);

const Plus = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M12 5v14M5 12h14" strokeLinecap="square" />
  </svg>
);

// Isometric-ish tier illustrations — homage to the original site's vector tier graphics, redrawn
const TierIllo = ({ kind }) => {
  const stroke = 'var(--secondary)';
  const fill = 'var(--surface)';
  const accent = 'var(--primary)';
  const hot = 'var(--accent)';
  if (kind === 'office') {
    return (
      <svg viewBox="0 0 120 80" width="100%" height="100%" aria-hidden="true">
        <g fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M20 60 L60 78 L100 60 L60 42 Z" fill={fill} />
          <path d="M20 60 L20 30 L60 12 L100 30 L100 60" fill="#fff" />
          <path d="M60 12 L60 42" />
          <rect x="32" y="34" width="14" height="14" fill={accent} stroke="none" opacity=".85" />
          <rect x="74" y="34" width="14" height="14" fill="#fff" />
          <path d="M74 34 L88 48 M88 34 L74 48" stroke={stroke} strokeWidth=".8" />
          <circle cx="60" cy="58" r="3" fill={hot} stroke="none" />
        </g>
      </svg>
    );
  }
  if (kind === 'meeting') {
    return (
      <svg viewBox="0 0 120 80" width="100%" height="100%" aria-hidden="true">
        <g fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <ellipse cx="60" cy="50" rx="32" ry="12" fill={fill} />
          <ellipse cx="60" cy="46" rx="32" ry="12" fill="#fff" />
          <circle cx="34" cy="36" r="4" fill={accent} stroke="none" />
          <circle cx="60" cy="30" r="4" fill={hot} stroke="none" />
          <circle cx="86" cy="36" r="4" fill={accent} stroke="none" />
          <circle cx="48" cy="60" r="4" fill="#fff" />
          <circle cx="72" cy="60" r="4" fill="#fff" />
          <path d="M60 18 L60 26 M50 22 L70 22" />
        </g>
      </svg>
    );
  }
  if (kind === 'studio') {
    return (
      <svg viewBox="0 0 120 80" width="100%" height="100%" aria-hidden="true">
        <g fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M14 64 L60 78 L106 64 L60 50 Z" fill={fill} />
          <path d="M14 64 L14 18 L60 4 L106 18 L106 64" fill="#fff" />
          <path d="M60 4 L60 50" />
          <rect x="24" y="22" width="22" height="22" fill="#fff" />
          <rect x="76" y="22" width="22" height="22" fill={accent} opacity=".85" stroke="none" />
          <path d="M76 22 L98 44" stroke={stroke} strokeWidth=".8" />
          <circle cx="42" cy="64" r="3" fill={hot} stroke="none" />
        </g>
      </svg>
    );
  }
  // pod
  return (
    <svg viewBox="0 0 120 80" width="100%" height="100%" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
        <path d="M22 64 L60 78 L98 64 L60 50 Z" fill={fill} />
        <path d="M22 64 L22 38 Q22 22 60 14 Q98 22 98 38 L98 64" fill="#fff" />
        <path d="M22 38 Q60 26 98 38" />
        <rect x="46" y="30" width="28" height="20" fill={accent} stroke="none" opacity=".9" />
        <path d="M46 30 L74 50" stroke={stroke} strokeWidth=".8" />
        <circle cx="60" cy="62" r="3" fill={hot} stroke="none" />
      </g>
    </svg>
  );
};

// ===== Logo =====
const Logo = ({ size = 28, light = false }) => {
  const dark = light ? '#fff' : 'var(--text)';
  return (
    <span className="logo" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
        <rect width="48" height="48" rx="10" fill={light ? 'transparent' : 'var(--secondary)'} />
        <circle cx="24" cy="14" r="4.5" fill="var(--accent)" />
        <path d="M10 32 Q24 16 38 32" fill="none" stroke="var(--primary)" strokeWidth="3.2" strokeLinecap="round" />
      </svg>
      <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: dark }}>
        techarc<span style={{ color: 'var(--primary)' }}>.</span>space
      </span>
    </span>
  );
};

// ===== Nav =====
function TopNav({ active, onNav, onBook, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner container">
        <a href="#home" onClick={(e) => { e.preventDefault(); onNav('home'); }} className="nav__logo">
          <Logo />
        </a>
        <nav className="nav__links">
          {NAV.slice(1).map((n) => (
            <a key={n.id} href={`#${n.id}`}
               className={active === n.id ? 'is-active' : ''}
               onClick={(e) => { e.preventDefault(); onNav(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="nav__right">
          <div className="lang">
            {['EN', 'AR'].map(l => (
              <button key={l} className={lang === l ? 'on' : ''} onClick={() => setLang(l)}>{l}</button>
            ))}
          </div>
          <a className="btn btn--ghost" href="tel:+97143311170">+971 4 331 1170</a>
          <button className="btn btn--primary" onClick={onBook}>Book a tour <ArrowRight /></button>
        </div>
      </div>
    </header>
  );
}

// ===== Hero =====
function Hero({ onBook, variant }) {
  // variant: 'split' | 'mono' | 'stack'
  return (
    <section id="home" data-screen-label="01 Home" className={`hero hero--${variant}`}>
      <div className="container hero__grid">
        <div className="hero__copy">
          <div className="eyebrow">
            <span className="dot" /> Warehouse 25 · Alserkal Avenue · Since 2016
          </div>
          <h1 className="display">
            No memberships.<br />
            <span className="display__alt">Just work, </span><em>better.</em>
          </h1>
          <p className="lead">
            Affordable co-working, café and community at Alserkal Avenue, Dubai.
            Offices by the hour. Studios for the day. A floor that meets the way you actually work.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={onBook}>
              Book a tour <ArrowRight />
            </button>
            <a className="btn btn--ghost btn--lg" href="#workspace" onClick={(e) => { e.preventDefault(); document.getElementById('workspace').scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>
              See the floor
            </a>
          </div>
          <div className="hero__meta">
            <div><span className="num">40</span><span className="num__unit">AED/hr</span><span className="num__lbl">Private office, from</span></div>
            <div className="vr" />
            <div><span className="num">9–10</span><span className="num__unit">daily</span><span className="num__lbl">Café & floor*</span></div>
            <div className="vr" />
            <div><span className="num">2016</span><span className="num__unit">est.</span><span className="num__lbl">Alserkal Avenue</span></div>
          </div>
          <div className="hero__footnote">*Public hours per Alserkal Avenue listing — confirm with the team before you visit.</div>
        </div>

        <div className="hero__art">
          <div className="hero__photo hero__photo--lg" style={{ backgroundImage: `url(media/techarc-03.webp)` }}>
            <span className="hero__photo-tag">The floor · Warehouse 25</span>
          </div>
          <div className="hero__photo hero__photo--md" style={{ backgroundImage: `url(media/techarc-04.webp)` }}>
            <span className="hero__photo-tag">Work pods</span>
          </div>
          <div className="hero__photo hero__photo--sm" style={{ backgroundImage: `url(media/techarc-08.webp)` }}>
            <span className="hero__photo-tag">Café counter</span>
          </div>
          <div className="hero__sticker">
            <div className="sticker__top">Productivity<br />meets community.</div>
            <div className="sticker__bot">— since 2016 —</div>
          </div>
        </div>
      </div>

      <div className="marquee" aria-hidden="true">
        <div className="marquee__track">
          {Array.from({ length: 2 }).map((_, k) => (
            <span key={k} className="marquee__row">
              <span>Offices</span><i>✦</i>
              <span>Meeting rooms</span><i>✦</i>
              <span>Studios</span><i>✦</i>
              <span>Pods</span><i>✦</i>
              <span>Café · Coffee · Bakery</span><i>✦</i>
              <span>Workshops &amp; Events</span><i>✦</i>
              <span>Maker community</span><i>✦</i>
              <span>Alserkal Avenue</span><i>✦</i>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Pillars =====
function Pillars({ showMaker }) {
  const items = showMaker ? PILLARS : PILLARS.filter(p => p.key !== 'maker');
  return (
    <section className="pillars container">
      <header className="section-head">
        <div className="eyebrow"><span className="dot" /> What we are</div>
        <h2 className="h2">Four rooms under one roof.</h2>
        <p className="sub">A workspace, a café, a stage for ideas — and a heritage of making things ourselves.</p>
      </header>
      <div className="pillars__grid" style={{ '--cols': items.length === 4 ? 4 : 3 }}>
        {items.map((p) => (
          <article key={p.key} className="pillar">
            <div className="pillar__media" style={{ backgroundImage: `url(${p.photo})` }}>
              <span className="kicker">{p.kicker}</span>
              {p.flagged && <span className="chip chip--warn">Heritage · ask the team</span>}
            </div>
            <div className="pillar__body">
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <a className="link-arrow" href={`#${p.key === 'maker' ? 'about' : p.key}`}
                 onClick={(e) => { e.preventDefault(); const id = p.key === 'maker' ? 'about' : p.key; document.getElementById(id).scrollIntoView({ behavior: 'smooth' }); }}>
                More on {p.title.toLowerCase()} <ArrowRight />
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ===== Workspace =====
function Workspace({ onBook }) {
  const [selected, setSelected] = useState('Offices');
  const tier = TIERS.find(t => t.name === selected);
  return (
    <section id="workspace" data-screen-label="02 Workspace" className="band">
      <div className="container">
        <header className="section-head section-head--row">
          <div>
            <div className="eyebrow"><span className="dot" /> Workspace</div>
            <h2 className="h2">Pick a room. Stay an hour or a year.</h2>
          </div>
          <p className="sub sub--right">
            One verified public rate sits below — every other figure is on enquiry. We’ll match
            you to the space, not the other way around.
          </p>
        </header>

        <div className="tier-tabs">
          {TIERS.map(t => (
            <button key={t.name}
              className={`tier-tab ${selected === t.name ? 'on' : ''}`}
              onClick={() => setSelected(t.name)}>
              <span className="tier-tab__no">0{TIERS.indexOf(t) + 1}</span>
              <span>{t.name}</span>
            </button>
          ))}
        </div>

        <div className="tier-detail">
          <div className="tier-detail__illo">
            <TierIllo kind={tier.illo} />
            <div className="tier-detail__photo" style={{ backgroundImage: `url(${tier.photo})` }} />
          </div>
          <div className="tier-detail__copy">
            {tier.badge && <span className="chip chip--ok">{tier.badge}</span>}
            <h3 className="h3">{tier.name}</h3>
            <p className="lead lead--sm">{tier.desc}</p>
            <div className="tier-detail__meta">
              <div className="meta-row"><span>Price</span><b>{tier.price} <span className="muted">{tier.unit}</span></b></div>
              <div className="meta-row"><span>Capacity</span><b>{tier.capacity}</b></div>
              <div className="meta-row"><span>Booking</span><b>Hourly · daily · monthly</b></div>
              <div className="meta-row"><span>Note</span><b className="muted">{tier.note}</b></div>
            </div>
            <div className="tier-detail__cta">
              <button className="btn btn--primary" onClick={onBook}>Book this {tier.name.toLowerCase().slice(0,-1)}</button>
              <a className="btn btn--ghost" href="mailto:info@supertecharc.com">Email us</a>
            </div>
          </div>
        </div>

        <div className="tier-strip">
          {TIERS.map(t => (
            <div key={t.name} className={`tier-card ${selected === t.name ? 'is-active' : ''}`} onClick={() => setSelected(t.name)}>
              <div className="tier-card__illo"><TierIllo kind={t.illo} /></div>
              <div className="tier-card__head">
                <h4>{t.name}</h4>
                <span className="price">{t.price}{t.unit && <i>{t.unit}</i>}</span>
              </div>
              <p>{t.desc}</p>
              <div className="tier-card__foot">
                <span className="muted">{t.capacity}</span>
                <span className="link-arrow">Open <ArrowRight s={14} /></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Cafe =====
function Cafe() {
  return (
    <section id="cafe" data-screen-label="03 Cafe" className="cafe">
      <div className="container cafe__grid">
        <div className="cafe__copy">
          <div className="eyebrow"><span className="dot" /> Café</div>
          <h2 className="h2">Coffee that earns its place on the floor.</h2>
          <p className="lead lead--sm">
            The café is open to the public — sit, sip, stay. Specialty coffee, fresh bakery,
            and a counter that keeps the floor caffeinated from morning stand-ups to evening
            workshops.
          </p>
          <ul className="kv">
            <li><span>Category</span><b>Café · Coffee · Bakery</b></li>
            <li><span>Hours</span><b>Daily 9 AM – 10 PM*</b></li>
            <li><span>Approx. spend</span><b>AED 110 for two <i className="muted">(per Zomato)</i></b></li>
            <li><span>Sit-in</span><b>Yes — including non-members</b></li>
          </ul>
          <p className="footnote">*Per current Alserkal Avenue listing. Cafe hours may vary from event hours — please confirm before a long visit.</p>
        </div>
        <div className="cafe__menu">
          <div className="menu-head">
            <h3>Today’s counter</h3>
            <span className="muted">A snapshot — full menu on request</span>
          </div>
          <ul className="menu-list">
            {CAFE_BITES.map((b, i) => (
              <li key={i}>
                <div className="menu-photo" style={{ backgroundImage: `url(${b.img})` }} />
                <div className="menu-meta">
                  <h4>{b.name}</h4>
                  <p className="muted">{b.meta}</p>
                </div>
                <span className="menu-num">0{i + 1}</span>
              </li>
            ))}
          </ul>
          <a className="link-arrow" href="mailto:info@supertecharc.com?subject=Cafe menu">Ask for the current menu <ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

// ===== Workshops =====
function Workshops({ onBook }) {
  const [filter, setFilter] = useState('All');
  const tags = ['All', ...Array.from(new Set(WORKSHOPS.map(w => w.tag)))];
  const list = filter === 'All' ? WORKSHOPS : WORKSHOPS.filter(w => w.tag === filter);
  return (
    <section id="workshops" data-screen-label="04 Workshops" className="band band--dark">
      <div className="container">
        <header className="section-head section-head--row">
          <div>
            <div className="eyebrow eyebrow--light"><span className="dot dot--accent" /> Workshops &amp; Events</div>
            <h2 className="h2 h2--light">A stage for talks, classes, and corporate days.</h2>
          </div>
          <p className="sub sub--right sub--light">
            From a fifteen-person workshop to a fully branded launch — the warehouse, the lighting
            and the kit are yours.
          </p>
        </header>

        <div className="tagbar">
          {tags.map(t => (
            <button key={t} className={`tag ${filter === t ? 'on' : ''}`} onClick={() => setFilter(t)}>{t}</button>
          ))}
          <span className="tagbar__hint">Programme is illustrative — confirm with the team.</span>
        </div>

        <ul className="calendar">
          {list.map((w, i) => (
            <li key={i} className="cal-row">
              <span className="cal-date">{w.date}</span>
              <span className={`cal-tag cal-tag--${w.tag.toLowerCase()}`}>{w.tag}</span>
              <h4 className="cal-title">{w.title}</h4>
              <span className="cal-who">{w.who}</span>
              <span className="cal-spots">{w.spots}</span>
              <button className="btn btn--accent btn--sm" onClick={onBook}>RSVP</button>
            </li>
          ))}
        </ul>

        <div className="corp">
          <div>
            <h3 className="h3 h3--light">Bring your team for the day.</h3>
            <p className="sub sub--light">Branded fit-outs, A/V, catering from the café, breakout in the courtyard.</p>
          </div>
          <button className="btn btn--accent" onClick={onBook}>Plan a corporate day <ArrowRight /></button>
        </div>
      </div>
    </section>
  );
}

// ===== About =====
function About() {
  return (
    <section id="about" data-screen-label="05 About" className="about">
      <div className="container about__grid">
        <div className="about__intro">
          <div className="eyebrow"><span className="dot" /> About</div>
          <h2 className="h2">A community designed<br /> to fuel your success.</h2>
        </div>
        <div className="about__body">
          <p className="lead lead--sm">
            Techarc Space was founded in 2016 inside Warehouse 25 at Alserkal Avenue. The concept emerged
            to empower creatives to do the work themselves rather than rely on third-party suppliers — a hub
            for freelancers, startups, students and the wider community to meet, work and learn.
          </p>
          <p className="lead lead--sm">
            We sit inside Dubai’s creative district, surrounded by galleries, studios and makers.
            The brief on day one was simple, and it still is: affordable, flexible, and built around
            the people who actually use it.
          </p>
        </div>
        <div className="about__stats">
          <div><b className="num">2016</b><span>Founded · Warehouse 25</span></div>
          <div><b className="num">4</b><span>Workspace tiers</span></div>
          <div><b className="num">1</b><span>Café · open to all</span></div>
          <div><b className="num">∞</b><span>Hot drinks</span></div>
        </div>
        <div className="about__gallery">
          <div style={{ backgroundImage: `url(media/techarc-05.webp)` }} className="g g--1" />
          <div style={{ backgroundImage: `url(media/techarc-02.webp)` }} className="g g--2" />
          <div style={{ backgroundImage: `url(media/techarc-06.webp)` }} className="g g--3" />
          <div style={{ backgroundImage: `url(media/techarc-08.webp)` }} className="g g--4" />
        </div>
      </div>
    </section>
  );
}

// ===== Contact =====
function Contact({ onBook }) {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section id="contact" data-screen-label="06 Contact" className="contact">
      <div className="container contact__grid">
        <div className="contact__copy">
          <div className="eyebrow"><span className="dot" /> Visit</div>
          <h2 className="h2">Warehouse 25.<br />Alserkal Avenue.</h2>
          <p className="lead lead--sm">
            Walk in for a coffee. Book a tour to see the floor. Email for studios, meeting rooms or a
            corporate day — we’ll come back to you the same working day.
          </p>
          <ul className="contact-list">
            <li><span>Address</span><b>Warehouse 25, Alserkal Avenue, 17th St,<br />Al Quoz Industrial Area 1, Dubai</b></li>
            <li><span>Phone</span><a href="tel:+97143311170">+971 4 331 1170</a></li>
            <li><span>Email</span><a href="mailto:info@supertecharc.com">info@supertecharc.com</a></li>
            <li><span>Hours*</span><b>Daily 9 AM – 10 PM</b><i className="muted">*Per current public listing — confirm before visiting.</i></li>
          </ul>
          <div className="contact__cta">
            <button className="btn btn--primary" onClick={onBook}>Book a tour</button>
            <a className="btn btn--ghost" href="https://www.google.com/maps?q=Warehouse+25,+Alserkal+Avenue,+Al+Quoz+Industrial+Area+1,+Dubai" target="_blank" rel="noreferrer">Open in Maps <ArrowRight /></a>
          </div>
        </div>

        <div className="contact__form">
          <h3 className="h3">Send a quick enquiry</h3>
          <form onSubmit={onSubmit}>
            <label><span>Name</span><input required type="text" placeholder="Your name" /></label>
            <label><span>Email</span><input required type="email" placeholder="you@studio.co" /></label>
            <label className="full"><span>I’m interested in</span>
              <select defaultValue="">
                <option value="" disabled>Pick one</option>
                <option>Tour of the space</option>
                <option>Office — hourly / daily</option>
                <option>Meeting room</option>
                <option>Studio booking</option>
                <option>Pod</option>
                <option>Workshop / event</option>
                <option>Corporate day</option>
              </select>
            </label>
            <label className="full"><span>Tell us a bit more</span>
              <textarea rows="4" placeholder="Team size, dates, anything we should know"></textarea>
            </label>
            <button className="btn btn--primary btn--lg" type="submit">
              {sent ? 'Thanks — we’ll reply soon ✓' : <>Send enquiry <ArrowRight /></>}
            </button>
            <p className="footnote">By sending, you agree we can email you back. No newsletter — promise.</p>
          </form>
        </div>

        <div className="map">
          <iframe
            title="Map — Warehouse 25, Alserkal Avenue, Dubai"
            src="https://www.google.com/maps?q=Warehouse+25,+Alserkal+Avenue,+Al+Quoz+Industrial+Area+1,+Dubai&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
          <div className="map__pin">
            <div className="map__pin-dot" />
            <div>
              <b>Warehouse 25</b>
              <span>Alserkal Avenue · Al Quoz</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__grid">
        <div className="footer__brand">
          <Logo light />
          <p className="muted">Affordable co-working, café and community at Alserkal Avenue, Dubai.</p>
          <div className="footer__social">
            <a href="#" aria-label="Instagram">IG</a>
            <a href="#" aria-label="LinkedIn">In</a>
            <a href="mailto:info@supertecharc.com" aria-label="Email">@</a>
            <a href="tel:+97143311170" aria-label="Phone">☏</a>
          </div>
        </div>
        <div>
          <h5>Visit</h5>
          <p>Warehouse 25<br />Alserkal Avenue, Al Quoz<br />Industrial Area 1, Dubai</p>
        </div>
        <div>
          <h5>Workspace</h5>
          <ul>
            {TIERS.map(t => <li key={t.name}><a href="#workspace">{t.name}</a></li>)}
          </ul>
        </div>
        <div>
          <h5>More</h5>
          <ul>
            <li><a href="#cafe">Café</a></li>
            <li><a href="#workshops">Workshops</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="tel:+97143311170">+971 4 331 1170</a></li>
            <li><a href="mailto:info@supertecharc.com">info@supertecharc.com</a></li>
            <li className="muted">Daily 9 AM – 10 PM*</li>
          </ul>
        </div>
      </div>
      <div className="container footer__base">
        <span>© {new Date().getFullYear()} Techarc Space — Warehouse 25, Alserkal Avenue</span>
        <span className="muted">Prototype layout · Domain to be confirmed before launch.</span>
      </div>
    </footer>
  );
}

// ===== Booking modal =====
function BookingModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({ kind: 'Tour', name: '', email: '', date: '', size: '2' });
  useEffect(() => { if (open) setStep(0); }, [open]);
  if (!open) return null;
  const next = () => setStep(s => Math.min(s + 1, 2));
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__card" onClick={(e) => e.stopPropagation()}>
        <header className="modal__head">
          <div>
            <div className="eyebrow"><span className="dot" /> Book a tour</div>
            <h3 className="h3">Come see Warehouse 25.</h3>
          </div>
          <button className="modal__close" onClick={onClose} aria-label="Close">✕</button>
        </header>
        <div className="modal__steps">
          {['What', 'When', 'Who'].map((s, i) => (
            <div key={s} className={`step ${i === step ? 'on' : ''} ${i < step ? 'done' : ''}`}>
              <span>{i + 1}</span>{s}
            </div>
          ))}
        </div>

        {step === 0 && (
          <div className="modal__body">
            <p className="muted">What are you visiting for? Pick what fits — you can tell us more in a minute.</p>
            <div className="picker">
              {['Tour', 'Office', 'Meeting room', 'Studio', 'Workshop'].map(k => (
                <button key={k} className={form.kind === k ? 'on' : ''} onClick={() => update('kind', k)}>{k}</button>
              ))}
            </div>
            <div className="modal__cta">
              <button className="btn btn--primary" onClick={next}>Continue <ArrowRight /></button>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="modal__body">
            <label><span>Preferred date</span><input type="date" value={form.date} onChange={(e) => update('date', e.target.value)} /></label>
            <label><span>Team size</span>
              <select value={form.size} onChange={(e) => update('size', e.target.value)}>
                <option>1</option><option>2</option><option>3–5</option><option>6–10</option><option>10+</option>
              </select>
            </label>
            <div className="modal__cta">
              <button className="btn btn--ghost" onClick={() => setStep(0)}>Back</button>
              <button className="btn btn--primary" onClick={next}>Continue <ArrowRight /></button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="modal__body">
            <label><span>Name</span><input value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Your name" /></label>
            <label><span>Email</span><input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="you@studio.co" /></label>
            <div className="receipt">
              <div><span>Visiting for</span><b>{form.kind}</b></div>
              <div><span>Date</span><b>{form.date || '—'}</b></div>
              <div><span>Team size</span><b>{form.size}</b></div>
              <div><span>Where</span><b>Warehouse 25 · Alserkal Ave</b></div>
            </div>
            <div className="modal__cta">
              <button className="btn btn--ghost" onClick={() => setStep(1)}>Back</button>
              <button className="btn btn--primary" onClick={() => { onClose(); }}>Confirm visit ✓</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ===== Tweaks =====
function useTweaks(defaults) {
  const [t, setT] = useState(defaults);
  const set = (k, v) => {
    setT(prev => ({ ...prev, [k]: v }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch {}
  };
  return [t, set];
}

function TweaksPanel({ tweaks, set, onClose }) {
  return (
    <aside className="tweaks">
      <header><b>Tweaks</b><button onClick={onClose}>✕</button></header>
      <section>
        <label>Palette</label>
        <div className="swatches">
          {[
            { id: 'teal',   primary: '#1FA0A8', accent: '#E0492F', label: 'Teal · Volt' },
            { id: 'volt',   primary: '#E0492F', accent: '#1FA0A8', label: 'Volt · Teal' },
            { id: 'graphite', primary: '#3C4146', accent: '#E0492F', label: 'Steel · Volt' },
            { id: 'inkblue', primary: '#1B5E8C', accent: '#E0492F', label: 'Ink · Volt' },
          ].map(p => (
            <button key={p.id} onClick={() => set('palette', p)} className={tweaks.palette.id === p.id ? 'on' : ''}>
              <span style={{ background: p.primary }} />
              <span style={{ background: p.accent }} />
              <i>{p.label}</i>
            </button>
          ))}
        </div>
      </section>
      <section>
        <label>Hero layout</label>
        <div className="seg">
          {[{id:'split',l:'Split'},{id:'mono',l:'Mono'},{id:'stack',l:'Stack'}].map(o => (
            <button key={o.id} className={tweaks.hero === o.id ? 'on' : ''} onClick={() => set('hero', o.id)}>{o.l}</button>
          ))}
        </div>
      </section>
      <section>
        <label>Background tone</label>
        <div className="seg">
          {[
            {id:'paper', l:'Paper', bg:'#F6F5F2', surface:'#E4E2DD'},
            {id:'fog',   l:'Fog',   bg:'#EEF1F0', surface:'#DDE3E2'},
            {id:'sand',  l:'Sand',  bg:'#F1ECE2', surface:'#E3DBC8'},
          ].map(o => (
            <button key={o.id} className={tweaks.bg.id === o.id ? 'on' : ''} onClick={() => set('bg', o)}>{o.l}</button>
          ))}
        </div>
      </section>
      <section>
        <label>Display font</label>
        <div className="seg">
          {[{id:'grotesk',l:'Grotesk'},{id:'serif',l:'Editorial'},{id:'mono',l:'Mono'}].map(o => (
            <button key={o.id} className={tweaks.font === o.id ? 'on' : ''} onClick={() => set('font', o.id)}>{o.l}</button>
          ))}
        </div>
      </section>
      <section className="row">
        <label className="toggle">
          <input type="checkbox" checked={tweaks.maker} onChange={(e) => set('maker', e.target.checked)} />
          <span>Show Makerspace pillar</span>
        </label>
      </section>
      <section className="row">
        <label className="toggle">
          <input type="checkbox" checked={tweaks.dense} onChange={(e) => set('dense', e.target.checked)} />
          <span>Denser layout</span>
        </label>
      </section>
    </aside>
  );
}

// ===== App =====
function App() {
  const defaults = /*EDITMODE-BEGIN*/{
    "palette": { "id": "teal", "primary": "#1FA0A8", "accent": "#E0492F", "label": "Teal · Volt" },
    "hero": "split",
    "bg":   { "id": "paper", "l": "Paper", "bg": "#F6F5F2", "surface": "#E4E2DD" },
    "font": "grotesk",
    "maker": true,
    "dense": false
  }/*EDITMODE-END*/;
  const [tweaks, set] = useTweaks(defaults);
  const [tweakOpen, setTweakOpen] = useState(false);
  const [active, setActive] = useState('home');
  const [bookOpen, setBookOpen] = useState(false);
  const [lang, setLang] = useState('EN');

  // Edit-mode handshake
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweakOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweakOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Scroll-spy
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      const visible = entries.filter(en => en.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] });
    NAV.forEach(n => { const el = document.getElementById(n.id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // Theme vars
  const themeStyle = useMemo(() => ({
    '--primary': tweaks.palette.primary,
    '--accent':  tweaks.palette.accent,
    '--bg':      tweaks.bg.bg,
    '--surface': tweaks.bg.surface,
    '--display': tweaks.font === 'serif'
      ? '"Fraunces", Georgia, serif'
      : tweaks.font === 'mono'
        ? '"JetBrains Mono", ui-monospace, monospace'
        : '"Space Grotesk", "Inter Tight", system-ui, sans-serif',
  }), [tweaks]);

  return (
    <div className={`root ${tweaks.dense ? 'is-dense' : ''} ${lang === 'AR' ? 'is-rtl' : ''}`} dir={lang === 'AR' ? 'rtl' : 'ltr'} style={themeStyle}>
      <TopNav active={active} onNav={onNav} onBook={() => setBookOpen(true)} lang={lang} setLang={setLang} />
      <main>
        <Hero variant={tweaks.hero} onBook={() => setBookOpen(true)} />
        <Pillars showMaker={tweaks.maker} />
        <Workspace onBook={() => setBookOpen(true)} />
        <Cafe />
        <Workshops onBook={() => setBookOpen(true)} />
        <About />
        <Contact onBook={() => setBookOpen(true)} />
      </main>
      <Footer />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} />
      {tweakOpen && <TweaksPanel tweaks={tweaks} set={set} onClose={() => {
        setTweakOpen(false);
        try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch {}
      }} />}
    </div>
  );
}

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