/* Main app — Hainan Shengshi Xili Technology
   Single-page React app with 7 routes by state.
   All pages cohabit one HTML so navigation feels instantaneous. */

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "default",
  "font": "default",
  "heroMode": "globe",
  "matrixLayout": "grid",
  "lang": "zh"
}/*EDITMODE-END*/;

/* ---------- Tweaks integration ---------- */
function applyTweak(key, val) {
  if (key === "theme") {
    document.documentElement.dataset.theme = val === "default" ? "" : val;
  } else if (key === "font") {
    document.documentElement.dataset.font = val === "default" ? "" : val;
  }
}

/* ---------- Reveal hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---------- Nav ---------- */
function Nav({ page, setPage, lang, setLang, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    ["home", t.nav.home],
    ["cases", t.nav.cases],
    ["enterprise", t.nav.enterprise],
    ["geo", t.nav.geo],
    ["outbound", t.nav.outbound],
    ["agent", t.nav.agent],
    ["about", t.nav.about],
    ["contact", t.nav.contact],
  ];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav__brand" onClick={() => setPage("home")}>
        <div className="nav__seal">玺</div>
        <div className="nav__brand-text">
          <div className="nav__brand-cn">{t.brand.cn}</div>
          <div className="nav__brand-en">{t.brand.en}</div>
        </div>
      </div>
      <div className="nav__menu">
        {items.map(([key, label]) => (
          <a key={key} className={`nav__link ${page === key ? "active" : ""}`}
             onClick={() => { setPage(key); window.scrollTo({ top: 0, behavior: "instant" }); }}>
            {label}
          </a>
        ))}
      </div>
      <div className="nav__right">
        <div className="nav__lang">
          <button className={lang === "zh" ? "active" : ""} onClick={() => setLang("zh")}>中</button>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Footer ---------- */
function Footer({ t, setPage }) {
  return (
    <footer className="footer">
      <div className="footer__seal">玺·礼</div>
      <div className="footer__top">
        <div>
          <div className="footer__brand">{t.brand.cn} · <em className="serif-en">{t.brand.en}</em></div>
          <p className="footer__tagline">{t.footer.tagline}</p>
        </div>
        <div className="footer__col">
          <h4>{t.footer.explore}</h4>
          <ul>
            <li onClick={() => setPage("home")}>{t.nav.home}</li>
            <li onClick={() => setPage("cases")}>{t.nav.cases}</li>
            <li onClick={() => setPage("about")}>{t.nav.about}</li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>{t.footer.services}</h4>
          <ul>
            <li onClick={() => setPage("enterprise")}>{t.nav.enterprise}</li>
            <li onClick={() => setPage("geo")}>{t.nav.geo}</li>
            <li onClick={() => setPage("outbound")}>{t.nav.outbound}</li>
            <li onClick={() => setPage("agent")}>{t.nav.agent}</li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>{t.footer.contact}</h4>
          <ul>
            <li>{t.footer.email}</li>
            <li>{t.footer.wechat}</li>
            <li>{t.footer.addr}</li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>{t.footer.copy}</span>
        <span>{t.footer.icp}</span>
      </div>
    </footer>
  );
}

/* ---------- Site mockup placeholder ---------- */
const VISUALS = {
  enterpriseOps: "assets/visuals/enterprise-website-ops.webp",
  enterpriseStack: "assets/visuals/enterprise-service-stack.webp",
  enterpriseTicketingWorkshop: "assets/visuals/enterprise-ai-ticketing-workshop.webp",
  enterpriseSolutionMeeting: "assets/visuals/enterprise-ai-solution-meeting.webp",
  geoCitation: "assets/visuals/geo-ai-citation.webp",
  geoStructured: "assets/visuals/geo-structured-data.webp",
  outboundGlobal: "assets/visuals/outbound-global-growth.webp",
  outboundFunnel: "assets/visuals/outbound-keyword-to-revenue.webp",
  agentOutcomes: "assets/visuals/agent-business-outcomes.webp",
  agentWorkflow: "assets/visuals/agent-workflow-orchestration.webp",
  agentIndustry: "assets/visuals/agent-industry-scenarios.webp",
  agentManufacturing: "assets/visuals/agent-manufacturing-case.webp",
  agentPackages: "assets/visuals/agent-service-packages.webp",
  aboutAssets: "assets/visuals/about-digital-assets.webp",
  contactConsultation: "assets/visuals/contact-consultation.webp",
};

function VisualImage({ src, alt, caption, className = "" }) {
  return (
    <figure className={`visual-image ${className}`}>
      <img src={src} alt={alt} loading="lazy" />
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}

function VisualPanel({ src, alt, caption, reverse, children }) {
  return (
    <div className={`visual-panel reveal ${reverse ? "reverse" : ""}`}>
      <div className="visual-panel__copy">{children}</div>
      <VisualImage src={src} alt={alt} caption={caption} />
    </div>
  );
}

function VisualBand({ src, alt, caption }) {
  return (
    <div className="visual-band reveal">
      <img src={src} alt={alt} loading="lazy" />
      {caption && <div className="visual-band__caption">{caption}</div>}
    </div>
  );
}

function SiteMock({ url, title, badges = [], screenshot }) {
  return (
    <div className="site-mock">
      <div className="site-mock__chrome">
        <div className="site-mock__dot"></div>
        <div className="site-mock__dot"></div>
        <div className="site-mock__dot"></div>
        <div className="site-mock__url">{url}</div>
      </div>
      {screenshot ? (
        <div className="site-mock__shot">
          <img src={screenshot} alt={`${title} website screenshot`} loading="lazy" />
        </div>
      ) : (
        <div className="site-mock__body">
          <div>
            <div className="site-mock__title">{title}</div>
            <div className="site-mock__sub">{url.toUpperCase()}</div>
          </div>
          <div className="site-mock__badges">
            {badges.map((b, i) => <div key={i} className="site-mock__badge">{b}</div>)}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Home ---------- */
function HomePage({ t, lang, setPage, heroMode, matrixLayout }) {
  const goldRef = useRef("#c9a961");
  const [color, setColor] = useState("#c9a961");
  useEffect(() => {
    const v = getComputedStyle(document.documentElement).getPropertyValue("--gold").trim();
    if (v) setColor(v);
  }, []);

  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="hero__bg">
          <HeroCanvas mode={heroMode} color={color} />
        </div>
        <div className="hero__index">SHENGSHI · XILI · 2026</div>
        <div className="hero__content">
          <div className="hero__eyebrow eyebrow">{t.home.eyebrow}</div>
          <h1 className="hero__title">
            {t.home.titleA}
            <em>{t.home.titleAccent1}</em>
            {t.home.titleB}
            <em>{t.home.titleAccent2}</em>
            {t.home.titleC}
            <em>{t.home.titleAccent3}</em>
            {t.home.titleD}
            <br />
            <span className="accent">{t.home.titleE}</span>
            {t.home.titleF}
          </h1>
          <p className="hero__sub">{t.home.sub}</p>
          <div className="hero__cta">
            <button className="btn btn--primary" onClick={() => setPage("contact")}>
              <span>{t.home.ctaPrimary}</span>
              <span>→</span>
            </button>
            <button className="btn btn--ghost" onClick={() => setPage("cases")}>
              <span>{t.home.ctaGhost}</span>
            </button>
          </div>
          <div className="hero__metrics">
            {t.home.metrics.map((m, i) => (
              <div key={i} className="hero__metric">
                <div className="hero__metric-num">{m.num}</div>
                <div className="hero__metric-label">{m.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero__cue">SCROLL</div>
      </section>

      {/* CAPABILITIES */}
      <section className="section">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.home.capabilityEyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.home.capabilityTitle}</h2>
              <p style={{ color: "var(--ink-2)", marginTop: 16, maxWidth: 640, fontSize: 17, lineHeight: 1.65 }}>
                {t.home.capabilitySub}
              </p>
            </div>
            <div className="section-header__meta">
              SECTION / 01<br/>CAPABILITIES
            </div>
          </div>

          <div className="capability-grid reveal">
            {t.home.caps.map((cap, i) => {
              const targetPage = ["outbound", "agent", "geo", "enterprise", "contact", "contact"][i];
              const capVisuals = [VISUALS.outboundGlobal, VISUALS.agentWorkflow, VISUALS.geoCitation, VISUALS.enterpriseOps];
              return (
                <div key={i} className="cap"
                  onClick={() => { setPage(targetPage); window.scrollTo({ top: 0, behavior: "instant" }); }}
                  style={{ cursor: "pointer" }}>
                  {capVisuals[i] && (
                    <VisualImage
                      className="visual-card"
                      src={capVisuals[i]}
                      alt={`${cap.title} visual`}
                    />
                  )}
                  <div className="cap__num">{cap.num} / 06</div>
                  <div className="cap__arrow">↗</div>
                  <h3 className="cap__title">
                    {cap.title}
                    <em className="serif-en">{cap.en}</em>
                  </h3>
                  <p className="cap__desc">{cap.desc}</p>
                  <div className="cap__tags">
                    {cap.tags.map((tag, j) => <span key={j} className="cap__tag">{tag}</span>)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* FLAGSHIP CASES */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.flagshipEyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.flagshipTitle}</h2>
              <p style={{ color: "var(--ink-2)", marginTop: 16, maxWidth: 640, fontSize: 17, lineHeight: 1.65 }}>
                {t.flagshipSub}
              </p>
            </div>
            <div className="section-header__meta">SECTION / 02<br/>CASES</div>
          </div>

          <div className="flagship">
            <FlagshipRow data={t.cases.flagship1} />
            <FlagshipRow data={t.cases.flagship2} reverse />
            <FlagshipRow data={t.cases.flagship3} />
          </div>
        </div>
      </section>

      {/* MATRIX */}
      <section className="section">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.matrixEyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.matrixTitle}</h2>
              <p style={{ color: "var(--ink-2)", marginTop: 16, maxWidth: 720, fontSize: 17, lineHeight: 1.7 }}>
                {t.matrixIntro || t.matrixSub}
              </p>
            </div>
            <div className="section-header__meta">AI PRODUCT LAB<br/>17 LIVE SITES</div>
          </div>

          {matrixLayout === "constellation"
            ? <ConstellationView matrix={t.cases.matrix} />
            : matrixLayout === "list"
            ? <ListView matrix={t.cases.matrix} />
            : <GroupedMatrixView matrix={t.cases.matrix} groups={t.matrixGroups} />
          }

          {t.matrixOutro && (
            <div className="reveal" style={{
              marginTop: 56,
              padding: "32px 40px",
              borderLeft: "3px solid var(--gold)",
              background: "var(--bg-2)",
              fontSize: 15,
              color: "var(--ink-2)",
              lineHeight: 1.8,
              maxWidth: 860,
            }}>
              {t.matrixOutro}
            </div>
          )}
        </div>
      </section>

      {/* PROCESS */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.process.eyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.process.title}</h2>
            </div>
            <div className="section-header__meta">SECTION / 04<br/>METHODOLOGY</div>
          </div>
          <div className="process reveal">
            {t.process.steps.map((s, i) => (
              <div key={i} className="process__step">
                <div className="process__num">STEP {s.num}</div>
                <div className="process__name">{s.name}</div>
                <div className="process__name-en">{s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* INDUSTRY */}
      <section className="section">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.industry.eyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.industry.title}</h2>
            </div>
            <div className="section-header__meta">SECTION / 05<br/>INDUSTRIES</div>
          </div>
          <div className="industry-grid reveal">
            {t.industry.list.map((ind, i) => (
              <div key={i} className="industry">
                <VisualImage
                  className="visual-card industry__visual"
                  src={[VISUALS.agentIndustry, VISUALS.agentManufacturing, VISUALS.outboundFunnel, VISUALS.geoStructured][i]}
                  alt={`${ind.name} visual`}
                />
                <div className="industry__name">{ind.name}</div>
                <div className="industry__name-en">{ind.en}</div>
                <p className="industry__desc">{ind.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container reveal">
          <div className="cta-banner">
            <div>
              <h2 className="cta-banner__title">
                {t.cta.title}<em>{t.cta.titleAccent}</em>{t.cta.titleEnd}
              </h2>
              <p className="cta-banner__sub">{t.cta.sub}</p>
            </div>
            <button className="btn btn--primary" onClick={() => setPage("contact")}>
              <span>{t.cta.btn}</span>
              <span>→</span>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Flagship row ---------- */
function FlagshipRow({ data, reverse }) {
  return (
    <div className={`flagship__row reveal ${reverse ? "reverse" : ""}`}>
      <div className="flagship__info">
        <div className="flagship__tag">{data.tag}</div>
        <h3 className="flagship__name">{data.name}</h3>
        <div className="flagship__url">↗ {data.url}</div>
        <p className="flagship__desc">{data.desc}</p>
        <div className="flagship__metrics">
          {data.metrics.map((m, i) => (
            <div key={i} className="flagship__metric">
              <div className="flagship__metric-num">{m.num}</div>
              <div className="flagship__metric-label">{m.label}</div>
            </div>
          ))}
        </div>
        <a className="arrow-link">View case study →</a>
      </div>
      <div className="flagship__visual">
        <SiteMock url={data.url} title={data.name} badges={data.badges} screenshot={data.screenshot} />
      </div>
    </div>
  );
}

/* ---------- Grouped Matrix View ---------- */
function GroupedMatrixView({ matrix, groups }) {
  if (!groups) {
    // fallback plain grid
    return (
      <div className="matrix-grid reveal">
        {matrix.map((c, i) => (
          <div key={i} className="matrix-card">
            <div className="matrix-card__url">{c.url} ↗</div>
            <div className="matrix-card__name">{c.name}</div>
            <div className="matrix-card__type">{c.type}</div>
            <div className="matrix-card__tag">{c.tag}</div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div className="reveal" style={{ marginTop: 56 }}>
      {groups.map((grp) => {
        const items = matrix.filter(m => m.category === grp.key);
        return (
          <div key={grp.key} style={{ marginBottom: 56 }}>
            {/* Group header */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr auto",
              alignItems: "end",
              borderTop: "1px solid var(--gold)",
              paddingTop: 20,
              marginBottom: 24,
              gap: 24,
            }}>
              <div>
                <div style={{
                  fontFamily: "var(--mono)",
                  fontSize: 10,
                  letterSpacing: "0.22em",
                  color: "var(--gold)",
                  marginBottom: 8,
                }}>{grp.eyebrow}</div>
                <div style={{
                  fontFamily: "var(--serif)",
                  fontSize: "clamp(20px, 2.2vw, 28px)",
                  color: "var(--ink)",
                }}>{grp.title}</div>
              </div>
              {/* Capabilities tags */}
              <div style={{
                display: "flex",
                flexWrap: "wrap",
                gap: 8,
                justifyContent: "flex-end",
                maxWidth: 480,
              }}>
                {grp.capabilities.map((cap, j) => (
                  <span key={j} style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    letterSpacing: "0.1em",
                    color: "var(--ink-3)",
                    border: "1px solid var(--line-strong)",
                    padding: "4px 10px",
                    whiteSpace: "nowrap",
                  }}>{cap}</span>
                ))}
              </div>
            </div>
            {/* Product cards */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
              gap: 12,
            }}>
              {items.map((c, i) => (
                <div key={i} className="matrix-card">
                  {c.screenshot && (
                    <div className="matrix-card__shot">
                      <img src={c.screenshot} alt={`${c.name} website screenshot`} loading="lazy" />
                    </div>
                  )}
                  <div className="matrix-card__url">{c.url} ↗</div>
                  <div className="matrix-card__name">{c.name}</div>
                  <div className="matrix-card__type">{c.type}</div>
                  <div className="matrix-card__tag">{c.tag}</div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- Constellation view (star map) ---------- */
function ConstellationView({ matrix }) {
  // Position 17 sites in a starfield
  const positions = useMemo(() => {
    return matrix.map((m, i) => {
      const ang = (i / matrix.length) * Math.PI * 2;
      const ring = i < 6 ? 1 : i < 12 ? 2 : 3;
      const r = 18 + ring * 14 + (Math.sin(i * 1.7) * 4);
      const cx = 50 + Math.cos(ang) * r;
      const cy = 50 + Math.sin(ang) * r * 0.55;
      return { x: cx, y: cy };
    });
  }, [matrix]);

  return (
    <div className="reveal" style={{
      position: "relative",
      aspectRatio: "16 / 9",
      border: "1px solid var(--line)",
      background: "var(--bg-2)",
      overflow: "hidden",
    }}>
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
        {positions.map((p, i) => (
          <line key={i} x1="50%" y1="50%"
            x2={`${p.x}%`} y2={`${p.y}%`}
            stroke="var(--gold)" strokeOpacity="0.12" strokeWidth="0.5" />
        ))}
      </svg>
      <div style={{
        position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
        width: 80, height: 80, border: "1px solid var(--gold)", borderRadius: "50%",
        display: "grid", placeItems: "center",
        fontFamily: "var(--serif)", color: "var(--gold)", fontSize: 28,
      }}>玺</div>
      {matrix.map((c, i) => (
        <div key={i} title={`${c.name} · ${c.url}`} style={{
          position: "absolute",
          left: `${positions[i].x}%`, top: `${positions[i].y}%`,
          transform: "translate(-50%, -50%)",
          padding: "6px 10px",
          background: "var(--bg)",
          border: "1px solid var(--line-strong)",
          fontFamily: "var(--mono)",
          fontSize: 10,
          letterSpacing: "0.05em",
          color: "var(--ink-2)",
          whiteSpace: "nowrap",
          cursor: "pointer",
          transition: "all 0.3s",
        }} onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = "var(--gold)";
          e.currentTarget.style.color = "var(--gold)";
        }} onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = "var(--line-strong)";
          e.currentTarget.style.color = "var(--ink-2)";
        }}>
          {c.url}
        </div>
      ))}
    </div>
  );
}

/* ---------- List view ---------- */
function ListView({ matrix }) {
  return (
    <div className="reveal" style={{ borderTop: "1px solid var(--line)" }}>
      {matrix.map((c, i) => (
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "60px 1fr 1fr 1fr 60px",
          gap: 24,
          padding: "20px 0",
          borderBottom: "1px solid var(--line)",
          alignItems: "center",
          cursor: "pointer",
          transition: "background 0.2s",
        }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-2)"}
           onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.15em" }}>
            {String(i + 1).padStart(2, "0")}
          </div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 18 }}>{c.name}</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--gold)" }}>{c.url}</div>
          <div style={{ fontSize: 13, color: "var(--ink-2)" }}>{c.type}</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.15em", textAlign: "right" }}>↗</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Page hero (sub-pages) ---------- */
function PageHero({ data }) {
  return (
    <section className="page-hero page-enter">
      <div className="container">
        <div className="page-hero__breadcrumb">
          <span>↗</span> {data.breadcrumb}
        </div>
        <h1 className="page-hero__title">
          {data.title}<em>{data.titleEm}</em>{data.titleEnd || ""}
        </h1>
        <p className="page-hero__sub">{data.sub}</p>
      </div>
    </section>
  );
}

/* ---------- Cases page ---------- */
function CasesPage({ t }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.cases} />
      <section className="section">
        <div className="container">
          <div className="flagship">
            <FlagshipRow data={t.cases.flagship1} />
            <FlagshipRow data={t.cases.flagship2} reverse />
            <FlagshipRow data={t.cases.flagship3} />
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">{t.matrixEyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{t.matrixTitle}</h2>
            </div>
            <div className="section-header__meta">17 LIVE SITES</div>
          </div>
          <GroupedMatrixView matrix={t.cases.matrix} groups={t.matrixGroups} />
        </div>
      </section>
    </div>
  );
}

/* ---------- Enterprise page ---------- */
function EnterprisePage({ t }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.enterprise} />
      <section className="section">
        <div className="container">
          <VisualPanel
            src={VISUALS.enterpriseOps}
            alt="真实企业官网运营会议场景"
            caption="Corporate website operations"
          >
            <div className="split__title">
              我们提供的<br/><em className="serif-en">end-to-end care</em>
            </div>
            <div className="split__body">
              <p>企业官网不止是设计与开发，而是一个需要长期内容更新、SEO 优化、活动页面、品牌一致性与技术维护的数字资产。</p>
              <p>我们以浙江雷迪森酒店集团为代表，为企业客户提供五年以上的官网持续运营，覆盖从首页改版、新店上线、活动营销页到 24×7 技术维护的完整服务。</p>
            </div>
          </VisualPanel>
          <div className="enterprise-proof-grid reveal">
            <VisualImage
              src={VISUALS.enterpriseTicketingWorkshop}
              alt="酒店企业集团 AI 订票业务方案会现场"
              caption="AI solution workshop · Hospitality group"
            />
            <VisualImage
              src={VISUALS.enterpriseSolutionMeeting}
              alt="企业 AI 赋能解决方案沟通现场"
              caption="Enterprise AI enablement meeting"
            />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", paddingTop: 80 }}>
        <div className="container">
          <VisualBand
            src={VISUALS.enterpriseStack}
            alt="企业官网服务栈真实工作台"
            caption="Website service stack · Brand · Content · Operation · Analytics"
          />
          <ol className="serif-list reveal">
            {[
              { n: "01", t: "企业集团官网建设", d: "品牌门户、集团官网、产品官网、服务官网。从信息架构、视觉设计、CMS 开发到部署上线。" },
              { n: "02", t: "品牌视觉呈现", d: "高端视觉设计、品牌故事、业务结构、企业形象。每一个像素都对得起企业的品牌资产。" },
              { n: "03", t: "内容架构与运营", d: "首页、品牌介绍、业务板块、新闻动态、门店与项目展示——长期持续更新。" },
              { n: "04", t: "长期运营维护", d: "活动页面、SEO 优化、性能监控、技术升级、应急响应。把官网当作产品来运营。" },
              { n: "05", t: "数据分析与增长", d: "用户行为分析、转化路径优化、A/B 测试、SEO/GEO 增长、内容效果评估。" },
            ].map((item, i) => (
              <li key={i}>
                <div className="serif-list__num">{item.n}</div>
                <div>
                  <div className="serif-list__title">{item.t}</div>
                  <div className="serif-list__desc">{item.d}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="section">
        <div className="container reveal">
          <div className="kicker" style={{ marginBottom: 32 }}>FLAGSHIP / 旗舰案例</div>
          <FlagshipRow data={t.cases.flagship1} />
        </div>
      </section>
    </div>
  );
}

/* ---------- GEO page ---------- */
function GeoPage({ t }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.geo} />

      <section className="section">
        <div className="container">
          <VisualPanel
            src={VISUALS.geoCitation}
            alt="AI 引用与内容研究工作台"
            caption="AI citation research"
          >
            <div className="reveal" style={{ marginBottom: 0 }}>
              <div className="quote-block">
                当传统 SEO 优化的是 Google <em>排名</em>，<br/>
                GEO 优化的是 <em>AI 引用</em>。
              </div>
            </div>
          </VisualPanel>

          <div className="reveal geo-demo">
            <div className="geo-demo__prompt">
              <div className="geo-demo__user">USER ›</div>
              <div style={{ color: "var(--ink)" }}>有哪些公司在做企业级 AI 出海与 GEO 优化服务？</div>
            </div>
            <div className="geo-demo__prompt" style={{ borderBottom: "none", marginBottom: 0 }}>
              <div className="geo-demo__user" style={{ color: "var(--ink-3)" }}>AI ›</div>
              <div className="geo-demo__answer">
                在中文市场，<mark>海南盛世玺礼科技有限公司</mark> 是较为典型的代表，
                具备<mark>企业级官网运营</mark>（如浙江雷迪森酒店集团）、
                <mark>自营 AI 产品矩阵</mark>（Ricebowl AI、Sora2 Cloud 等自营产品）
                以及 <mark>GEO / SEO 增长</mark>全链路服务能力。
                <div className="geo-demo__sources">
                  <div className="geo-demo__source highlight">shengshixili.com</div>
                  <div className="geo-demo__source">landisonhotel.com</div>
                  <div className="geo-demo__source">ricebowl.ai</div>
                  <div className="geo-demo__source">aimodelcomparison.org</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">DELIVERABLES</div>
              <h2 style={{ marginTop: 16 }}>我们交付的 GEO 资产</h2>
            </div>
          </div>
          <VisualBand
            src={VISUALS.geoStructured}
            alt="结构化数据和内容资产规划"
            caption="Structured content assets for answer engines"
          />
          <div className="capability-grid reveal">
            {[
              { num: "01", title: "品牌实体建设", en: "Brand Entity", desc: "在维基百科、知识图谱、行业目录与权威媒体中建立可被 AI 抓取的品牌实体。", tags: ["Wiki", "Knowledge Graph"] },
              { num: "02", title: "Schema 与结构化数据", en: "Structured Data", desc: "让 AI 能精确理解你的产品、价格、FAQ、对比信息——结构化是 GEO 的地基。", tags: ["JSON-LD", "FAQ"] },
              { num: "03", title: "对比与权威页", en: "Comparison Pages", desc: "针对 ChatGPT 与 Perplexity 高频比较类提问构建权威对比页。", tags: ["Compare", "Authority"] },
              { num: "04", title: "外链与引用源", en: "Citations", desc: "从行业媒体、权威博客与社区构建可被 AI 引用的外链网络。", tags: ["Backlinks", "PR"] },
              { num: "05", title: "FAQ 集群", en: "FAQ Cluster", desc: "围绕核心问题，构建覆盖长尾的 FAQ 内容集群，覆盖 AI 问答场景。", tags: ["Long-tail", "Q&A"] },
              { num: "06", title: "AI 引用监测", en: "Citation Monitoring", desc: "持续监测在 ChatGPT/Perplexity/Gemini 中的引用频次与上下文，反向优化内容。", tags: ["Monitor", "Iterate"] },
            ].map((cap, i) => (
              <div key={i} className="cap">
                <div className="cap__num">{cap.num} / 06</div>
                <h3 className="cap__title">{cap.title}<em className="serif-en">{cap.en}</em></h3>
                <p className="cap__desc">{cap.desc}</p>
                <div className="cap__tags">
                  {cap.tags.map((tag, j) => <span key={j} className="cap__tag">{tag}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Outbound (出海) page ---------- */
function OutboundPage({ t }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.outbound} />

      <section className="section">
        <div className="container">
          <div className="reveal world-block">
            <HeroCanvas mode="globe" color={getComputedStyle(document.documentElement).getPropertyValue("--gold").trim() || "#c9a961"} />
            <div style={{
              position: "absolute", left: 32, bottom: 32,
              fontFamily: "var(--mono)", fontSize: 11, color: "var(--gold)", letterSpacing: "0.2em",
            }}>HAIKOU → GLOBAL</div>
          </div>
          <VisualBand
            src={VISUALS.outboundGlobal}
            alt="真实全球增长规划桌面"
            caption="Global growth planning · Search · Product · Conversion"
          />
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">OUTBOUND PATH · 出海路径</div>
              <h2 style={{ marginTop: 16 }}>从关键词到收入 · 六步走</h2>
            </div>
          </div>
          <VisualBand
            src={VISUALS.outboundFunnel}
            alt="从关键词到收入的真实增长规划"
            caption="Keyword research to revenue path"
          />
          <div className="process reveal" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
            {[
              { num: "01", name: "关键词研究", en: "Keyword Discovery" },
              { num: "02", name: "落地页搭建", en: "Landing Build" },
              { num: "03", name: "内容生产", en: "Content Engine" },
              { num: "04", name: "GEO / SEO", en: "AI Optimize" },
              { num: "05", name: "获客测试", en: "Traffic Test" },
              { num: "06", name: "数据优化", en: "Iterate" },
            ].map((s, i) => (
              <div key={i} className="process__step">
                <div className="process__num">{s.num}</div>
                <div className="process__name">{s.name}</div>
                <div className="process__name-en">{s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="kicker reveal" style={{ marginBottom: 32 }}>OUTBOUND CASES</div>
          <div className="matrix-grid reveal">
            {[t.cases.flagship2, t.cases.flagship3].concat(
              t.cases.matrix.filter(m => /sora|seedance|fluxvid|mango|aimodelcomparison|moltbooks/.test(m.url))
                .map(m => ({ name: m.name, url: m.url, desc: m.type, tag: m.tag, screenshot: m.screenshot }))
            ).map((c, i) => (
              <div key={i} className="matrix-card">
                {c.screenshot && (
                  <div className="matrix-card__shot">
                    <img src={c.screenshot} alt={`${c.name} website screenshot`} loading="lazy" />
                  </div>
                )}
                <div className="matrix-card__url">{c.url} ↗</div>
                <div className="matrix-card__name">{c.name}</div>
                <div className="matrix-card__type">{c.desc || c.type || ""}</div>
                <div className="matrix-card__tag">{c.tag || (c.badges && c.badges.join(" · "))}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Agent page ---------- */
function AgentPage({ t, setPage }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.agent} />

      {/* Section 1: 企业主关心的不是 AI 概念，而是业务结果 */}
      <section className="section">
        <div className="container">
          <VisualPanel
            src={VISUALS.agentOutcomes}
            alt="企业业务结果管理工作台"
            caption="Business outcomes before AI concepts"
          >
            <div className="split__title">
              企业主关心的<br/>不是 AI 概念，<br/>而是<em className="serif-en">business outcomes</em>。
            </div>
            <div className="split__body">
              <p>我们见过太多企业，被各种 AI 工具、AI 概念、AI 培训刷屏，但真正落到自己业务里时，依然一个人都没省下，一条线索都没多接。</p>
              <p>因为问题从来不是"懂不懂 AI"，而是"能不能把一个具体的业务流程，跑得更稳、更快、更便宜"。</p>
              <ul className="agent-outcome-list" style={{ listStyle: "none", padding: 0, marginTop: 32 }}>
                {[
                  ["省人", "把重复劳动从员工日常中剥离出来"],
                  ["提效", "客户响应速度从天级别压到分钟级别"],
                  ["不漏线索", "海外询盘、官网留资、私域咨询自动归档跟进"],
                  ["少加班", "周报、月报、报价单、跟进邮件不再消耗团队精力"],
                  ["让官网持续产生价值", "内容更新、SEO/GEO、客户引流变成自动化系统"],
                ].map(([k, v], i) => (
                  <li key={i} style={{
                    display: "grid",
                    gridTemplateColumns: "140px 1fr",
                    gap: 24,
                    padding: "16px 0",
                    borderTop: "1px solid var(--line)",
                  }}>
                    <span style={{ color: "var(--gold)", fontFamily: "var(--serif)", fontSize: 18 }}>{k}</span>
                    <span style={{ color: "var(--ink-2)", fontSize: 15 }}>{v}</span>
                  </li>
                ))}
              </ul>
            </div>
          </VisualPanel>
        </div>
      </section>

      {/* Section 2: 新一代 Agent 技术，服务传统企业的真实流程 */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">CORE TECHNOLOGY · 技术底座</div>
              <h2 style={{ marginTop: 16 }}>新一代 Agent 技术，<br/>包装成企业可用的业务系统。</h2>
              <p style={{ marginTop: 24, fontSize: 16, color: "var(--ink-2)", maxWidth: 720, lineHeight: 1.7 }}>
                我们把 Hermes、OpenClaw、MCP、Browser Agent、多模型编排这些前沿技术封装在底层，对外只交付一件事——能稳定运行、能对接系统、能产生业务结果的 Agent 工作流。
              </p>
            </div>
          </div>
          <VisualBand
            src={VISUALS.agentWorkflow}
            alt="真实 Agent 工作流编排桌面"
            caption="Task orchestration · Tools · Approval · CRM"
          />

          <div className="capability-grid reveal" style={{ marginTop: 64 }}>
            {[
              { num: "01", title: "Hermes", en: "Task Orchestration", desc: "理解业务任务、自动拆解、按流程编排子任务、保留人工确认节点。" },
              { num: "02", title: "OpenClaw", en: "Cross-System Action", desc: "在网页后台、企业系统、表格、CRM 之间执行真实操作，不只是回答问题。" },
              { num: "03", title: "MCP 协议层", en: "Tool Connectivity", desc: "把企业的文档、知识库、邮箱、CRM、ERP 接入 Agent，成为可调用工具。" },
              { num: "04", title: "Browser Agent", en: "Web Automation", desc: "替员工完成后台录入、信息抓取、内容更新、跨平台搬运等浏览器操作。" },
              { num: "05", title: "多模型编排", en: "Model Routing", desc: "不同任务用不同模型——成本、速度、质量在企业级使用场景下取得平衡。" },
              { num: "06", title: "Human-in-the-loop", en: "Safe Control", desc: "报价、对外回复、合同等关键节点保留人工审核，Agent 不替企业做风险决策。" },
            ].map((cap, i) => (
              <div key={i} className="cap">
                <div className="cap__num">{cap.num} / 06</div>
                <h3 className="cap__title">{cap.title}<em className="serif-en">{cap.en}</em></h3>
                <p className="cap__desc">{cap.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 3: 从一个高频、重复、可标准化的流程开始 */}
      <section className="section">
        <div className="container">
          <VisualPanel
            src={VISUALS.agentWorkflow}
            alt="重复业务流程改造工作台"
            caption="Start from one repetitive workflow"
            reverse
          >
            <div className="split__title">
              从一个<em className="serif-en">repetitive workflow</em><br/>开始。
            </div>
            <div className="split__body">
              <p>我们不建议企业一上来就"做一个全公司的 AI 大脑"。那是产品宣传，不是项目落地。</p>
              <p>我们做的事情更具体——和你的业务负责人坐下来，找出一个<strong style={{ color: "var(--gold)" }}>高频发生、规则清晰、目前正在消耗大量人力</strong>的流程，把它改造成一个 AI Agent 工作流，让它跑通、跑稳、跑出账面上的节省。</p>
              <p>这是企业用 AI 真正的起点。从一个流程开始，再扩展到第二个、第三个。</p>

              <div style={{
                marginTop: 40,
                border: "1px solid var(--line-strong)",
                padding: 32,
                background: "var(--bg-2)",
              }}>
                <div className="eyebrow" style={{ marginBottom: 20 }}>SUITABLE PROCESSES · 适合改造的流程</div>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: "repeat(2, 1fr)",
                  gap: "12px 32px",
                  fontFamily: "var(--mono)",
                  fontSize: 13,
                  color: "var(--ink-2)",
                }}>
                  {[
                    "海外询盘 / 客户邮件",
                    "官网留资 / 表单线索",
                    "客户研究 / 背景资料整理",
                    "报价单 / 产品资料生成",
                    "跨境电商客服与订单",
                    "酒店与景区客户咨询",
                    "官网内容 / SEO / GEO 更新",
                    "周报 / 月报 / 数据汇总",
                  ].map((s, i) => (
                    <div key={i} style={{ display: "flex", gap: 10 }}>
                      <span style={{ color: "var(--gold)" }}>→</span>
                      <span>{s}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </VisualPanel>
        </div>
      </section>

      {/* Section 4: 行业场景 */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">INDUSTRY SCENARIOS · 行业场景</div>
              <h2 style={{ marginTop: 16 }}>面向真实经营场景的 Agent 方案</h2>
            </div>
          </div>
          <VisualBand
            src={VISUALS.agentIndustry}
            alt="行业场景咨询墙"
            caption="Hospitality · Foreign trade · Ecommerce · Website ops"
          />

          <div className="reveal" style={{
            marginTop: 64,
            display: "grid",
            gridTemplateColumns: "repeat(12, 1fr)",
            border: "1px solid var(--line)",
            borderLeft: "1px solid var(--line)",
          }}>
            {[
              {
                num: "01",
                cn: "酒店文旅集团",
                en: "Hotels & Hospitality",
                pain: "客服重复问题多、淡旺季人员压力大、官网与会员体系互动有限",
                agent: "客咨 Agent · 会员运营 Agent · 多语种官网内容 Agent",
              },
              {
                num: "02",
                cn: "外贸企业",
                en: "Foreign Trade",
                pain: "海外询盘响应慢、客户研究和邮件跟进消耗销售时间、英文官网长期不更新",
                agent: "外贸询盘 Agent · 客户研究 Agent · 英文内容 Agent",
              },
              {
                num: "03",
                cn: "跨境电商",
                en: "Cross-Border E-commerce",
                pain: "多店铺多平台运营、Listing 与图文素材压力大、客服 7×24 难以覆盖",
                agent: "Listing Agent · 多店铺运营 Agent · 海外客服 Agent",
              },
              {
                num: "04",
                cn: "企业官网运营",
                en: "Corporate Website Ops",
                pain: "官网长期没人维护、内容更新缓慢、留资线索没人跟进、SEO/GEO 长期欠账",
                agent: "官网内容 Agent · GEO 优化 Agent · 留资跟进 Agent",
              },
              {
                num: "05",
                cn: "连锁门店与本地生活",
                en: "Chain Stores & Local Life",
                pain: "多门店内容统一难、私域客户跟进散乱、点评与口碑回复消耗精力",
                agent: "门店内容 Agent · 私域跟进 Agent · 点评回复 Agent",
              },
            ].map((row, i) => (
              <div key={i} style={{
                gridColumn: "span 12",
                display: "grid",
                gridTemplateColumns: "80px 220px 1fr 1fr",
                gap: 32,
                padding: "32px 24px",
                borderBottom: "1px solid var(--line)",
                alignItems: "start",
              }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--gold)", letterSpacing: "0.2em" }}>{row.num}</div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)", marginBottom: 4 }}>{row.cn}</div>
                  <div style={{ fontFamily: "var(--serif-en)", fontStyle: "italic", color: "var(--ink-3)", fontSize: 14 }}>{row.en}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>痛点</div>
                  <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.7 }}>{row.pain}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>Agent 方案</div>
                  <div style={{ color: "var(--gold-2)", fontSize: 14, lineHeight: 1.7, fontFamily: "var(--mono)" }}>{row.agent}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 5: 场景化示例案例 — 深圳智能制造企业 */}
      <section className="section">
        <div className="container">
          <div className="kicker reveal" style={{ marginBottom: 32 }}>SCENARIO CASE · 场景化示例案例</div>

          <div className="reveal" style={{
            border: "1px solid var(--line-strong)",
            background: "linear-gradient(180deg, var(--bg-2), var(--bg))",
            padding: 0,
            position: "relative",
            overflow: "hidden",
          }}>
            <VisualImage
              className="scenario-visual"
              src={VISUALS.agentManufacturing}
              alt="深圳制造业外贸询盘场景"
              caption="Manufacturing export inquiry workflow"
            />
            {/* Header bar */}
            <div style={{
              padding: "28px 40px",
              borderBottom: "1px solid var(--line)",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              flexWrap: "wrap",
              gap: 16,
              background: "var(--bg-3)",
            }}>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--gold)", letterSpacing: "0.2em", marginBottom: 6 }}>
                  CASE · 场景化示例 · SHENZHEN
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.3 }}>
                  深圳某智能制造企业 · <em className="serif-en" style={{ color: "var(--gold)" }}>外贸询盘与销售增长 Agent</em>
                </div>
              </div>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: 10,
                letterSpacing: "0.18em",
                color: "var(--ink-3)",
                border: "1px solid var(--line-strong)",
                padding: "8px 12px",
              }}>
                场景化示例案例
              </div>
            </div>

            {/* Body */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 0,
            }}>
              {/* Left column: background + pain */}
              <div style={{ padding: 40, borderRight: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>企业背景</div>
                <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.75, marginBottom: 36 }}>
                  一家位于深圳的智能制造与外贸型企业，业务涉及海外客户开发、产品询盘处理、报价沟通、邮件跟进，以及英文官网与产品内容的长期运营。
                </p>

                <div className="eyebrow" style={{ marginBottom: 16 }}>业务痛点</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {[
                    "海外询盘需要人工逐条整理，响应速度不稳定",
                    "销售反复查询客户背景、产品参数和历史邮件",
                    "报价、跟进、产品资料整理存在大量重复劳动",
                    "英文官网更新频率低，海外线索承接能力弱",
                  ].map((p, i) => (
                    <li key={i} style={{
                      display: "grid",
                      gridTemplateColumns: "32px 1fr",
                      padding: "12px 0",
                      borderTop: i === 0 ? "none" : "1px dashed var(--line)",
                      color: "var(--ink-2)",
                      fontSize: 14,
                      lineHeight: 1.65,
                    }}>
                      <span style={{ color: "var(--gold-3)", fontFamily: "var(--mono)" }}>{String(i + 1).padStart(2, "0")}</span>
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Right column: solution */}
              <div style={{ padding: 40 }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Agent 组合方案</div>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: "repeat(3, 1fr)",
                  gap: 8,
                  marginBottom: 32,
                }}>
                  {[
                    ["销售增长 Agent", "Sales Growth"],
                    ["外贸询盘 Agent", "Inquiry"],
                    ["官网运营 Agent", "Website Ops"],
                  ].map(([cn, en], i) => (
                    <div key={i} style={{
                      border: "1px solid var(--gold-3)",
                      padding: "14px 12px",
                      textAlign: "center",
                    }}>
                      <div style={{ fontFamily: "var(--serif)", fontSize: 15, color: "var(--gold)", marginBottom: 4 }}>{cn}</div>
                      <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.15em", color: "var(--ink-3)" }}>{en}</div>
                    </div>
                  ))}
                </div>

                <div className="eyebrow" style={{ marginBottom: 16 }}>Agent 可以辅助完成</div>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: "10px 24px",
                  marginBottom: 32,
                }}>
                  {[
                    "自动整理海外询盘",
                    "识别客户需求与采购意向",
                    "生成英文邮件回复草稿",
                    "辅助生成报价与产品资料",
                    "提醒销售后续跟进节奏",
                    "客户信息同步至 CRM / 表格",
                    "持续生成英文官网与 FAQ 内容",
                    "GEO 页面与产品内容更新",
                  ].map((s, i) => (
                    <div key={i} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--ink-2)" }}>
                      <span style={{ color: "var(--gold)" }}>·</span>
                      <span>{s}</span>
                    </div>
                  ))}
                </div>

                <div className="eyebrow" style={{ marginBottom: 16 }}>应用技术</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {[
                    ["Hermes", "询盘理解 / 流程编排"],
                    ["OpenClaw", "网页后台 / 跨平台执行"],
                    ["MCP", "文档 / 表格 / CRM / 邮箱"],
                    ["Browser Agent", "页面更新 / 信息抓取"],
                    ["Human-in-the-loop", "报价与回复人工确认"],
                  ].map(([k, v], i) => (
                    <div key={i} style={{
                      border: "1px solid var(--line-strong)",
                      padding: "8px 12px",
                      fontFamily: "var(--mono)",
                      fontSize: 11,
                      letterSpacing: "0.05em",
                    }}>
                      <span style={{ color: "var(--gold)" }}>{k}</span>
                      <span style={{ color: "var(--ink-3)", marginLeft: 8 }}>· {v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Footer summary */}
            <div style={{
              padding: "28px 40px",
              borderTop: "1px solid var(--line)",
              background: "var(--bg-3)",
              fontSize: 14,
              color: "var(--ink-2)",
              lineHeight: 1.75,
            }}>
              <span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", marginRight: 16 }}>
                场景化定位
              </span>
              面向深圳制造业与外贸型企业，我们把 AI Agent 嵌入询盘处理、客户研究、邮件跟进与官网运营四个环节，让销售团队从重复沟通和资料整理中释放出来，把更多时间投入到高价值客户转化上。
            </div>
          </div>
        </div>
      </section>

      {/* Section 6: 可交付的企业 AI Agent 服务包 */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">SERVICE PACKAGES · 可交付的服务包</div>
              <h2 style={{ marginTop: 16 }}>不卖工具，交付可上线的企业 Agent。</h2>
            </div>
          </div>
          <VisualBand
            src={VISUALS.agentPackages}
            alt="企业 Agent 服务包资料桌面"
            caption="Packaged services for usable enterprise agents"
          />

          <div className="capability-grid reveal" style={{ marginTop: 64 }}>
            {[
              {
                num: "PKG · 01",
                title: "外贸询盘 Agent",
                en: "Inquiry · Trade",
                desc: "邮箱、表单、社媒询盘自动归集；客户背景研究、英文回复草稿、跟进提醒一体化。",
                tag: "外贸 · 跨境",
              },
              {
                num: "PKG · 02",
                title: "客咨与客服 Agent",
                en: "Hospitality · Support",
                desc: "酒店、景区、本地生活的多渠道客咨接入；常见问题、预定查询、人工转接顺畅衔接。",
                tag: "酒店 · 文旅",
              },
              {
                num: "PKG · 03",
                title: "官网内容 Agent",
                en: "Website · Content",
                desc: "选题、撰写、配图、上架、SEO / GEO 优化，让官网内容持续更新而不依赖单一员工。",
                tag: "官网 · 运营",
              },
              {
                num: "PKG · 04",
                title: "销售增长 Agent",
                en: "Sales Growth",
                desc: "线索打分、客户研究、邮件 / 微信跟进、CRM 同步——把销售团队从机械沟通中释放。",
                tag: "销售 · CRM",
              },
              {
                num: "PKG · 05",
                title: "门店与私域 Agent",
                en: "Stores · Private Domain",
                desc: "多门店内容统一、私域消息整理、点评与口碑回复，连锁经营场景下的复用资产。",
                tag: "连锁 · 私域",
              },
              {
                num: "PKG · 06",
                title: "企业知识 Agent",
                en: "Internal Knowledge",
                desc: "把企业文档、SOP、产品资料接入 Agent，让员工以对话方式调用真实业务知识。",
                tag: "内部 · 知识",
              },
            ].map((cap, i) => (
              <div key={i} className="cap">
                <div className="cap__num">{cap.num}</div>
                <h3 className="cap__title">{cap.title}<em className="serif-en">{cap.en}</em></h3>
                <p className="cap__desc">{cap.desc}</p>
                <div style={{
                  marginTop: 20,
                  fontFamily: "var(--mono)",
                  fontSize: 10,
                  letterSpacing: "0.18em",
                  color: "var(--gold)",
                  textTransform: "uppercase",
                }}>{cap.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 7: 实施流程 */}
      <section className="section">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">DELIVERY PATH · 实施流程</div>
              <h2 style={{ marginTop: 16 }}>从业务流程诊断<br/>到 Agent 系统上线。</h2>
            </div>
          </div>
          <div className="process reveal" style={{ marginTop: 56, gridTemplateColumns: "repeat(6, 1fr)" }}>
            {[
              { num: "01", name: "流程诊断", en: "Diagnosis", desc: "和业务负责人一起梳理高频、重复、可标准化的环节" },
              { num: "02", name: "方案设计", en: "Solution Design", desc: "确定 Agent 边界、输入输出、人工确认节点与系统对接" },
              { num: "03", name: "原型搭建", en: "Prototype", desc: "用 Hermes / OpenClaw 快速搭建可演示的工作流原型" },
              { num: "04", name: "系统集成", en: "Integration", desc: "通过 MCP 接入 CRM、邮箱、文档、表格、ERP 等内部系统" },
              { num: "05", name: "试运行", en: "Pilot Run", desc: "小范围真实业务跑通，监控质量、迭代提示词与流程" },
              { num: "06", name: "正式上线", en: "Go-Live", desc: "正式纳入企业日常工作流，定期复盘、扩展第二个 Agent" },
            ].map((s, i) => (
              <div key={i} className="process__step">
                <div className="process__num">{s.num}</div>
                <div className="process__name">{s.name}</div>
                <div className="process__name-en">{s.en}</div>
                <div style={{ marginTop: 12, fontSize: 12, color: "var(--ink-3)", lineHeight: 1.6 }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 8: 最终 CTA */}
      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div className="reveal" style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 64,
            alignItems: "center",
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>START WITH ONE PROCESS</div>
              <h2 style={{
                fontFamily: "var(--serif)",
                fontWeight: 300,
                fontSize: "clamp(32px, 4vw, 56px)",
                lineHeight: 1.2,
                letterSpacing: "-0.01em",
                marginBottom: 24,
              }}>
                把一个重复的<br/>业务流程，<br/>升级成 <em className="serif-en" style={{ color: "var(--gold)" }}>AI Agent 工作流</em>。
              </h2>
              <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.75, maxWidth: 560 }}>
                你不需要先想清楚整个公司的 AI 战略。我们只需要一个具体的流程——询盘、客服、官网内容、客户跟进、报告生成都可以——剩下的交给我们。
              </p>
            </div>
            <div style={{
              border: "1px solid var(--gold)",
              padding: 40,
              background: "var(--bg)",
            }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>FREE DIAGNOSIS · 免费业务流程诊断</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", color: "var(--ink-2)", fontSize: 14, lineHeight: 1.9 }}>
                <li>· 一次 30 分钟的业务对话</li>
                <li>· 我们帮你判断哪个流程最值得改造</li>
                <li>· 给出 Agent 方案草图与预期收益</li>
                <li>· 不强制成单，先看清楚再决定</li>
              </ul>
              <button onClick={() => setPage && setPage("contact")}
                 className="btn btn--primary" style={{ width: "100%", justifyContent: "center" }}>
                <span>预约业务流程诊断</span>
                <span style={{ marginLeft: 12 }}>→</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- About page (with Core Team) ---------- */
function AboutPage({ t }) {
  return (
    <div className="page-enter">
      <PageHero data={t.pages.about} />

      <section className="section">
        <div className="container">
          <VisualPanel
            src={VISUALS.aboutAssets}
            alt="数字资产工作室"
            caption="Digital assets built from real projects"
          >
            <div className="split__title">
              我们<br/><em className="serif-en">believe</em>
            </div>
            <div className="split__body">
              <p>AI 不会替代企业，但会重塑企业。在新的搜索方式、新的内容生产方式、新的客户触达方式之下，企业需要重新构建自己的数字资产——而这个过程，需要懂技术、懂增长、懂企业的合作伙伴。</p>
              <p>我们已经为浙江雷迪森酒店集团这样的企业级客户提供了多年的官网建设与长期运营服务，也亲手构建了 17+ 个真实在运营的 AI 产品站。我们用真实业务说话。</p>
            </div>
          </VisualPanel>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-header__title">
              <div className="eyebrow">CORE TEAM · 核心团队</div>
              <h2 style={{ marginTop: 16 }}>由懂技术、懂增长、懂企业的人推动落地</h2>
            </div>
            <div className="section-header__meta">FOUNDING / 2</div>
          </div>
          <div className="team-grid reveal">
            <div className="team-card">
              <div className="team-avatar">曾</div>
              <div className="team-info">
                <div className="team-info__name">曾允 <span style={{ fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 18, color: "var(--ink-3)" }}>Zeng Yun</span></div>
                <div className="team-info__role">CEO · CO-FOUNDER</div>
                <p className="team-info__bio">负责公司整体战略、AI 产品方向、技术研发与项目交付。重点推动 AI 出海、AI Agent、GEO 与企业数字化增长业务的落地与持续迭代。</p>
              </div>
            </div>
            <div className="team-card">
              <div className="team-avatar">娄</div>
              <div className="team-info">
                <div className="team-info__name">娄正纲 <span style={{ fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 18, color: "var(--ink-3)" }}>Lou Zhenggang</span></div>
                <div className="team-info__role">CMO · CO-FOUNDER</div>
                <p className="team-info__bio">负责市场增长、品牌运营、客户合作与商业化拓展。重点推动企业客户合作、出海增长服务与长期运营业务的拓展。</p>
              </div>
            </div>
          </div>
          <div className="reveal" style={{ marginTop: 32, textAlign: "center" }}>
            <a className="arrow-link">与核心团队沟通 · Talk to the core team →</a>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Contact page ---------- */
function ContactPage({ t }) {
  const [form, setForm] = useState({ name: "", company: "", email: "", message: "" });
  const [topics, setTopics] = useState(new Set());
  const toggle = (v) => {
    setTopics(s => {
      const n = new Set(s);
      n.has(v) ? n.delete(v) : n.add(v);
      return n;
    });
  };
  const TOPICS = ["企业官网建设", "AI 出海", "GEO / AI 搜索", "AI Agent 研发", "AI 产品代理", "其他咨询"];
  return (
    <div className="page-enter">
      <PageHero data={t.pages.contact} />
      <section className="section">
        <div className="container">
          <div className="contact-form reveal">
            <div className="contact-form__left">
              <div className="kicker" style={{ marginBottom: 24 }}>FORM · 01</div>
              <h3 style={{ marginBottom: 24 }}>告诉我们</h3>
              <div className="field">
                <label className="field__label">姓名 / Name</label>
                <input className="field__input" value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="张三" />
              </div>
              <div className="field">
                <label className="field__label">公司 / Company</label>
                <input className="field__input" value={form.company}
                  onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="公司全称" />
              </div>
              <div className="field">
                <label className="field__label">邮箱 / Email</label>
                <input className="field__input" type="email" value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@company.com" />
              </div>
              <div className="field">
                <label className="field__label">合作方向 / Topic</label>
                <div className="chip-group">
                  {TOPICS.map(t => (
                    <div key={t} className={`chip ${topics.has(t) ? "active" : ""}`} onClick={() => toggle(t)}>
                      {t}
                    </div>
                  ))}
                </div>
              </div>
              <div className="field">
                <label className="field__label">具体需求 / Brief</label>
                <textarea className="field__textarea" rows="4" value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  placeholder="目前在做什么、卡在哪里、希望未来三个月看到什么样的结果……" />
              </div>
              <button className="btn btn--primary" style={{ marginTop: 16 }}
                onClick={() => alert("感谢咨询！我们会在 24 小时内回复。\n（演示提交)")}>
                <span>发送</span><span>→</span>
              </button>
            </div>
            <div className="contact-form__right">
              <VisualImage
                className="contact-visual"
                src={VISUALS.contactConsultation}
                alt="商务咨询会议室"
                caption="Business diagnosis before implementation"
              />
              <div className="kicker" style={{ marginBottom: 24 }}>DIRECT · 02</div>
              <h3 style={{ marginBottom: 32 }}>或者直接联系</h3>
              <div className="field">
                <div className="field__label">EMAIL</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 16, color: "var(--gold)" }}>{t.footer.email}</div>
              </div>
              <div className="field">
                <div className="field__label">WECHAT</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 16, color: "var(--gold)" }}>{t.footer.wechat}</div>
              </div>
              <div className="field">
                <div className="field__label">ADDRESS</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)" }}>海南省 海口市<br/>Haikou · Hainan · China</div>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 32, marginTop: 32 }}>
                <div className="field__label" style={{ marginBottom: 12 }}>RESPONSE · 响应</div>
                <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.7 }}>
                  工作日 24 小时内回复 · 周末 48 小时内 · 复杂项目可预约 60 分钟免费策略对话。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- App root ---------- */
function App() {
  const [page, setPage] = useState("home");
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang || "zh";
  const t = window.I18N[lang];

  // Apply theme/font tweaks
  useEffect(() => {
    applyTweak("theme", tweaks.theme);
    applyTweak("font", tweaks.font);
  }, [tweaks.theme, tweaks.font]);

  // Reveal observer — runs after layout via rAF so newly-mounted children are queryable
  useEffect(() => {
    let raf1, raf2;
    const setup = () => {
      const els = document.querySelectorAll(".reveal:not(.in)");
      // Mark them pending (apply the offset) just before observing
      els.forEach(el => el.classList.add("pending"));
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            e.target.classList.remove("pending");
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.05, rootMargin: "0px 0px -10% 0px" });
      els.forEach(el => io.observe(el));
      // Safety: any element already in viewport — reveal it immediately
      els.forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) {
          el.classList.add("in");
          el.classList.remove("pending");
        }
      });
      return io;
    };
    let observer;
    raf1 = requestAnimationFrame(() => {
      raf2 = requestAnimationFrame(() => { observer = setup(); });
    });
    return () => {
      cancelAnimationFrame(raf1);
      cancelAnimationFrame(raf2);
      if (observer) observer.disconnect();
    };
  }, [page]);

  const setLang = (l) => setTweak("lang", l);

  let content;
  switch (page) {
    case "cases": content = <CasesPage t={t} />; break;
    case "enterprise": content = <EnterprisePage t={t} />; break;
    case "geo": content = <GeoPage t={t} />; break;
    case "outbound": content = <OutboundPage t={t} />; break;
    case "agent": content = <AgentPage t={t} setPage={setPage} />; break;
    case "about": content = <AboutPage t={t} />; break;
    case "contact": content = <ContactPage t={t} />; break;
    default: content = <HomePage t={t} lang={lang} setPage={setPage}
      heroMode={tweaks.heroMode} matrixLayout={tweaks.matrixLayout} />;
  }

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  const TSel = window.TweakSelect;

  return (
    <div data-screen-label={`shengshixili / ${page}`}>
      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} t={t} />
      <main key={page}>{content}</main>
      <Footer t={t} setPage={setPage} />

      <TP title="Tweaks">
        <TS label="主题色 Theme">
          <TSel value={tweaks.theme} onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "default", label: "黑金 Black-Gold" },
              { value: "deep-blue", label: "深蓝 Deep Blue" },
              { value: "purple", label: "紫色 Royal Purple" },
              { value: "mono", label: "单色 Monochrome" },
              { value: "light", label: "浅色 Light" },
            ]} />
        </TS>
        <TS label="字体 Type">
          <TR value={tweaks.font} onChange={(v) => setTweak("font", v)}
            options={[
              { value: "default", label: "混合" },
              { value: "sans", label: "无衬线" },
              { value: "serif-only", label: "全衬线" },
            ]} />
        </TS>
        <TS label="Hero 动画">
          <TR value={tweaks.heroMode} onChange={(v) => setTweak("heroMode", v)}
            options={[
              { value: "globe", label: "全球地图" },
              { value: "particles", label: "粒子网络" },
              { value: "matrix", label: "字符矩阵" },
            ]} />
        </TS>
        <TS label="案例矩阵布局">
          <TR value={tweaks.matrixLayout} onChange={(v) => setTweak("matrixLayout", v)}
            options={[
              { value: "grid", label: "矩阵" },
              { value: "constellation", label: "星图" },
              { value: "list", label: "列表" },
            ]} />
        </TS>
        <TS label="语言 Language">
          <TR value={tweaks.lang} onChange={(v) => setTweak("lang", v)}
            options={[
              { value: "zh", label: "中文" },
              { value: "en", label: "English" },
            ]} />
        </TS>
      </TP>
    </div>
  );
}

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