// Netiquette Indonesia Homepage — interactive shell
// Renders the live regions (hero medallions, trust counters, solution tabs)
// over static HTML. Modeled on websg/assets/js/app.jsx, trimmed to AMS+IMS only.

const MODULES = [
{ id: "ams", short: "AMS", name: "Akuntansi", color: "#2E7D32", tint: "#e8f5e9", icon: "ti-book", tag: "Accounting Management System",
  desc: "Kelola pembukuan bisnis Anda, pantau arus kas, dan hasilkan laporan keuangan secara real-time, tanpa perlu lagi mencocokkan spreadsheet secara manual.",
  features: ["Pembukuan double-entry lengkap", "Laporan keuangan detail (Laba Rugi, Neraca, dan lainnya)", "Invoicing & penagihan otomatis", "Terintegrasi langsung dengan modul Inventaris", "Visibilitas real-time atas kinerja keuangan bisnis"],
  img: "assets/module-ams.png" },
{ id: "ims", short: "IMS", name: "Inventaris", color: "#C62828", tint: "#fce4ec", icon: "ti-package", tag: "Inventory Management System",
  desc: "Pantau stok secara real-time, kelola pembelian dan penjualan di semua lokasi, dan hindari selisih stok yang selama ini bikin repot dicatat manual.",
  features: ["Manajemen pembelian & penjualan", "Stok real-time di berbagai lokasi/gudang", "Dukungan lokasi, batch, kedaluwarsa, & matrix item", "Otomatis terhubung ke modul Akuntansi", "Laporan inventaris lengkap"],
  img: "assets/module-ims.png" }];


// ───────────────────────────────────────────────
// Hero carousel (brand orbit variant, AMS + IMS)
// ───────────────────────────────────────────────
function HeroCarousel() {
  // Two modules only, placed left/right around the center hub.
  const positions = [Math.PI, 0]; // AMS = left, IMS = right
  return (
    <div className="hero-visual">
      <div className="hero-card">
        <div className="hero-slide hs-brand active">
          <div className="hero-orbit-mini" style={{ maxWidth: 260, minHeight: 260 }}>
            <div className="ring-line"></div>
            <div className="center">
              <img src="assets/logo-icon.png" alt="Netiquette" />
            </div>
            {MODULES.map((mod, idx) => {
              const ang = positions[idx];
              const r = 42;
              const x = 50 + Math.cos(ang) * r;
              const y = 50 + Math.sin(ang) * r;
              return (
                <div key={mod.id}
                  className="hero-orbit-badge"
                  style={{ left: `${x}%`, top: `${y}%`, transform: "translate(-50%,-50%)" }}>
                  <img src={mod.img} alt={mod.name} />
                  <div className="name">{mod.name}</div>
                  <div className="short" style={{ color: mod.color }}>{mod.short}</div>
                </div>
              );
            })}
          </div>
          <div className="brand-tagline">1 Sistem. 2 Solusi Terintegrasi. Untuk UKM Indonesia.</div>
        </div>
      </div>
    </div>);

}

// ───────────────────────────────────────────────
// Animated counter
// ───────────────────────────────────────────────
function Counter({ to, suffix = "", duration = 1400 }) {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  const formatted = to >= 1000 ? val.toLocaleString() : val.toString();
  return <span ref={ref}>{formatted}{suffix}</span>;
}

// ───────────────────────────────────────────────
// Solutions tabs (AMS / IMS)
// ───────────────────────────────────────────────
function SolutionsTabs() {
  const [active, setActive] = React.useState(MODULES[0].id);
  const m = MODULES.find((x) => x.id === active);
  return (
    <>
      <div className="solutions-tabs" role="tablist">
        {MODULES.map((mod) =>
        <button key={mod.id} className={`sol-tab ${mod.id === active ? "active" : ""}`} onClick={() => setActive(mod.id)} role="tab" aria-selected={mod.id === active}>
            <span className="swatch" style={{ background: mod.color }}></span>
            {mod.name}
          </button>
        )}
      </div>
      <div className="sol-panel" key={m.id} style={{ "--mod-color": m.color, "--mod-tint": m.tint }}>
        <div className="sol-panel-info">
          <span className="sol-panel-tag" style={{ background: m.tint, color: m.color }}>
            <i className={`ti ${m.icon}`} style={{ fontSize: 14 }}></i> {m.tag}
          </span>
          <h3>{m.name}</h3>
          <p className="sol-panel-desc">{m.desc}</p>
          <ul className="sol-panel-features">
            {m.features.map((f, i) =>
            <li key={i}><i className="ti ti-circle-check" style={{ color: m.color }}></i>{f}</li>
            )}
          </ul>
          <a className="sol-panel-link" href={`${m.id}-detail.html`} style={{ color: m.color }}>
            Jelajahi {m.name} <i className="ti ti-arrow-right"></i>
          </a>
        </div>
        <div className="sol-visual">
          <img src={m.img} alt={`${m.name} module`} loading="lazy" decoding="async" />
        </div>
      </div>
    </>);

}

// ───────────────────────────────────────────────
// Scroll reveal
// ───────────────────────────────────────────────
function ScrollReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return null;
}

// ───────────────────────────────────────────────
// Main app — mounts pieces into placeholders
// ───────────────────────────────────────────────
function App() {
  return (
    <>
      <ScrollReveal />
      {/* Mount interactive regions via portals into placeholders in index.html */}
      {document.getElementById("hero-visual-mount") &&
      ReactDOM.createPortal(<HeroCarousel />, document.getElementById("hero-visual-mount"))}

      {document.getElementById("trust-mount") &&
      ReactDOM.createPortal(
        <div className="trust-inner">
            <div className="trust-item"><div className="trust-num"><Counter to={19} suffix="+" /></div><div className="trust-label">Tahun Pengalaman</div></div>
            <div className="trust-item"><div className="trust-num"><Counter to={1100} suffix="+" /></div><div className="trust-label">Bisnis Dilayani</div></div>
            <div className="trust-item trust-item-tip">
              <div className="trust-num">
                <Counter to={5} />
                <span className="trust-info" tabIndex={0} aria-label="Negara yang dilayani">
                  <i className="ti ti-info-circle"></i>
                  <span className="trust-tooltip" role="tooltip">
                    Singapura, Malaysia, Hong Kong, Thailand &amp; Indonesia
                  </span>
                </span>
              </div>
              <div className="trust-label">Negara Termasuk Indonesia</div>
            </div>
            <div className="trust-item"><div className="trust-num"><Counter to={2} /></div><div className="trust-label">Modul Terintegrasi (AMS &amp; IMS)</div></div>
            <div className="trust-item"><div className="trust-num"><Counter to={24} suffix="/7" /></div><div className="trust-label">Akses Cloud Kapan Saja</div></div>
          </div>,
        document.getElementById("trust-mount")
      )}

      {document.getElementById("solutions-mount") &&
      ReactDOM.createPortal(<SolutionsTabs />, document.getElementById("solutions-mount"))}
    </>);

}

ReactDOM.createRoot(document.getElementById("app-root")).render(<App />);