import { Link } from "react-router-dom";
import styles from "./About.module.css";
import Banner from "@/components/Banner";

const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";

type SectionLink = { label: string; to: string };
type SectionItem = {
  title: string;
  desc: string;
  bgImg: string;
  links: SectionLink[];
};

const sectionData: SectionItem[] = [
  {
    title: "银泰商业集团",
    desc: "涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK区域型品质商业生活中心银泰城等品牌的大型商业集团，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。",
    bgImg: '/images/bg-commercial-group.png',
    links: [{ label: 'in77', to: '/business/commercial-group/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
  },
  {
    title: "银泰基业集团",
    desc: "银泰基业集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
    bgImg: '/images/bg-base-group.png',
    links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
  },
  {
    title: "银泰置地集团",
    desc: "银泰置地集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
    bgImg: '/images/bg-realty-group.png',
    links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
  },
  {
    title: "银泰投资集团",
    desc: "银泰投资集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
    bgImg: '/images/bg-invest-group.png',
    links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
  },
  {
    title: "瑞京集团",
    desc: "瑞京集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
    bgImg: '/images/bg-ruijing-group.png',
    links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
  }
];

export default function About() {
  return (
    <div>
      <Banner
        title="集团概览"
        desc="银泰集团（全称“中国银泰投资有限公司”）由沈国军先生于1997年创立，立足实业发展与产业投资，业务涵盖商业零售、商业地产运营与开发、股权投资等领域，在境内外拥有多家控股、参股公司，已发展成为一家主业突出、多元发展的现代企业集团。"
        showBreadcrumb={true}
        breadcrumbItems={[{ label: '关于银泰', to: '/about' }, { label: '集团概览', to: '' }]}
        backgroundImage={'/images/bg-overview.png'} />

      {sectionData.map((item, index) => (
        <section
          key={index}
          className={`${styles.section} ${index % 2 === 1 ? styles.sectionRight : ""}`}
          style={{
            backgroundImage: `url(${item.bgImg}), ${FALLBACK_GRADIENT}`,
          }}
        >
          <div
            className={`${styles.content} ${index % 2 === 1 ? styles.contentRight : ""}`}
          >
            <div className={styles.textBox}>
              <h2 className={styles.title}>{item.title}</h2>
              <p className={styles.desc}>{item.desc}</p>
              <div className={styles.links}>
                {item.links.map((link, index) => (
                  <span key={link.label}>
                    <Link to={link.to}>{link.label}</Link>
                  </span>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}