// Arrow mark — inline SVG so currentColor works (keeps logo monotone in light/dark)
function ArrowMark({ size = 22, className = '' }) {
  return (
    <span className={className} style={{display: 'inline-flex', width: size, height: size, color: 'currentColor'}}>
      <svg viewBox="0 0 283.465 283.465" width={size} height={size} aria-hidden="true" style={{display: 'block'}}>
        <path
          fill="currentColor"
          d="M117.1845,31.1798L14.1725,209.6068C6.3455,223.1638 10.9915,240.4988 24.5495,248.3248C38.1045,256.1498 55.4365,251.5048 63.2625,237.9498L113.3825,151.1418L113.3825,243.7788C113.3825,259.4318 126.0725,272.1218 141.7255,272.1218C157.3785,272.1218 170.0795,259.4318 170.0795,243.7788L170.0795,151.1548L220.1985,237.9518C228.0255,251.5068 245.3585,256.1508 258.9135,248.3258C272.4705,240.4988 277.1155,223.1648 269.2885,209.6088L166.2755,31.1798C155.3665,12.2848 128.0935,12.2848 117.1845,31.1798Z"
        />
      </svg>
    </span>
  );
}
window.ArrowMark = ArrowMark;

// Site Header — floating, persistent, with mobile flyout + mode toggle
function SiteHeader({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

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

  const close = () => setOpen(false);

  return (
    <React.Fragment>
      <header className="header" data-scrolled={scrolled}>
        <a href="#top" className="mark" aria-label="Barrow" onClick={close}>
          <span className="mark-arrow"><ArrowMark size={22} /></span>
          <span className="mark-wordmark" role="img" aria-label="Barrow" />
        </a>
        <nav className="nav" aria-label="Primary">
          <a href="#what">What</a>
          <a href="#work">Work</a>
          <a href="#how">How</a>
          <a href="#contact">Contact</a>
          <a href="mailto:hello@robinbarrow.com" className="nav-email">hello@robinbarrow.com</a>
          <a
            href="https://www.linkedin.com/in/robinbarrow/"
            target="_blank"
            rel="noopener noreferrer"
            className="nav-social"
            aria-label="LinkedIn"
            title="LinkedIn"
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05c.53-1 1.82-2.05 3.75-2.05 4.02 0 4.76 2.65 4.76 6.1V21h-4v-5.35c0-1.28-.02-2.92-1.78-2.92-1.78 0-2.05 1.39-2.05 2.83V21H10V9Z"/>
            </svg>
          </a>
          <button
            className="mode-toggle"
            onClick={onToggleTheme}
            aria-label={theme === 'inked' ? 'Switch to light mode' : 'Switch to dark mode'}
            title={theme === 'inked' ? 'Light mode' : 'Dark mode'}
          >
            {theme === 'inked' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <circle cx="12" cy="12" r="4" />
                <path strokeLinecap="round" d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/>
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z"/>
              </svg>
            )}
          </button>
          <button
            className="nav-burger"
            data-open={open}
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
          >
            <span />
          </button>
        </nav>
      </header>

      <div className="flyout" data-open={open} aria-hidden={!open}>
        <nav className="flyout-nav" aria-label="Mobile">
          <a href="#what" onClick={close}>What</a>
          <a href="#work" onClick={close}>Work</a>
          <a href="#how" onClick={close}>How</a>
          <a href="#contact" onClick={close}>Contact</a>
        </nav>
        <div className="flyout-meta">
          <a href="mailto:hello@robinbarrow.com">hello@robinbarrow.com</a>
          <span>Nashville · Available globally</span>
        </div>
      </div>
    </React.Fragment>
  );
}
window.SiteHeader = SiteHeader;

// Hero
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="eyebrow">01 · Intro</div>
      <div className="hero-main">
        <div className="hero-lede">
          <div className="availability">
            <span className="dot" aria-hidden="true" />
            <span>Available for select engagements</span>
          </div>
          <h1 className="hero-title">
            <span>Brand clarity.</span>
            <span>Product clarity.</span>
            <span>Design leadership.</span>
          </h1>
          <p className="hero-sub">
            I help founders and teams who need senior-level thinking and hands-on execution across brand, product, and experience.
          </p>
          <div className="hero-actions">
            <a href="#contact" className="btn btn-primary">
              <span>Begin a conversation</span>
              <span className="btn-arrow" aria-hidden="true">→</span>
            </a>
            <a href="#audit" className="btn-ghost">Start a 48-Hour Signal Audit</a>
          </div>
        </div>
        <figure className="hero-portrait-wrap" style={{margin: 0}}>
          <div className="hero-portrait">
            <img src="assets/profile.png" alt="Robin Barrow" />
          </div>
          <figcaption className="hero-portrait-caption">
            <span>Robin Barrow</span>
            <span>Design, brand &amp; direction</span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}
window.Hero = Hero;

// Section wrapper
function Section({ id, eyebrow, title, lede, children }) {
  return (
    <section id={id} className="section" data-screen-label={eyebrow}>
      <div className="eyebrow">{eyebrow}</div>
      <div className="section-main">
        {title && <h2 className="section-title">{title}</h2>}
        {lede && <p className="section-lede">{lede}</p>}
        {children}
      </div>
    </section>
  );
}
window.Section = Section;

// Footer — monotone logo, no font credit
function SiteFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <a href="#top" className="footer-mark" aria-label="Barrow">
        <span className="footer-arrow"><ArrowMark size={22} /></span>
        <span className="footer-wordmark" role="img" aria-label="Barrow" />
      </a>
      <div className="footer-colophon">
        Independent practice — brand, product, and design leadership.
      </div>
      <div className="footer-meta">
        <span>© {year} Robin Barrow</span>
        <span className="footer-motto" title="Creativity, the last refuge of humanity">
          Creativitas ultimum praesidium humanitatis
        </span>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;