import { useState } from "react";
import styles from "./CommercialGroup.module.css";
import Banner from "@/components/banner";
import { Link } from "react-router-dom";
import StatsRow from "@/components/layout/StatsRow/StatsRow";

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

const statsData = [
  { num: "32 个", label: "全国在管项目" },
  { num: "475 万平方", label: "总建筑面积" },
  { num: "3 亿人次", label: "客流每年超" },
  { num: "350 亿元", label: "销售额每年" },
  { num: "5000 +", label: "合作品牌" },
];


function PlaceholderImage() {
  return <div className={styles.placeholder}>占位图</div>;
}

export default function BusinessCommercialGroup() {
  const [in77ImgError, setIn77ImgError] = useState(false);
  const [propertyImgError, setPropertyImgError] = useState(false);

  const [tabItems, setTabItems] = useState([
    { label: 'in77', content: 'in77 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/in77' }, 
    { label: 'inPARK', content: 'inPARK 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/inPARK' },
    { label: '银泰城购物中心', content: '银泰城 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/shopping-center' },
  ])
  const [activeTabIndex, setActiveTabIndex] = useState(0);

  const [featuresTabItems, setFeaturesTabItems] = useState([
    { label: '深耕运营', content: '全域营销 内容', image: '/images/bg-overview.png',},
    { label: '行业领先', content: '数字化运营 内容', image: '/images/bg-overview.png',  },
    { label: '创新变革', content: '全球品牌合作 内容', image: '/images/bg-overview.png',  },
    { label: '数字生态', content: '全球品牌合作 内容', image: '/images/bg-overview.png',  },
  ])
  const [activeFeaturesTabIndex, setActiveFeaturesTabIndex] = useState(0);

  return (
    <div>
      {/* 1. Hero Banner */}
      <Banner
        title="银泰商业集团"
        desc="传统零售业的推动者和典范"
        titleSize="medium"
        showBreadcrumb={true}
        breadcrumbItems={[
          { label: "首页", to: "/" },
          { label: "集团业务", to: "/business" },
          { label: "银泰商业集团", to: "" },
        ]}
        backgroundImage={`${PUBLIC_URL}/images/bg-commercial-group.png`}
      />

      {/* 2. Overview + Stats */}
      <section className={styles.overview}>
        <div className={styles.overviewInner}>
          <p className={styles.overviewDesc}>
            <span className={styles.overviewTitle}>银泰商业集团</span>
            作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
          </p>
          <p className={styles.overviewDesc}>
            作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
          </p>
          <StatsRow statsData={statsData} />
        </div>
      </section>

      {/* 3. in77 Section - Image Left, Text Right */}
      <section className={styles.twoColSection}
        style={{ backgroundImage: 'url(/images/bg-in.png)' }}
      >
        <div className={styles.twoColSectionTabs}>
          {tabItems.map((item, i) => (
            <div key={i} className={`${styles.twoColSectionTab} ${activeTabIndex === i ? styles.active : ''}`} onClick={() => setActiveTabIndex(i)}>
              <span>{item.label}</span>
            </div>
          ))}
        </div>
        <div className={styles.twoColSectionContent}>
          <div className={styles.twoColImage}>
            {in77ImgError ? (
              <PlaceholderImage />
            ) : (
              <img
                src={tabItems[activeTabIndex].image}
                alt="in77 杭州湖滨银泰"
                onError={() => setIn77ImgError(true)}
                style={{ width: '100%', height: '800px' }}
              />
            )}
          </div>
          <div className={styles.twoColText}>
            <p className={styles.twoColDesc}>{tabItems[activeTabIndex].content}</p>
            <a href={tabItems[activeTabIndex].path} className={styles.btnPrimary}>
              查看详情
            </a>
          </div>
        </div>
      </section>

      {/* 4. Features Section - Hero + 3 Blocks */}
      <section className={styles.featuresHero} style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}>
        <div className={styles.featuresHeroContent}>
          <div>{featuresTabItems[activeFeaturesTabIndex].content}</div>
        </div>
        <div className={styles.featuresHeroTabs}>
          {featuresTabItems.map((item, i) => (
            <div key={i} className={`${styles.featuresHeroTab} ${activeFeaturesTabIndex === i ? styles.active : ''}`} onClick={() => setActiveFeaturesTabIndex(i)}>
              <span>{item.label}</span>
            </div>
          ))}
        </div>
      </section>
      

      {/* 5. Property Services - Text Left, Image Right */}
      <section className={`${styles.twoColSection} ${styles.propertyServices}`}
      style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}
      >
        <div className={styles.propertyServicesContent}>
          <div className={styles.propertyServicesTitle}>
            物业服务
          </div>
          <p className={styles.propertyServicesSubtitle}>
            国内一流物业服务品牌
          </p>
          <Link to="/property-service" className={styles.propertyServicesBtn}>
            查看详情
          </Link>
        </div>
      </section>
    </div>
  );
}