/* Flowdesk — Shared layout: Header, Footer, BookingDialog
   Exports: window.FS = { Header, Footer, BookingDialog, icons, wrap, eyebrow } */
(function () {
  const DS = window.FlowdeskDesignSystem_d54181;
  const { Button, Input, Dialog } = DS;

  const Ico = (paths, sz = 20, sw = 1.75) => (p) => (
    <svg width={p && p.size || sz} height={p && p.size || sz} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={p && p.sw || sw}
      strokeLinecap="round" strokeLinejoin="round">{paths}</svg>
  );

  const ArrowRight  = Ico(<path d="M5 12h14M13 6l6 6-6 6" />, 18, 2.1);
  const Check       = Ico(<path d="M20 6 9 17l-5-5" />, 16, 2.3);
  const ChevronDown = Ico(<path d="m6 9 6 6 6-6" />);
  const Mail        = Ico(<><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></>);
  const Phone       = Ico(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.15 12 19.79 19.79 0 0 1 1 3.17 2 2 0 0 1 2.97 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6.08 6.08l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16.18z" />);
  const MapPin      = Ico(<><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></>);
  const Workflow    = Ico(<><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /><path d="M10 6.5h4a3 3 0 0 1 3 3V14" /></>);
  const CodeIcon    = Ico(<><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></>);
  const Gauge       = Ico(<><path d="m12 14 4-4" /><path d="M3.34 19a10 10 0 1 1 17.32 0" /></>);
  const MapRoute    = Ico(<><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" /><path d="M9 4v13M15 7v13" /></>);
  const Wrench      = Ico(<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />);
  const Rocket      = Ico(<><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /></>);
  const Clock       = Ico(<><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>);
  const Cpu         = Ico(<><rect width="16" height="16" x="4" y="4" rx="2" /><rect width="6" height="6" x="9" y="9" rx="1" /><path d="M15 2v2M15 20v2M2 15h2M20 15h2M2 9h2M20 9h2M9 2v2M9 20v2" /></>);
  const Zap         = Ico(<><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></>);
  const Shield      = Ico(<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />);

  const wrap = { maxWidth: '1200px', margin: '0 auto', padding: '0 32px' };
  const eyebrow = {
    fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 700,
    letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--brand)',
    display: 'block'
  };

  const NAV = [
    { label: 'Services',   href: './services.html' },
    { label: 'Work',       href: './case-studies.html' },
    { label: 'Pricing',    href: './pricing.html' },
    { label: 'About',      href: './about.html' },
    { label: 'Blog',       href: './blog.html' },
    { label: 'Contact',    href: './contact.html' },
  ];

  function isActive(href) {
    try {
      const path = window.location.pathname;
      const name = href.replace('./', '').replace('.html', '');
      if ((name === 'index' || href === './index.html') && (path.endsWith('/') || path.endsWith('index.html'))) return true;
      return path.includes(name) && name !== 'index';
    } catch (e) { return false; }
  }

  function Header({ onBook }) {
    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'color-mix(in srgb, var(--surface-page) 88%, transparent)',
        backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        borderBottom: '1px solid var(--border)'
      }}>
        <div style={{ ...wrap, height: 68, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href="./index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
            <img src="./flowdesk-mark.png" alt="Flowdesk" style={{ width: 28, height: 28 }} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.0625rem', color: 'var(--text-strong)', letterSpacing: '-0.022em' }}>Flowdesk</span>
          </a>
          <nav style={{ display: 'flex', gap: '28px', alignItems: 'center' }}>
            {NAV.map((l) => (
              <a key={l.label} href={l.href} style={{
                fontFamily: 'var(--font-body)', fontSize: '0.875rem', fontWeight: 500,
                color: isActive(l.href) ? 'var(--brand)' : 'var(--text-body)',
                textDecoration: 'none', transition: 'color 150ms',
                paddingBottom: 2,
                borderBottom: isActive(l.href) ? '1.5px solid var(--brand)' : '1.5px solid transparent'
              }}>{l.label}</a>
            ))}
          </nav>
          <Button variant="primary" size="sm" iconRight={<ArrowRight />} onClick={onBook}>Book a call</Button>
        </div>
      </header>
    );
  }

  function Footer() {
    const cols = [
      { title: 'Services', links: [
        { l: 'Workflow automation', h: './services.html' },
        { l: 'Custom SaaS builds',  h: './services.html' },
        { l: 'AI integrations',     h: './services.html' },
        { l: 'n8n pipelines',       h: './services.html' },
      ]},
      { title: 'Company', links: [
        { l: 'About',         h: './about.html' },
        { l: 'Work',          h: './case-studies.html' },
        { l: 'Blog',          h: './blog.html' },
        { l: 'Careers',       h: './careers.html' },
      ]},
      { title: 'Support', links: [
        { l: 'Pricing', h: './pricing.html' },
        { l: 'FAQ',     h: './faq.html' },
        { l: 'Contact', h: './contact.html' },
      ]},
    ];
    return (
      <footer style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border)', marginTop: 0 }}>
        <div style={{ ...wrap, paddingTop: '64px', paddingBottom: '40px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: '40px' }}>
          <div>
            <a href="./index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
              <img src="./flowdesk-mark.png" alt="" style={{ width: 26, height: 26 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1rem', color: 'var(--text-strong)', letterSpacing: '-0.022em' }}>Flowdesk</span>
            </a>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-muted)', margin: '14px 0 0', maxWidth: 220, lineHeight: 1.65 }}>
              AI infrastructure for everyday NZ businesses. Auckland based.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 20 }}>
              <a href="mailto:hello@flowdesk.systems" style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)', textDecoration: 'none' }}>hello@flowdesk.systems</a>
              <a href="tel:+642040045080" style={{ fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-muted)', textDecoration: 'none' }}>+64 20 400 45080</a>
            </div>
          </div>
          {cols.map((col) => (
            <div key={col.title}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-faint)', marginBottom: 16 }}>{col.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.links.map(({ l, h }) => (
                  <a key={l} href={h} style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-body)', textDecoration: 'none' }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--border)' }}>
          <div style={{ ...wrap, paddingTop: 16, paddingBottom: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-faint)' }}>© 2026 Flowdesk Systems Ltd. Made in Aotearoa.</span>
            <div style={{ display: 'flex', gap: '20px' }}>
              <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-faint)', textDecoration: 'none' }}>Privacy</a>
              <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-faint)', textDecoration: 'none' }}>Terms</a>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  function BookingDialog({ open, onClose }) {
    const [done, setDone] = React.useState(false);
    const submit = () => setDone(true);
    const close = () => { setDone(false); onClose(); };
    if (done) {
      return (
        <Dialog open={open} onClose={close} width={460}
          title="We'll be in touch"
          description="Got your details. We'll email within 1 business day to confirm a time — usually the same day.">
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px', paddingBottom: 'var(--space-6)' }}>
            <Button variant="primary" onClick={close}>Done</Button>
          </div>
        </Dialog>
      );
    }
    return (
      <Dialog open={open} onClose={onClose} width={480}
        title="Book a 30-minute call"
        description="Tell us your worst bottleneck. We'll come back with what we'd automate first — no pitch, no obligation.">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', paddingBottom: '6px' }}>
          <Input label="Name" placeholder="Your name" />
          <Input label="Work email" placeholder="you@company.co.nz" />
          <Input label="Company" placeholder="Your business name" />
          <Input label="Biggest time drain right now" placeholder="e.g. manual invoicing every Friday" />
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '24px', paddingBottom: 'var(--space-6)' }}>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <Button variant="primary" iconRight={<ArrowRight />} onClick={submit}>Request call</Button>
        </div>
      </Dialog>
    );
  }

  window.FS = {
    Header, Footer, BookingDialog,
    icons: { ArrowRight, Check, ChevronDown, Mail, Phone, MapPin, Workflow, CodeIcon, Gauge, MapRoute, Wrench, Rocket, Clock, Cpu, Zap, Shield },
    wrap, eyebrow
  };
})();