/* Octomatica — shared UI: icons, sticker, nav, trusted, CTA, footer */

/* ---- line icons (stroke = currentColor) ---- */
function Icon({ name, size = 22, stroke = 1.7 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    product: <><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 21v-9"/></>,
    content: <><path d="M4 5h16M4 12h10M4 19h7"/><path d="m16 17 4-4 2 2-4 4h-2z"/></>,
    automation: <><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>,
    pm: <><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4M8 14l2 2 4-4"/></>,
    analytics: <><path d="M4 19V5M4 19h16M9 16V9M14 16v-4M19 16V7"/></>,
    infra: <><path d="M12 3a9 9 0 0 1 9 9c0 4-3 6-5 4s-3 0-4 0-2 2-4 0-1-9 4-13z"/><circle cx="9" cy="11" r="1"/><circle cx="14" cy="10" r="1"/></>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrowUR: <path d="M7 17 17 7M9 7h8v8"/>,
    tg: <path d="M21.5 4.5 2.5 11.8c-1 .4-1 1.7.1 2l4.6 1.3 1.7 5.2c.3.9 1.4 1 2 .3l2.4-2.6 4.8 3.5c.7.5 1.7.1 1.9-.8L23 5.7c.2-1-.7-1.7-1.5-1.2Z"/>,
    check: <path d="M20 6 9 17l-5-5"/>,
    spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/>,
    bolt: <path d="M13 2 4 14h7l-1 8 9-12h-7z"/>,
    play: <path d="M7 4v16l13-8z"/>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></>,
    chev: <path d="m6 9 6 6 6-6"/>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/>,
  };
  return <svg {...p}>{paths[name] || null}</svg>;
}

/* ---- octopus sticker (uses cut-out brand assets) ---- */
const OCTO_SRC = {
  center: "assets/octo/center.png",
  laptop: "assets/octo/blue-laptop.png",
  brush:  "assets/octo/teal-paintbrush.png",
  gear:   "assets/octo/mint-gear.png",
  calendar:"assets/octo/purple-calendar.png",
  magnifier:"assets/octo/amber-magnifier.png",
  suit:   "assets/octo/coral-suit.png",
};
function Octo({ kind = "center", size = 120, className = "", style = {}, alt = "Octomatica" }) {
  return <img src={OCTO_SRC[kind]} width={size} height={size} alt={alt}
    className={"octo-img " + className} style={{ width: size, height: size, ...style }} draggable="false" />;
}

/* ---- clean octopus logomark (vector glyph) ---- */
function OctoGlyph({ size = 22, color = "#fff" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
      <path fill={color} d="M9 32C9 18.7 19.3 8 32 8s23 10.7 23 24v10.5c0 6-4.4 8.2-6.6 2.7-2.4 6.3-6.6 6.3-9 0-2.4 6.3-6.6 6.3-9 0-2.4 6.3-6.6 6.3-9 0-2.2 5.5-6.6 3.3-6.6-2.7V32Z"/>
      <circle cx="24" cy="30" r="4.2" fill="#fff"/>
      <circle cx="40" cy="30" r="4.2" fill="#fff"/>
      <circle cx="24.6" cy="30.4" r="2.1" fill="#0C2A1F"/>
      <circle cx="40.6" cy="30.4" r="2.1" fill="#0C2A1F"/>
      <path d="M29 37.5c1.8 1.6 4.2 1.6 6 0" stroke="#0C2A1F" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
    </svg>
  );
}
function OctoMark({ size = 36 }) {
  return (
    <span className="octomark" style={{ width: size, height: size }}>
      <OctoGlyph size={size * 0.66} />
    </span>
  );
}

/* ---- wordmark ---- */
function Wordmark({ size = 30 }) {
  return (
    <span className="wordmark" style={{ display: "inline-flex", alignItems: "center", gap: 11 }}>
      <OctoMark size={size + 8} />
      <span className="wordmark-text" style={{ fontSize: size * 0.6 }}>
        Octo<span className="wordmark-accent">matica</span>
      </span>
    </span>
  );
}

/* ---- Navbar ---- */
function Navbar() {
  const d = window.OCTO;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener("scroll", on, { passive:true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav " + (scrolled ? "nav-scrolled" : "")}>
      <div className="wrap wrap-wide nav-inner">
        <a href="Octomatica.html#top" className="nav-brand"><Wordmark size={28} /></a>
        <nav className="nav-links">
          {d.nav.links.map((l) => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
        </nav>
        <div className="nav-actions">
          <a href={d.tg} className="btn btn-primary nav-cta">{d.nav.cta}<Icon name="arrow" size={16} /></a>
          <button className="nav-burger" aria-label="menu" onClick={() => setOpen(!open)}>
            <span/><span/><span/>
          </button>
        </div>
      </div>
      <div className={"nav-mobile " + (open ? "open" : "")}>
        {d.nav.links.map((l) => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
        <a href={d.tg} className="btn btn-primary" style={{ marginTop: 8 }}>{d.nav.cta}</a>
      </div>
    </header>
  );
}

/* ---- Channel chips (where the bot lives) ---- */
function ChannelChips({ className = "" }) {
  const d = window.OCTO.channels;
  return (
    <div className={"channels " + className}>
      <span className="channels-label">{d.label}:</span>
      <div className="channels-row">
        {d.items.map((c) => (
          <span key={c.name} className={"channel-chip " + c.status}>
            {c.status === "now"
              ? <span className="channel-dot live"/>
              : <span className="channel-soon">скоро</span>}
            {c.name}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---- Trusted marquee ---- */
function Trusted() {
  const d = window.OCTO.trusted;
  const row = [...d.logos, ...d.logos];
  return (
    <section className="trusted">
      <div className="wrap">
        <p className="trusted-label">{d.label}</p>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {row.map((l, i) => (
            <span className="trusted-logo" key={i}>
              <BrandLogo name={l} size={26} />
              <span className="trusted-logo-name">{window.BRAND_NAMES[l] || l}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Final CTA ---- */
function FinalCta() {
  const d = window.OCTO.cta;
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-box reveal">
          <div className="cta-orbit" aria-hidden="true">
            <Octo kind="laptop" size={64} className="float" style={{ animationDelay:"-1s" }} />
            <Octo kind="brush" size={56} className="float" style={{ animationDelay:"-3s" }} />
            <Octo kind="calendar" size={58} className="float" style={{ animationDelay:"-2s" }} />
          </div>
          <Octo kind="center" size={104} className="cta-hero-octo" />
          <h2 className="h-sec cta-title">{d.title}</h2>
          <p className="lead cta-desc">{d.desc}</p>
          <a href={window.OCTO.tg} className="btn btn-primary btn-lg"><Icon name="tg" size={18} />{d.button}</a>
          <p className="cta-micro muted">{d.micro}</p>
        </div>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer() {
  const d = window.OCTO.footer;
  return (
    <footer className="footer">
      <div className="wrap wrap-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <Wordmark size={26} />
            <p className="footer-tag muted">{d.tagline}</p>
            <span className="pill" style={{ marginTop: 6 }}><span className="pill-dot live"/>{d.credit}</span>
          </div>
          {d.cols.map((c) => (
            <div className="footer-col" key={c.h}>
              <h4 className="footer-h">{c.h}</h4>
              {c.links.map((l) => <a key={l.t} className="footer-link" href={l.href}>{l.t}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span className="muted">© 2026 Octomatica · octomatica.ru</span>
          <span className="muted">Сделано в чате Telegram 🐙</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Octo, OctoGlyph, OctoMark, Wordmark, Navbar, Trusted, FinalCta, Footer, ChannelChips });