// VeloraTech — Shared chrome for booking sub-pages (book.html, consult.html)
// Provides PageLogoMark, PageHeader, PageFooter.
const { useState: useShared, useEffect: useEffectShared } = React;

function PageLogoMark({ size = 38 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <polygon points="50,4 90,26 90,74 50,96 10,74 10,26" fill="#FF6B1A" opacity="0.10"/>
      <polygon points="50,10 84,29 84,71 50,90 16,71 16,29" fill="none" stroke="#FF6B1A" strokeWidth="2.5"/>
      <polyline points="28,30 50,72 72,30" fill="none" stroke="#FF6B1A" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="50" cy="72" r="3.5" fill="#FF6B1A"/>
    </svg>
  );
}

function PageHeader() {
  const [open, setOpen] = useShared(false);
  useEffectShared(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const NAV = [
    { href: 'services.html', label: 'Services' },
    { href: 'index.html#how', label: 'How it works' },
    { href: 'about.html', label: 'About' },
    { href: 'faq.html', label: 'FAQ' },
    { href: 'contact.html', label: 'Contact' },
  ];
  return (
    <>
      <header className="header">
        <div className="header__inner">
          <a className="brand" href="index.html">
            <PageLogoMark size={38}/>
            <div className="brand__name">Velora<span>Tech</span></div>
          </a>
          <nav className="nav">
            <div className="nav__links">
              {NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
            </div>
            <a className="btn btn--ink btn--sm nav__cta nav__cta--desktop" href="consult.html">
              Book a free call <Icon.Arrow/>
            </a>
            <button className="burger" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
              <span></span><span></span><span></span>
            </button>
          </nav>
        </div>
      </header>

      <div className={'mobile-menu' + (open ? ' open' : '')} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="mobile-menu__head">
          <a className="brand" href="index.html">
            <PageLogoMark size={34}/>
            <div className="brand__name">Velora<span>Tech</span></div>
          </a>
          <button className="modal__close" aria-label="Close menu" onClick={() => setOpen(false)}>
            <Icon.Close/>
          </button>
        </div>
        <nav className="mobile-menu__nav">
          {NAV.map((n, i) => (
            <a key={n.href} href={n.href} style={{transitionDelay: open ? `${0.05 + i * 0.04}s` : '0s'}}>
              <span className="mobile-menu__idx">0{i + 1}</span>
              <span className="mobile-menu__label">{n.label}</span>
              <span className="mobile-menu__arr"><Icon.Arrow/></span>
            </a>
          ))}
        </nav>
        <div className="mobile-menu__foot">
          <a className="btn btn--primary btn--lg" href="consult.html">
            <Icon.Calendar/> Book a free 30-min call
          </a>
          <a className="btn btn--ghost btn--lg" href="book.html">
            <Icon.Tools/> Book a technician
          </a>
          <div className="mobile-menu__contact">
            <a href="tel:0449991572"><Icon.Phone/> 0449 991 572</a>
            <a href="mailto:info@veloratech.com.au"><Icon.Mail/> info@veloratech.com.au</a>
          </div>
        </div>
      </div>
    </>
  );
}

function PageFooter() {
  const FLINKS = [
    { href: 'services.html', label: 'Services' },
    { href: 'about.html', label: 'About' },
    { href: 'faq.html', label: 'FAQ' },
    { href: 'contact.html', label: 'Contact' },
    { href: 'book.html', label: 'Book' },
    { href: 'consult.html', label: 'Consult' },
    { href: 'privacy.html', label: 'Privacy Policy' },
  ];
  return (
    <footer className="footer">
      <nav className="footer__links" style={{ display: 'flex', flexWrap: 'wrap', gap: '18px', justifyContent: 'center', padding: '0 20px 22px', borderBottom: '1px solid var(--line-2)' }}>
        {FLINKS.map(l => (
          <a key={l.href} href={l.href} style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, textDecoration: 'none' }}>{l.label}</a>
        ))}
      </nav>
      <div className="container footer__inner" style={{ paddingTop: 22 }}>
        <div className="brand">
          <PageLogoMark size={28}/>
          <div className="brand__name">Velora<span>Tech</span></div>
        </div>
        <div className="footer__meta">ABN 99 698 738 724 · © 2026 VeloraTech</div>
        <div style={{fontSize:13}}>Brisbane · Gold Coast · Tweed Heads</div>
      </div>
    </footer>
  );
}

// Shared submit helper — Formspree POST with JSON body.
async function submitToFormspree(payload) {
  const res = await fetch('https://formspree.io/f/xykveqan', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
    body: JSON.stringify(payload),
  });
  if (!res.ok) {
    let detail = '';
    try { const j = await res.json(); detail = (j && j.error) || ''; } catch (_) {}
    throw new Error('Formspree responded ' + res.status + (detail ? ' — ' + detail : ''));
  }
  return res.json().catch(() => ({}));
}

Object.assign(window, { PageLogoMark, PageHeader, PageFooter, submitToFormspree });