// ============================================================
// OneAeye Brand Hub — site-shell.jsx
// Shared across every page: nav, footer, the mark, and reusable
// surface frames. Load AFTER React, before each page script.
// ============================================================

const FACTS = {
  legal:   "OneAeye Solutions Private Limited",
  short:   "OneAeye",
  city:    "Kanpur, Uttar Pradesh",
  web:     "oneaeye.com",
  email:   "hello@oneaeye.com",
  founder: "Vikas Agrahari",
  role:    "Founder & Director",
  tagline: "One platform. Every workflow.",
  founded: "2026",
  client:  "K Care Hospital, Kanpur",
  handle:  "@oneaeye",
};

const NAV = [
  { label: "Home",       href: "index.html" },
  { label: "Identity",   href: "identity.html" },
  { label: "Modules",    href: "modules.html" },
  { label: "Stationery", href: "stationery.html" },
  { label: "Social",     href: "social.html" },
  { label: "Promotion",  href: "promotion.html" },
];

// ---- THE MARK ------------------------------------------------
function Tile({ size = 80, radius, bg = "var(--ink)", fg = "var(--paper)", style }) {
  return (
    <span className="tile" style={{
      width: size, height: size,
      borderRadius: radius ?? Math.round(size * 0.20),
      fontSize: size * 0.42, background: bg, color: fg, ...style
    }}>
      <span className="num">1</span><span className="ai">Ai</span>
    </span>
  );
}
function Wordmark({ size = 40, color = "var(--ink)", weight = 500, style }) {
  return <span className="wordmark" style={{ fontSize: size, color, fontWeight: weight, ...style }}>oneaeye</span>;
}
function Lockup({ tile = 44, word = 34, gap = 12, color = "var(--ink)", tileBg, tileFg, style }) {
  return (
    <span className="row center" style={{ gap, ...style }}>
      <Tile size={tile} bg={tileBg} fg={tileFg} />
      <Wordmark size={word} color={color} />
    </span>
  );
}

// ---- NAV -----------------------------------------------------
function Nav({ current }) {
  return (
    <nav className="nav">
      <a className="nav-brand" href="index.html"><Lockup tile={34} word={24} gap={10} /></a>
      <div className="nav-links">
        {NAV.map(n => (
          <a key={n.href} href={n.href} className={n.href === current ? "current" : ""}>{n.label}</a>
        ))}
        <a className="nav-cta" href={"mailto:" + FACTS.email}>Get in touch</a>
      </div>
    </nav>
  );
}

// ---- FOOTER --------------------------------------------------
function Footer() {
  return (
    <React.Fragment>
      <footer className="footer">
        <div className="footer-grid">
          <div>
            <Lockup tile={40} word={30} gap={12} />
            <p className="f-serif" style={{ fontSize: 22, marginTop: 18, maxWidth: 280, lineHeight: 1.25 }}>
              {FACTS.tagline}
            </p>
            <div className="badge" style={{ marginTop: 18 }}><span className="dot"></span>DPIIT Recognised Startup</div>
          </div>
          <div>
            <h4>Brand</h4>
            <a href="identity.html">Identity</a>
            <a href="modules.html">Modules</a>
            <a href="stationery.html">Stationery</a>
          </div>
          <div>
            <h4>Channels</h4>
            <a href="social.html">Social kit</a>
            <a href="promotion.html">Promotion</a>
            <a href={"https://" + FACTS.web}>{FACTS.web}</a>
          </div>
          <div>
            <h4>Contact</h4>
            <a href={"mailto:" + FACTS.email}>{FACTS.email}</a>
            <a href="#">{FACTS.city}</a>
            <a href="#">{FACTS.handle}</a>
          </div>
        </div>
        <div className="footer-legal">
          <span>© {FACTS.founded} {FACTS.legal}</span>
          <span>Brand Hub v1 · Built in Kanpur</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

// ---- SECTION HELPERS ----------------------------------------
function Eyebrow({ children }) {
  return <div className="eyebrow-row mono-eyebrow">{children}</div>;
}
function Section({ id, eyebrow, title, lede, dark, tight, children, headStyle }) {
  return (
    <section id={id} className={"section" + (dark ? " dark" : "") + (tight ? " tight" : "")}>
      <div className="wrap">
        {(eyebrow || title || lede) && (
          <div style={{ marginBottom: 48, ...headStyle }}>
            {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
            {title && <h2 className="h2 pretty" style={{ maxWidth: 760 }}>{title}</h2>}
            {lede && <p className="lede pretty" style={{ marginTop: 18 }}>{lede}</p>}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

function Plate({ label, ink, paper, style, children }) {
  return (
    <div className={"plate" + (ink ? " ink" : "") + (paper ? " paper" : "")} style={style}>
      {label && <span className="plate-label">{label}</span>}
      {children}
    </div>
  );
}

// ---- copy-to-clipboard swatch -------------------------------
function Swatch({ name, hex, role, bg, fg }) {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(hex).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 1200);
    }).catch(() => {});
  };
  return (
    <div className={"swatch" + (copied ? " copied" : "")} style={{ background: bg, color: fg }} onClick={copy}>
      <div className="row between" style={{ alignItems: "flex-start" }}>
        <div>
          <div className="sname">{name}</div>
          <div className="shex" style={{ marginTop: 6 }}>{hex}</div>
        </div>
        <div className="scopy">{copied ? "copied ✓" : "click to copy"}</div>
      </div>
      {role && <div style={{ fontFamily: "Space Grotesk", fontSize: 13, lineHeight: 1.4, opacity: 0.85, maxWidth: 260 }}>{role}</div>}
    </div>
  );
}

// ---- reusable post templates (used by social + promotion) ---
// All monochrome, on-brand. `variant` switches layout.
function PostCard({ variant = "tagline", w = 320, data = {}, rounded = true }) {
  const base = {
    width: w, height: w, position: "relative", overflow: "hidden",
    borderRadius: rounded ? 16 : 0,
  };
  const pad = Math.round(w * 0.09);

  if (variant === "tagline") {
    return (
      <div className="float" style={{ ...base, background: "var(--ink)", color: "var(--paper)", padding: pad, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <Tile size={w * 0.13} bg="var(--paper)" fg="var(--ink)" />
        <div className="f-serif" style={{ fontSize: w * 0.13, lineHeight: 1.08 }}>One platform.<br/>Every workflow.</div>
        <div className="f-mono" style={{ fontSize: w * 0.032, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.6 }}>oneaeye.com · {FACTS.handle}</div>
      </div>
    );
  }
  if (variant === "module") {
    return (
      <div className="float" style={{ ...base, background: "var(--paper)", color: "var(--ink)", padding: pad, display: "flex", flexDirection: "column", justifyContent: "space-between", border: "1px solid var(--hair)" }}>
        <div className="row between" style={{ alignItems: "center" }}>
          <Tile size={w * 0.11} />
          <span className="badge live" style={{ fontSize: w * 0.028 }}><span className="dot"></span>Now live</span>
        </div>
        <div>
          <div className="f-mono" style={{ fontSize: w * 0.04, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--smoke-2)" }}>{data.code || "HRMS"}</div>
          <div className="f-grotesk" style={{ fontSize: w * 0.085, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.05, marginTop: 6 }}>{data.title || "Attendance, payroll, biometric sync."}</div>
        </div>
        <div className="f-mono" style={{ fontSize: w * 0.032, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--smoke)" }}>{data.foot || "Live in days · oneaeye.com"}</div>
      </div>
    );
  }
  if (variant === "quote") {
    return (
      <div className="float" style={{ ...base, background: "var(--paper)", color: "var(--ink)", padding: pad, display: "flex", flexDirection: "column", justifyContent: "space-between", border: "1px solid var(--hair)" }}>
        <div className="f-mono" style={{ fontSize: w * 0.032, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--smoke-2)" }}>{data.tag || "Client"}</div>
        <div className="f-serif" style={{ fontSize: w * 0.085, lineHeight: 1.2 }}>{data.quote || "Running four modules live."}</div>
        <div className="row between" style={{ alignItems: "flex-end" }}>
          <div className="f-grotesk" style={{ fontSize: w * 0.04, fontWeight: 500 }}>{data.who || FACTS.client}</div>
          <Tile size={w * 0.1} />
        </div>
      </div>
    );
  }
  if (variant === "stat") {
    return (
      <div className="float" style={{ ...base, background: "var(--ink)", color: "var(--paper)", padding: pad, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div className="f-mono" style={{ fontSize: w * 0.032, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.6 }}>{data.tag || "Shipped"}</div>
        <div>
          <div className="f-grotesk" style={{ fontSize: w * 0.26, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 0.9 }}>{data.big || "4"}</div>
          <div className="f-grotesk" style={{ fontSize: w * 0.06, fontWeight: 500, marginTop: 8 }}>{data.small || "live modules"}</div>
        </div>
        <div className="f-mono" style={{ fontSize: w * 0.032, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.55 }}>{data.foot || "in four months"}</div>
      </div>
    );
  }
  return null;
}

Object.assign(window, {
  FACTS, NAV, Tile, Wordmark, Lockup, Nav, Footer, Eyebrow, Section, Plate, Swatch, PostCard
});