// Chrome.jsx — shared site chrome (Header, Footer) + UI primitives
// Pages: index.html, services.html, about.html, contact.html

const FY_NAV = [
  { label: 'Home', href: 'index.html', key: 'home' },
  { label: 'Services', href: 'services.html', key: 'services' },
  { label: 'About', href: 'about.html', key: 'about' },
  { label: 'Contact', href: 'contact.html', key: 'contact' }
];

const FY_CONTACT = {
  email: 'hello@fortify.gi',
  address: 'Gibraltar'
};

// ---- Container -------------------------------------------------------
function Container({ children, style, className, id }) {
  return (
    <div id={id} className={className} style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', ...style }}>
      {children}
    </div>
  );
}

// ---- Eyebrow ---------------------------------------------------------
function Eyebrow({ children, icon, color = 'var(--brand)', style }) {
  return (
    <div className="eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color, ...style }}>
      {icon && <Icon name={icon} size={14} color={color} />}
      {children}
    </div>
  );
}

// ---- Button ----------------------------------------------------------
function Btn({ children, href, onClick, variant = 'primary', size = 'md', icon, iconRight, style }) {
  const [hov, setHov] = React.useState(false);
  const pad = size === 'lg' ? '15px 28px' : size === 'sm' ? '9px 16px' : '13px 24px';
  const fs = size === 'lg' ? 16.5 : size === 'sm' ? 14 : 15.5;
  const variants = {
    primary: {
      background: hov ? 'var(--brand-hover)' : 'var(--brand)', color: '#062229',
      border: '1px solid transparent'
    },
    secondaryDark: {
      background: hov ? 'rgba(255,255,255,.07)' : 'transparent', color: '#fff',
      border: `1px solid ${hov ? 'rgba(255,255,255,.4)' : 'rgba(255,255,255,.22)'}`
    },
    secondary: {
      background: hov ? 'var(--surface-2)' : 'var(--surface)', color: 'var(--fg1)',
      border: '1px solid var(--border-strong)'
    },
    ghost: {
      background: 'transparent', color: 'var(--brand-press)', border: '1px solid transparent'
    }
  };
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: fs, lineHeight: 1,
    borderRadius: 8, padding: pad, cursor: 'pointer', textDecoration: 'none', whiteSpace: 'nowrap',
    transition: 'background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease)',
    transform: hov ? 'translateY(-1px)' : 'none',
    ...variants[variant], ...style
  };
  const inner = (
    <React.Fragment>
      {icon && <Icon name={icon} size={size === 'lg' ? 19 : 17} color="currentColor" />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'lg' ? 19 : 17} color="currentColor" />}
    </React.Fragment>
  );
  const handlers = { onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false) };
  return href
    ? <a href={href} onClick={onClick} style={base} {...handlers}>{inner}</a>
    : <button onClick={onClick} style={base} {...handlers}>{inner}</button>;
}

// ---- Header ----------------------------------------------------------
function Header({ current }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,18,25,.85)' : 'rgba(10,18,25,0)',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'rgba(255,255,255,.08)' : 'transparent'}`,
      transition: 'background .3s var(--ease), border-color .3s var(--ease)'
    }}>
      <Container style={{ height: 74, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px' }}>
        <a href="index.html" style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <img src="assets/logo-white.png" alt="Fortify" style={{ height: 26 }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, letterSpacing: '.26em', color: 'var(--d-fg3)', textTransform: 'uppercase', paddingLeft: 2 }}>Securing what matters</span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="fy-desktop-nav">
          {FY_NAV.map(l => {
            const active = current === l.key;
            return (
              <a key={l.key} href={l.href} style={{
                fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 500,
                color: active ? '#fff' : 'var(--d-fg2)', padding: '8px 14px', borderRadius: 8,
                position: 'relative', transition: 'color .2s var(--ease)'
              }}
              onMouseEnter={e => e.currentTarget.style.color = '#fff'}
              onMouseLeave={e => e.currentTarget.style.color = active ? '#fff' : 'var(--d-fg2)'}>
                {l.label}
                {active && <span style={{ position: 'absolute', left: 14, right: 14, bottom: 2, height: 2, borderRadius: 2, background: 'var(--brand)' }} />}
              </a>
            );
          })}
          <Btn href="contact.html#quote" size="sm" style={{ marginLeft: 10 }}>Get a quote</Btn>
        </nav>
        <button className="fy-mobile-toggle" onClick={() => setOpen(o => !o)} style={{
          display: 'none', background: 'transparent', border: '1px solid rgba(255,255,255,.18)',
          borderRadius: 8, padding: 8, cursor: 'pointer', color: '#fff'
        }}>
          <Icon name={open ? 'x' : 'menu'} size={22} color="#fff" />
        </button>
      </Container>
      {open && (
        <div className="fy-mobile-menu" style={{ padding: '8px 24px 20px', display: 'none', flexDirection: 'column', gap: 4, background: 'rgba(10,18,25,.96)' }}>
          {FY_NAV.map(l => (
            <a key={l.key} href={l.href} style={{ color: current === l.key ? 'var(--brand)' : 'var(--d-fg1)', padding: '11px 4px', fontSize: 16, fontWeight: 500, fontFamily: 'var(--font-body)' }}>{l.label}</a>
          ))}
          <Btn href="contact.html#quote" style={{ marginTop: 8, width: '100%' }}>Get a quote</Btn>
        </div>
      )}
    </header>
  );
}

// ---- Footer ----------------------------------------------------------
function Footer() {
  const cols = [
    { h: 'Services', items: [['CCTV Systems', 'services.html'], ['Access Control', 'services.html'], ['24/7 Monitoring', 'services.html'], ['Security Assessments', 'services.html'], ['Intruder Alarms', 'services.html'], ['Fire Systems', 'services.html'], ['Smart Integration', 'services.html']] },
    { h: 'Company', items: [['About Fortify', 'about.html'], ['Our partners', 'about.html'], ['Contact', 'contact.html'], ['Get a quote', 'contact.html#quote']] },
    { h: 'Sectors', items: [['Retail & commercial', 'retail.html'], ['Hospitality', 'hospitality.html'], ['Offices', 'offices.html'], ['Multi-site', 'multi-site.html']] }
  ];
  return (
    <footer style={{ background: '#070E14', borderTop: '1px solid rgba(255,255,255,.07)', padding: '60px 32px 30px' }}>
      <Container style={{ padding: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }} className="fy-footer-grid">
          <div>
            <img src="assets/logo-white.png" alt="Fortify" style={{ height: 24, marginBottom: 16 }} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.65, color: 'var(--d-fg3)', maxWidth: 280, margin: 0 }}>
              Professional CCTV, access control and security assessments for businesses across Gibraltar — designed, installed and maintained by a team that's local and on call.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {[{ name: 'facebook', href: 'https://www.facebook.com/FortifySecurityGib/' }].map(s => (
                <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" style={{ width: 34, height: 34, borderRadius: 8, border: '1px solid rgba(255,255,255,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(72,192,208,.5)'}
                  onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,.12)'}>
                  <Icon name={s.name} size={15} color="var(--d-fg2)" />
                </a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.12em', color: 'var(--d-fg3)', textTransform: 'uppercase', marginBottom: 16 }}>{c.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.items.map(([it, href]) => (
                  <a key={it} href={href} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--d-fg2)', transition: 'color .2s var(--ease)' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'var(--d-fg2)'}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,.07)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--d-fg3)' }}>© {new Date().getFullYear()} Fortify Security Systems Ltd, Gibraltar</span>
          <div style={{ display: 'flex', gap: 22 }}>
            {[['Privacy', 'privacy.html'], ['Terms', 'terms.html'], ['Cookies', 'cookies.html']].map(([l, href]) => (
              <a key={l} href={href} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--d-fg3)', transition: 'color .2s var(--ease)' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--d-fg1)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--d-fg3)'}>{l}</a>
            ))}
          </div>
        </div>
      </Container>
    </footer>
  );
}

// ---- SubHero (photographic page header for sub-pages) ----------------
function SubHero({ eyebrow, title, lead, children }) {
  return (
    <section style={{ position: 'relative', background: 'var(--ink-900)', overflow: 'hidden', minHeight: 'clamp(420px,54vh,560px)', display: 'flex', alignItems: 'center' }}>
      {/* base grid texture (fallback) */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(72,192,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(72,192,208,.05) 1px,transparent 1px)',
        backgroundSize: '46px 46px'
      }} />
      {/* hero photograph */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url("assets/hero-gibraltar.png")', backgroundSize: 'cover', backgroundPosition: 'center right' }} />
      {/* legibility scrims — left dark → right clear */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(100deg, rgba(10,18,25,.95) 0%, rgba(10,18,25,.82) 36%, rgba(10,18,25,.5) 62%, rgba(10,18,25,.2) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(0deg, rgba(10,18,25,.85) 0%, transparent 28%)' }} />
      <Container style={{ padding: '72px 32px', position: 'relative' }}>
        {eyebrow && <Eyebrow style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>}
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: '#fff', fontSize: 'clamp(34px,4.2vw,56px)', lineHeight: 1.05, letterSpacing: '-.02em', margin: 0, maxWidth: 820 }}>
          {title}
        </h1>
        {lead && <p style={{ fontFamily: 'var(--font-body)', color: 'var(--d-fg1)', fontSize: 19, lineHeight: 1.6, margin: '22px 0 0', maxWidth: 620 }}>{lead}</p>}
        {children}
      </Container>
    </section>
  );
}

// ---- CTABand (shared closing call-to-action) -------------------------
function CTABand({ eyebrow = 'BOOK A FREE ASSESSMENT', title = 'Ready to secure your premises?', body = "Tell us about your site and we'll arrange a visit. Locally based, fast to respond, no obligation." }) {
  return (
    <section style={{ background: 'var(--surface)', padding: '84px 32px' }}>
      <Container style={{ padding: 0 }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 24, background: 'var(--ink-900)', border: '1px solid var(--d-border)', padding: 'clamp(40px,6vw,72px)' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 90% 110%,rgba(72,192,208,.16),transparent 55%)' }} />
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 560 }}>
              <Eyebrow style={{ marginBottom: 16 }}>{eyebrow}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3.4vw,44px)', letterSpacing: '-.02em', color: '#fff', margin: 0, lineHeight: 1.06 }}>{title}</h2>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--d-fg2)', marginTop: 16 }}>{body}</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Btn href="contact.html#quote" size="lg" iconRight="arrow-right">Get a quote</Btn>
              <Btn href={'mailto:' + FY_CONTACT.email} size="lg" variant="secondaryDark" icon="mail">{FY_CONTACT.email}</Btn>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Container, Eyebrow, Btn, Header, Footer, SubHero, CTABand, FY_NAV, FY_CONTACT });