import {
  ArrowRight,
  ArrowSquareOut,
  ShieldCheck,
} from "@phosphor-icons/react";

const portals = [
  {
    number: "01",
    title: "平台总后台",
    description: "全局治理 · 安全运营 · 数据协同",
    href: "http://p.heqiapp.com",
    tone: "platform",
  },
  {
    number: "02",
    title: "气站管理后台",
    description: "站点经营 · 履约管理 · 安全服务",
    href: "http://z.heqiapp.com",
    tone: "station",
  },
  {
    number: "03",
    title: "配送点管理后台",
    description: "智能调度 · 高效配送 · 全程可追溯",
    href: "http://d.heqiapp.com",
    tone: "delivery",
  },
];

function PortalLink({ portal }) {
  return (
    <a
      className={`portal portal--${portal.tone}`}
      href={portal.href}
      target="_blank"
      rel="noreferrer"
      aria-label={`进入${portal.title}，将在新标签页打开`}
    >
      <div className="portal__heading">
        <span className="portal__number" aria-hidden="true">
          {portal.number}
        </span>
        <span className="portal__divider" aria-hidden="true" />
        <div>
          <h2>{portal.title}</h2>
          <p>{portal.description}</p>
        </div>
      </div>
      <span className="portal__action">
        进入系统
        <ArrowRight size={22} weight="bold" aria-hidden="true" />
      </span>
    </a>
  );
}

export function App() {
  return (
    <main className="site-shell">
      <img
        className="ecosystem-scene"
        src="/assets/heqi-ecosystem-hero.jpg"
        alt=""
        aria-hidden="true"
      />

      <header className="site-header">
        <a className="brand" href="/" aria-label="和气首页">
          <img src="/assets/heqi-logo.svg" alt="" />
          <span>和气</span>
        </a>
        <div className="trust-line">
          <ShieldCheck size={20} weight="regular" aria-hidden="true" />
          <span>安全可靠 · 稳定高效 · 智能互联</span>
        </div>
      </header>

      <section className="hero" aria-labelledby="hero-title">
        <p className="hero__eyebrow">HEQI SMART GAS PLATFORM</p>
        <h1 id="hero-title">安全连接每一程</h1>
        <p className="hero__description">
          <span>智能瓶阀、气站运营与配送履约</span>
          <span>的一体化管理入口</span>
        </p>
      </section>

      <nav className="portal-grid" aria-label="管理系统入口">
        {portals.map((portal) => (
          <PortalLink key={portal.href} portal={portal} />
        ))}
      </nav>

      <p className="external-note">
        <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
        系统将在新标签页中打开
      </p>
    </main>
  );
}