// Shared chrome: Header, Footer, LogoStrip, CTASection
// Every Babel script has its own scope — components export to window at the end.

const { useState, useEffect } = React;

// ─── Header ──────────────────────────────────────────────
const chromeHdr = {
  wrap: { position:'sticky', top:0, zIndex:50, backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
          background:'rgba(14,14,15,0.72)', borderBottom:'1px solid rgba(244,241,236,0.06)' },
  inner: { maxWidth:1440, margin:'0 auto', padding:'0 clamp(24px, 5vw, 96px)', height:72,
           display:'flex', alignItems:'center', gap:32 },
  logo: { fontSize:15, fontWeight:500, letterSpacing:'-0.01em', color:'#F4F1EC', textDecoration:'none', flex:1, display:'inline-flex', alignItems:'center', gap:10 },
  dot: { width:7, height:7, borderRadius:999, background:'var(--ldo-accent, #C9A86A)', display:'inline-block' },
  nav: { display:'flex', gap:28 },
  link: { fontSize:13.5, textDecoration:'none', transition:'opacity .16s', letterSpacing:'-0.005em' },
  cta: { background:'#F4F1EC', color:'#0E0E0F', borderRadius:999, padding:'10px 18px', fontSize:13,
         fontWeight:500, textDecoration:'none', display:'inline-flex', gap:8, alignItems:'center' }
};

function Header({ current }) {
  const links = [
    { label:'Work', href:'work.html' },
    { label:'Services', href:'services.html' },
    { label:'About', href:'about.html' },
    { label:'Contact', href:'contact.html' },
  ];
  return (
    <header style={chromeHdr.wrap}>
      <div style={chromeHdr.inner}>
        <a href="index.html" style={chromeHdr.logo}>
          <span style={chromeHdr.dot}/> Liminal Design Office
        </a>
        <nav style={chromeHdr.nav}>
          {links.map(l => (
            <a key={l.label} href={l.href}
               style={{...chromeHdr.link, color: current === l.label ? '#F4F1EC' : '#B6B3AE'}}>{l.label}</a>
          ))}
        </nav>
        <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={chromeHdr.cta}>Book a call <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
      </div>
    </header>
  );
}

// ─── LogoStrip ───────────────────────────────────────────
const chromeLs = {
  wrap: { padding:'48px clamp(24px, 5vw, 96px) 96px', maxWidth:1440, margin:'0 auto' },
  label: { fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:72 },
  mask: { overflow:'hidden',
          WebkitMaskImage:'linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%)',
          maskImage:'linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%)' },
  track: { display:'flex', alignItems:'center', gap:80, animation:'ldoMarquee 38s linear infinite', width:'max-content' },
  logo: { height:56, objectFit:'contain', filter:'brightness(0) invert(1)', opacity:0.65 }
};

function LogoStrip({ label = "Who we've worked with" }) {
  const logos = ['sainsburys','bp','lloyds','unilever','virgin-media','xr','bt','tui'];
  return (
    <section style={chromeLs.wrap}>
      <div style={chromeLs.label}>— {label}</div>
      <div style={chromeLs.mask}>
        <div style={chromeLs.track}>
          {[...logos, ...logos, ...logos].map((l, i) => (
            <img key={i} src={`assets/${l}.png`} alt={l} style={chromeLs.logo}/>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTASection ──────────────────────────────────────────
const chromeCta = {
  wrap: { padding:'160px clamp(24px, 5vw, 96px) 144px', maxWidth:1440, margin:'0 auto', position:'relative' },
  eyebrow: { fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28 },
  h2: { fontSize:'clamp(48px, 7vw, 112px)', fontWeight:500, letterSpacing:'-0.035em', lineHeight:0.96, margin:'0 0 40px', maxWidth:'14ch' },
  p: { fontSize:19, lineHeight:1.55, color:'#B6B3AE', maxWidth:560, margin:'0 0 48px' },
  row: { display:'flex', gap:14, flexWrap:'wrap', alignItems:'center' },
  btn: { background:'#F4F1EC', color:'#0E0E0F', borderRadius:999, padding:'16px 28px', fontSize:14, fontWeight:500,
         textDecoration:'none', display:'inline-flex', gap:10, alignItems:'center' },
  tag: { fontSize:13, color:'#7A7874', letterSpacing:'-0.005em' }
};

function CTASection() {
  return (
    <section style={chromeCta.wrap}>
      <div style={chromeCta.eyebrow}>— Start a conversation</div>
      <h2 style={chromeCta.h2}>Contact us and let's start a conversation.</h2>
      <p style={chromeCta.p}>
        Whether you're navigating transformation, building capability, or preparing for future challenges, we're here to help. Reach out to discuss your specific context and explore how we might work together.
      </p>
      <div style={chromeCta.row}>
        <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={chromeCta.btn}>Book a call <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
        <span style={chromeCta.tag}>or email hello@liminaldesignoffice.com</span>
      </div>
    </section>
  );
}

// ─── Footer ──────────────────────────────────────────────
const chromeFt = {
  wrap: { borderTop:'1px solid rgba(244,241,236,0.08)', padding:'96px clamp(24px, 5vw, 96px) 48px' },
  inner: { maxWidth:1440, margin:'0 auto', display:'grid', gridTemplateColumns:'1.4fr 2fr', gap:64 },
  wm: { fontSize:'clamp(44px, 5vw, 72px)', fontWeight:500, letterSpacing:'-0.03em', color:'#F4F1EC', lineHeight:0.95, margin:0 },
  tag: { fontSize:15, lineHeight:1.55, color:'#7A7874', maxWidth:360, margin:'24px 0 0' },
  cols: { display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:32 },
  col: { display:'flex', flexDirection:'column', gap:12 },
  colh: { fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:4 },
  a: { fontSize:14, color:'#B6B3AE', textDecoration:'none', transition:'opacity .16s' },
  legal: { maxWidth:1440, margin:'96px auto 0', paddingTop:24, borderTop:'1px solid rgba(244,241,236,0.08)',
           display:'flex', justifyContent:'space-between', fontSize:12, color:'#7A7874', gap:24, flexWrap:'wrap' }
};

function Footer() {
  return (
    <footer style={chromeFt.wrap}>
      <div style={chromeFt.inner}>
        <div>
          <h3 style={chromeFt.wm}>Liminal<br/>Design Office.</h3>
          <p style={chromeFt.tag}>Strategic design and transformation for senior leaders navigating what's between what is and what's next.</p>
        </div>
        <div style={chromeFt.cols}>
          <div style={chromeFt.col}>
            <div style={chromeFt.colh}>Main</div>
            <a href="work.html" style={chromeFt.a}>Work</a>
            <a href="services.html" style={chromeFt.a}>Services</a>
            <a href="index.html#approach" style={chromeFt.a}>Our approach</a>
            <a href="index.html#testimonials" style={chromeFt.a}>Testimonials</a>
          </div>
          <div style={chromeFt.col}>
            <div style={chromeFt.colh}>More</div>
            <a href="index.html#faq" style={chromeFt.a}>FAQ</a>
            <a href="contact.html" style={chromeFt.a}>Contact</a>
            <a href="about.html" style={chromeFt.a}>About us</a>
          </div>
          <div style={chromeFt.col}>
            <div style={chromeFt.colh}>Contact</div>
            <a href="mailto:hello@liminaldesignoffice.com" style={chromeFt.a}>hello@liminaldesignoffice.com</a>
            <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={chromeFt.a}>Book a call →</a>
            <a href="https://www.linkedin.com/company/liminal-design-office/" style={chromeFt.a}>LinkedIn ↗</a>
          </div>
        </div>
      </div>
      <div style={chromeFt.legal}>
        <span>© 2026 Liminal Design Office Ltd.</span>
        <span>Registered in England & Wales.</span>
      </div>
    </footer>
  );
}

// ─── Shared small atoms ──────────────────────────────────
function PageIntro({ eyebrow, title, body, align = 'left', maxW = '20ch' }) {
  return (
    <section style={{
      maxWidth:1440, margin:'0 auto',
      padding:'128px clamp(24px, 5vw, 96px) 64px',
      display:'grid',
      gridTemplateColumns: body ? '1.15fr 1fr' : '1fr',
      gap:64,
      alignItems:'end'
    }}>
      <div>
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— {eyebrow}</div>
        <h1 style={{fontSize:'clamp(56px, 8.5vw, 136px)', fontWeight:500, letterSpacing:'-0.035em', lineHeight:0.95, margin:0, textWrap:'balance', maxWidth:maxW}}>{title}</h1>
      </div>
      {body && <p style={{fontSize:19, lineHeight:1.55, color:'#B6B3AE', margin:0, maxWidth:480}}>{body}</p>}
    </section>
  );
}

Object.assign(window, { Header, LogoStrip, CTASection, Footer, PageIntro });