/* ============================================================
   NemakiWare — Hero variants (A / B / C)
   window.Hero({ variant, t, lang })
   ============================================================ */

/* shared CTA buttons */
function HeroCTAs({ t, onDark = false }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 30 }}>
      <a className="btn btn--primary btn--lg" href="#contact">
        {t.hero.cta1} <Icon name="arrow" size={17} />
      </a>
      <a className={`btn btn--lg ${onDark ? "btn--ondark" : "btn--ghost"}`} href="https://github.com/aegif/NemakiWare" target="_blank" rel="noopener">
        <Icon name="github" size={18} /> {t.hero.cta2}
      </a>
    </div>
  );
}

function HeroStats({ t, onDark = false }) {
  const items = [
    [t.hero.stat1_n, t.hero.stat1_l],
    [t.hero.stat2_n, t.hero.stat2_l],
    [t.hero.stat3_n, t.hero.stat3_l],
  ];
  return (
    <div className="hero-stats" style={{
      display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0, marginTop: 46,
      borderTop: `1px solid ${onDark ? "var(--night-line)" : "var(--line)"}`, paddingTop: 24,
    }}>
      {items.map(([n, l], i) => (
        <div key={i} style={{ paddingRight: 16 }}>
          <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 600, color: onDark ? "#fff" : "var(--ink-900)", letterSpacing: "-0.02em" }}>{n}</div>
          <div style={{ fontSize: 13.5, color: onDark ? "rgba(255,255,255,0.6)" : "var(--ink-500)", marginTop: 4, lineHeight: 1.35 }}>{l}</div>
        </div>
      ))}
    </div>
  );
}

/* ---- visual: permission-filtered result list ------------------ */
function PermissionFilterVisual({ t, dark = false }) {
  const rows = [
    { name: "Q4_revenue_report.pdf", ok: true },
    { name: "board_minutes_2026.docx", ok: false },
    { name: "pricing_strategy.xlsx", ok: true },
    { name: "legal_settlement.pdf", ok: false },
    { name: "product_roadmap.pptx", ok: true },
  ];
  const surface = dark ? "var(--night-850)" : "#fff";
  const line = dark ? "var(--night-line)" : "var(--line)";
  return (
    <div className="hero-visual-card" style={{
      background: surface, border: `1px solid ${line}`, borderRadius: 18,
      boxShadow: dark ? "0 40px 80px -50px rgba(0,0,0,0.7)" : "0 40px 80px -48px oklch(0.45 0.06 220 / 0.45)",
      padding: 20, width: "100%",
    }}>
      {/* query bar */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 11, background: dark ? "rgba(255,255,255,0.05)" : "var(--bg-tint)", border: `1px solid ${line}` }}>
        <span style={{ color: "var(--accent)", display: "flex" }}><Icon name="search" size={17} /></span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: dark ? "rgba(255,255,255,0.8)" : "var(--ink-700)" }}>{t.perm.flow_q}</span>
        <span className="pill pill--accent" style={{ marginLeft: "auto", fontSize: 10 }}>rag_search</span>
      </div>
      {/* acl gate label */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "16px 2px 12px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.5)" : "var(--ink-500)" }}>
        <Icon name="shield" size={14} /> {t.perm.flow_acl} · {t.perm.flow_acl_d}
      </div>
      {/* results */}
      <div style={{ display: "grid", gap: 8 }}>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", borderRadius: 10,
            border: `1px solid ${r.ok ? (dark ? "var(--night-line)" : "var(--line)") : "transparent"}`,
            background: r.ok ? (dark ? "rgba(255,255,255,0.03)" : "#fff") : (dark ? "rgba(255,255,255,0.02)" : "var(--bg-tint)"),
            opacity: r.ok ? 1 : 0.55,
          }}>
            <span style={{ display: "flex", color: r.ok ? "var(--accent)" : (dark ? "rgba(255,255,255,0.4)" : "var(--ink-400)") }}>
              <Icon name={r.ok ? "doc" : "lock"} size={16} />
            </span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 12.5, color: dark ? "rgba(255,255,255,0.85)" : "var(--ink-700)", filter: r.ok ? "none" : "blur(3.2px)", userSelect: "none" }}>{r.name}</span>
            <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.05em", color: r.ok ? "var(--accent-strong)" : (dark ? "rgba(255,255,255,0.35)" : "var(--ink-400)"), textTransform: "uppercase" }}>
              {r.ok ? "0.9" + (3 - i > 0 ? 3 : 1) : "hidden"}
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, fontSize: 12, color: dark ? "rgba(255,255,255,0.5)" : "var(--ink-500)", display: "flex", alignItems: "center", gap: 7 }}>
        <span style={{ color: "var(--accent)", display: "flex" }}><Icon name="check" size={14} /></span>
        {t.perm.flow_result}
      </div>
    </div>
  );
}

/* ---- HERO A: light editorial ---------------------------------- */
function HeroA({ t }) {
  return (
    <section className="hero hero--a" data-screen-label="Hero">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="hero-tags">
            <span className="pill pill--accent">{t.hero.version}</span>
            <span className="eyebrow eyebrow--plain">{t.hero.eyebrow}</span>
          </div>
          <h1 className="hero-h1">
            {t.hero.title_a_1}<span className="hl">{t.hero.title_a_em}</span>{t.hero.title_a_2}{t.hero.title_a_3}
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <HeroCTAs t={t} />
          <HeroStats t={t} />
        </div>
        <div className="hero-art">
          <PermissionFilterVisual t={t} />
        </div>
      </div>
    </section>
  );
}

/* ---- HERO B: dark immersive ----------------------------------- */
function HeroB({ t }) {
  const chips = ["Slack", "Box", "Solr", "CouchDB", "MCP", "Bedrock"];
  return (
    <section className="hero hero--b dark" data-screen-label="Hero">
      <div className="hero-b-grid-bg" aria-hidden="true"></div>
      <div className="hero-b-glow" aria-hidden="true"></div>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="hero-b-inner">
          <div className="hero-tags" style={{ justifyContent: "center" }}>
            <span className="pill pill--accent">{t.hero.version}</span>
            <span className="eyebrow eyebrow--plain">{t.hero.eyebrow}</span>
          </div>
          <h1 className="hero-h1 hero-h1--center">
            {t.hero.title_b_1}<br />
            <span className="hl hl--bright">{t.hero.title_b_2}</span><br />
            {t.hero.title_b_3}
          </h1>
          <p className="hero-sub hero-sub--center">{t.hero.sub}</p>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <HeroCTAs t={t} onDark />
          </div>
          <div className="hero-b-chips" aria-hidden="true">
            {chips.map((c) => (
              <span key={c} className="pill" style={{ fontSize: 11 }}>{c}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- HERO C: developer console -------------------------------- */
function HeroC({ t }) {
  return (
    <section className="hero hero--c" data-screen-label="Hero">
      <div className="wrap hero-grid hero-grid--c">
        <div className="hero-copy">
          <div className="hero-tags">
            <span className="pill pill--accent">{t.hero.version}</span>
            <span className="eyebrow eyebrow--plain">{t.hero.eyebrow}</span>
          </div>
          <h1 className="hero-h1 hero-h1--tight">{t.hero.title_c}</h1>
          <p className="hero-sub">{t.hero.sub_c}</p>
          <HeroCTAs t={t} />
          <HeroStats t={t} />
        </div>
        <div className="hero-art">
          <div className="console-card">
            <div className="console-bar">
              <span className="cdot" style={{ background: "#ef6f57" }}></span>
              <span className="cdot" style={{ background: "#f4be4f" }}></span>
              <span className="cdot" style={{ background: "#62c554" }}></span>
              <span className="console-title mono">nemakiware · mcp</span>
            </div>
            <pre className="console-body mono"><span className="c-prompt">$</span> <span className="c-cmd">nemakiware_rag_search</span> {"{"}
  <span className="c-key">"query"</span>: <span className="c-str">"quarterly revenue"</span>,
  <span className="c-key">"topK"</span>: <span className="c-num">5</span>, <span className="c-key">"minScore"</span>: <span className="c-num">0.6</span>
{"}"}

<span className="c-dim">→ applying ACL filter for user: a.tanaka</span>
<span className="c-ok">✓ 3 results</span> <span className="c-dim">· 2 hidden by permission</span>

  <span className="c-ok">0.93</span>  Q4_revenue_report.pdf
  <span className="c-ok">0.88</span>  pricing_strategy.xlsx
  <span className="c-ok">0.81</span>  product_roadmap.pptx
</pre>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant = "a", t }) {
  if (variant === "b") return <HeroB t={t} />;
  if (variant === "c") return <HeroC t={t} />;
  return <HeroA t={t} />;
}

Object.assign(window, { Hero });