// shared.jsx · palette, type, Nav, Footer, motif, animations
// Exported to window for per-page babel scripts.

const ARMIK = {
  // light, warm palette derived from the logo cyan + handshake blue
  bg:       "#F5F0E6",   // warm parchment
  bgAlt:    "#EBE5D6",   // slightly deeper cream
  bgDeep:   "#DED6C2",   // sand
  surface:  "#FFFFFF",   // pure white card
  ink:      "#16171B",   // near-black
  inkSoft:  "#16171BD9",
  inkMute:  "#16171B99",
  inkFaint: "#16171B5C",
  rule:     "#16171B22",
  accent:   "#1A8F9C",   // a darker, readable take on the logo cyan
  accentBri:"#83D6DE",   // the actual logo cyan, for decorative use
  blue:     "#1F47E6",   // royal blue from the handshake image
  brass:    "#B89763",
};

const TYPE = {
  display: "'Instrument Serif', 'Cormorant Garamond', serif",
  body:    "'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif",
  mono:    "'Geist Mono', ui-monospace, monospace",
};

function buildStyles() {
  const c = ARMIK;
  return `
    :root{
      --bg:${c.bg};--bg-alt:${c.bgAlt};--bg-deep:${c.bgDeep};--surface:${c.surface};
      --ink:${c.ink};--ink-soft:${c.inkSoft};--ink-mute:${c.inkMute};
      --ink-faint:${c.inkFaint};--rule:${c.rule};
      --accent:${c.accent};--accent-bri:${c.accentBri};--blue:${c.blue};--brass:${c.brass};
      --display:${TYPE.display};--body:${TYPE.body};--mono:${TYPE.mono};
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    html,body{background:var(--bg);color:var(--ink);font-family:var(--body);
      -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}
    body{overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
    img{display:block;max-width:100%}
    ::selection{background:var(--accent);color:#fff}

    .wrap{max-width:1320px;margin:0 auto;padding:0 40px;position:relative}
    @media(max-width:720px){.wrap{padding:0 22px}}

    .display{font-family:var(--display);font-weight:400;letter-spacing:-0.02em;line-height:.98}
    .italic{font-style:italic}
    .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;
      letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:500}

    /* ANIMATIONS */
    .reveal{opacity:0;transform:translateY(28px);
      transition:opacity .9s cubic-bezier(.2,.6,.1,1),transform .9s cubic-bezier(.2,.6,.1,1)}
    .reveal.in{opacity:1;transform:translateY(0)}
    .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
    .reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
    .reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s}

    @keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}
      50%{transform:translate(8px,-12px) rotate(2deg)}}
    @keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}
      50%{opacity:1;transform:scale(1.04)}}
    @keyframes wink{0%,100%{opacity:.92}50%{opacity:1}}
    @keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

    /* NAV */
    .nav{position:sticky;top:0;z-index:50;
      background:color-mix(in oklab,var(--bg) 88%,transparent);
      backdrop-filter:blur(18px) saturate(140%);
      border-bottom:1px solid var(--rule)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;
      height:96px;gap:24px}
    .brand{display:flex;align-items:center;gap:10px}
    .brand img{height:72px;width:auto;transition:transform .3s ease}
    .brand:hover img{transform:scale(1.04)}
    .nav-links{display:flex;gap:32px;font-size:13px;color:var(--ink-mute);
      letter-spacing:.04em}
    .nav-links a{padding:6px 0;border-bottom:1px solid transparent;transition:.2s;
      position:relative}
    .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
      height:1px;background:var(--accent);transform:scaleX(0);
      transform-origin:left;transition:transform .35s ease}
    .nav-links a:hover,.nav-links a.active{color:var(--ink)}
    .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
    .nav-cta{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;
      padding:11px 18px;border:1px solid var(--ink);border-radius:999px;
      transition:.25s;letter-spacing:.04em;color:var(--ink)}
    .nav-cta:hover{background:var(--ink);color:var(--bg)}
    .nav-cta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
      animation:pulse 2.4s ease-in-out infinite;
      box-shadow:0 0 0 4px ${c.accent}1F}
    @media(max-width:780px){.nav-links{display:none}.brand img{height:54px}}

    /* HEADINGS */
    .eyebrow{display:flex;align-items:center;gap:12px;color:var(--ink-mute);
      margin-bottom:36px}
    .eyebrow .bar{width:32px;height:1px;background:var(--ink-faint);
      position:relative;overflow:hidden}
    .eyebrow .bar::after{content:"";position:absolute;inset:0;
      background:var(--accent);transform:translateX(-100%);
      animation:slideIn 1.6s ease-out forwards}
    @keyframes slideIn{to{transform:translateX(0)}}

    section{padding:120px 0;position:relative}
    @media(max-width:720px){section{padding:80px 0}}
    .sec-head{display:grid;grid-template-columns:200px 1fr;gap:48px;margin-bottom:64px;
      align-items:start}
    @media(max-width:780px){.sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}}
    .sec-num{color:var(--accent)}
    .sec-title{font-size:clamp(40px,5.4vw,72px);max-width:14ch}

    /* BUTTONS */
    .btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;
      border-radius:999px;font-size:13px;letter-spacing:.06em;
      text-transform:uppercase;font-weight:500;transition:.25s;
      border:1px solid transparent;position:relative;overflow:hidden}
    .btn-primary{background:var(--ink);color:var(--bg)}
    .btn-primary:hover{background:var(--accent);color:#fff;transform:translateY(-1px);
      box-shadow:0 12px 28px -8px ${c.accent}55}
    .btn-ghost{border-color:var(--ink);color:var(--ink)}
    .btn-ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-1px)}
    .btn-bri{background:var(--accent);color:#fff}
    .btn-bri:hover{background:#15777F;transform:translateY(-1px)}
    .btn .arrow{width:18px;height:1px;background:currentColor;position:relative;
      transition:.25s}
    .btn .arrow::after{content:"";position:absolute;right:-1px;top:-3px;
      width:7px;height:7px;border-top:1px solid currentColor;
      border-right:1px solid currentColor;transform:rotate(45deg)}
    .btn:hover .arrow{width:24px}

    /* PLACEHOLDERS */
    .ph{background:
      repeating-linear-gradient(135deg,${c.ink}08 0 10px,${c.ink}04 10px 20px),
      var(--bg-alt);
      border:1px solid var(--rule);display:flex;align-items:flex-end;padding:18px;
      font-family:var(--mono);font-size:10px;color:var(--ink-faint);
      letter-spacing:.06em;text-transform:uppercase}

    /* MARQUEE */
    .marquee{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
      padding:22px 0;overflow:hidden;font-family:var(--mono);font-size:11px;
      letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
      background:var(--bg-alt)}
    .marquee-track{display:flex;gap:64px;white-space:nowrap;
      animation:slide 70s linear infinite}
    .marquee-track span{display:inline-flex;align-items:center;gap:64px}
    .marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;
      background:var(--accent);display:inline-block;flex-shrink:0}
    @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    /* BRAND MARK: two intersecting circles motif (from the handshake image) */
    .mark{position:relative;display:inline-block}
    .mark svg{display:block}
    .mark circle{fill:none;stroke:currentColor;stroke-width:1.4}

    /* FOOTER */
    footer{background:var(--bg-alt);color:var(--ink-mute);
      padding:80px 0 56px;border-top:1px solid var(--rule)}
    .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
      padding-bottom:48px;border-bottom:1px solid var(--rule)}
    @media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
    .foot-grid h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
      text-transform:uppercase;color:var(--accent);margin-bottom:20px}
    .foot-grid p,.foot-grid a{font-size:13.5px;line-height:1.7;display:block;
      color:var(--ink-mute)}
    .foot-grid a:hover{color:var(--ink)}
    .foot-grid .brand{margin-bottom:20px}
    .foot-grid .brand img{height:96px}
    .foot-grid .tagline{font-family:var(--display);font-size:22px;color:var(--ink);
      line-height:1.3;max-width:24ch}
    .foot-bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
      padding-top:32px;font-size:12px;color:var(--ink-faint)}
    .foot-mark{position:absolute;right:40px;bottom:40px;color:${c.accentBri};
      opacity:.35;animation:spinSlow 90s linear infinite}
  `;
}

// IntersectionObserver-driven reveal: adds .in to .reveal elements as they enter view.
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

// Count-up animation when element enters view.
function CountUp({ to, prefix = "", suffix = "", duration = 1600, decimals = 0 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          obs.disconnect();
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(to * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [to]);
  return <span ref={ref}>{prefix}{val.toFixed(decimals)}{suffix}</span>;
}

// Two intersecting circles SVG: the brand motif lifted from the handshake image.
function CirclesMark({ size = 56, stroke = 1.4, className = "" }) {
  const w = size * 1.6;
  return (
    <span className={"mark " + className}>
      <svg width={w} height={size} viewBox="0 0 80 50" aria-hidden="true">
        <circle cx="25" cy="25" r="22" strokeWidth={stroke} />
        <circle cx="55" cy="25" r="22" strokeWidth={stroke} />
      </svg>
    </span>
  );
}

function Nav({ active }) {
  const link = (href, label) => (
    <a href={href} className={active === label ? "active" : ""}>{label}</a>
  );
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="index.html" className="brand">
          <img src="assets/armik-logo-light.png" alt="Armik Capital" />
        </a>
        <nav className="nav-links">
          {link("index.html", "Home")}
          {link("about.html", "About")}
          {link("contact.html", "Contact")}
        </nav>
        <a href="contact.html" className="nav-cta">
          <span className="dot"></span>
          Start a conversation
        </a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="brand">
              <img src="assets/armik-logo-light.png" alt="Armik Capital" />
            </div>
            <p className="tagline">
              A London holding company building enduring British businesses for the long term.
            </p>
          </div>
          <div>
            <h5>Site</h5>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
          </div>
          <div>
            <h5>Contact</h5>
            <a href="mailto:hello@armikcapital.co.uk">hello@armikcapital.co.uk</a>
            <p style={{marginTop:10}}>London, United Kingdom</p>
          </div>
          <div>
            <h5>Notes</h5>
            <p>All enquiries are treated in strict confidence and answered personally.</p>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 Armik Capital Ltd. Registered in England and Wales.</span>
          <span className="mono">London</span>
        </div>
      </div>
    </footer>
  );
}

function Marquee() {
  const items = [
    "Industrial Services","B2B Distribution","Specialty Manufacturing",
    "Healthcare Services","Niche Software","Engineering",
    "Skilled Trades","Logistics","Food and Beverage","Professional Services"
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>{items.map((i,k)=> <span key={k}>{i}</span>)}</span>
        <span>{items.map((i,k)=> <span key={k+100}>{i}</span>)}</span>
      </div>
    </div>
  );
}

Object.assign(window, { ARMIK, TYPE, buildStyles, Nav, Footer, Marquee,
  useReveal, CountUp, CirclesMark });