// Shared components — Nav, Footer, primitives
// Exposed via window.* so other Babel script files can use them.

const { useState, useEffect, useRef, useMemo } = React;

// --- Brand wordmark
// Text-only "Qlari" lockup with a persimmon square dot at the Q's tail,
// echoing the favicon. No icon, no glyph box.
function BrandWordmark({ size }) {
  const style = size ? { fontSize: size } : undefined;
  return (
    <span className="brand-wordmark" style={style} aria-label="Qlari">
      <span className="brand-q" aria-hidden="true">
        Q<span className="brand-dot" />
      </span>
      <span aria-hidden="true">lari</span>
    </span>
  );
}
// Back-compat alias — BrandGlyph used to render an icon box.
const BrandGlyph = BrandWordmark;

// --- Nav
function Nav({ active = "home" }) {
  const links = [
    { id: "services", label: "Services", href: "services.html" },
    { id: "about", label: "About", href: "about.html" },
    { id: "contact", label: "Contact", href: "contact.html" },
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="nav-brand" href="index.html">
          <BrandWordmark />
        </a>
        <nav className="nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </nav>
        <a className="btn btn-accent" href="contact.html#book" style={{ padding: "10px 16px", fontSize: 14 }}>
          Book intro <span className="arr">→</span>
        </a>
      </div>
    </header>
  );
}

// --- Section header with number + label
function SectionHead({ num, label, title, kicker }) {
  return (
    <div className="section-head">
      <div className="num">{num}</div>
      <div>
        <div className="label" style={{ marginBottom: 24 }}>{label}</div>
        <h2 className="display-l serif" style={{ margin: 0, maxWidth: "20ch", textWrap: "pretty" }}>
          {title}
        </h2>
        {kicker && <p className="lead" style={{ marginTop: 20, color: "var(--ink-soft)" }}>{kicker}</p>}
      </div>
    </div>
  );
}

// --- Footer
function Footer() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-grid">
          <div className="foot-col">
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
              <BrandWordmark size={22} />
            </div>
            <p className="serif italic" style={{ fontSize: 22, lineHeight: 1.25, maxWidth: "20ch", margin: 0, color: "color-mix(in oklab, var(--bg) 90%, transparent)" }}>
              Salesforce, with the agents that actually do the work.
            </p>
            <p className="mono" style={{ marginTop: 24, fontSize: 12, color: "color-mix(in oklab, var(--bg) 50%, transparent)", letterSpacing: "0.06em" }}>
              qlari.ai
            </p>
          </div>
          <div className="foot-col">
            <h5>Work</h5>
            <ul>
              <li><a href="services.html">Services</a></li>
              <li><a href="services.html#pricing">Pricing</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html">Talk to Iris</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Get in</h5>
            <ul>
              <li><button type="button" data-iris-open data-iris-seed="footer:quote" style={{ background: "none", border: 0, color: "inherit", font: "inherit", cursor: "pointer", textAlign: "left", padding: 0, textDecoration: "underline" }}>Start discovery + quote</button></li>
              <li><button type="button" data-iris-open data-iris-seed="footer:question" style={{ background: "none", border: 0, color: "inherit", font: "inherit", cursor: "pointer", textAlign: "left", padding: 0, textDecoration: "underline" }}>Quick question</button></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Qlari · Made by humans, mostly</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <button
              type="button"
              data-iris-open
              style={{
                background: "transparent",
                border: "1px solid color-mix(in oklab, var(--bone) 35%, transparent)",
                color: "var(--bone)",
                padding: "6px 12px 6px 10px",
                fontFamily: "var(--font-mono)",
                fontSize: 12,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                cursor: "pointer",
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                borderRadius: 999,
              }}
            >
              <span className="dot" style={{ display: "inline-block", width: 7, height: 7, borderRadius: "50%", background: "var(--persimmon)" }}></span>
              Talk to Iris
            </button>
          </span>
        </div>
      </div>
    </footer>
  );
}

// Marquee — for trust strip / phrases
function Marquee({ children, speed = 40 }) {
  return (
    <div style={{ overflow: "hidden", width: "100%" }}>
      <div style={{
        display: "inline-flex",
        whiteSpace: "nowrap",
        animation: `marquee ${speed}s linear infinite`,
      }}>
        <div style={{ display: "inline-flex", gap: 48, paddingRight: 48 }}>{children}</div>
        <div style={{ display: "inline-flex", gap: 48, paddingRight: 48 }} aria-hidden>{children}</div>
      </div>
    </div>
  );
}

// Small inline waveform
function Wave() {
  return (
    <span className="wave"><i/><i/><i/><i/><i/><i/><i/></span>
  );
}

Object.assign(window, {
  BrandGlyph, BrandWordmark, Nav, Footer, SectionHead, Marquee, Wave,
});