/* Skaleup — single-file app (in-browser Babel build). Globals from CDN. */
const { useState, useEffect, useRef, useContext, createContext, StrictMode } = React;
const { createRoot } = ReactDOM;
const { BrowserRouter, Routes, Route, Link, NavLink, useParams, useLocation } = ReactRouterDOM;

// import.meta shim (Vite-only in source)
const import_meta_env = {};

/* ===== lib/api.js ===== */
// Central API client. In dev, Vite proxies /api to the PHP server (see
// vite.config.js). In production the React app and PHP live on the same
// origin, so relative /api paths just work.

const BASE = import_meta_env.VITE_API_URL || '';

async function req(path, { method = 'GET', body, token } = {}) {
  const headers = { 'Content-Type': 'application/json' };
  if (token) headers.Authorization = `Bearer ${token}`;
  const res = await fetch(`${BASE}${path}`, {
    method,
    headers,
    body: body ? JSON.stringify(body) : undefined,
  });
  let json = null;
  try { json = await res.json(); } catch { /* non-JSON */ }
  if (!res.ok) {
    const msg = json?.message || `Request failed (${res.status})`;
    throw Object.assign(new Error(msg), { status: res.status, data: json });
  }
  return json;
}
const api = {
  site:        () => req('/api/site'),
  services:    () => req('/api/public/services'),
  service:     (slug) => req(`/api/public/service/${slug}`),
  industries:  () => req('/api/public/industries'),
  industry:    (slug) => req(`/api/public/industry/${slug}`),
  packages:    () => req('/api/public/packages'),
  package:     (slug) => req(`/api/public/package/${slug}`),
  posts:       () => req('/api/public/posts'),
  post:        (slug) => req(`/api/public/post/${slug}`),
  page:        (slug) => req(`/api/public/page/${slug || '_home'}`),
  lead:        (payload) => req('/api/public/lead', { method: 'POST', body: payload }),
};
var __default_lib_api_js = api;

/* ===== lib/site.jsx ===== */
// ---- generic data-fetch hook ----
function useAsync(fn, deps = []) {
  const [state, setState] = useState({ loading: true, data: null, error: null });
  useEffect(() => {
    let alive = true;
    setState({ loading: true, data: null, error: null });
    Promise.resolve(fn())
      .then((res) => alive && setState({ loading: false, data: res?.data ?? res, error: null }))
      .catch((err) => alive && setState({ loading: false, data: null, error: err }));
    return () => { alive = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
  return state;
}

// ---- global site settings + menus, loaded once ----
const SiteCtx = createContext({ settings: {}, menus: {} });
function SiteProvider({ children }) {
  const [site, setSite] = useState({ settings: {}, menus: {}, ready: false });
  useEffect(() => {
    api.site()
      .then((r) => setSite({ ...(r.data || {}), ready: true }))
      .catch(() => setSite((s) => ({ ...s, ready: true })));
  }, []);
  return <SiteCtx.Provider value={site}>{children}</SiteCtx.Provider>;
}
const useSite = () => useContext(SiteCtx);

/* ===== lib/effects.js ===== */
// Global visual effects that operate on DOM the React pages render.
// Called after each route settles (see App.jsx ScrollManager).
function runGlobalEffects() {
  const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;

  // image-section zoom-in
  document.querySelectorAll('.img-section').forEach((s) => {
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in-view'); }), { threshold: 0.15 });
    io.observe(s);
  });

  // card cursor-glow + tilt
  document.querySelectorAll('.svc,.f-card').forEach((c) => {
    if (c.__glow) return; c.__glow = true;
    c.addEventListener('mousemove', (e) => {
      const r = c.getBoundingClientRect();
      c.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      c.style.setProperty('--my', (e.clientY - r.top) + 'px');
      c.style.setProperty('--ry', (((e.clientX - r.left) / r.width) - 0.5) * 8 + 'deg');
    });
    c.addEventListener('mouseleave', () => c.style.setProperty('--ry', '0deg'));
  });

  if (reduce) return;

  // parallax on image backgrounds
  const layers = [...document.querySelectorAll('.img-section')].map((s) => ({ s, bg: s.querySelector('.img-bg') })).filter((l) => l.bg);
  if (!window.__parallaxBound) {
    window.__parallaxBound = true;
    let tick = false;
    const update = () => {
      const vh = innerHeight;
      document.querySelectorAll('.img-section').forEach((s) => {
        const bg = s.querySelector('.img-bg'); if (!bg) return;
        const r = s.getBoundingClientRect();
        if (r.bottom < 0 || r.top > vh) return;
        let off = -(r.top + r.height / 2 - vh / 2) * 0.12;
        off = Math.max(-90, Math.min(90, off));
        bg.style.setProperty('--py', off.toFixed(1) + 'px');
      });
      tick = false;
    };
    addEventListener('scroll', () => { if (!tick) { tick = true; requestAnimationFrame(update); } }, { passive: true });
  }

  // video fallback / ready
  const vid = document.getElementById('bgv');
  if (vid && !vid.__bound) {
    vid.__bound = true;
    const ready = () => document.documentElement.classList.add('video-ready');
    vid.addEventListener('playing', ready); vid.addEventListener('loadeddata', ready);
    vid.addEventListener('error', () => { vid.style.display = 'none'; });
  }
}

/* ===== components/Motion.jsx ===== */
// Scroll-reveal wrapper — mirrors the original .reveal / .in behaviour.
function Reveal({ children, className = '', tag: Tag = 'div', tilt, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || seen) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [seen]);
  const cls = ['reveal', tilt ? `tilt-${tilt}` : '', seen ? 'in' : '', className].filter(Boolean).join(' ');
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
}
function Loading() {
  return <div className="loading"><span className="spinner" /></div>;
}

// Count-up number, animates when scrolled into view.
function Counter({ to, prefix = '', suffix = '', decimals = 0 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting) return;
      io.disconnect();
      const end = parseFloat(to), start = performance.now(), dur = 1400;
      const step = (t) => {
        const p = Math.min((t - start) / dur, 1);
        setVal(end * (1 - Math.pow(1 - p, 3)));
        if (p < 1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    }, { threshold: 0.6 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <b ref={ref}>{prefix}{decimals ? val.toFixed(decimals) : Math.round(val)}{suffix}</b>;
}

/* ===== components/PageHero.jsx ===== */
// Shared compact page-hero with breadcrumbs.
// crumbs: array of [label, href?] — last item has no href.
function PageHero({ crumbs = [], title, lede }) {
  return (
    <section className="page-hero">
      <div className="wrap">
        <Reveal tag="p" className="crumb">
          {crumbs.map((c, i) => (
            <span key={i}>
              {c[1] ? <Link to={c[1]}>{c[0]}</Link> : c[0]}
              {i < crumbs.length - 1 && <span> &nbsp;/&nbsp; </span>}
            </span>
          ))}
        </Reveal>
        <Reveal tag="h1" dangerouslySetInnerHTML={{ __html: title }} />
        {lede && <Reveal tag="p" dangerouslySetInnerHTML={{ __html: lede }} />}
      </div>
    </section>
  );
}

/* ===== components/Cta.jsx ===== */
function Cta() {
  const { settings: s = {} } = useSite();
  return (
    <div className="cta-band"><div className="wrap">
      <Reveal className="cta-box">
        <p className="tag">Get started</p>
        <h2>Let's turn this into your next growth curve.</h2>
        <p>Book a free consultation and we'll map the first 90 days — no obligation.</p>
        <div className="cta-row">
          <Link className="btn btn-dark" to="/contact">Book Consultation <i>↗</i></Link>
          <a className="mail" href={`mailto:${s.contact_email || 'hello@skaleup.consultant'}`}>{s.contact_email || 'hello@skaleup.consultant'}</a>
        </div>
      </Reveal>
    </div></div>
  );
}

/* ===== components/Forms.jsx ===== */
function useLeadForm(source) {
  const [status, setStatus] = useState('idle'); // idle | sending | ok | error
  const [error, setError] = useState('');
  async function submit(payload) {
    setStatus('sending'); setError('');
    try {
      await api.lead({ ...payload, source, page_url: location.pathname });
      setStatus('ok');
    } catch (e) {
      setStatus('error');
      setError(e.message || 'Something went wrong.');
    }
  }
  return { status, error, submit };
}

// Compact hero "Get Started" quote form
function QuoteForm() {
  const { status, error, submit } = useLeadForm('quote');
  function onSubmit(e) {
    e.preventDefault();
    const f = e.target;
    submit({
      name: f.qn.value, email: f.qe.value, phone: f.qp.value,
      service: f.qs.value, budget: f.qb.value,
    });
  }
  return (
    <div className="quote-card reveal tilt-r in">
      <h3>Get Started</h3>
      <p>Tell us the basics. A senior strategist replies within 4 hours.</p>
      <form onSubmit={onSubmit}>
        <div className="field"><label htmlFor="qn">Your name</label><input id="qn" name="qn" type="text" placeholder="Aarav Sharma" required /></div>
        <div className="field-row">
          <div className="field"><label htmlFor="qe">Work email</label><input id="qe" name="qe" type="email" placeholder="you@company.com" required /></div>
          <div className="field"><label htmlFor="qp">Phone</label><input id="qp" name="qp" type="tel" placeholder="+91 00000 00000" /></div>
        </div>
        <div className="field-row">
          <div className="field"><label htmlFor="qs">Solution</label>
            <select id="qs" name="qs" required defaultValue=""><option value="" disabled>Select one</option>
              <option>SEO</option><option>Advanced SEO</option><option>Digital Marketing</option><option>Web Design &amp; Development</option><option>Virtual Assistant</option></select></div>
          <div className="field"><label htmlFor="qb">Monthly budget</label>
            <select id="qb" name="qb" required defaultValue=""><option value="" disabled>Select range</option>
              <option>Under ₹2L</option><option>₹2L – ₹5L</option><option>₹5L – ₹15L</option><option>₹15L+</option></select></div>
        </div>
        <button className="btn btn-grad" type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending…' : <>Book Consultation <i>↗</i></>}
        </button>
        <p className="form-note">No spam. No sales sequence. Just a real answer.</p>
        {status === 'ok' && <div className="form-ok show">✓ Got it. We'll be in touch within 4 hours.</div>}
        {status === 'error' && <div className="form-ok show" style={{ color: 'var(--ember)' }}>{error}</div>}
      </form>
    </div>
  );
}

// Full contact form
function ContactForm() {
  const { status, error, submit } = useLeadForm('contact');
  const [services, setServices] = useState([]);
  const toggle = (s) => setServices((cur) => cur.includes(s) ? cur.filter((x) => x !== s) : [...cur, s]);
  function onSubmit(e) {
    e.preventDefault();
    const f = e.target;
    submit({
      name: f.cn.value, company: f.cc.value, email: f.ce.value, phone: f.cp.value,
      service: services.join(', '), budget: f.cb.value, timeline: f.ct.value, message: f.cm.value,
    });
  }
  const opts = ['SEO', 'Advanced SEO', 'Digital Marketing', 'Web Design', 'Virtual Assistant', 'Not sure yet'];
  return (
    <div className="contact-form reveal tilt-r in">
      <h3>Start a project</h3>
      <p>The more you tell us, the sharper the first call will be.</p>
      <form onSubmit={onSubmit}>
        <div className="field-row">
          <div className="field"><label htmlFor="cn">Full name</label><input id="cn" name="cn" type="text" placeholder="Aarav Sharma" required /></div>
          <div className="field"><label htmlFor="cc">Company</label><input id="cc" name="cc" type="text" placeholder="Northwind Labs" required /></div>
        </div>
        <div className="field-row">
          <div className="field"><label htmlFor="ce">Work email</label><input id="ce" name="ce" type="email" placeholder="you@company.com" required /></div>
          <div className="field"><label htmlFor="cp">Phone</label><input id="cp" name="cp" type="tel" placeholder="+91 00000 00000" /></div>
        </div>
        <div className="field">
          <label>What do you need help with?</label>
          <div className="chips">
            {opts.map((o) => (
              <label key={o} className={services.includes(o) ? 'on' : ''} onClick={() => toggle(o)}>{o}</label>
            ))}
          </div>
        </div>
        <div className="field-row">
          <div className="field"><label htmlFor="cb">Monthly budget</label>
            <select id="cb" name="cb" required defaultValue=""><option value="" disabled>Select range</option>
              <option>Under ₹2L</option><option>₹2L – ₹5L</option><option>₹5L – ₹15L</option><option>₹15L+</option></select></div>
          <div className="field"><label htmlFor="ct">Timeline</label>
            <select id="ct" name="ct" required defaultValue=""><option value="" disabled>Select one</option>
              <option>Starting now</option><option>Within a month</option><option>This quarter</option><option>Just exploring</option></select></div>
        </div>
        <div className="field"><label htmlFor="cm">Project details</label><textarea id="cm" name="cm" placeholder="Where are you today, and what does winning look like in 12 months?" /></div>
        <button className="btn btn-grad" type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending…' : <>Send the brief <i>↗</i></>}
        </button>
        <p className="form-note">We'll never share your details. Unsubscribe anytime.</p>
        {status === 'ok' && <div className="form-ok show">✓ Brief received. A strategist will reach out within 4 hours.</div>}
        {status === 'error' && <div className="form-ok show" style={{ color: 'var(--ember)' }}>{error}</div>}
      </form>
    </div>
  );
}

/* ===== components/Header.jsx ===== */
function Header() {
  const { settings, menus } = useSite();
  const [stuck, setStuck] = useState(false);
  const [open, setOpen] = useState(false);
  const header = menus?.header || [];

  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 40);
    addEventListener('scroll', onScroll);
    return () => removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.classList.toggle('no-scroll', open);
  }, [open]);

  return (
    <>
      <header id="hdr" className={stuck ? 'stuck' : ''}>
        <div className="wrap nav">
          <Link className="logo" to="/" aria-label="Skaleup home">
            <img src="/assets/logo.webp" alt="Skaleup" className="logo-img" />
            <span>.consultants</span>
          </Link>
          <nav>
            <ul className="menu">
              {header.map((item) => (
                <li key={item.id} className={item.children ? 'has-sub' : ''}>
                  {item.children ? (
                    <>
                      <a href="javascript:void(0)">{item.label}</a>
                      <ul className="submenu">
                        {item.children.map((c) => (
                          <li key={c.id}><Link to={c.url}>{c.label}</Link></li>
                        ))}
                      </ul>
                    </>
                  ) : (
                    <NavLink to={item.url} end={item.url === '/'}>{item.label}</NavLink>
                  )}
                </li>
              ))}
            </ul>
          </nav>
          <Link className="btn btn-grad" to="/contact">Get Consultation <i>↗</i></Link>
          <button className="burger" aria-label="Open menu" onClick={() => setOpen(true)}>☰</button>
        </div>
      </header>

      <div className={`menu-panel${open ? ' open' : ''}`}>
        <button className="menu-close" aria-label="Close menu" onClick={() => setOpen(false)}>✕</button>
        <ul>
          {header.map((item) => item.children ? (
            <li key={item.id}>
              <span className="grp">{item.label}</span>
              <ul className="sub">
                {item.children.map((c) => (
                  <li key={c.id}><Link to={c.url} onClick={() => setOpen(false)}>{c.label}</Link></li>
                ))}
              </ul>
            </li>
          ) : (
            <li key={item.id}><Link to={item.url} onClick={() => setOpen(false)}>{item.label}</Link></li>
          ))}
        </ul>
        <Link className="btn btn-grad" to="/contact" onClick={() => setOpen(false)}>Get Consultation <i>↗</i></Link>
      </div>
    </>
  );
}

/* ===== components/Footer.jsx ===== */
function Footer() {
  const { settings: s = {} } = useSite();
  return (
    <footer>
      <div className="f-aurora" />
      <div className="f-grid-lines" />
      <div className="wrap">
        <div className="f-top">
          <div className="f-word">SKALEUP</div>
          <div className="f-word-sub">
            <span>{s.tagline || 'Full-service digital marketing'}</span>
            <span>{s.footer_locations || 'Est. 2018 · Lucknow · Bengaluru · Dubai'}</span>
          </div>
        </div>
        <div className="f-mid">
          <div className="f-brand">
            <Link className="logo" to="/" aria-label="Skaleup home">
              <img src="/assets/logo.webp" alt="Skaleup" className="logo-img" /><span>.consultants</span>
            </Link>
            <p>{s.footer_note || 'Growth engineering for ambitious brands.'}</p>
          </div>
          <div className="f-col"><h5>Services</h5><ul>
            <li><Link to="/service/seo">SEO</Link></li>
            <li><Link to="/service/advanced-seo">Advanced SEO</Link></li>
            <li><Link to="/service/digital-marketing">Digital Marketing</Link></li>
            <li><Link to="/service/web-design">Web Design</Link></li>
            <li><Link to="/service/virtual-assistant">Virtual Assistant</Link></li>
          </ul></div>
          <div className="f-col"><h5>Industries</h5><ul>
            <li><Link to="/industry/healthcare">Healthcare</Link></li>
            <li><Link to="/industry/real-estate">Real Estate</Link></li>
            <li><Link to="/industry/ecommerce">Ecommerce</Link></li>
            <li><Link to="/about">About Us</Link></li>
            <li><Link to="/blog">Blog</Link></li>
          </ul></div>
          <div className="f-col"><h5>Packages</h5><ul>
            <li><Link to="/package/basic">Basic</Link></li>
            <li><Link to="/package/pro">Pro</Link></li>
            <li><Link to="/package/industry">Industry</Link></li>
          </ul></div>
          <div className="f-col"><h5>Contact</h5><ul>
            <li><a href={`mailto:${s.contact_email || 'hello@skaleup.consultant'}`}>{s.contact_email || 'hello@skaleup.consultant'}</a></li>
            <li><a href={`tel:${(s.contact_phone || '').replace(/\s/g, '')}`}>{s.contact_phone || '+91 522 000 0000'}</a></li>
            <li><Link to="/contact">{s.contact_address || 'Gomti Nagar, Lucknow'}</Link></li>
            <li><Link to="/contact">Get Consultation ↗</Link></li>
          </ul></div>
        </div>
        <div className="f-strip">
          <div className="f-card"><span>Response time</span><b>Under 4 hours</b><small>Every enquiry gets a senior strategist, not a bot.</small></div>
          <div className="f-card"><span>Engagements</span><b>90-day sprints</b><small>No 12-month lock-ins. Earn the renewal every quarter.</small></div>
          <div className="f-card"><span>Currently</span><b>Taking 3 clients for Q4</b><small>Onboarding closes when the pods are full.</small></div>
        </div>
        <div className="f-bottom">
          <p>{s.copyright || '© 2026 Skaleup Consultants. All rights reserved.'}</p>
          <div className="f-legal">
            <Link to="/privacy">Privacy</Link><Link to="/terms">Terms</Link>
            <Link to="/privacy">Cookies</Link><Link to="/contact">Accessibility</Link>
          </div>
          <div className="socials">
            <a href={s.social_linkedin || '#'} aria-label="LinkedIn">in</a>
            <a href={s.social_x || '#'} aria-label="X">X</a>
            <a href={s.social_instagram || '#'} aria-label="Instagram">ig</a>
            <a href={s.social_youtube || '#'} aria-label="YouTube">yt</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ===== pages/Home.jsx ===== */
function Home() {
  const { settings: s = {} } = useSite();
  const services = useAsync(() => api.services(), []);

  useEffect(() => {
    document.title = 'Skaleup Consultants — Solution-driven digital growth';
  }, []);

  return (
    <>
      {/* HERO */}
      <section className="vhero">
        <div className="v-bg">
          <video id="bgv" autoPlay muted loop playsInline preload="metadata" poster="/assets/hero-poster.jpg">
            <source src="/assets/hero.mp4" type="video/mp4" />
          </video>
          <div className="v-fallback" />
        </div>
        <div className="v-overlay" />
        <div className="v-scan" />
        <div className="wrap v-split">
          <div>
            <Reveal className="eyebrow" tag="div"><b></b>{s.tagline || 'Full-service digital marketing'}</Reveal>
            <Reveal tag="h1">{s.hero_title || 'Solutions that make brands impossible to ignore.'}</Reveal>
            <Reveal tag="p" className="lede">{s.hero_lede}</Reveal>
            <Reveal className="hero-cta" tag="div" style={{ marginBottom: 0 }}>
              <Link className="btn btn-grad" to="/contact">Book Consultation <i>↗</i></Link>
              <a className="btn btn-ghost" href="#solutions"><span className="play">▶</span> Explore solutions</a>
            </Reveal>
          </div>
          <QuoteForm />
        </div>
      </section>

      {/* STATS */}
      <section className="img-section" id="stats-band" style={{ padding: '110px 0' }}>
        <div className="img-bg bg-office" /><div className="img-ov" /><div className="img-noise" />
        <div className="wrap">
          <Reveal tag="p" className="tag" style={{ textAlign: 'center' }}>By the numbers</Reveal>
          <Reveal tag="h2" style={{ textAlign: 'center' }}>Growth you can <span className="grad">audit.</span></Reveal>
          <div className="metric-row">
            <Reveal className="metric"><Counter to={s.stat_roas || 5.8} suffix="x" decimals={1} /><span>Average blended return on ad spend</span></Reveal>
            <Reveal className="metric"><Counter to={s.stat_pipeline || 212} suffix="%" /><span>Median pipeline growth in year one</span></Reveal>
            <Reveal className="metric"><Counter to={s.stat_brands || 140} suffix="+" /><span>Brands scaled since 2018</span></Reveal>
            <Reveal className="metric"><Counter to={s.stat_media || 46} prefix="$" suffix="M" /><span>Media managed annually for clients</span></Reveal>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee-wrap">
        <p className="mq-label">Trusted by teams shipping to millions</p>
        <div className="marquee">
          {['NORTHWIND','LUMEN.','OCTAVE','FIELDNOTES','AURORA°','PIXELWORKS','MERIDIAN','STACKHOUSE',
            'NORTHWIND','LUMEN.','OCTAVE','FIELDNOTES','AURORA°','PIXELWORKS','MERIDIAN','STACKHOUSE'].map((n, i) => <p key={i}>{n}</p>)}
        </div>
      </div>

      {/* ABOUT */}
      <section id="about" style={{ padding: '120px 0' }}>
        <div className="wrap split">
          <Reveal tilt="l">
            <p className="tag">About Skaleup</p>
            <h2>A growth partner, <span className="grad">not a vendor.</span></h2>
            <p style={{ color: 'var(--mute)', fontSize: '15.5px', marginTop: 20, lineHeight: 1.75 }}>
              Since 2018 we've helped ambitious brands treat marketing as an engineered system rather than a series of one-off campaigns. Our mission is simple: turn every rupee of spend into attributable, compounding growth.
            </p>
            <ul className="checks" style={{ marginTop: 26 }}>
              <li><em>✓</em>Senior strategists on every account — no junior handoffs</li>
              <li><em>✓</em>Solutions mapped to business outcomes, not deliverables</li>
              <li><em>✓</em>Transparent reporting and full-funnel attribution</li>
            </ul>
            <Link className="btn btn-ghost" to="/about" style={{ marginTop: 26 }}>More about us <i>↗</i></Link>
          </Reveal>
          <Reveal tilt="r" style={{ position: 'relative' }}>
            <div className="frame frame-img"><div className="glowline" /></div>
            <div className="chip a"><b>42</b><span>Experts on your team</span></div>
            <div className="chip b"><b>+312%</b><span>ROAS in 90 days</span></div>
          </Reveal>
        </div>
      </section>

      {/* SOLUTIONS — dynamic from API */}
      <section id="solutions" style={{ padding: '20px 0 120px' }}>
        <div className="wrap">
          <div className="head-split">
            <Reveal><p className="tag">Solutions</p><h2>Services, framed as <span className="grad">business outcomes.</span></h2></Reveal>
            <Reveal tag="p">Every engagement starts with the problem you're solving — then we bring the right mix of search, media, design and technology to solve it.</Reveal>
          </div>
          <div className="grid-4">
            {(services.data || []).map((svc, i) => (
              <Reveal key={svc.slug} tag={Link} className="svc" to={`/service/${svc.slug}`}>
                <div className="svc-ico" dangerouslySetInnerHTML={{ __html: svc.icon || '◈' }} />
                <h3>{svc.name}</h3>
                <p>{svc.tagline}</p>
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section id="process" className="img-section">
        <div className="img-bg bg-workshop" /><div className="img-ov left" /><div className="img-noise" />
        <div className="wrap">
          <Reveal style={{ marginBottom: 48 }}><p className="tag">Process</p><h2>A 90-day sprint into<br /><span className="grad">compounding growth.</span></h2></Reveal>
          <div className="steps">
            {[['01','Discover','Deep audit of brand, funnel, data and competition to find the real levers.'],
              ['02','Strategy','A 90-day blueprint with clear KPIs, channels and creative direction.'],
              ['03','Execute','Cross-functional pods ship campaigns and experiments weekly.'],
              ['04','Scale',"Double down on what works, cut what doesn't, unlock the next curve."]].map(([n, h, p]) => (
              <Reveal key={n} className="step"><b>{n}</b><h4>{h}</h4><p>{p}</p></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact-section" className="img-section">
        <div className="img-bg bg-desk" /><div className="img-ov" /><div className="img-noise" />
        <div className="wrap contact-grid">
          <Reveal className="c-info" tilt="l">
            <p className="tag">Contact</p>
            <h2>Tell us where you<br />want to <span className="grad">go next.</span></h2>
            <p>Send us the brief — or just the problem. We'll come back with an honest read on whether we're the right partner, and what the first 90 days would look like.</p>
            <ul className="c-list">
              <li><h5>Email</h5><a href={`mailto:${s.contact_email}`}>{s.contact_email}</a></li>
              <li><h5>Phone</h5><a href={`tel:${(s.contact_phone||'').replace(/\s/g,'')}`}>{s.contact_phone}</a></li>
              <li><h5>Studio</h5><p>{s.contact_address}</p></li>
              <li><h5>New business</h5><a href={`mailto:${s.newbiz_email}`}>{s.newbiz_email}</a></li>
            </ul>
            <p className="c-hours"><i></i>{s.office_hours}</p>
          </Reveal>
          <ContactForm />
        </div>
      </section>

      {/* CTA */}
      <div className="cta-band"><div className="wrap">
        <Reveal className="cta-box">
          <p className="tag">Let's build</p>
          <h2>Ready to become the brand your category can't ignore?</h2>
          <p>Tell us where you want to go. We'll build the roadmap, the creative and the growth engine to get you there.</p>
          <div className="cta-row">
            <Link className="btn btn-dark" to="/contact">Book a discovery call <i>↗</i></Link>
            <a className="mail" href={`mailto:${s.contact_email}`}>{s.contact_email}</a>
          </div>
        </Reveal>
      </div></div>
    </>
  );
}

/* ===== pages/Service.jsx ===== */
function Service() {
  const { slug } = useParams();
  const { data: s, loading, error } = useAsync(() => api.service(slug), [slug]);
  useEffect(() => { if (s) document.title = `${s.name} — Skaleup Consultants`; }, [s]);

  if (loading) return <Loading />;
  if (error || !s) return <NotFound />;

  return (
    <>
      <PageHero crumbs={[['Home','/'],['Services','/#solutions'],[s.name]]} title={s.name} lede={s.tagline} />

      <section className="prose-section"><div className="wrap"><Reveal className="prose">
        <h2>The problem</h2><p>{s.problem}</p>
        <h2>Our solution</h2><p>{s.solution}</p>
      </Reveal></div></section>

      {!!(s.benefits || []).length && (
        <section style={{ padding: '20px 0 90px' }}><div className="wrap">
          <Reveal style={{ marginBottom: 26, textAlign: 'center' }}><p className="tag">Key benefits</p><h2>What you get</h2></Reveal>
          <div className="bene">
            {s.benefits.map((b, i) => (
              <Reveal key={i} className="b-card">
                <div className="ic" dangerouslySetInnerHTML={{ __html: b.icon || b[0] || '◈' }} />
                <h4>{b.title || b[1]}</h4><p>{b.text || b[2]}</p>
              </Reveal>
            ))}
          </div>
        </div></section>
      )}

      {!!(s.workflow || []).length && (
        <section className="img-section" style={{ padding: '100px 0' }}>
          <div className="img-bg bg-office" /><div className="img-ov" /><div className="img-noise" />
          <div className="wrap">
            <Reveal style={{ marginBottom: 10 }}><p className="tag">How we work</p><h2>Process &amp; workflow</h2></Reveal>
            <div className="flow">
              {s.workflow.map((w, i) => (
                <Reveal key={i} className="step"><b>{String(i + 1).padStart(2, '0')}</b><h4>{w.title || w[0]}</h4><p>{w.text || w[1]}</p></Reveal>
              ))}
            </div>
          </div>
        </section>
      )}
      <Cta />
    </>
  );
}
function NotFound() {
  return (
    <section className="page-hero"><div className="wrap">
      <p className="crumb"><Link to="/">Home</Link></p>
      <h1>Not found</h1>
      <p>That page doesn't exist. <Link to="/" style={{ color: 'var(--ember)' }}>Back home →</Link></p>
    </div></section>
  );
}

/* ===== pages/Industry.jsx ===== */
function Industry() {
  const { slug } = useParams();
  const { data: i, loading, error } = useAsync(() => api.industry(slug), [slug]);
  useEffect(() => { if (i) document.title = `${i.name} Marketing — Skaleup Consultants`; }, [i]);
  if (loading) return <Loading />;
  if (error || !i) return <NotFound />;
  return (
    <>
      <PageHero crumbs={[['Home','/'],['Industries','/#solutions'],[i.name]]} title={i.name} lede={i.tagline} />
      <section className="prose-section"><div className="wrap"><Reveal className="prose">
        <h2>Industry challenges</h2>
        <ul>{(i.challenges||[]).map((c,x)=><li key={x}><em>✓</em>{c}</li>)}</ul>
        <h2>Tailored solutions</h2>
        <ul>{(i.solutions||[]).map((c,x)=><li key={x}><em>✓</em>{c}</li>)}</ul>
        <h3>Our approach</h3><p>{i.approach}</p>
      </Reveal></div></section>
      <Cta />
    </>
  );
}

/* ===== pages/Package.jsx ===== */
function Package() {
  const { slug } = useParams();
  const { data: pk, loading, error } = useAsync(() => api.package(slug), [slug]);
  const all = useAsync(() => api.packages(), []);
  useEffect(() => { if (pk) document.title = `${pk.name} Package — Skaleup Consultants`; }, [pk]);
  if (loading) return <Loading />;
  if (error || !pk) return <NotFound />;
  const others = (all.data || []).filter(p => p.slug !== slug);
  return (
    <>
      <PageHero crumbs={[['Home','/'],['Packages','/#solutions'],[`${pk.name} package`]]} title={`${pk.name} package`} lede={pk.description} />
      <section className="prose-section"><div className="wrap" style={{ maxWidth: 640 }}>
        <Reveal className={`price-card${pk.is_featured==1?' featured':''}`} style={{ margin: '0 auto' }}>
          <div className="p-name">{pk.name}</div>
          <div className="p-price" dangerouslySetInnerHTML={{ __html: `${pk.price}<small>${pk.period||''}</small>` }} />
          <p className="p-desc">{pk.description}</p>
          <ul>{(pk.features||[]).map((f,x)=><li key={x}><em>✓</em>{f}</li>)}</ul>
          <Link className="btn btn-grad" to="/contact">Get started <i>↗</i></Link>
        </Reveal>
      </div></section>
      {!!others.length && (
        <section style={{ padding: '0 0 100px' }}><div className="wrap">
          <Reveal style={{ textAlign: 'center', marginBottom: 26 }}><p className="tag">Compare</p><h2>Other packages</h2></Reveal>
          <div className="price-grid" style={{ maxWidth: 700, margin: '0 auto', gridTemplateColumns: '1fr 1fr' }}>
            {others.map(o => (
              <Link key={o.slug} className={`price-card${o.is_featured==1?' featured':''}`} to={`/package/${o.slug}`} style={{ textAlign: 'center', justifyContent: 'center' }}>
                <div className="p-name">{o.name}</div><p className="p-desc" style={{ margin: 0 }}>View plan ↗</p>
              </Link>
            ))}
          </div>
        </div></section>
      )}
      <Cta />
    </>
  );
}

/* ===== pages/Blog.jsx ===== */
function Blog() {
  const { data: posts, loading } = useAsync(() => api.posts(), []);
  useEffect(() => { document.title = 'Blog — Skaleup Consultants'; }, []);
  return (
    <>
      <PageHero crumbs={[['Home','/'],['Blog']]} title="Field notes on <span class='grad'>engineered growth.</span>"
        lede="Practical playbooks on SEO, paid media, CRO and the operating systems behind predictable growth." />
      <section className="prose-section"><div className="wrap">
        {loading ? <Loading /> : (
          <div className="blog-grid">
            {(posts || []).map((p) => (
              <Reveal key={p.slug} tag={Link} className="post" to={`/blog/${p.slug}`}>
                <div className="p-thumb"><div /></div>
                <div className="p-body">
                  <span className="p-cat">{p.category || 'Article'}</span>
                  <h3>{p.title}</h3><p>{p.excerpt}</p>
                  <span className="p-meta">{p.reading_time} min read</span>
                </div>
              </Reveal>
            ))}
          </div>
        )}
      </div></section>
      <Cta />
    </>
  );
}

/* ===== pages/BlogPost.jsx ===== */
function BlogPost() {
  const { slug } = useParams();
  const { data: post, loading, error } = useAsync(() => api.post(slug), [slug]);
  useEffect(() => { if (post) document.title = `${post.title} — Skaleup Blog`; }, [post]);
  if (loading) return <Loading />;
  if (error || !post) return <NotFound />;
  return (
    <>
      <PageHero crumbs={[['Home','/'],['Blog','/blog'],['Article']]} title={post.title} lede={post.excerpt} />
      <section className="prose-section"><div className="wrap"><Reveal className="prose">
        <p className="p-meta" style={{ color: 'var(--mute)', fontSize: 12, marginBottom: 24 }}>
          {post.author ? `By ${post.author} · ` : ''}{post.category || ''} · {post.reading_time} min read
        </p>
        <div dangerouslySetInnerHTML={{ __html: post.body || '' }} />
      </Reveal></div></section>
      <Cta />
    </>
  );
}

/* ===== pages/About.jsx ===== */
function About() {
  useEffect(() => { document.title = 'About Us — Skaleup Consultants'; }, []);
  return (
    <>
      <PageHero crumbs={[['Home','/'],['About Us']]} title="We engineer growth, <span class='grad'>not guesswork.</span>"
        lede="Skaleup Consultants is a full-service digital growth partner for ambitious brands across healthcare, real estate and ecommerce." />
      <section className="prose-section"><div className="wrap"><Reveal className="prose">
        <h2>Who we are</h2>
        <p>Founded in 2018, Skaleup Consultants brings together strategists, creatives, media buyers, engineers and analysts under one roof. We exist to make marketing accountable — every campaign instrumented, every rupee attributed, every insight turned into the next experiment.</p>
        <h3>Our mission</h3>
        <p>To help ambitious brands grow predictably by treating marketing as an engineered system rather than a cost centre. We position every service as a solution to a specific business problem.</p>
        <h3>Our vision</h3>
        <p>A world where every growing business has access to senior, outcome-obsessed marketing talent — without the overhead of building it all in-house.</p>
        <h3>Our values</h3>
        <ul>
          <li><em>✓</em>Outcomes over output — we measure success in pipeline and revenue, not deliverables.</li>
          <li><em>✓</em>Radical transparency — you see the same dashboards we do.</li>
          <li><em>✓</em>Senior by default — no junior handoffs on strategy.</li>
          <li><em>✓</em>Compounding, not spikes — we build engines that keep paying off.</li>
        </ul>
      </Reveal></div></section>
      <Cta />
    </>
  );
}

/* ===== pages/Contact.jsx ===== */
function Contact() {
  const { settings: s = {} } = useSite();
  useEffect(() => { document.title = 'Contact — Skaleup Consultants'; }, []);
  return (
    <>
      <PageHero crumbs={[['Home','/'],['Contact']]} title="Tell us where you<br>want to <span class='grad'>go next.</span>"
        lede="Send the brief — or just the problem. We'll come back with an honest read within 4 hours." />
      <section className="prose-section"><div className="wrap"><div className="contact-page">
        <Reveal className="c-info" tilt="l">
          <ul className="c-list">
            <li><h5>Email</h5><a href={`mailto:${s.contact_email}`}>{s.contact_email}</a></li>
            <li><h5>Phone</h5><a href={`tel:${(s.contact_phone||'').replace(/\s/g,'')}`}>{s.contact_phone}</a></li>
            <li><h5>Studio</h5><p>{s.contact_address}</p></li>
            <li><h5>New business</h5><a href={`mailto:${s.newbiz_email}`}>{s.newbiz_email}</a></li>
          </ul>
          <p className="c-hours"><i></i>{s.office_hours}</p>
          <div className="map-embed"><span>Map · {s.contact_address}</span></div>
        </Reveal>
        <ContactForm />
      </div></div></section>
    </>
  );
}

/* ===== pages/Legal.jsx ===== */
const CONTENT = {
  privacy: {
    title: 'Privacy Policy',
    body: `<p>This is a placeholder privacy policy. Skaleup Consultants respects your privacy and processes personal data only to deliver and improve our services.</p>
    <h3>Information we collect</h3><p>Contact details you submit via our forms, and standard analytics data.</p>
    <h3>How we use it</h3><p>To respond to enquiries, deliver services and improve the site. We never sell your data.</p>
    <h3>Your rights</h3><p>You may request access to or deletion of your data at any time by emailing hello@skaleup.consultant.</p>`,
  },
  terms: {
    title: 'Terms of Service',
    body: `<p>This is a placeholder terms-of-service page. By using this website you agree to these terms.</p>
    <h3>Use of the site</h3><p>Content is provided for information only and may change without notice.</p>
    <h3>Engagements</h3><p>Service engagements are governed by a separate signed agreement.</p>
    <h3>Liability</h3><p>The site is provided "as is" without warranties of any kind.</p>`,
  },
};
function Legal({ which }) {
  const c = CONTENT[which];
  useEffect(() => { document.title = `${c.title} — Skaleup Consultants`; }, [c.title]);
  return (
    <>
      <PageHero crumbs={[['Home','/'],[c.title]]} title={c.title} lede="Last updated: July 2026." />
      <section className="prose-section"><div className="wrap"><Reveal className="prose" dangerouslySetInnerHTML={{ __html: c.body }} /></div></section>
      <Cta />
    </>
  );
}

/* ===== App.jsx ===== */
function ScrollManager() {
  const { pathname, hash } = useLocation();
  useEffect(() => {
    if (hash) {
      const el = document.querySelector(hash);
      if (el) { el.scrollIntoView({ behavior: 'smooth' }); return; }
    }
    window.scrollTo(0, 0);
  }, [pathname, hash]);
  // re-arm parallax / card-glow after each route's DOM settles
  useEffect(() => { const t = setTimeout(runGlobalEffects, 60); return () => clearTimeout(t); }, [pathname]);
  return null;
}
function App() {
  return (
    <SiteProvider>
      <ScrollManager />
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/service/:slug" element={<Service />} />
          <Route path="/industry/:slug" element={<Industry />} />
          <Route path="/package/:slug" element={<Package />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/blog/:slug" element={<BlogPost />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/privacy" element={<Legal which="privacy" />} />
          <Route path="/terms" element={<Legal which="terms" />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      <Footer />
      <BackToTop />
    </SiteProvider>
  );
}

function BackToTop() {
  useEffect(() => {
    const btn = document.getElementById('toTop');
    if (!btn) return;
    const onScroll = () => btn.classList.toggle('show', window.scrollY > 700);
    addEventListener('scroll', onScroll);
    return () => removeEventListener('scroll', onScroll);
  }, []);
  return <button className="to-top" id="toTop" aria-label="Back to top" onClick={() => scrollTo({ top: 0, behavior: 'smooth' })}>↑</button>;
}

/* ===== mount ===== */
createRoot(document.getElementById('root')).render(
  React.createElement(BrowserRouter, null, React.createElement(App))
);