// Content sections — Pain, Architecture, Features, Specs, Use Cases,
// Customers, Reseller, FAQ, Contact, Footer.

const { useState: useS2 } = React;

/* ---------- PAIN ---------- */
function PainSection({ t }) {
  return (
    <section className="section section--dark" id="pain">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede">{t.lede}</p>
        <div className="pain__grid">
          {t.items.map((it) =>
          <div className="pain__item" key={it.n}>
              <div className="pain__n">{it.n}</div>
              <div className="pain__t">{it.t}</div>
              <div className="pain__d">{it.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- ARCHITECTURE ---------- */
function ArchSection({ t }) {
  return (
    <section className="section section--day surface-day arch" id="product">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede day-fg-2">{t.lede}</p>

        <div className="arch__diagram day-card">
          <div className="arch__lanes">
            {/* Lane A — employee */}
            <div className="arch__lane day-card">
              <div className="arch__lane-head">{t.lane_a}</div>
              <h4>👤</h4>
              <div className="arch__lane-sub">{t.lane_a_l}</div>
              <div style={{
                background: "var(--n-100)",
                border: "1px solid var(--n-200)",
                borderRadius: 4,
                padding: "10px 12px",
                fontSize: 16,
                color: "var(--n-700)",
                fontFamily: "var(--ff-mono)",
                lineHeight: 1.5
              }}>
                "ASML-2026-X1 機台壓降異常…"
              </div>
            </div>

            {/* Lane B — gateway */}
            <div className="arch__lane arch__lane--gateway">
              <div className="arch__lane-head">SECUAGENT</div>
              <h4 style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--sa-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                </svg>
                {t.lane_b}
              </h4>
              <div className="arch__lane-sub">
                detect → tokenize → route → restore
              </div>
              <div className="arch__steps">
                {t.step_titles.map((title, i) =>
                <div className="arch__step" key={i}>
                    <span className="n">STEP {i + 1}</span>
                    <div className="t">{title}</div>
                    <div className="d">{t.step_descs[i]}</div>
                  </div>
                )}
              </div>
            </div>

            {/* Lane C — external LLM */}
            <div className="arch__lane day-card">
              <div className="arch__lane-head">{t.lane_c}</div>
              <h4>☁️</h4>
              <div className="arch__lane-sub">{t.lane_c_l}</div>
              <div style={{
                background: "var(--n-100)",
                border: "1px solid var(--n-200)",
                borderRadius: 4,
                padding: "10px 12px",
                fontSize: 16,
                color: "var(--n-700)",
                fontFamily: "var(--ff-mono)",
                lineHeight: 1.5
              }}>
                "[核心資產代號_1] pressure issue…"
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FEATURES ---------- */
const FEATURE_ICONS = [
// Shield / lock
<svg key="0" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    <path d="M9 12l2 2 4-4" />
  </svg>,
// Router / split
<svg key="1" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 3v6" />
    <circle cx="6" cy="13" r="3" />
    <path d="M6 16v5" />
    <path d="M18 3v3" />
    <circle cx="18" cy="13" r="3" />
    <path d="M18 16v5" />
    <path d="M9 13h6" />
  </svg>,
// Receipt / log
<svg key="2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 2h12l4 4v16l-3-2-3 2-3-2-3 2-3-2-1 2V2z" />
    <path d="M8 8h8M8 12h8M8 16h5" />
  </svg>];


function FeaturesSection({ t }) {
  return (
    <section className="section section--day surface-day" id="features">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <div className="features__grid">
          {t.items.map((it, i) =>
          <div className="feature day-card" key={i}>
              <div className="feature__icon">{FEATURE_ICONS[i]}</div>
              <h3>{it.t}</h3>
              <p className="day-fg-2">{it.d}</p>
              <div className="feature__tags">
                {it.tags.map((tag) =>
              <span className="feature__tag" key={tag}>{tag}</span>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- DEMO WRAPPER ---------- */
function DemoSection({ t, lang }) {
  return (
    <section className="section demo" id="demo">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede">{t.lede}</p>
        <LiveDemo t={t} lang={lang} />
      </div>
    </section>);

}

/* ---------- SPECS ---------- */
function SpecsSection({ t }) {
  return (
    <section className="section section--day surface-day" id="specs">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <div className="specs__grid">
          {t.cols.map((col, i) =>
          <div className="spec day-card day-bd" key={i}>
              <h4>{col.t}</h4>
              <dl>
                {col.rows.map(([k, v], j) =>
              <React.Fragment key={j}>
                    <dt>{k}</dt>
                    <dd>{v}</dd>
                  </React.Fragment>
              )}
              </dl>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- USE CASES ---------- */
function CasesSection({ t }) {
  return (
    <section className="section section--day surface-day" id="cases">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <div className="cases__grid">
          {t.items.map((it, i) =>
          <div className="case day-card" key={i}>
              <span className="case__tag">{it.tag}</span>
              <h3>{it.t}</h3>
              <p className="day-fg-2">{it.d}</p>
              <div className="case__k">{it.k}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CUSTOMERS ---------- */
function CustomersSection({ t }) {
  return (
    <section className="section customers">
      <div className="wrap">
        <div className="customers__inner">
          <div>
            <div className="eyebrow">{t.eyebrow}</div>
            <h2 className="section-h" style={{ color: "#fff" }}>{t.title}</h2>
            <div className="customers__quote">{t.quote}</div>
            <div className="customers__by">{t.quote_by}</div>
          </div>
          <div>
            <div className="customers__logos">
              {t.placeholders.map((p) =>
              <div className="customer-logo" key={p}>{p}</div>
              )}
            </div>
            <div className="customers__note">{t.logos_note}</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- RESELLER ---------- */
function ResellerSection({ t }) {
  return (
    <section className="section section--day surface-day" id="reseller">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede day-fg-2">{t.lede}</p>
        <div className="reseller__grid">
          {t.items.map((it, i) =>
          <div className="reseller-item" key={i}>
              <div className="reseller-item__icon">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            </div>
          )}
        </div>
        <div className="reseller__cta">
          <a href="#contact" className="btn btn--primary">
            {t.cta}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function FAQSection({ t }) {
  const [open, setOpen] = useS2(0);
  return (
    <section className="section section--day surface-day" id="faq">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <div className="faq__list">
          {t.items.map((it, i) =>
          <div
            className={`faq-item ${open === i ? "is-open" : ""}`}
            key={i}
            onClick={() => setOpen(open === i ? -1 : i)}>
            
              <div className="faq-item__q">
                <span>{it.q}</span>
                <span className="faq-item__toggle">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                    <path d="M12 5v14M5 12h14" />
                  </svg>
                </span>
              </div>
              <div className="faq-item__a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CONTACT ---------- */
function ContactSection({ t }) {
  const [sent, setSent] = useS2(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="contact__inner">
          <div>
            <div className="eyebrow">{t.eyebrow}</div>
            <h2 className="section-h" style={{ color: "#fff" }}>{t.title}</h2>
            <p className="section-lede" style={{ color: "var(--sa-night-fg-2)" }}>
              {t.lede}
            </p>
            <div className="contact__meta">
              {t.contact_meta.map((line) =>
              <div key={line}>{line}</div>
              )}
            </div>
          </div>
          <form className="form" onSubmit={submit}>
            {sent ?
            <div className="form__success">{t.sent}</div> :

            <>
                <div className="form__row">
                  <label>{t.f_name}</label>
                  <input type="text" required />
                </div>
                <div className="form__row">
                  <label>{t.f_company}</label>
                  <input type="text" required />
                </div>
                <div className="form__row">
                  <label>{t.f_role}</label>
                  <input type="text" />
                </div>
                <div className="form__row">
                  <label>{t.f_email}</label>
                  <input type="email" required />
                </div>
                <div className="form__row form__row--full">
                  <label>{t.f_industry}</label>
                  <select required defaultValue="">
                    <option value="" disabled>—</option>
                    {t.f_industries.map((opt) =>
                  <option key={opt}>{opt}</option>
                  )}
                  </select>
                </div>
                <div className="form__row form__row--full">
                  <label>{t.f_notes}</label>
                  <textarea></textarea>
                </div>
                <button className="form__submit" type="submit">
                  {t.submit}
                </button>
              </>
            }
          </form>
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function FooterSection({ t }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <img src="assets/site_logo.png" alt="Bizlution" />
            <div className="footer__tag">{t.tagline}</div>
          </div>
          {t.cols.map((col) =>
          <div className="footer__col" key={col.t}>
              <h5>{col.t}</h5>
              <ul>
                {col.links.map((l) =>
              <li key={l} style={{ fontSize: "20px" }}><a href="#">{l}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div className="footer__legal">
          <span>{t.legal}</span>
          <span>Built in Taipei · v1.3.15</span>
        </div>
      </div>
    </footer>);

}

/* ---------- EDGE ENGINEERING ---------- */
function EdgeSection({ t }) {
  return (
    <section className="section section--dark" id="edge">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede">{t.lede}</p>

        {/* Dual-track pipeline */}
        <div className="edge-tracks">
          <div className="edge-tracks__head">
            <div>
              <h3 className="edge-tracks__title">{t.tracks_title}</h3>
              <p className="edge-tracks__lede">{t.tracks_lede}</p>
            </div>
            <div className="edge-tracks__signal">
              <span className="signal-dot"></span>
              <span>SENSOR 0.78 MPa &nbsp;&gt;&nbsp; THRESHOLD 0.50</span>
            </div>
          </div>

          <div className="edge-track edge-track--fast">
            <div className="edge-track__lane">
              <span className="edge-track__tag">{t.fast_tag}</span>
              <h4>{t.fast_t}</h4>
              <p>{t.fast_d}</p>
            </div>
            <div className="edge-track__viz">
              <div className="edge-track__steps">
                <span className="edge-pill">⚠ THRESHOLD</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill edge-pill--hot">RULE ENGINE</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill edge-pill--hot">OPC-UA</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill">PLC OFF</span>
              </div>
              <div className="edge-track__time">⏱ &lt; 100 ms</div>
            </div>
          </div>

          <div className="edge-track edge-track--slow">
            <div className="edge-track__lane">
              <span className="edge-track__tag">{t.slow_tag}</span>
              <h4>{t.slow_t}</h4>
              <p>{t.slow_d}</p>
            </div>
            <div className="edge-track__viz">
              <div className="edge-track__steps">
                <span className="edge-pill">CONTEXT</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill edge-pill--cool">ASYNC QUEUE</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill edge-pill--cool">LLAMA-3 8B (GGUF)</span>
                <span className="edge-arrow">▸</span>
                <span className="edge-pill">WORK ORDER</span>
              </div>
              <div className="edge-track__time edge-track__time--cool">⏱ 5–10 s</div>
            </div>
          </div>
        </div>

        {/* 4 hardcore cards */}
        <div className="edge__grid">
          {t.items.map((it, i) =>
            <div className="edge-card" key={i}>
              <div className="edge-card__tag">{it.tag}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <div className="edge-card__k">{it.k}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  PainSection, ArchSection, FeaturesSection, DemoSection,
  SpecsSection, CasesSection, CustomersSection,
  ResellerSection, FAQSection, ContactSection, FooterSection,
  EdgeSection, LabSection
});

/* ---------- INVESTOR LAB ---------- */
function LabSection({ t }) {
  const [chatTriggered, setChatTriggered] = useS2(false);
  const [aiThinking, setAiThinking] = useS2(false);
  const [version, setVersion] = useS2("V1"); // "V1" | "loading" | "V2"
  const [showOutLane, setShowOutLane] = useS2(false);

  const runChat = () => {
    setChatTriggered(false);
    setShowOutLane(false);
    setAiThinking(true);
    setTimeout(() => {
      setAiThinking(false);
      setChatTriggered(true);
      setShowOutLane(true);
    }, 900);
  };

  const fireReload = () => {
    if (version === "loading") return;
    if (version === "V2") {
      // Reset back to V1 so the demo is replayable on the same page load.
      setVersion("V1");
      return;
    }
    setVersion("loading");
    setTimeout(() => setVersion("V2"), 3000);
  };

  const versionDisplay = version === "loading" ? "V1 → V2" : version;
  const versionClass =
    version === "V1" ? "is-v1" :
    version === "loading" ? "is-loading" :
    "is-v2";

  const aiText =
    version === "V2" ? t.ai_msg_v2 :
    t.ai_msg_v1;

  const reloadBtnLabel =
    version === "loading" ? t.btn_reload_running :
    version === "V2" ? t.btn_reload_reset :
    t.btn_reload;

  const reloadNote =
    version === "loading" ? t.version_note_running :
    version === "V2" ? t.version_note_v2 :
    t.version_note_v1;

  return (
    <section className="section section--day surface-day lab" id="lab">
      <div className="wrap">
        <div className="eyebrow">{t.eyebrow}</div>
        <h2 className="section-h">{t.title}</h2>
        <p className="section-lede day-fg-2">{t.lede}</p>

        <div className="lab__grid">
          {/* === LEFT: Terminal === */}
          <div className="lab-term">
            <div className="lab-term__head">
              <div className="lab-term__dots">
                <span></span><span></span><span></span>
              </div>
              <div className="lab-term__title">{t.terminal_title}</div>
              <div className="lab-term__status">
                <span className="signal-dot"></span> READY
              </div>
            </div>
            <div className="lab-term__body">
              {/* Lane: user raw input */}
              <div className="lab-term__lane-label">{t.lane_user}</div>
              <div className="lab-term__line">
                <span className="lab-term__prompt">{t.prompt_user}:~$</span>
                <span className="lab-term__text">
                  {t.user_msg.map((seg, i) =>
                    seg.type === "mask" ? (
                      <span className="term-mask" key={i} tabIndex={0}>
                        <span className="term-mask__reveal">{seg.v}</span>
                      </span>
                    ) : (
                      <span key={i}>{seg.v}</span>
                    )
                  )}
                </span>
              </div>

              {/* AI response */}
              <div className="lab-term__line lab-term__line--ai">
                <span className="lab-term__prompt lab-term__prompt--ai">
                  {t.prompt_ai}:~$
                </span>
                {!chatTriggered && !aiThinking && (
                  <span className="lab-term__idle">{t.prompt_idle}<span className="caret">▌</span></span>
                )}
                {aiThinking && (
                  <span className="lab-term__idle">
                    <span className="lab-spinner"></span>
                    {t.ai_pending}
                  </span>
                )}
                {chatTriggered && (
                  <span className="lab-term__text lab-term__text--ai">
                    <span className={`lab-term__brain-badge brain--${version === "V2" ? "v2" : "v1"}`}>
                      [{version === "V2" ? "V2" : "V1"}]
                    </span>{" "}
                    {aiText}
                  </span>
                )}
              </div>

              {/* Out lane — what actually leaves the network */}
              {showOutLane && (
                <>
                  <div className="lab-term__divider"></div>
                  <div className="lab-term__lane-label lab-term__lane-label--out">{t.lane_out}</div>
                  <div className="lab-term__out">
                    {t.out_template.split(/(\[[^\]]+\])/g).map((part, i) =>
                      /^\[.+\]$/.test(part) ? (
                        <span className="term-token" key={i}>{part}</span>
                      ) : (
                        <span key={i}>{part}</span>
                      )
                    )}
                  </div>
                </>
              )}
            </div>
            <div className="lab-term__hint">💡 {t.mask_hint}</div>
          </div>

          {/* === RIGHT: Control panel === */}
          <div className="lab-ctrl">
            <div className={`lab-ctrl__version ${versionClass}`}>
              <div className="lab-ctrl__label">{t.version_label}</div>
              <div className="lab-ctrl__big">
                {version === "loading" && <span className="lab-spinner lab-spinner--lg"></span>}
                {versionDisplay}
              </div>
              <div className="lab-ctrl__note">{reloadNote}</div>
            </div>

            <div className="lab-ctrl__vram">
              <div className="lab-ctrl__label">{t.vram_label}</div>
              <div className="lab-ctrl__vram-n">{t.vram_value}</div>
              <div className="vram-bar"><div className="vram-bar__fill" style={{ width: "90%" }} /></div>
              <div className="lab-ctrl__meta">{t.vram_meta}</div>
            </div>

            <button
              className={`btn btn--primary lab-ctrl__btn ${chatTriggered ? "is-done" : ""}`}
              onClick={runChat}
              disabled={aiThinking}
            >
              {chatTriggered ? t.btn_chat_again : t.btn_chat}
            </button>

            <button
              className={`btn lab-ctrl__btn lab-ctrl__btn--reload ${versionClass}`}
              onClick={fireReload}
              disabled={version === "loading"}
            >
              {version === "loading" && <span className="lab-spinner"></span>}
              {reloadBtnLabel}
            </button>
          </div>
        </div>
      </div>
    </section>);

}