/* Sections — DCAF microsite. Each section is a stand-alone React component
   that reads from props.t (translated content tree) and props.lang.
*/

const { useState, useEffect, useRef } = React;

// ─── DCAF logo (inline) ───
function DCAFLogo({ height = 18, color = "currentColor" }) {
  return (
    <svg height={height} viewBox="0 0 255.12 31.46" style={{ display: 'block' }}>
      <g fill={color}>
        <path d="M13.53,13.48l4.48-4.48,4.47,4.48-4.47,4.48-4.48-4.48ZM0,17.97l4.5,4.49,4.52-4.48,4.48,4.5-4.51,4.52,4.51,4.47,4.41-4.48,4.6,4.48,4.47-4.48-4.47-4.47,4.52-4.53,4.47,4.48,4.48-4.48L18.01,0,0,17.97Z" />
        <rect x="56.13" y="1.57" width=".79" height="28.32" />
        <path d="M82.03,24.29h3.66c4.06,0,7.32-3.81,7.32-8.48s-3.26-8.57-7.26-8.57h-3.72v17.06ZM77.05,25.82v-1.13h2.29V6.81h-2.29v-1.13h9c5.52,0,9.98,4.52,9.98,10.07s-4.45,10.07-10.01,10.07h-8.97Z" />
        <path d="M116.11,24.93c-2.53.95-4.24,1.28-6.47,1.28-6.25,0-10.83-4.39-10.83-10.44s4.58-10.46,10.47-10.46c2.11,0,3.63.31,5.37,1.13v-1.37h1.43v5.19h-1.43v-1.49c-1.86-1.37-3.23-1.89-5.19-1.89-4.42,0-7.63,3.6-7.63,8.6,0,3.88,1.52,6.59,4.61,8.21,1.16.61,2.38.95,3.51.95,1.49,0,2.75-.43,4.7-1.53v-2.23h1.46v4.06Z" />
        <path d="M125.07,10.77c.36-.06.76-.12,1.18-.17,1.47-2.9,4.47-4.9,7.95-4.9s6.48,1.99,7.95,4.9c.42.05.82.11,1.18.17-1.5-3.56-5.02-6.06-9.13-6.06s-7.63,2.5-9.13,6.06M121.31,12.83v.89s7.92-.4,12.89-.4,12.88.39,12.88.39v-.89s-2.96-1.58-12.88-1.58-12.89,1.59-12.89,1.59M116.31,15.31v.89s7.92.65,17.84.65,17.84-.65,17.84-.65v-.89s-7.92-.64-17.84-.64-17.84.64-17.84.64M134.2,18.14c-4.96,0-12.89-.4-12.89-.4v.89s2.96,1.59,12.89,1.59,12.88-1.59,12.88-1.59v-.89s-7.9.4-12.88.4M142.14,20.85c-1.47,2.9-4.47,4.9-7.95,4.9s-6.48-1.99-7.95-4.9c-.42-.05-.82-.11-1.18-.17,1.5,3.56,5.02,6.06,9.13,6.06s7.62-2.5,9.13-6.06c-.36.06-.76.12-1.18.17" />
        <path d="M163.95,17.73l-3.26-8.57-3.45,8.57h6.71ZM171.12,25.82h-6.96v-1.13h2.44l-2.14-5.49-7.81-.03-2.23,5.49h2.53v1.16h-5.83v-1.16h1.59l7.93-19.62h1.1l7.63,19.62h1.74v1.16Z" />
        <polygon points="177.38 26.18 176.61 26.18 170.92 12.42 169.59 12.42 169.59 11.63 175.19 11.63 175.19 12.42 173.06 12.42 177.44 22.98 181.78 12.42 180.29 12.42 180.29 11.63 184.15 11.63 184.15 12.42 183.02 12.42 177.38 26.18" />
        <polygon points="189.85 25.82 184.22 25.82 184.22 25.02 185.99 25.02 185.99 12.42 184.22 12.42 184.22 11.63 189.85 11.63 189.85 12.42 188.08 12.42 188.08 25.02 189.85 25.02 189.85 25.82" />
        <path d="M199.78,20.12l-2.53-6.04-2.67,6.04h5.2ZM205.34,25.82h-5.39v-.8h1.89l-1.66-3.87-6.06-.02-1.73,3.87h1.96v.82h-4.52v-.82h1.23l6.15-13.82h.85l5.91,13.82h1.35v.82Z" />
        <polygon points="214.04 25.82 207.23 25.82 207.23 25.02 209.6 25.02 209.6 12.7 204.87 12.7 204.87 14.42 203.73 14.42 203.73 11.03 204.87 11.03 204.87 11.63 216.41 11.63 216.41 11.03 217.55 11.03 217.55 14.42 216.41 14.42 216.41 12.7 211.68 12.7 211.68 25.02 214.04 25.02 214.04 25.82" />
        <polygon points="224 25.82 218.37 25.82 218.37 25.02 220.15 25.02 220.15 12.42 218.37 12.42 218.37 11.63 224 11.63 224 12.42 222.23 12.42 222.23 25.02 224 25.02 224 25.82" />
        <path d="M227.18,18.72c0,3.63,2.12,6.26,5.06,6.26s4.99-2.65,4.99-6.26-2.1-6.23-4.97-6.23-5.08,2.58-5.08,6.23M224.94,18.74c0-4.04,3.3-7.37,7.29-7.37s7.22,3.35,7.22,7.35-3.3,7.37-7.22,7.37-7.29-3.35-7.29-7.35" />
        <polygon points="250.36 11.63 250.36 12.42 252.16 12.42 252.16 22.42 243.5 11.63 240.07 11.63 240.07 12.42 241.71 12.42 242.35 13.24 242.35 25.02 240.55 25.02 240.55 25.82 245.33 25.82 245.33 25.02 243.53 25.02 243.53 14.7 252.61 26.05 253.34 26.05 253.34 12.42 255.12 12.42 255.12 11.63 250.36 11.63" />
      </g>
    </svg>
  );
}

// ─── Reveal on scroll ───
function Reveal({ children, delay = 0, as = "div", className = "" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    let done = false;
    const mark = () => { if (!done) { done = true; setShown(true); } };
    // Safety: if IntersectionObserver doesn't fire (some preview iframes),
    // show after a short delay anyway. The cascade still feels staggered.
    const fallback = setTimeout(mark, 350);
    let obs;
    try {
      obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { mark(); obs.disconnect(); } }, { threshold: 0.05, rootMargin: '0px 0px -10% 0px' });
      obs.observe(ref.current);
    } catch (e) { mark(); }
    return () => { clearTimeout(fallback); if (obs) obs.disconnect(); };
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={"reveal " + (shown ? "in " : "") + className} style={{ transitionDelay: shown ? `${delay}ms` : '0ms' }}>{children}</Tag>;
}

const ArrowR = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

// ─── Header ───
function SiteHeader({ t, lang, setLang, theme }) {
  const [scrolled, setScrolled] = useState(false);
  const [onPaper, setOnPaper] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      // detect background of element under header center
      const el = document.elementFromPoint(window.innerWidth / 2, 60);
      if (el) {
        const closest = el.closest('.facility, .enquiry');
        setOnPaper(!!closest);
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "") + (onPaper ? " on-paper" : "")}>
      <div className="header-inner">
        <a href="#top" className="header-logo">
          <DCAFLogo height={16} />
        </a>
        <nav className="header-nav">
          <a href="#services">{t.nav.svcs}</a>
          <a href="#facility">{t.nav.fbo}</a>
          <a href="#charter">{t.nav.charter}</a>
          <a href="#credentials">{t.nav.about}</a>
          <a href="#enquiry">{t.nav.contact}</a>
        </nav>
        <div className="header-right">
          <div className="lang-switch">
            {['en','ar','ru','zh'].map(l => (
              <button key={l} onClick={() => setLang(l)} className={lang === l ? 'on' : ''}>{l.toUpperCase()}</button>
            ))}
          </div>
          <a href="#enquiry" className="btn btn-primary" style={{ padding: '12px 18px' }}>
            {t.cta.quote} <ArrowR size={12} />
          </a>
        </div>
      </div>
    </header>
  );
}

// ─── Hero ───
function Hero({ t, lang, heroImg }) {
  const dir = lang === 'ar' ? 'rtl' : 'ltr';
  return (
    <section className="hero" id="top" dir={dir} data-screen-label="01 Hero">
      <div className="hero-bg">
        <img src={heroImg} alt="DCAF facility at Dubai South" />
      </div>
      <span className="hero-corner tl"></span>
      <span className="hero-corner tr"></span>
      <span className="hero-corner bl"></span>
      <span className="hero-corner br"></span>
      <div className="hero-live">
        <span className="live-dot-mini"></span>
        <span>Live · 24h ops · OMDW</span>
      </div>
      <div className="hero-meta">
        <div className="mono">
          <em>Position</em>
          {t.hero.coords[0]}<br />
          {t.hero.coords[1]}<br />
          {t.hero.coords[2]}<br />
          <span style={{ display: 'block', marginTop: 10, color: 'var(--signal)' }}>● {t.hero.bearing}</span>
        </div>
      </div>
      <div className="wrap hero-content">
        <div className="eyebrow"><span className="rule-gold"></span>{t.hero.eyebrow}</div>
        <h1 className="serif">
          {t.hero.h1a}<em>{t.hero.h1b}</em>{t.hero.h1c}
        </h1>
        <div className="hero-meta-row">
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-cta">
            <a href="#enquiry" className="btn btn-primary">{t.hero.cta1} <ArrowR /></a>
            <a href="tel:+97148701800" className="btn btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>
      </div>
      <div className="hero-scroll">
        <span>scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

// ─── Ticker ───
function Ticker({ t }) {
  // duplicate so the loop is seamless
  const items = [...t.ticker, ...t.ticker, ...t.ticker];
  return (
    <div className="ticker">
      <div className="ticker-inner">
        {items.map((line, i) => (
          <span key={i} className="ticker-item"><span className="dot"></span>{line}</span>
        ))}
      </div>
    </div>
  );
}

// ─── JV strip ───
function JVStrip({ t, lang }) {
  return (
    <section className="jv-strip">
      <div className="wrap jv-inner">
        <div className="jv-side">
          {t.jv.left}
          <em>{t.jv.leftEm}</em>
        </div>
        <div className="jv-center serif-i">"{t.jv.center}"</div>
        <div className="jv-side right">
          {t.jv.right}
          <em>{t.jv.rightEm}</em>
        </div>
      </div>
    </section>
  );
}

// ─── Services ───
function Services({ t }) {
  return (
    <section className="services" id="services" data-screen-label="02 Services">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="rule-gold"></span>{t.services.eyebrow}</div>
              <h2 className="serif" style={{ marginTop: 20 }}>
                {t.services.h2a}<em className="serif-i">{t.services.h2b}</em>{t.services.h2c}
              </h2>
            </div>
            <p className="lede">{t.services.lede}</p>
          </div>
        </Reveal>
        <div className="services-grid">
          {t.services.list.map((s, i) => (
            <Reveal key={s.id} delay={i * 80}>
              <a href={"#" + s.id} className="svc-card" style={{ display: 'flex', height: '100%' }}>
                <div className="svc-img"><img src={s.img} alt={s.title} /></div>
                <div className="svc-body">
                  <div className="svc-meta">
                    <span>/ {s.num}</span>
                    <span>{s.tag}</span>
                  </div>
                  <h3 className="serif">{s.title}</h3>
                  <p>{s.body}</p>
                  <span className="svc-link">{s.link} <ArrowR /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Facility specs ───
function Facility({ t }) {
  return (
    <section className="facility" id="facility" data-screen-label="03 Facility">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="eyebrow" style={{ color: 'var(--paper-muted)' }}><span className="rule-gold"></span>{t.facility.eyebrow}</div>
              <h2 className="serif" style={{ marginTop: 20 }}>{t.facility.h2}</h2>
            </div>
            <p className="lede">{t.facility.lede}</p>
          </div>
        </Reveal>
        <div className="facility-grid">
          <Reveal>
            <div className="facility-img">
              <div className="img-wrap" style={{ height: '100%' }}>
                <img src="media/hangar-exterior.webp" alt="DCAF hangar" />
              </div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div className="specs">
              {t.facility.specs.map((s, i) => (
                <div className="spec-row" key={i}>
                  <span className="spec-num">/ {s.num}</span>
                  <span className="spec-label">{s.label}<em>{s.desc}</em></span>
                  <span className="spec-value">{s.value}<sup>{s.unit.includes('m²') ? '' : ''}</sup> <em>{s.unit}</em></span>
                </div>
              ))}
              <div className="facility-chips">
                {t.facility.chips.map((c, i) => (
                  <span className="facility-chip" key={i}><span className="dot"></span>{c}</span>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Charter fleet ───
function Charter({ t }) {
  const [active, setActive] = useState('g650');
  return (
    <section className="charter" id="charter" data-screen-label="04 Charter">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="rule-gold"></span>{t.charter.eyebrow}</div>
              <h2 className="serif" style={{ marginTop: 20 }}>{t.charter.h2}</h2>
            </div>
            <p className="lede">{t.charter.lede}</p>
          </div>
        </Reveal>
        <div className="fleet">
          {t.charter.fleet.map((f, i) => (
            <Reveal key={f.id} delay={i * 60}>
              <div className={"fleet-card" + (active === f.id ? " active" : "")} onClick={() => setActive(f.id)}>
                <div className={"fleet-img" + (!f.img ? " placeholder" : "")}>
                  {f.img ? <img src={f.img} alt={f.name} /> : (
                    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
                      <defs>
                        <pattern id={`s-${f.id}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                          <line x1="0" y1="0" x2="0" y2="6" stroke="#3a4a5a" strokeWidth="1" />
                        </pattern>
                      </defs>
                      <rect width="200" height="100" fill={`url(#s-${f.id})`} />
                      <text x="100" y="55" textAnchor="middle" fill="#94A0AE" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2">RENDER · {f.id.toUpperCase()}</text>
                    </svg>
                  )}
                </div>
                <div className="fleet-body">
                  <div className="fleet-eyebrow">{f.tag}</div>
                  <h3 className="serif">{f.name}</h3>
                  <div className="range mono">{f.range}</div>
                  <div className="fleet-specs">
                    <div className="fleet-spec"><span className="k">PAX</span><span className="v">{f.pax}</span></div>
                    <div className="fleet-spec"><span className="k">BEDS</span><span className="v">{f.beds}</span></div>
                    <div className="fleet-spec"><span className="k">WI-FI</span><span className="v">{f.wifi}</span></div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 36, textAlign: 'center' }}>{t.charter.note}</div>
      </div>
    </section>
  );
}

// ─── Credentials ───
function Credentials({ t }) {
  return (
    <section className="credentials" id="credentials" data-screen-label="05 Credentials">
      <div className="wrap">
        <div className="credentials-grid">
          <Reveal>
            <div className="cred-head">
              <div className="eyebrow"><span className="rule-gold"></span>{t.credentials.eyebrow}</div>
              <h2 className="serif">{t.credentials.h2a}<em className="serif-i">{t.credentials.h2b}</em>{t.credentials.h2c}</h2>
              <p>{t.credentials.lede}</p>
              <div className="cred-quote">
                <div>
                  <div className="mono">{t.credentials.quoteSrc}</div>
                  <p>"{t.credentials.quote}"</p>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="cred-badges">
              {t.credentials.badges.map((b, i) => (
                <div className="cred-badge" key={i}>
                  <div className="cred-num">{b.num}{b.numEm && <em>{b.numEm}</em>}</div>
                  <div className="cred-title">{b.title}<em>{b.sub}</em></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Enquiry (multi-step form) ───
function Enquiry({ t, lang }) {
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({ service: '', name: '', company: '', email: '', phone: '', aircraft: '', from: 'OMDW', to: '', date: '', pax: '', message: '' });
  const L = t.enquiry.labels;

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const canNext = () => {
    if (step === 0) return !!data.service;
    if (step === 1) return data.from && data.to && data.date;
    if (step === 2) return data.name && data.email;
    return false;
  };

  const ref = String(Math.floor(100000 + Math.random() * 900000));

  return (
    <section className="enquiry" id="enquiry" data-screen-label="06 Enquiry">
      <div className="wrap">
        <Reveal>
          <div className="sec-head" style={{ borderColor: 'rgba(10,16,24,0.15)' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--paper-muted)' }}><span className="rule-gold"></span>{t.enquiry.eyebrow}</div>
              <h2 className="serif" style={{ marginTop: 20 }}>{t.enquiry.h2a}<em className="serif-i">{t.enquiry.h2b}</em>.</h2>
            </div>
            <p className="lede" style={{ color: 'var(--paper-muted)' }}>{t.enquiry.lede}</p>
          </div>
        </Reveal>
        <div className="enquiry-grid">
          <Reveal>
            <div className="enq-side">
              <div className="enq-contact">
                {t.enquiry.contact.map((c, i) => (
                  <div className="enq-contact-row" key={i}>
                    <span className="k">{c.k}</span>
                    <span className="v">{c.v}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 36, padding: 24, background: 'rgba(10,16,24,0.04)', borderLeft: '2px solid var(--signal)' }}>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--paper-muted)', marginBottom: 8 }}>Direct response</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--paper-text)' }}>
                  Our 24-hour Dubai desk handles every enquiry — no offshore call centre, no IVR. Average first response is under an hour.
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="enq-form">
              {submitted ? (
                <div className="enq-success">
                  <svg width="56" height="56" viewBox="0 0 64 64" fill="none">
                    <circle cx="32" cy="32" r="30" stroke="var(--signal)" strokeWidth="1.5" />
                    <path d="M20 33l9 9 16-19" stroke="var(--signal)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <h3>{t.enquiry.success.h}</h3>
                  <p>{t.enquiry.success.p}<span className="mono" style={{ color: 'var(--paper-text)' }}>DCAF-{ref}</span></p>
                </div>
              ) : (
                <React.Fragment>
                  <div className="enq-stepper">
                    {t.enquiry.steps.map((s, i) => (
                      <button key={i} className={"step-pill" + (step === i ? " active" : step > i ? " done" : "")} onClick={() => i < step && setStep(i)}>{s}</button>
                    ))}
                  </div>

                  {step === 0 && (
                    <div>
                      <div className="svc-pick">
                        {t.enquiry.svcOptions.map(o => (
                          <button key={o.id} type="button" className={data.service === o.id ? "on" : ""} onClick={() => set('service', o.id)}>
                            <span className="svc-pick-name">{o.name}</span>
                            <span className="svc-pick-desc">{o.desc}</span>
                          </button>
                        ))}
                      </div>
                    </div>
                  )}

                  {step === 1 && (
                    <div>
                      <div className="field"><label>{L.aircraft}</label><input value={data.aircraft} onChange={e => set('aircraft', e.target.value)} placeholder="G650 / Global 7500 / …" /></div>
                      <div className="field-row">
                        <div className="field"><label>{L.from}</label><input value={data.from} onChange={e => set('from', e.target.value)} placeholder="OMDW" /></div>
                        <div className="field"><label>{L.to}</label><input value={data.to} onChange={e => set('to', e.target.value)} placeholder="EGLF / LFPB" /></div>
                      </div>
                      <div className="field-row">
                        <div className="field"><label>{L.date}</label><input type="text" value={data.date} onChange={e => set('date', e.target.value)} placeholder="14 Jun 2026" /></div>
                        <div className="field"><label>{L.pax}</label><input type="text" value={data.pax} onChange={e => set('pax', e.target.value)} placeholder="6" /></div>
                      </div>
                    </div>
                  )}

                  {step === 2 && (
                    <div>
                      <div className="field-row">
                        <div className="field"><label>{L.name}</label><input value={data.name} onChange={e => set('name', e.target.value)} /></div>
                        <div className="field"><label>{L.company}</label><input value={data.company} onChange={e => set('company', e.target.value)} /></div>
                      </div>
                      <div className="field-row">
                        <div className="field"><label>{L.email}</label><input type="email" value={data.email} onChange={e => set('email', e.target.value)} /></div>
                        <div className="field"><label>{L.phone}</label><input value={data.phone} onChange={e => set('phone', e.target.value)} placeholder="+971 …" /></div>
                      </div>
                      <div className="field"><label>{L.message}</label><textarea value={data.message} onChange={e => set('message', e.target.value)} /></div>
                    </div>
                  )}

                  <div className="enq-actions">
                    {step > 0 ? <button type="button" className="btn btn-ghost-dark" onClick={() => setStep(step - 1)}>{L.back}</button> : <span></span>}
                    {step < 2 ? (
                      <button type="button" className="btn btn-primary" disabled={!canNext()} style={{ opacity: canNext() ? 1 : 0.4 }} onClick={() => canNext() && setStep(step + 1)}>{L.next} <ArrowR /></button>
                    ) : (
                      <button type="button" className="btn btn-primary" disabled={!canNext()} style={{ opacity: canNext() ? 1 : 0.4 }} onClick={() => canNext() && setSubmitted(true)}>{L.submit} <ArrowR /></button>
                    )}
                  </div>
                </React.Fragment>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───
function Footer({ t }) {
  return (
    <footer data-screen-label="07 Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="footer-logo"><DCAFLogo height={22} color="#fff" /></div>
            <p className="serif-i" style={{ fontSize: 22, color: '#fff', marginBottom: 16, lineHeight: 1.3 }}>"{t.footer.tag}"</p>
            <p>{t.footer.desc}</p>
          </div>
          <div className="footer-col">
            <h4>{t.footer.colA.h}</h4>
            {t.footer.colA.links.map((l, i) => <a key={i} href="#services">{l}</a>)}
          </div>
          <div className="footer-col">
            <h4>{t.footer.colB.h}</h4>
            {t.footer.colB.links.map((l, i) => <a key={i} href="#credentials">{l}</a>)}
          </div>
          <div className="footer-col">
            <h4>{t.footer.colC.h}</h4>
            {t.footer.colC.contact.map((c, i) => (
              <div className="contact-line" key={i}>
                <em>{c.k}</em>
                <span style={{ whiteSpace: 'pre-line' }}>{c.v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.legal}</span>
          <span style={{ maxWidth: 460, textAlign: 'right', textTransform: 'none', letterSpacing: 0, fontFamily: 'Manrope, sans-serif', color: 'var(--muted-light)' }}>{t.footer.note}</span>
        </div>
      </div>
    </footer>
  );
}

// ─── Sticky CTA ───
function StickyCTA({ t }) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.6);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (show ? " show" : "")}>
      <a href="#enquiry" className="btn btn-primary">{t.cta.quote} <ArrowR /></a>
    </div>
  );
}

Object.assign(window, { SiteHeader, Hero, Ticker, JVStrip, Services, Facility, Charter, Credentials, Enquiry, Footer, StickyCTA, DCAFLogo, ArrowR, Reveal });
