/* Octodus clone — shared UI: glyph, nav, trusted, CTA, footer */

function OctoGlyph({ size = 22, color = "#fff", stroke = 3, className = "", style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none"
      stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={style} aria-hidden="true">
      <path d="M20 30 a12 12 0 0 1 24 0"/>
      <path d="M20 30 c0 5 1 9 -3 12 c-3 2 -6 1 -6 -2"/>
      <path d="M27 33 c-1 6 -2 10 -6 13"/>
      <path d="M37 33 c1 6 2 10 6 13"/>
      <path d="M44 30 c0 5 -1 9 3 12 c3 2 6 1 6 -2"/>
      <circle cx="27" cy="27" r="2.1" fill={color} stroke="none"/>
      <circle cx="37" cy="27" r="2.1" fill={color} stroke="none"/>
    </svg>
  );
}

function OctoMark({ size = 36 }) {
  return (
    <span className="octomark" style={{ width: size, height: size }}>
      <OctoGlyph size={size * 0.66} color="var(--accent-deep)" />
    </span>
  );
}

function Wordmark({ size = 28 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}>
      <OctoGlyph size={size * 1.65} color="var(--accent)" stroke={3.4} />
      <span className="wordmark-text" style={{ fontSize: size }}>
        Octo<span className="wordmark-accent">dus</span>
      </span>
    </span>
  );
}

/* ---- Language switcher ---- */
function LangSwitcher() {
  const lang = window.OCTO.footer.lang || {};
  const isDE = document.documentElement.lang === "de";
  return (
    <div style={{ display:"flex", gap:4 }}>
      <a href={lang.en || "/"} style={{ fontSize:".82rem", fontWeight: isDE ? 500 : 700,
        color: isDE ? "var(--ink-3)" : "var(--accent-deep)", padding:"4px 8px", borderRadius:6 }}>EN</a>
      <span style={{ color:"var(--line-2)" }}>·</span>
      <a href={lang.de || "/de/"} style={{ fontSize:".82rem", fontWeight: isDE ? 700 : 500,
        color: isDE ? "var(--accent-deep)" : "var(--ink-3)", padding:"4px 8px", borderRadius:6 }}>DE</a>
    </div>
  );
}

/* ---- 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="/" style={{ textDecoration:"none" }}><Wordmark size={26} /></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">
          <LangSwitcher />
          <a href={d.tg} className="btn btn-primary nav-cta" target="_blank" rel="noopener">
            {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 }} target="_blank" rel="noopener">{d.nav.cta}</a>
      </div>
    </header>
  );
}

/* ---- Channel chips ---- */
function ChannelChips({ className = "" }) {
  const d = window.OCTO.channels;
  const soonLabel = window.OCTO.soonLabel || "Soon";
  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">{soonLabel}</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">{BRAND_NAMES[l] || l}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- "catch me" octopus ---- */
function RunawayOcto() {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState(0);
  const [xy, setXY] = React.useState({ x: 0, y: 0 });
  const place = React.useCallback((p) => {
    const el = ref.current; if (!el) return;
    const box = el.offsetParent || el.parentElement; if (!box) return;
    const m = 20, w = el.offsetWidth, h = el.offsetHeight;
    const left = m, right = box.clientWidth - w - m, midX = (box.clientWidth - w) / 2;
    const top = m, bottom = box.clientHeight - h - m;
    const spots = { 0:[midX,top], 1:[left,top], 2:[right,top], 3:[left,bottom], 4:[right,bottom] };
    const [x, y] = spots[p] || spots[0];
    setXY({ x, y });
  }, []);
  React.useLayoutEffect(() => { place(pos); }, [pos, place]);
  React.useEffect(() => {
    const on = () => place(pos);
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, [pos, place]);
  const flee = () => { let n; do { n = 1 + Math.floor(Math.random() * 4); } while (n === pos); setPos(n); };
  return (
    <span ref={ref} className="cta-runaway" onMouseEnter={flee} onPointerDown={flee}
      aria-hidden="true" style={{ transform: `translate(${xy.x}px, ${xy.y}px)` }}>
      <OctoGlyph size={84} color="#fff" stroke={3.4} />
    </span>
  );
}

/* ---- Final CTA ---- */
function FinalCta() {
  const d = window.OCTO.cta;
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-box reveal">
          <RunawayOcto />
          <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" target="_blank" rel="noopener">
            <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={24} />
            <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>
        {d.social && (
          <div className="footer-social">
            {d.social.map((s) => (
              <a key={s.name} href={s.href} className="footer-social-link" target="_blank" rel="noopener">
                <Icon name={s.icon} size={18} />{s.name}
              </a>
            ))}
          </div>
        )}
        <div className="footer-bottom">
          <span className="muted">© 2026 Octodus · octodus.com</span>
          <span className="muted">Built in Telegram 🐙</span>
        </div>
      </div>
    </footer>
  );
}

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