/* Arx — Marketing UI kit
   Editorial, paper-and-ink. Import AFTER React + Babel.
   Components exported to window so other babel files can use them. */

const { useState } = React;

/* ── Logo ────────────────────────────────────────── */
const ArxMark = ({ size = 22 }) => (
  <svg viewBox="0 0 48 48" width={size} height={size} aria-label="Arx">
    <polygon points="24,3 43,14 43,34 24,45 5,34 5,14" fill="#00DF94" />
    <polygon points="24,3 43,14 43,34 24,45 5,34 5,14" fill="none"
      stroke="#0E2B1F" strokeWidth="2.4" strokeLinejoin="miter" />
    <path d="M13 34 L22.5 14 Q24 11.5 25.5 14 L35 34"
      fill="none" stroke="#0E2B1F" strokeWidth="2.6"
      strokeLinecap="round" strokeLinejoin="round" />
    <circle cx="24" cy="13.2" r="1.8" fill="#0E2B1F" />
    <path d="M17.5 26 L30.5 26" stroke="#0E2B1F" strokeWidth="2.4" strokeLinecap="round" />
  </svg>
);

const ArxWordmark = ({ size = 20 }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: size * 0.45,
    fontFamily: "var(--font-display)", fontWeight: 420,
    fontSize: size, letterSpacing: "-0.02em", color: "var(--ink)",
  }}>
    <ArxMark size={size * 1.1} />
    <span>Arx<sup style={{
      fontFamily: "var(--font-mono)", fontSize: size * 0.4,
      color: "var(--ink-3)", letterSpacing: "0.08em",
      marginLeft: 3, fontWeight: 500,
      transform: `translateY(-${size * 0.3}px)`, display: "inline-block",
    }}>LABOR</sup></span>
  </span>
);

/* ── Labels + eyebrows ───────────────────────────── */
const Eyebrow = ({ dot = false, children }) => (
  <div style={{
    fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
    letterSpacing: "0.12em", textTransform: "uppercase",
    color: "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 10,
  }}>
    {dot && <span style={{ width: 6, height: 6, background: "var(--signal)", borderRadius: "50%" }} />}
    {children}
  </div>
);

const MonoLine = ({ children, tone = "signal" }) => (
  <div style={{
    fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-3)",
    borderLeft: `2px solid var(--${tone})`, paddingLeft: 10,
  }}>{children}</div>
);

const CodeInline = ({ children }) => (
  <code style={{
    fontFamily: "var(--font-mono)", fontSize: 11.5,
    background: "var(--paper-2)", border: "1px solid var(--rule)",
    padding: "1px 6px",
  }}>{children}</code>
);

/* ── Buttons ─────────────────────────────────────── */
const Button = ({ variant = "primary", arrow = false, children, ...rest }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    height: 44, padding: "0 18px", borderRadius: 2,
    fontSize: 14, fontWeight: 500, cursor: "pointer",
    fontFamily: "var(--font-sans)", transition: "all 180ms var(--ease)",
  };
  const styles = {
    primary:  { ...base, background: "var(--ink)",    color: "var(--paper)", border: 0 },
    ghost:    { ...base, background: "transparent",   color: "var(--ink)",   border: "1px solid var(--rule-2)" },
    signal:   { ...base, background: "var(--signal)", color: "var(--paper)", border: 0 },
  };
  return (
    <button style={styles[variant]} {...rest}>
      {children}{arrow && <span>→</span>}
    </button>
  );
};

const LinkArrow = ({ href = "#", children }) => (
  <a href={href} style={{
    color: "var(--ink)", fontWeight: 500, fontSize: 14,
    display: "inline-flex", alignItems: "center", gap: 6,
    borderBottom: "1px solid var(--ink)", paddingBottom: 2,
    fontFamily: "var(--font-sans)",
  }}>{children} →</a>
);

/* ── Pills / badges ──────────────────────────────── */
const Pill = ({ tone = "neutral", dot = false, children }) => {
  const tones = {
    neutral: { color: "var(--ink-3)",  border: "1px solid var(--rule-2)", background: "transparent" },
    ok:      { color: "var(--ok)",     border: "1px solid rgba(46,90,59,.35)",  background: "rgba(46,90,59,.08)" },
    signal:  { color: "var(--signal)", border: "1px solid rgba(181,74,43,.35)", background: "rgba(181,74,43,.06)" },
    amber:   { color: "var(--signal-2)", border: "1px solid rgba(122,92,30,.4)", background: "rgba(122,92,30,.08)" },
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "2px 7px", borderRadius: 2,
      fontFamily: "var(--font-mono)", fontSize: 10.5,
      letterSpacing: "0.1em", textTransform: "uppercase",
      ...tones[tone],
    }}>
      {dot && <span style={{ width: 5, height: 5, background: "currentColor", borderRadius: "50%" }} />}
      {children}
    </span>
  );
};

/* ── Headings ────────────────────────────────────── */
const H1 = ({ children, as: Tag = "h1", style }) => (
  <Tag style={{
    margin: 0, fontFamily: "var(--font-display)", fontWeight: 380,
    fontSize: "clamp(2rem, 4.2vw, 3.4rem)", lineHeight: 1.02,
    letterSpacing: "-0.03em", color: "var(--ink)", ...style,
  }}>{children}</Tag>
);

const HDisplay = ({ children, style }) => (
  <h1 style={{
    margin: 0, fontFamily: "var(--font-display)", fontWeight: 360,
    fontSize: "clamp(3rem, 7vw, 6.5rem)", lineHeight: 0.95,
    letterSpacing: "-0.04em", color: "var(--ink)", ...style,
  }}>{children}</h1>
);

const H2 = ({ children, style }) => (
  <h2 style={{
    margin: 0, fontFamily: "var(--font-display)", fontWeight: 440,
    fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.02em",
    color: "var(--ink)", ...style,
  }}>{children}</h2>
);

/* ── Card primitives ─────────────────────────────── */
const Card = ({ children, tone = "paper", style }) => (
  <div style={{
    background: tone === "paper" ? "var(--paper)" : `var(--${tone})`,
    border: "1px solid var(--rule-2)", borderRadius: 2, padding: 20,
    ...style,
  }}>{children}</div>
);

/* Hairline-grid: 1px gap on rule-colored bg makes shared edges read as one line. */
const GridCard = ({ cols = 3, children, style }) => (
  <div style={{
    display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`,
    gap: 1, background: "var(--rule)", border: "1px solid var(--rule)",
    ...style,
  }}>{children}</div>
);
const GridCell = ({ children, style }) => (
  <div style={{ background: "var(--paper)", padding: "14px 16px", ...style }}>
    {children}
  </div>
);

/* ── Portrait bubble (testimonials) ──────────────── */
const Portrait = ({ initials, size = 48 }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%",
    background: "var(--accent)", color: "var(--accent-ink)",
    display: "grid", placeItems: "center",
    fontFamily: "var(--font-display)", fontWeight: 420,
    fontSize: size * 0.38,
  }}>{initials}</div>
);

/* ── Console header (hero chrome) ────────────────── */
const ConsoleBar = ({ path, user }) => (
  <div style={{
    display: "grid", gridTemplateColumns: "220px 1fr 220px",
    alignItems: "center", height: 40,
    borderBottom: "1px solid var(--rule)", background: "var(--paper-2)",
    fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)",
  }}>
    <div style={{ display: "flex", gap: 6, paddingLeft: 16 }}>
      <i style={{ width: 10, height: 10, borderRadius: "50%", background: "#D1C5A0" }} />
      <i style={{ width: 10, height: 10, borderRadius: "50%", background: "#B8B09C" }} />
      <i style={{ width: 10, height: 10, borderRadius: "50%", background: "#9FA996" }} />
    </div>
    <div style={{ textAlign: "center" }}>
      app.arxlabor.com · <strong style={{ color: "var(--ink-2)", fontWeight: 500 }}>{path}</strong>
    </div>
    <div style={{ paddingRight: 16, textAlign: "right" }}>{user}</div>
  </div>
);

/* ── Section wrapper + container ─────────────────── */
const Container = ({ children, size = "wide", style }) => {
  const max = size === "narrow" ? 920 : size === "read" ? 680 : 1320;
  return <div style={{ maxWidth: max, margin: "0 auto", padding: "0 32px", ...style }}>{children}</div>;
};
const Section = ({ children, style }) => (
  <section style={{
    padding: "clamp(80px, 9vw, 140px) 0",
    borderBottom: "1px solid var(--rule)", ...style,
  }}>{children}</section>
);

/* ── Nav ─────────────────────────────────────────── */
const MarketingNav = ({ active = "Overview" }) => {
  const items = ["Overview", "Platform", "Connectors", "Blog"];
  return (
    <div>
      <div style={{ borderBottom: "1px solid var(--rule)", background: "#FAF8F3",
        fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)" }}>
        <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 36, padding: "0 28px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--signal)",
              boxShadow: "0 0 0 4px rgba(181,74,43,.12)" }} />
            <span>New · <a href="#" style={{ textDecoration: "underline",
              textDecorationColor: "var(--rule-2)", textUnderlineOffset: 3,
              color: "var(--ink-2)" }}>Auto-mapping SOC 2 controls</a></span>
          </div>
          <div style={{ display: "flex", gap: 16, color: "var(--ink-3)" }}>
            <span>SOC 2 Type II</span><span>·</span><span>HIPAA</span><span>·</span><span>ISO 27001</span>
          </div>
        </Container>
      </div>
      <div style={{
        background: "rgba(246,243,236,0.82)", backdropFilter: "saturate(140%) blur(10px)",
        borderBottom: "1px solid var(--rule)", position: "sticky", top: 0, zIndex: 10,
      }}>
        <Container style={{
          display: "grid", gridTemplateColumns: "auto 1fr auto",
          alignItems: "center", height: 64, gap: 40, padding: "0 28px",
        }}>
          <ArxWordmark size={20} />
          <div style={{ display: "flex", gap: 28, justifySelf: "center",
            fontFamily: "var(--font-sans)", fontSize: 13.5 }}>
            {items.map(n => (
              <a key={n} href="#" style={{ color: n === active ? "var(--ink)" : "var(--ink-2)" }}>{n}</a>
            ))}
          </div>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <a href="#" style={{ fontSize: 13.5, color: "var(--ink-2)",
              paddingRight: 14, borderRight: "1px solid var(--rule)",
              fontFamily: "var(--font-sans)" }}>Sign in</a>
            <button style={{
              height: 34, padding: "0 14px", fontSize: 13, fontWeight: 500,
              background: "var(--ink)", color: "var(--paper)", border: 0,
              borderRadius: 2, cursor: "pointer", fontFamily: "var(--font-sans)",
            }}>Book demo</button>
          </div>
        </Container>
      </div>
    </div>
  );
};

/* ── Export to window for other babel scripts ────── */
Object.assign(window, {
  ArxMark, ArxWordmark, Eyebrow, MonoLine, CodeInline,
  Button, LinkArrow, Pill,
  H1, HDisplay, H2,
  Card, GridCard, GridCell,
  Portrait, ConsoleBar,
  Container, Section, MarketingNav,
});