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

const slides = [
  {
    eyebrow: "平台协同",
    title: "一屏统筹，安全连接每一程",
    description: "连接智能瓶阀、气站运营与配送履约，让治理更清晰、协同更高效。",
    image: "/assets/banner-platform.png",
    position: "center center",
  },
  {
    eyebrow: "智慧气站",
    title: "让每一次供气更稳、更安心",
    description: "以数字化能力贯通站点经营、安全服务与履约管理。",
    image: "/assets/banner-gas-station.png",
    position: "center center",
  },
  {
    eyebrow: "高效配送",
    title: "从调度到送达，全程清晰可追溯",
    description: "智能连接配送资源与服务现场，让每一程都有迹可循。",
    image: "/assets/banner-delivery.png",
    position: "center center",
  },
];

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}，将在新标签页打开`}
    >
      <span className="portal__number" aria-hidden="true">
        {portal.number}
      </span>
      <span className="portal__content">
        <strong>{portal.title}</strong>
        <small>{portal.description}</small>
      </span>
      <span className="portal__action">
        进入系统
        <ArrowRight size={20} weight="bold" aria-hidden="true" />
      </span>
    </a>
  );
}

export function App() {
  const [activeSlide, setActiveSlide] = useState(0);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setActiveSlide((current) => (current + 1) % slides.length);
    }, 5000);

    return () => window.clearInterval(timer);
  }, []);

  return (
    <main className="site-shell">
      <header className="site-header">
        <a className="brand" href="/" aria-label="和气首页">
          <img src="/assets/heqi-logo.svg" alt="" />
          <span className="brand__name">和气</span>
        </a>
        <div className="brand-slogan">
          <ShieldCheck size={21} weight="regular" aria-hidden="true" />
          <strong>安全连接每一程</strong>
          <span>安全可靠 · 稳定高效 · 智能互联</span>
        </div>
      </header>

      <section className="banner" aria-roledescription="轮播图" aria-label="和气平台服务介绍">
        <div
          className="banner__track"
          style={{ transform: `translateX(-${activeSlide * 100}%)` }}
        >
          {slides.map((slide, index) => (
            <article
              className="banner__slide"
              key={slide.title}
              aria-hidden={index !== activeSlide}
            >
              <img
                src={slide.image}
                alt=""
                style={{ objectPosition: slide.position }}
              />
              <div className="banner__shade" />
              <div className="banner__copy">
                <p>{slide.eyebrow}</p>
                <h1>{slide.title}</h1>
                <span>{slide.description}</span>
              </div>
            </article>
          ))}
        </div>

        <div className="banner__dots" aria-label="选择轮播内容">
          {slides.map((slide, index) => (
            <button
              type="button"
              key={slide.title}
              className={index === activeSlide ? "is-active" : ""}
              onClick={() => setActiveSlide(index)}
              aria-label={`显示第 ${index + 1} 张：${slide.title}`}
              aria-current={index === activeSlide ? "true" : undefined}
            />
          ))}
        </div>
      </section>

      <footer className="site-footer">
        <div className="footer-heading">
          <div>
            <p>MANAGEMENT PORTALS</p>
            <h2>选择管理系统</h2>
          </div>
          <span>
            <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
            系统将在新标签页中打开
          </span>
        </div>

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