import {
  ArrowRightOutlined,
  DashboardOutlined,
  FileSearchOutlined,
  PlayCircleOutlined,
  PlusOutlined,
  ShoppingOutlined,
  ThunderboltOutlined,
} from "@ant-design/icons";
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
import { useScrollEntrance } from "../../hooks/useScrollEntrance";
import WelcomeSplash from "./WelcomeSplash";
import ToolboxSection from "./ToolboxSection";
import ScriptReviewShowcase from "./ScriptReviewShowcase";
import ModelGenerationShowcase from "./ModelGenerationShowcase";

function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
  return (
    <section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
      {children}
    </section>
  );
}

const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
const heroImage2 = `${OSS_MUBAN}/hero-2.png`;
const heroImage3 = `${OSS_MUBAN}/hero-3.png`;
const featureEcommerceImage = `${OSS_MUBAN}/feature-ecommerce.jpg`;
const featureScriptImage = `${OSS_MUBAN}/feature-script.jpg`;
const featureTokenImage = `${OSS_MUBAN}/feature-token.jpg`;

interface HomePageProps {
  onOpenGenerate: () => void;
  onOpenCanvas?: () => void;
  onOpenEcommerce: () => void;
  onOpenScriptReview?: () => void;
  onOpenTokenMonitor?: () => void;
  onSelectView: (view: WebViewKey) => void;
  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
}

const HOME_BACKGROUND_VIDEO = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban/hero-bg.mp4";

const HOME_CAROUSEL_IMAGES = [
  { imageUrl: heroImage1, title: "灵感生成" },
  { imageUrl: heroImage2, title: "画布创作" },
  { imageUrl: heroImage3, title: "商业素材" },
];

const HOME_FEATURES = [
  {
    key: "model",
    eyebrow: "AI Generation",
    title: "模型生成",
    description: "通过AI模型生成文本、图片、视频，三种模式覆盖全内容类型，Agent对话式交互智能产出。",
    imageUrl: featureTokenImage,
    actionLabel: "开始生成",
    icon: <ThunderboltOutlined />,
    stats: ["文本生成", "图片生成", "视频生成"],
  },
  {
    key: "ecommerce",
    eyebrow: "AI Commerce",
    title: "AI 电商生成",
    description: "上传产品图后自动生成主图、场景图、详情素材和短视频方案，快速覆盖多平台商品视觉。",
    imageUrl: featureEcommerceImage,
    actionLabel: "开始生成",
    icon: <ShoppingOutlined />,
    stats: ["多场景", "多角度", "批量输出"],
  },
  {
    key: "script",
    eyebrow: "Script Review",
    title: "剧本智能测评",
    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
    imageUrl: featureScriptImage,
    actionLabel: "开始测评",
    icon: <FileSearchOutlined />,
    stats: ["六维评分", "质量量化", "逐项优化"],
  },
];

const HOME_EXPERIENCE_POINTS = [
  { label: "生成", meta: "图像 / 视频", tone: "green" },
  { label: "测评", meta: "剧本质量", tone: "cyan" },
  { label: "成本", meta: "Token 用量", tone: "violet" },
  { label: "电商", meta: "商品视觉", tone: "amber" },
];

const ECOMMERCE_MATRIX_FEATURES = [
  { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
  { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
  { icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
];

const ECOMMERCE_MATRIX_PROCESS = [
  { icon: "📤", label: "上传原图", subLabel: "Upload" },
  { icon: "🔍", label: "AI识别", subLabel: "Recognition" },
  { icon: "⚙️", label: "生成处理", subLabel: "Processing" },
  { icon: "📦", label: "矩阵产出", subLabel: "Output" },
];

const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"];

type EcommerceMatrixModelCard = {
  kind: "model";
  color: "brown" | "green" | "blue";
  tag: string;
  tagTone: string;
  resolution: string;
  square?: false;
};

type EcommerceMatrixSceneCard = {
  kind: "scene";
  color: "p1" | "p2" | "p3";
  tag: string;
  tagTone: string;
  resolution: string;
  square: true;
  variant?: "greenery" | "blue";
};

type EcommerceMatrixLayoutCard = {
  kind: "layout";
  color: "c1" | "c2" | "c3";
  tag: string;
  tagTone: string;
  resolution: string;
  square: true;
  badge: string;
  badgeTone?: "purple";
};

type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard;

const ECOMMERCE_MATRIX_OUTPUTS: Array<{
  title: string;
  subtitle: string;
  cards: EcommerceMatrixCard[];
}> = [
  {
    title: "3D 虚拟模特",
    subtitle: "Virtual Model",
    cards: [
      { kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
      { kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
      { kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
    ],
  },
  {
    title: "场景图",
    subtitle: "Scene Image",
    cards: [
      { kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true },
      { kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" },
      { kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" },
    ],
  },
  {
    title: "详情图",
    subtitle: "Detail Image",
    cards: [
      { kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" },
      { kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" },
      { kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" },
    ],
  },
];

const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
const HOME_CAROUSEL_TRANSITION_MS = 860;

type EcommerceFlowLine = {
  d: string;
  x: number;
  y: number;
};

interface HomeCarouselMotion {
  direction: number;
  progress: 0 | 1;
}

function getPositiveModulo(value: number, length: number) {
  return ((value % length) + length) % length;
}

function getHomeCarouselCardStyle(offset: number): CSSProperties {
  const depth = Math.abs(offset);
  const direction = Math.sign(offset);
  const isActive = depth === 0;
  const xByDepth = [0, 190, 320, 430, 520, 590];
  const yByDepth = [8, -2, -8, -13, -18, -24];
  const scaleByDepth = [1, 1, 1, 1, 1, 1];
  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
  const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
  const z = isActive ? 90 : 28 - depth;
  const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;

  return {
    "--apple-card-offset": offset,
    "--apple-card-depth": depth,
    "--apple-card-z": 80 - depth,
    "--apple-card-x": `${x}px`,
    "--apple-card-y": `${y}px`,
    "--apple-card-z-offset": `${z}px`,
    "--apple-card-rotate-y": "0deg",
    "--apple-card-rotate-z": "0deg",
    "--apple-card-scale": String(scale),
    "--apple-card-opacity": String(depth > 4 ? 0 : 1),
  } as CSSProperties;
}

function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
  if (card.kind === "model") {
    return (
      <div className="mock-model">
        <div className="silhouette" />
        <div className={`mock-product-hold ${card.color}`} />
      </div>
    );
  }

  if (card.kind === "scene") {
    return (
      <div className="mock-scene">
        {card.variant === "greenery" ? <div className="obj greenery" /> : <div className="obj decor-item is-soft-blue" />}
        <div className={`obj table-top${card.variant === "greenery" ? " is-warm" : ""}`} />
        <div className={`obj prod ${card.color}`} />
      </div>
    );
  }

  return (
    <div className="mock-layout">
      <div className="lay-img">
        <div className={`mini-cup ${card.color}`} />
      </div>
      <div className="lay-text">
        <div className={`lay-line title${card.color === "c2" ? " is-short" : card.color === "c3" ? " is-wide" : ""}`} />
        <div className={`lay-line sub${card.color === "c2" ? " is-medium" : ""}`} />
        <div className={`lay-line short${card.color === "c3" ? " is-medium" : ""}`} />
        <div className={`lay-badge${card.badgeTone === "purple" ? " purple" : ""}`}>{card.badge}</div>
      </div>
    </div>
  );
}

function EcommerceFeatureShowcase() {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const inputCardRef = useRef<HTMLDivElement | null>(null);
  const outputGroupRefs = useRef<Array<HTMLDivElement | null>>([]);
  const [flowLines, setFlowLines] = useState<EcommerceFlowLine[]>(() =>
    ECOMMERCE_MATRIX_OUTPUTS.map(() => ({ d: "", x: 0, y: 0 })),
  );

  useEffect(() => {
    let frameId: number | null = null;

    const updateFlowLines = () => {
      const root = rootRef.current;
      const inputCard = inputCardRef.current;
      if (!root || !inputCard) return;

      const rootRect = root.getBoundingClientRect();
      const inputRect = inputCard.getBoundingClientRect();
      const sx = inputRect.right - rootRect.left;
      const sy = inputRect.top - rootRect.top + inputRect.height / 2;
      const cornerRadius = 24;

      const nextLines = outputGroupRefs.current.slice(0, ECOMMERCE_MATRIX_OUTPUTS.length).map((group) => {
        if (!group) return { d: "", x: 0, y: 0 };

        const groupRect = group.getBoundingClientRect();
        const tx = groupRect.left - rootRect.left;
        const ty = groupRect.top - rootRect.top + groupRect.height / 2;
        const totalDistance = tx - sx;
        const splitX = sx + totalDistance * 0.3;
        const direction = ty > sy ? 1 : ty < sy ? -1 : 0;
        const verticalDistance = Math.abs(ty - sy);
        const resolvedRadius = Math.min(cornerRadius, verticalDistance / 2);

        const d =
          direction === 0
            ? `M ${sx} ${sy} L ${tx} ${ty}`
            : `M ${sx} ${sy} L ${splitX} ${sy} Q ${splitX + resolvedRadius} ${sy}, ${splitX + resolvedRadius} ${
                sy + direction * resolvedRadius
              } L ${splitX + resolvedRadius} ${ty - direction * resolvedRadius} Q ${splitX + resolvedRadius} ${ty}, ${
                splitX + resolvedRadius * 2
              } ${ty} L ${tx} ${ty}`;

        return { d, x: tx, y: ty };
      });

      setFlowLines(nextLines);
    };

    const scheduleUpdate = () => {
      if (frameId !== null) {
        window.cancelAnimationFrame(frameId);
      }
      frameId = window.requestAnimationFrame(updateFlowLines);
    };

    scheduleUpdate();
    window.addEventListener("resize", scheduleUpdate);

    const resizeObserver = new ResizeObserver(scheduleUpdate);
    if (rootRef.current) {
      resizeObserver.observe(rootRef.current);
    }

    return () => {
      if (frameId !== null) {
        window.cancelAnimationFrame(frameId);
      }
      window.removeEventListener("resize", scheduleUpdate);
      resizeObserver.disconnect();
    };
  }, []);

  return (
    <div ref={rootRef} className="omni-home-ecommerce-matrix">
      <div className="bg-base" />
      <div className="bg-grid" />
      <div className="bg-stars" />
      <div className="bg-vignette" />
      <div className="bg-noise" />

      <div className="page">
        <div className="left-panel">
          <h3 className="hero-title">
            一张原图
            <br />
            矩阵生产全场景图文
          </h3>

          <p className="hero-desc">
            从商品原图到3D虚拟模特、场景图、详情图
            <br />
            AI工作流自动化，批量生成，高效出图
          </p>

          <div className="features">
            {ECOMMERCE_MATRIX_FEATURES.map((item) => (
              <div key={item.title} className="feature-item">
                <div className="feature-icon">{item.icon}</div>
                <div className="feature-text">
                  <h4>{item.title}</h4>
                  <p>{item.description}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="process-flow">
            {ECOMMERCE_MATRIX_PROCESS.map((item, index) => (
              <Fragment key={item.label}>
                {index > 0 ? <span className="process-arrow">▸</span> : null}
                <div className="process-step">
                  <span className="step-icon">{item.icon}</span>
                  <span className="step-label">{item.label}</span>
                  <span className="step-sub">{item.subLabel}</span>
                </div>
              </Fragment>
            ))}
          </div>
        </div>

        <div className="center-panel">
          <div ref={inputCardRef} className="input-card">
            <div className="input-card-header">
              <span className="input-card-label">商品原图 Input</span>
              <span className="input-card-res">3000×3000</span>
            </div>
            <div className="input-card-img">
              <div className="product-placeholder">
                <div className="cup cup-1">
                  <div className="cup-lid" />
                  <div className="cup-straw" />
                  <div className="cup-tag">DRINK MORE</div>
                </div>
                <div className="cup cup-2">
                  <div className="cup-lid" />
                  <div className="cup-straw" />
                  <div className="cup-tag">DRINK MORE</div>
                </div>
                <div className="cup cup-3">
                  <div className="cup-lid" />
                  <div className="cup-straw" />
                  <div className="cup-tag">DRINK MORE</div>
                </div>
                <div className="books">
                  <div className="book" />
                  <div className="book" />
                  <div className="book" />
                  <div className="book" />
                </div>
                <div className="table-surface" />
              </div>
            </div>
          </div>
        </div>

        <div className="right-panel">
          <div className="ai-node">
            <div className="ai-node-title">AI 工作流</div>
            <div className="ai-node-list">
              {ECOMMERCE_MATRIX_AI_STEPS.map((item) => (
                <div key={item} className="ai-node-item">
                  {item}
                </div>
              ))}
            </div>
          </div>

          {ECOMMERCE_MATRIX_OUTPUTS.map((group, groupIndex) => (
            <div
              key={group.title}
              ref={(node) => {
                outputGroupRefs.current[groupIndex] = node;
              }}
              className="output-group"
            >
              <div className="output-label">
                <h4>{group.title}</h4>
                <p>{group.subtitle}</p>
              </div>
              <div className="output-cards">
                {group.cards.map((card, cardIndex) => (
                  <div key={`${group.title}-${cardIndex}`} className={`output-card${card.square ? " square" : ""}`}>
                    <div className="output-card-img">
                      <span className={`output-card-tag ${card.tagTone}`}>{card.tag}</span>
                      <EcommerceMatrixCardVisual card={card} />
                      <span className="output-card-res">{card.resolution}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <svg className="flow-svg" aria-hidden="true">
          <defs>
            <filter id="home-ecommerce-flow-glow">
              <feGaussianBlur stdDeviation="2" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          {flowLines.map((line, index) => (
            <Fragment key={index}>
              <path className={`flow-path flow-path-${index + 1}`} d={line.d} filter="url(#home-ecommerce-flow-glow)" />
              <circle className={`flow-dot flow-dot-${index + 1}`} cx={line.x} cy={line.y} r="4" filter="url(#home-ecommerce-flow-glow)" />
            </Fragment>
          ))}
        </svg>
      </div>
    </div>
  );
}

function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
  const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
  const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
  const [carouselIsResetting, setCarouselIsResetting] = useState(false);
  const carouselFrameRef = useRef<number | null>(null);
  const carouselResetFrameRef = useRef<number | null>(null);
  const carouselTimerRef = useRef<number | null>(null);
  const carouselSlotOffsets = useMemo(() => {
    const direction = carouselMotion?.direction ?? 0;
    const minSlot = HOME_CAROUSEL_SLOTS[0]! + Math.min(direction, 0);
    const maxSlot = HOME_CAROUSEL_SLOTS[HOME_CAROUSEL_SLOTS.length - 1]! + Math.max(direction, 0);
    return Array.from({ length: maxSlot - minSlot + 1 }, (_, index) => minSlot + index);
  }, [carouselMotion?.direction]);

  const startCarouselShift = useCallback(
    (rawDirection: number) => {
      const direction = Math.sign(rawDirection);
      if (!direction || HOME_CAROUSEL_IMAGES.length <= 1 || carouselMotion) return;

      if (carouselFrameRef.current !== null) {
        window.cancelAnimationFrame(carouselFrameRef.current);
      }
      if (carouselTimerRef.current !== null) {
        window.clearTimeout(carouselTimerRef.current);
      }
      if (carouselResetFrameRef.current !== null) {
        window.cancelAnimationFrame(carouselResetFrameRef.current);
      }

      setCarouselIsResetting(false);
      setCarouselMotion({ direction, progress: 0 });
      carouselFrameRef.current = window.requestAnimationFrame(() => {
        carouselFrameRef.current = window.requestAnimationFrame(() => {
          setCarouselMotion((current) => (current?.direction === direction ? { direction, progress: 1 } : current));
        });
      });
      carouselTimerRef.current = window.setTimeout(() => {
        setCarouselIsResetting(true);
        setActiveSlideIndex((current) => getPositiveModulo(current + direction, HOME_CAROUSEL_IMAGES.length));
        setCarouselMotion(null);
        carouselResetFrameRef.current = window.requestAnimationFrame(() => {
          carouselResetFrameRef.current = window.requestAnimationFrame(() => {
            setCarouselIsResetting(false);
          });
        });
      }, HOME_CAROUSEL_TRANSITION_MS);
    },
    [carouselMotion],
  );

  useEffect(() => {
    const timerId = window.setInterval(() => {
      startCarouselShift(-1);
    }, 2600);
    return () => window.clearInterval(timerId);
  }, [startCarouselShift]);

  useEffect(
    () => () => {
      if (carouselFrameRef.current !== null) {
        window.cancelAnimationFrame(carouselFrameRef.current);
      }
      if (carouselTimerRef.current !== null) {
        window.clearTimeout(carouselTimerRef.current);
      }
      if (carouselResetFrameRef.current !== null) {
        window.cancelAnimationFrame(carouselResetFrameRef.current);
      }
    },
    [],
  );

  const handleFeatureOpen = (featureKey: string) => {
    if (featureKey === "script") {
      (onOpenScriptReview ?? onOpenGenerate)();
      return;
    }
    if (featureKey === "model") {
      onOpenGenerate();
      return;
    }
    if (featureKey === "ecommerce") {
      onOpenEcommerce();
      return;
    }
    onOpenGenerate();
  };

  return (
    <>
      {!splashDismissed && (
        <WelcomeSplash
          onEnter={() => {
            sessionStorage.setItem("omniai:splash-seen", "1");
            setSplashDismissed(true);
          }}
        />
      )}
    <section className="omni-home page-motion">
      {splashDismissed && (
      <video
        className="omni-home__bg-video"
        src={HOME_BACKGROUND_VIDEO}
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        aria-hidden="true"
      />
      )}
      <div className="omni-home__scrim" aria-hidden="true" />
      <div className="omni-home__shell">
        <section className="omni-home__hero" aria-label="OmniAI 首页">
          <div className="omni-home__copy">
            <h1>OmniAI 创作中心</h1>
            <p>从灵感到成片，一站式整合生成、AIGC与电商，让创作安静专注。</p>
          </div>

          <div className={`omni-home__carousel${carouselIsResetting ? " is-resetting" : ""}`} aria-label="创作案例轮播">
            <div className="omni-home__carousel-stage">
              <div className="omni-home__carousel-deck">
                {carouselSlotOffsets.map((slotOffset) => {
                  const itemIndex = getPositiveModulo(activeSlideIndex + slotOffset, HOME_CAROUSEL_IMAGES.length);
                  const slide = HOME_CAROUSEL_IMAGES[itemIndex];
                  const visualOffset = slotOffset - (carouselMotion?.direction ?? 0) * (carouselMotion?.progress ?? 0);
                  const isActive = visualOffset === 0;

                  if (!slide) return null;

                  return (
                    <button
                      key={slotOffset}
                      type="button"
                      className={`omni-home__carousel-card${isActive ? " is-active" : ""}`}
                      style={getHomeCarouselCardStyle(visualOffset)}
                      aria-label={`切换到${slide.title}`}
                      aria-pressed={isActive}
                      onClick={() => {
                        if (!isActive) startCarouselShift(slotOffset);
                      }}
                    >
                      <img src={slide.imageUrl} alt={slide.title} />
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="omni-home__actions" aria-label="首页入口">
            <button type="button" className="omni-home__entry" onClick={onOpenGenerate}>
              <PlusOutlined />
              <span>新手</span>
            </button>
            <button type="button" className="omni-home__entry omni-home__entry--primary" onClick={onOpenCanvas || onOpenGenerate}>
              <PlayCircleOutlined />
              <span>老手</span>
            </button>
            <button type="button" className="omni-home__entry" onClick={onOpenEcommerce}>
              <ShoppingOutlined />
              <span>电商</span>
            </button>
          </div>
        </section>
      </div>

      <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
        {HOME_FEATURES.map((feature, index) => (
          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
              <div className="omni-home__feature-copy">
                <span>
                  {feature.icon}
                  {feature.eyebrow}
                </span>
                <h2>{feature.title}</h2>
                <p>{feature.description}</p>
                <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
                  {feature.actionLabel}
                  <ArrowRightOutlined />
                </button>
              </div>
            ) : null}
            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
              {feature.key === "script" ? (
                <ScriptReviewShowcase />
              ) : feature.key === "model" ? (
                <ModelGenerationShowcase />
              ) : feature.key === "ecommerce" ? (
                <EcommerceFeatureShowcase />
              ) : (
                <img src={feature.imageUrl} alt="" />
              )}
            </div>
            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
              <div className="omni-home__feature-stats" aria-hidden="true">
                {feature.stats.map((item) => (
                  <span key={item}>{item}</span>
                ))}
              </div>
            ) : null}
          </section>
        ))}

        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />

        <section className="omni-home__experience" aria-label="点击体验">
          <div className="omni-home__experience-copy">
            <span>
              <ThunderboltOutlined />
              Click To Experience
            </span>
            <h2>一站进入 OmniAI</h2>
            <p>选择入口，直接开始生成、评测、监控或电商作图。</p>
          </div>
          <div className="omni-home__experience-visual" aria-hidden="true">
            <div className="omni-home__experience-line is-top" />
            <div className="omni-home__experience-line is-bottom" />
            <div className="omni-home__experience-routes">
              {HOME_EXPERIENCE_POINTS.map((point) => (
                <span key={point.label} className={`omni-home__experience-route is-${point.tone}`}>
                  <b>{point.label}</b>
                  <small>{point.meta}</small>
                </span>
              ))}
            </div>
          </div>
          <div className="omni-home__experience-actions">
            <button type="button" className="is-primary" onClick={onOpenGenerate}>
              <PlayCircleOutlined />
              立即体验生成
            </button>
            <button type="button" onClick={onOpenEcommerce}>
              <ShoppingOutlined />
              体验电商生成
            </button>
          </div>
        </section>
      </main>
    </section>
    </>
  );
}

export default HomePage;