// components.jsx — shared site chrome + primitives
const { useState, useEffect, useRef } = React;

// ============ SITE NAV ============
const NAV = [
  { label: 'Home',             href: 'index.html',       key: 'home' },
  { label: 'Philosophy',       href: 'Philosophy.html',  key: 'philosophy' },
  { label: 'Company',          href: 'Company.html',     key: 'company' },
  { label: 'NOVA AI',          href: 'NOVA.html',        key: 'nova' },
  { label: 'Terminal Network', href: 'Terminal Network.html', key: 'terminal' },
  { label: 'Services',         href: 'Services.html',    key: 'services' },
  { label: 'Markets',          href: 'Markets.html',     key: 'markets' },
  { label: 'Investors',        href: 'Investors.html',   key: 'investors' },
];

// ============ ICONS ============
const Icon = {
  arrow: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  moon:  (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>,
  sun:   (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>,
  plus:  (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>,
  chev:  (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>,
};

// ============ THEME TOGGLE ============
function ThemeToggle() {
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try {
      localStorage.setItem('rs-theme', theme);
      // Keep the floating Tweaks panel's JSON-shaped storage in sync;
      // otherwise its applyTweaks on next page load overwrites this choice.
      var raw = localStorage.getItem('rs-tweaks');
      var tw = raw ? JSON.parse(raw) : {};
      tw.theme = theme;
      localStorage.setItem('rs-tweaks', JSON.stringify(tw));
    } catch (e) {}
  }, [theme]);
  return (
    <div className="theme-toggle" role="group" aria-label="Theme">
      <button type="button" className={theme === 'dark' ? 'is-active' : ''} onClick={() => setTheme('dark')} aria-label="Dark theme" title="Dark"><Icon.moon/></button>
      <button type="button" className={theme === 'light' ? 'is-active' : ''} onClick={() => setTheme('light')} aria-label="Light theme" title="Light"><Icon.sun/></button>
    </div>
  );
}

// ============ HEADER ============
function SiteHeader({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={"site-hdr" + (scrolled ? " is-scrolled" : "")}>
      <div className="site-hdr__inner">
        <a href="index.html" className="rs-wordmark" aria-label="ROBSEEK home"><span className="rs-chevron"/>ROBSEEK</a>
        <nav className="site-hdr__nav" aria-label="Primary">
          {NAV.map(item => (
            <a key={item.key} href={item.href}
               className={active === item.key ? 'is-active' : ''}>
              {item.label}
            </a>
          ))}
        </nav>
        <div className="site-hdr__right">
          <ThemeToggle/>
          <a href="#contact" className="rs-btn rs-btn--primary">Partner with ROBSEEK <Icon.arrow/></a>
          <button className="site-hdr__burger" aria-label="Menu" onClick={() => setMenuOpen(o => !o)}>
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="site-hdr__drawer" onClick={() => setMenuOpen(false)}>
          {NAV.map(item => (
            <a key={item.key} href={item.href} className={active === item.key ? 'is-active' : ''}>{item.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

// ============ FOOTER ============
function SiteFooter() {
  return (
    <footer className="site-ftr">
      <div className="site-ftr__inner">
        <div className="site-ftr__lead">
          <a href="index.html" className="rs-wordmark" style={{ fontSize: 22 }}><span className="rs-chevron"/>ROBSEEK</a>
          <p className="rs-lede" style={{ maxWidth: 420, marginTop: 18, fontSize: 15 }}>
            Physical-world AI infrastructure connecting terminals, data, and intelligent services.
          </p>
        </div>
{/* (footer columns rendered below) */}
        <div className="site-ftr__cols">
          <FCol title="Philosophy" items={[
            ['Overview', 'Philosophy.html'],
            ['NOVA AI', 'NOVA.html'],
            ['Services', 'Services.html'],
            ['Markets', 'Markets.html'],
          ]}/>
          <FCol title="Company" items={[
            ['About', 'Company.html#about'],
            ['The team', 'Company.html#team'],
            ['Careers', 'Careers.html'],
          ]}/>
          <FCol title="Investors" items={[
            ['Investor Relations', 'Investors.html'],
            ['Governance', 'Investors.html#governance'],
            ['News & disclosures', 'Investors.html#news'],
            ['IR contact', 'Investors.html#ir-contact'],
          ]}/>
          <FCol title="Contact" items={[
            ['Partnerships', '#'],
            ['Sales', '#'],
            ['Media inquiries', 'mailto:press@robseek.example'],
            ['Riyadh · Jeddah', '#'],
          ]}/>
        </div>
      </div>
      <div className="site-ftr__rule"/>
      <div className="site-ftr__meta">
        <span className="rs-caption">© 2026 ROBSEEK · All rights reserved</span>
        <span className="rs-caption site-ftr__legal">
          <a href="Privacy.html">Privacy</a>
          <span aria-hidden="true"> · </span>
          <a href="Terms.html">Terms</a>
          <span aria-hidden="true"> · </span>
          <a href="Cookies.html">Cookies</a>
        </span>
      </div>
    </footer>
  );
}
function FCol({ title, items }) {
  return (
    <div className="site-ftr__col">
      <div className="rs-caption site-ftr__col-title">{title}</div>
      <ul>{items.map(([l, h]) => <li key={l}><a href={h}>{l}</a></li>)}</ul>
    </div>
  );
}

// ============ HERO ============
function Hero({ eyebrow, title, lede, primary, secondary, badge, children }) {
  return (
    <section className="hero">
      <div className="hero__grid"/>
      <div className="hero__glow"/>
      <div className="rs-container hero__inner">
        <div className="hero__bar"/>
        <div className="hero__content">
          {eyebrow && <div className="rs-eyebrow">{eyebrow}</div>}
          <h1 className="rs-display hero__title">{title}</h1>
          {lede && <p className="rs-lede hero__lede">{lede}</p>}
          <div className="hero__cta">
            {primary && <a href={primary.href} className="rs-btn rs-btn--primary">{primary.label} <Icon.arrow/></a>}
            {secondary && <a href={secondary.href} className="rs-btn rs-btn--ghost">{secondary.label}</a>}
          </div>
          {badge && <div className="hero__badge rs-caption">{badge}</div>}
        </div>
        {children}
      </div>
    </section>
  );
}

// ============ SECTION HEADER ============
function SectionHead({ num, eyebrow, title, lede, align = 'left' }) {
  return (
    <div className={"sec-head sec-head--" + align}>
      {num && <div className="sec-head__num">{num}</div>}
      {eyebrow && <div className="rs-eyebrow">{eyebrow}</div>}
      {title && <h2 className="rs-h2 sec-head__title">{title}</h2>}
      {lede && <p className="rs-lede sec-head__lede">{lede}</p>}
    </div>
  );
}

// ============ CTA BAND ============
function CTABand({ eyebrow, title, lede, primary = { label: 'Partner with ROBSEEK', href: '#contact' }, secondary }) {
  return (
    <section className="cta-band">
      <div className="rs-container cta-band__inner">
        <div className="cta-band__left">
          {eyebrow && <div className="rs-eyebrow">{eyebrow}</div>}
          <h2 className="rs-h2 cta-band__title">{title}</h2>
          {lede && <p className="rs-lede" style={{ marginTop: 14 }}>{lede}</p>}
        </div>
        <div className="cta-band__right">
          <a href={primary.href} className="rs-btn rs-btn--primary">{primary.label} <Icon.arrow/></a>
          {secondary && <a href={secondary.href} className="rs-btn rs-btn--ghost">{secondary.label}</a>}
        </div>
      </div>
    </section>
  );
}

// ============ FEATURE GRID ============
function FeatureGrid({ items, columns = 3 }) {
  return (
    <div className={"feat-grid feat-grid--" + columns}>
      {items.map((it, i) => (
        <div className="feat rs-ticks" key={i}>
          <span className="rs-tick-a"/><span className="rs-tick-b"/>
          <div className="feat__num">{String(i + 1).padStart(2, '0')}</div>
          <div className="rs-h3 feat__title">{it.title}</div>
          <p className="feat__body">{it.body}</p>
        </div>
      ))}
    </div>
  );
}

// ============ PLACEHOLDER IMAGE ============
function ImagePrompt({ label, prompt, ratio = '16 / 9' }) {
  return (
    <div className="rs-ph-image" style={{ aspectRatio: ratio }}>
      <span className="rs-ph-image__badge">{label || 'Image prompt'}</span>
      <div className="rs-ph-image__prompt">{prompt}</div>
    </div>
  );
}

// ============ STAT PLACEHOLDER ============
function StatPH({ value, label, note = '— to be provided' }) {
  return (
    <div className="rs-ph-stat">
      <div className="rs-ph-stat__badge">Placeholder data</div>
      <div className="rs-ph-stat__value">{value}</div>
      <div className="rs-ph-stat__label">{label}</div>
      <div className="rs-ph-stat__note">{note}</div>
    </div>
  );
}

// ============ PORTRAIT PLACEHOLDER ============
function PortraitPH({ role, name }) {
  return (
    <div className="rs-ph-portrait">
      <svg className="rs-ph-portrait__silhouette" viewBox="0 0 100 120" fill="currentColor">
        <circle cx="50" cy="38" r="18"/>
        <path d="M10 120 C10 88, 30 72, 50 72 S90 88, 90 120 Z"/>
      </svg>
      <div className="rs-ph-portrait__badge"><strong>{name || 'Real portrait required'}</strong> · {role}</div>
    </div>
  );
}

// ============ REVEAL ON SCROLL ============
function Reveal({ children, as: As = 'div', delay = 0, ...rest }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); io.disconnect(); } }, { threshold: 0.12 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <As ref={ref} className={"rs-reveal" + (vis ? ' is-in' : '') + (rest.className ? ' ' + rest.className : '')} style={{ ...rest.style, transitionDelay: delay + 'ms' }}>{children}</As>;
}

// expose globally so other Babel files can use
Object.assign(window, {
  Icon, ThemeToggle, SiteHeader, SiteFooter, Hero, SectionHead, CTABand,
  FeatureGrid, ImagePrompt, StatPH, PortraitPH, Reveal
});