// All body sections: Nav, Pitch, Demo, Work, Process, About, FAQ, Contact, Footer

const { useState, useRef, useEffect: useEff } = React;

/* ────────── Nav (shared between homepage + subpages) ────────── */
const NAV_PROJECTS = [
  ['tideline', 'Tideline'],
  ['automation', 'Labrynth Automation'],
  ['lumen', 'Lumen'],
  ['mass-files', 'The Mass Files'],
  ['ridgeline', 'Ridgeline'],
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('');
  const path = window.location.pathname;
  const isHome = path === '/' || path === '/index.html';
  const isFaq = path === '/faq/' || path === '/faq' || path.startsWith('/faq/');
  const isCase = path.startsWith('/work/');
  const caseSlug = isCase ? (path.match(/^\/work\/([^/]+)/) || [])[1] : null;

  useEff(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  useEff(() => {
    if (!isHome) return;
    const ids = ['work', 'how', 'about', 'contact'];
    const targets = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!targets.length) return;
    const visible = new Map();
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) visible.set(e.target.id, e.intersectionRatio);
        else visible.delete(e.target.id);
      }
      let bestId = '', bestRatio = 0;
      for (const [id, ratio] of visible) {
        if (ratio > bestRatio) { bestId = id; bestRatio = ratio; }
      }
      setActive(bestId);
    }, { rootMargin: '-40% 0px -40% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] });
    targets.forEach(t => io.observe(t));
    return () => io.disconnect();
  }, [isHome]);

  const linkClass = (id) => 'nav-link' + (active === id ? ' is-active' : '');

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "") + (isCase ? " nav-centered" : "")}>
      <a href={isHome ? '#top' : '/'} className="nav-brand" data-hover onClick={window.scrollToHash}>
        <LabrynthMark size={24} />
        <span className="nav-brand-wordmark">Labrynth<span className="tld">.co</span></span>
      </a>
      <div className="nav-links">
        {isCase ? (
          NAV_PROJECTS.map(([slug, label]) => (
            <a
              key={slug}
              href={`/work/${slug}/`}
              className={"nav-link" + (caseSlug === slug ? ' is-active' : '')}
              data-hover
            >
              {label}
            </a>
          ))
        ) : (
          <>
            <div className="nav-link-wrap nav-has-menu">
              <a href="#work" className={linkClass('work')} data-hover onClick={window.scrollToHash}>Work</a>
              <div className="nav-menu" role="menu">
                {NAV_PROJECTS.map(([slug, label]) => (
                  <a
                    key={slug}
                    href={`/work/${slug}/`}
                    className="nav-menu-item"
                    data-hover
                    role="menuitem"
                  >
                    <span className="nav-menu-item-label">{label}</span>
                    <span className="nav-menu-item-arr" aria-hidden="true">↗</span>
                  </a>
                ))}
              </div>
            </div>
            <a href="#how" className={linkClass('how')} data-hover onClick={window.scrollToHash}>Process</a>
            <a href="#about" className={linkClass('about')} data-hover onClick={window.scrollToHash}>About</a>
          </>
        )}
        {!isCase && (
          <a href="/faq/" className={"nav-link" + (isFaq ? ' is-active' : '')} data-hover>FAQ</a>
        )}
      </div>
      <div className="nav-cta">
        {isCase && (
          <a href="/faq/" className={"nav-link nav-cta-faq" + (isFaq ? ' is-active' : '')} data-hover>FAQ</a>
        )}
        <a href="#contact" className={"contact-pill keep" + (active === 'contact' ? ' is-active' : '')} data-hover onClick={window.scrollToHash}>Contact →</a>
      </div>
    </nav>
  );
}

// In-page anchor click handler: smooth-scrolls and clears the hash from the URL.
// If the target id isn't on the current page, falls back to navigating to the
// homepage with the hash so subpages (FAQ, case studies) can reuse the same nav.
function scrollToHash(e) {
  const href = e.currentTarget.getAttribute('href');
  if (!href || !href.startsWith('#') || href === '#') return;
  const id = href.slice(1);
  if (id === 'top') {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
    history.replaceState(null, '', window.location.pathname + window.location.search);
    return;
  }
  const el = document.getElementById(id);
  if (!el) {
    if (window.location.pathname !== '/') {
      e.preventDefault();
      window.location.href = '/' + href;
    }
    return;
  }
  e.preventDefault();
  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  history.replaceState(null, '', window.location.pathname + window.location.search);
}
window.scrollToHash = scrollToHash;

/* ────────── Pitch (01 / 02 / 03) ────────── */
function Pitch() {
  return (
    <section id="pitch">
      <div className="wrap">
        <div className="section-head">
          <div className="mono reveal">[ The Pitch ]</div>
          <h2 className="reveal reveal-right">
            <span className="pitch-h2-line">Three things your site should do.</span>{' '}
            <em>Not five. Not twelve.</em>
          </h2>
        </div>
        <div className="pitch-grid">
          {[
            {
              n: '01', k: 'Design', t: 'Made for your business.',
              p: 'Every page is drawn around your offer, your customers, and the one decision you want them to make. No template patchwork.'
            },
            {
              n: '02', k: 'Build', t: 'Fast, sharp, durable.',
              p: 'Hand-built on modern web standards. Lighthouse 95+ across the board. Loads in under a second on a bad connection.'
            },
            {
              n: '03', k: 'Convert', t: 'Turns visitors into revenue.',
              p: 'Clear calls to action, honest copy, tracked outcomes. I measure what works and cut what doesn\'t on launch day.'
            },
          ].map(({ n, k, t, p }, i) => (
            <div className="pitch-cell reveal reveal-up" key={n} style={{ transitionDelay: `${i * 140}ms` }}>
              <div className="label mono">
                <span className="num">{n}</span> / {k}
              </div>
              <h3>{t}</h3>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────── Demo Hook with concentric arcs ────────── */
function Arcs() {
  return (
    <svg className="arcs" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg">
      {[440, 340, 240, 140].map((r, i) => (
        <circle key={`base-${i}`} cx="0" cy="520" r={r} stroke="#2E2F36" strokeWidth="1" />
      ))}
      <g className="arcs-rotor">
        {[440, 340, 240, 140].map((r, i) => (
          <circle
            key={`dash-${i}`}
            cx="0"
            cy="520"
            r={r}
            stroke="#A1A7B3"
            strokeOpacity={0.5 - i * 0.09}
            strokeWidth="1"
            strokeDasharray="2 4"
          />
        ))}
        {Array.from({ length: 88 }).map((_, i) => {
          const a = (i / 88) * Math.PI * 2;
          const r1 = 440, r2 = 452;
          const x1 = Math.cos(a) * r1;
          const y1 = 520 + Math.sin(a) * r1;
          const x2 = Math.cos(a) * r2;
          const y2 = 520 + Math.sin(a) * r2;
          return <line key={`spoke-${i}`} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#A1A7B3" strokeOpacity="0.35" strokeWidth="1" />;
        })}
      </g>
      <circle cx="0" cy="520" r="6" fill="#06B6D4" opacity="0.25" />
      <circle cx="0" cy="520" r="4" fill="#06B6D4" />
    </svg>
  );
}

function Demo() {
  return (
    <section className="demo" id="process">
      <Arcs />
      <div className="wrap demo-inner">
        <div>
          <div className="reveal" style={{ transitionDelay: '0ms' }}>
            <div className="mono mono-accent" style={{ marginBottom: 20 }}>[ The Hook ]</div>
          </div>
          <h2 className="reveal reveal-left" style={{ transitionDelay: '80ms' }}>
            I'll design your site <em>before</em> you decide.
          </h2>
        </div>
        <div>
          <div className="demo-watermark reveal reveal-watermark" aria-hidden="true">
            LABRYNTH
            <span className="demo-watermark-shine" aria-hidden="true">LABRYNTH</span>
          </div>
          <div className="demo-body reveal reveal-up">
            <p>
              Tell Labrynth about your business. Within <strong>48 hours</strong> you'll get a
              custom homepage mockup, not a template, but a design for
              your actual business.
            </p>
            <p style={{ marginTop: 16 }}>
              If you love it, we build it. If you don't, we shake hands and part ways.
              <strong> No deposit, no contract, no retainer.</strong>
            </p>
          </div>
          <div className="demo-steps">
            {[
              { n: '01', t: 'Tell me about your business', time: '5 min' },
              { n: '02', t: 'I send a custom homepage mockup', time: '48 hrs' },
              { n: '03', t: 'You decide. No pressure.', time: 'Your call' },
            ].map((s, i) => (
              <div className="demo-step reveal reveal-right" key={s.n} style={{ transitionDelay: `${i * 130}ms` }}>
                <div className="n">{s.n}</div>
                <div className="t">{s.t}</div>
                <div className="time">{s.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────── Work ────────── */
function CountNum({ target, delayMs = 0 }) {
  const ref = useRef();
  const [n, setN] = useState(0);
  useEff(() => {
    const el = ref.current;
    if (!el) return;
    let raf, timeout;
    const targetN = parseInt(target, 10);
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        timeout = setTimeout(() => {
          const duration = 700;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const e = 1 - Math.pow(1 - t, 3);
            setN(Math.round(e * targetN));
            if (t < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
        }, delayMs);
      } else {
        clearTimeout(timeout);
        cancelAnimationFrame(raf);
        setN(0);
      }
    }, { rootMargin: '0px 0px -8% 0px' });
    observer.observe(el);
    return () => { observer.disconnect(); cancelAnimationFrame(raf); clearTimeout(timeout); };
  }, [target, delayMs]);
  return <div className="num" ref={ref}>{String(n).padStart(2, '0')}</div>;
}

function Work() {
  const items = [
    {
      slug: 'tideline', n: '01', kind: 'Concept',
      name: 'Tideline',
      desc: 'B2B SaaS concept'
    },
    {
      slug: 'automation', n: '02', kind: 'Live',
      name: 'Labrynth Automation',
      desc: 'AI automation studio · archived in-site'
    },
    {
      slug: 'lumen', n: '03', kind: 'Concept',
      name: 'Lumen & Co.',
      desc: 'Brand-studio concept'
    },
    {
      slug: 'mass-files', n: '04', kind: 'Live',
      name: 'The Mass Files',
      desc: 'Live client work · themassfiles.com'
    },
    {
      slug: 'ridgeline', n: '05', kind: 'Concept',
      name: 'Ridgeline',
      desc: 'Editorial concept'
    },
  ];
  return (
    <section id="work">
      <div className="wrap">
        <div className="section-head">
          <div className="mono reveal">[ Selected Work ]</div>
          <h2 className="reveal reveal-down">Two live sites. <em>Three concepts on deck.</em></h2>
        </div>
        <div className="work-list">
          {items.map((it, i) => (
            <a className="work-item reveal reveal-right" href={`/work/${it.slug}/`} key={it.slug} data-hover style={{ transitionDelay: `${i * 110}ms` }}>
              <CountNum target={it.n} delayMs={i * 110} />
              <div className="name">
                <span className="name-text">{it.name}</span>
                <span className={"work-kind " + (it.kind === 'Live' ? 'is-live' : 'is-concept')}>{it.kind}</span>
              </div>
              <div className="desc">{it.desc}</div>
              <div className="cta">
                View case study <span className="arr">→</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────── Process ────────── */
function Process() {
  const steps = [
    { n: '01', k: 'Discovery', p: 'A 30-minute call. What do you sell, who to, and what\'s broken about the current site.' },
    { n: '02', k: 'Design', p: 'I draft a full homepage in 48 hours. You see real design, not a moodboard.' },
    { n: '03', k: 'Build', p: 'Hand-coded, production-grade. Two review rounds built in.' },
    { n: '04', k: 'Launch', p: 'Deployed to your domain with SSL, analytics, and a pre-flight checklist.' },
    { n: '05', k: 'Support', p: '30 days of free tweaks. After that, simple monthly care or hand over the keys.' },
  ];
  return (
    <section id="how">
      <div className="wrap">
        <div className="section-head section-head-stacked">
          <div className="mono reveal">[ Process ]</div>
          <h2>
            <span className="reveal reveal-inline" style={{ transitionDelay: '0ms' }}>Five steps.</span>{' '}
            <em className="reveal reveal-inline" style={{ transitionDelay: '180ms' }}>Three to four weeks.</em>{' '}
            <span className="reveal reveal-inline" style={{ transitionDelay: '360ms' }}>No surprises.</span>
          </h2>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div className="process-cell reveal reveal-up" key={s.n} style={{ transitionDelay: `${i * 110}ms` }}>
              <div className="n">{s.n} / {s.k.toUpperCase()}</div>
              <h4>{s.k}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────── About ────────── */
function About() {
  return (
    <section id="about">
      <div className="wrap">
        <div className="about">
          <div className="about-photo reveal">
            <img src="assets/ventura.jpg" alt="Ventura County, California" className="about-photo-img" />
            <div className="about-photo-label">Ventura County, CA</div>
          </div>
          <div className="about-body reveal">
            <div className="mono" style={{ marginBottom: 24 }}>[ Why Labrynth ]</div>
            <h2>A studio of one. <em>On purpose.</em></h2>
            <p>
              Labrynth is me. One designer-developer who takes a site from first sketch to
              live domain.
            </p>
            <p>
              I studied Art &amp; Technology and CIT (Computer Informational Technology) at the University of Oregon, where I learned
              to pair visual storytelling with clean, functional code.
            </p>
            <p>
              My focus now is local businesses. I build the site first, because a website
              should prove its value before it costs you a dollar. One designer. One
              developer. One goal: making sure your visitors never feel lost.
            </p>
            <div className="about-facts">
              <div className="about-fact">
                <div className="k">Launched</div>
                <div className="v"><em>2</em> sites</div>
              </div>
              <div className="about-fact">
                <div className="k">Response</div>
                <div className="v">&lt; <em>6</em> hrs</div>
              </div>
              <div className="about-fact">
                <div className="k">Based</div>
                <div className="v">SoCal</div>
              </div>
            </div>
            <div className="about-watermark reveal reveal-watermark" aria-hidden="true">LABRYNTH</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────── FAQ ────────── */
function FAQ() {
  const qs = [
    { q: 'What does a site cost?', a: 'A projecy will generally land between $2,000 and $5,000. Pricing is fixed before we start. One number, all in. No hourly billing, no mystery add-ons.' },
    { q: 'How long does it take?', a: 'Three to four weeks from kickoff to launch for a standard five to seven page site. Faster if you\'re ready with copy and assets; longer if we\'re starting from scratch.' },
    { q: 'What\'s included?', a: 'Design, build, copywriting guidance, content entry, basic SEO setup, analytics, a contact form, and 30 days of post-launch tweaks. Photography and video are separate.' },
    { q: 'Do you do hosting?', a: 'Yes. $50/month covers hosting, SSL, uptime monitoring, and minor content updates. Or you host it yourself; I hand over a clean repo.' },
    { q: 'I already have a site. Can you redesign it?', a: 'Usually, yes. I\'ll take a look at the current one for free and tell you honestly whether it\'s worth rebuilding or just fixing.' },
    { q: 'What if I hate the preview?', a: 'We shake hands and part ways. No deposit, no invoice, no awkwardness. That\'s the whole point of the preview.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="wrap">
        <div className="section-head section-head-stacked">
          <div className="mono reveal">[ FAQ ]</div>
          <h2 className="reveal">The questions everyone asks. <em>Answered plainly.</em></h2>
        </div>
        <div className="faq-list">
          {qs.map((item, i) => (
            <div className={"faq-item" + (open === i ? " open" : "") + " reveal"} key={i}>
              <div className="faq-q" data-hover onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="plus"></span>
              </div>
              <div className="faq-a">
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ────────── Contact ────────── */
function ContactDots() {
  const purpleRef = useRef();
  const cyanRef = useRef();

  useEff(() => {
    const purple = purpleRef.current;
    const cyan = cyanRef.current;
    if (!purple || !cyan) return;
    const section = purple.parentElement;
    if (!section) return;

    const dots = [
      { el: purple, size: 420, x: 60, y: 40, vx: 22, vy: 17 },
      { el: cyan, size: 380, x: 0, y: 0, vx: -19, vy: 24 },
    ];

    const W0 = section.clientWidth;
    const H0 = section.clientHeight;
    dots[1].x = Math.max(0, W0 - dots[1].size - 80);
    dots[1].y = Math.max(0, H0 - dots[1].size - 60);

    let running = false;
    let last = 0;
    let raf = 0;

    const step = (now) => {
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;
      const W = section.clientWidth;
      const H = section.clientHeight;
      for (const d of dots) {
        d.x += d.vx * dt;
        d.y += d.vy * dt;
        const maxX = W - d.size;
        const maxY = H - d.size;
        if (maxX > 0) {
          if (d.x < 0) { d.x = 0; d.vx = Math.abs(d.vx); }
          else if (d.x > maxX) { d.x = maxX; d.vx = -Math.abs(d.vx); }
        }
        if (maxY > 0) {
          if (d.y < 0) { d.y = 0; d.vy = Math.abs(d.vy); }
          else if (d.y > maxY) { d.y = maxY; d.vy = -Math.abs(d.vy); }
        }
        d.el.style.transform = `translate3d(${d.x}px, ${d.y}px, 0)`;
      }
      raf = requestAnimationFrame(step);
    };

    const start = () => {
      if (running) return;
      running = true;
      last = performance.now();
      raf = requestAnimationFrame(step);
    };
    const stop = () => {
      running = false;
      cancelAnimationFrame(raf);
    };

    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) start();
      else stop();
    }, { rootMargin: '100px' });
    io.observe(section);

    const onVis = () => {
      if (document.hidden) stop();
      else if (section.getBoundingClientRect().bottom > 0) start();
    };
    document.addEventListener('visibilitychange', onVis);

    for (const d of dots) {
      d.el.style.transform = `translate3d(${d.x}px, ${d.y}px, 0)`;
    }

    return () => {
      io.disconnect();
      document.removeEventListener('visibilitychange', onVis);
      stop();
    };
  }, []);

  return (
    <>
      <div className="contact-dot contact-dot-purple" ref={purpleRef} aria-hidden="true" />
      <div className="contact-dot contact-dot-cyan" ref={cyanRef} aria-hidden="true" />
    </>
  );
}

// Replace REPLACE_WITH_FORM_ID with the ID from your Formspree dashboard.
// Set the delivery email there to yochoa@labrynth.co.
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mwvyjkbo';

function Contact() {
  const [state, setState] = useState({
    name: '', business: '', type: '', url: '', wish: '',
  });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const set = (k) => (e) => setState({ ...state, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!state.name.trim()) errs.name = 'required';
    if (!state.business.trim()) errs.business = 'required';
    if (!state.wish.trim()) errs.wish = 'say one thing';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: state.name,
          business: state.business,
          type: state.type,
          url: state.url,
          wish: state.wish,
          _subject: `New Labrynth inquiry — ${state.business}`,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setErrors({ submit: "Couldn't send. Email hello@labrynth.co directly." });
      }
    } catch {
      setErrors({ submit: "Couldn't send. Email hello@labrynth.co directly." });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="contact" id="contact">
      <ContactDots />
      <div className="wrap contact-inner">
        <div className="reveal">
          <div className="mono mono-accent" style={{ marginBottom: 24 }}>[ Ready? ]</div>
          <h2>Ready to see<br /><em>your site</em>?</h2>
          <p className="contact-sub">
            Fill this out. You'll hear from me within 4 hours, and you'll have a custom
            mockup within 48. No spam, no sales sequence, no pressure.
          </p>
          <div style={{ marginTop: 48, borderTop: '1px solid var(--border)', paddingTop: 24 }}>
            <div className="mono" style={{ marginBottom: 10 }}>Or reach me directly</div>
            <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em' }}>
              <a href="mailto:hello@labrynth.co" data-hover>hello@labrynth.co</a>
            </div>
          </div>
        </div>
        <div className="reveal">
          {sent ? (
            <div className="form-success">
              <div className="k">Message sent · 00:00:03</div>
              <h3>Got it. I'll be in touch.</h3>
              <p>
                I'll reply from <strong>hello@labrynth.co</strong> within 4 hours (usually sooner).
                If it's outside working hours, it'll be first thing tomorrow.
              </p>
            </div>
          ) : (
            <form className="form" onSubmit={submit} noValidate>
              <div className="form-row">
                <div className="field">
                  <label>Your name</label>
                  <input type="text" value={state.name} onChange={set('name')} data-hover />
                  {errors.name && <div className="err">{errors.name}</div>}
                </div>
                <div className="field">
                  <label>Business name</label>
                  <input type="text" value={state.business} onChange={set('business')} data-hover />
                  {errors.business && <div className="err">{errors.business}</div>}
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Business type</label>
                  <select value={state.type} onChange={set('type')} data-hover>
                    <option value="">Pick one</option>
                    <option>Restaurant / café</option>
                    <option>Professional services</option>
                    <option>Contractor / trades</option>
                    <option>Retail / ecommerce</option>
                    <option>Medical / dental</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div className="field">
                  <label>Current website (if any)</label>
                  <input type="text" placeholder="https://" value={state.url} onChange={set('url')} data-hover />
                </div>
              </div>
              <div className="field">
                <label>What do you wish your website did better?</label>
                <textarea rows="3" value={state.wish} onChange={set('wish')} data-hover />
                {errors.wish && <div className="err">{errors.wish}</div>}
              </div>
              <button type="submit" className="btn btn-primary" data-hover disabled={submitting}>
                {submitting ? 'Sending…' : 'Send. Get your preview'}
                <span className="arr">→</span>
              </button>
              {errors.submit && <div className="err" style={{ marginTop: 12 }}>{errors.submit}</div>}
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ────────── Footer ────────── */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-big-mark">
            <LabrynthMark size={56} stroke={1.6} className="footer-mark" />
            <div>
              <div className="wm">Labrynth<span style={{ color: 'var(--muted)', letterSpacing: '0.14em' }}>.co</span></div>
              <span className="tag">Websites with a way through.</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="#work" data-hover onClick={scrollToHash}>Work</a></li>
              <li><a href="#how" data-hover onClick={scrollToHash}>Process</a></li>
              <li><a href="#about" data-hover onClick={scrollToHash}>About</a></li>
              <li><a href="/faq/" data-hover>FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:hello@labrynth.co" data-hover>hello@labrynth.co</a></li>
              <li><a href="#contact" data-hover onClick={scrollToHash}>Start a project</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Elsewhere</h5>
            <ul>
              <li><a href="https://www.linkedin.com/in/labrynth-automation/" target="_blank" rel="noopener noreferrer" data-hover>LinkedIn</a></li>
              <li><a href="#" data-hover>GitHub</a></li>
              <li><a href="https://www.instagram.com/labrynth.studio/" target="_blank" rel="noopener noreferrer" data-hover>Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="row">
          <div>© 2026 · Labrynth Studio</div>
          <div>Ventura County, CA · 34.27° N, 119.22° W</div>
          <div>labrynth.co · v1.0</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Pitch, Demo, Work, Process, About, FAQ, Contact, Footer });