/* global React, SectionHead */
const { useState: useStateSuite, useMemo: useMemoSuite } = React;

/* ============================================================
   <ModuleSuite> — Hub anchors the platform; 3 toggleable apps.
   Hub is always included. Risk lives inside Hub.
============================================================ */

// Add-on apps (toggleable)
const SUITE_APPS = [
  {
    id: "prospect",
    n: "01",
    name: "Lithora Prospect",
    sub: "Discovery",
    tier: "Explore",
    price: 3600,
    desc: "Prospectivity scoring, concession evaluation, ranked targets. 3D subsurface modeling and resource understanding fold into the same workspace.",
    bullets: ["Prospectivity & ranked targets", "Concession evaluation", "3D subsurface modeling"],
    icon: (
      <svg viewBox="0 0 24 24"><path d="M12 2l9 5v10l-9 5-9-5V7l9-5z M12 2v20 M3 7l9 5 9-5"/></svg>
    ),
  },
  {
    id: "forge",
    n: "02",
    name: "Lithora Forge",
    sub: "Field",
    tier: "Plan & Operate",
    price: 4200,
    desc: "Scenario planning and drilling prioritization for development; production monitoring and haulage / processing bottleneck detection for operations. One thread from plan to shift.",
    bullets: ["Scenario planning", "Drilling prioritization", "Production monitoring", "Haulage bottlenecks"],
    icon: (
      <svg viewBox="0 0 24 24"><path d="M3 17h2l1-7h12l1 7h2 M6 17a2 2 0 104 0 M14 17a2 2 0 104 0"/></svg>
    ),
  },
  {
    id: "flow",
    n: "03",
    name: "Lithora Flow",
    sub: "Commercial",
    tier: "Supply",
    price: 1800,
    desc: "Procurement, logistics, and material flow: visibility from the pit to the port and onward to your customers, with the same map underneath.",
    bullets: ["Procurement", "Logistics", "Material flow"],
    icon: (
      <svg viewBox="0 0 24 24"><path d="M3 7l9-4 9 4-9 4-9-4z M3 12l9 4 9-4 M3 17l9 4 9-4"/></svg>
    ),
  },
];

function fmtPrice(n) {
  return n.toLocaleString("en-US");
}

function ModuleSuite() {
  // Default: Prospect active. Atlas (Hub) is always on (required + included).
  const [active, setActive] = useStateSuite(new Set(["prospect"]));

  const toggle = (id) => {
    setActive(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const stack = useMemoSuite(
    () => SUITE_APPS.filter(m => active.has(m.id)),
    [active]
  );
  const subtotal = stack.reduce((s, m) => s + m.price, 0);
  // Bundle discount on add-ons: 8% if 2+, 14% if all 3
  const discountPct = stack.length >= 3 ? 0.14 : stack.length >= 2 ? 0.08 : 0;
  const final = Math.round(subtotal * (1 - discountPct));

  return (
    <section className="section" id="suite" data-screen-label="04 Suite">
      <SectionHead
        num="§ 02 · SUITE"
        eyebrow="The modular platform"
        h2={<>Four applications.<br/>One decision center.</>}
        lead="Pick the apps your work actually needs. Every customer gets Lithora Atlas underneath. A decision system, not a dashboard. Risk integrates there too."
      />

      <div className="suite-frame reveal">
        {/* ATLAS anchor — always included */}
        <div className="suite-hub">
          <div className="suite-hub-l">
            <div className="suite-hub-tag"><span className="live-dot" />ALWAYS INCLUDED</div>
            <div className="suite-hub-name">Lithora Atlas</div>
            <p className="suite-hub-body">
              The unified decision center across everything you run. <em>Not a dashboard</em>. A decision system that proposes the next action across your portfolio: which target to chase, which scenario to fund, which permit to chase down. Geopolitical, ESG, permitting, infrastructure, and commodity-exposure risk all live here.
            </p>
            <div className="suite-hub-bullets">
              <span className="process-tag">Cross-app decisions</span>
              <span className="process-tag">Risk integrated</span>
              <span className="process-tag">Geopolitical · ESG</span>
              <span className="process-tag">Permitting & infrastructure</span>
              <span className="process-tag">Commodity exposure</span>
            </div>
          </div>
          <div className="suite-hub-vs">
            <div className="vs-row vs-row--off">
              <span className="vs-label">Dashboards</span>
              <span className="vs-text">show information.</span>
            </div>
            <div className="vs-row vs-row--on">
              <span className="vs-label">Decision systems</span>
              <span className="vs-text">recommend actions.</span>
            </div>
            <div className="vs-note">That distinction matters.</div>
          </div>
        </div>

        <div className="suite-body">
          <div className="suite-grid suite-grid--3">
            {SUITE_APPS.map(m => (
              <button
                key={m.id}
                className={"module" + (active.has(m.id) ? " on" : "")}
                onClick={() => toggle(m.id)}
                data-comment-anchor={"module-" + m.id}
                type="button"
              >
                <div className="module-head">
                  <div className="module-glyph">{m.icon}</div>
                  <span className="module-num">{m.n}</span>
                </div>
                <div className="module-name">{m.name}</div>
                <div className="module-desc">{m.desc}</div>
                <div className="module-bullets">
                  {m.bullets.map(b => <span key={b} className="module-bullet">{b}</span>)}
                </div>
                <div className="module-tag">
                  {active.has(m.id) ? "Included" : "Add to stack"}
                  <span className="tier">{m.tier}</span>
                </div>
              </button>
            ))}
          </div>

          <div className="suite-summary">
            <div className="suite-summary-head">
              <div className="suite-summary-title">Your stack</div>
              <div className="suite-summary-tag">{stack.length + 1} APPS</div>
            </div>

            <div className="suite-list">
              <div className="suite-row suite-row--hub">
                <span className="suite-row-name">
                  <span className="dot" />Lithora Atlas
                </span>
                <span className="suite-row-price">Included</span>
              </div>
              {stack.length === 0 && (
                <div className="suite-row empty">Add at least one app…</div>
              )}
              {stack.map(m => (
                <div className="suite-row" key={m.id}>
                  <span className="suite-row-name">
                    <span className="dot" />{m.name.replace("Lithora ", "")}
                  </span>
                  <span className="suite-row-price">${fmtPrice(m.price)}</span>
                </div>
              ))}
              {discountPct > 0 && (
                <div className="suite-row" style={{ color: "var(--brand-moss)" }}>
                  <span className="suite-row-name" style={{ color: "var(--brand-moss)" }}>
                    Bundle discount
                  </span>
                  <span className="suite-row-price" style={{ color: "var(--brand-moss)" }}>
                    −{Math.round(discountPct * 100)}%
                  </span>
                </div>
              )}
            </div>

            <div className="suite-total">
              <div className="suite-total-l">Per seat / year</div>
              <div className="suite-total-r">
                ${fmtPrice(final)}
                <span className="suffix">USD</span>
              </div>
            </div>
            <div className="suite-cta">
              <button className="btn btn-white" onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" })} style={{ width: "100%", justifyContent: "center" }}>
                Start with this stack →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ModuleSuite = ModuleSuite;