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

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

// --- Brand mark
function BrandGlyph({ size = 26 }) {
  // Genie lamp glyph drawn minimally as an "S" with a flame dot
  return (
    <span className="glyph" style={{ width: size, height: size, fontSize: Math.round(size * 0.55) }}>
      <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>S</span>
    </span>
  );
}

// --- Nav
function Nav({ active = "home" }) {
  const links = [
    { id: "services", label: "Services", href: "services.html" },
    { id: "pricing", label: "Pricing", href: "pricing.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">
          <BrandGlyph />
          <span>SupportGenie</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.1em", textTransform: "uppercase", marginLeft: 6, paddingTop: 4 }}>
            /sf · v26
          </span>
        </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 }}>
              <span className="glyph" style={{ width: 28, height: 28, background: "var(--accent)", color: "var(--ink)", borderRadius: 6, display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600 }}>S</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>SupportGenie</span>
            </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" }}>
              supportgenie.us
            </p>
          </div>
          <div className="foot-col">
            <h5>Work</h5>
            <ul>
              <li><a href="services.html">Services</a></li>
              <li><a href="pricing.html">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">Contact</a></li>
              <li><a href="contact.html">Careers</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Get in</h5>
            <ul>
              <li><a href="contact.html">Book a 20-min intro</a></li>
              <li><a href="mailto:hello@supportgenie.us">hello@supportgenie.us</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 SupportGenie · 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, Nav, Footer, SectionHead, Marquee, Wave,
});