const App = () => {
  const [industry, setIndustry] = React.useState('restaurant');
  const [view, setView] = React.useState('flowchart');

  return (
    <div className="app-shell w-full min-h-screen max-w-7xl mx-auto py-12 px-4 sm:px-8 flex flex-col items-center">
      <header className="app-heading w-full max-w-5xl mb-10">
        <div className="flex flex-col items-center text-center">
          <div className="flex items-center gap-3 mb-5">
            <Brandmark size={34} />
            <div className="flex items-center gap-2">
              <span className="text-[12px] font-bold uppercase tracking-kicker text-slate-500">NextGen Ops Suite</span>
              <span className="h-3 w-px bg-slate-300" />
              <span className="text-[12px] font-bold tracking-wide text-gold">v12.0</span>
            </div>
          </div>
          <h1 className="font-display text-[42px] sm:text-[52px] leading-[1.05] font-semibold tracking-tight text-slate-900">
            智能营运<span className="italic text-gold">流转中枢</span>
          </h1>
          <p className="mt-4 text-[16px] text-slate-500 font-medium leading-relaxed">
            一个 AI 语义中枢，贯通顾客、一线与管理层。
          </p>
          <div className="mt-7 flex flex-wrap items-center justify-center gap-2.5">
            <span className="inline-flex items-center gap-2 rounded-full bg-white/70 border border-slate-200 pl-3 pr-4 py-1.5 text-[12px] font-semibold text-slate-600 shadow-sm">
              <LiveDot tone="emerald" /> 语义网关在线
            </span>
            {[['0.6s', '平均首响'], ['79%', '自动闭环'], ['97.4%', '识别准确']].map(([v, k]) => (
              <span key={k} className="inline-flex items-baseline gap-1.5 rounded-full bg-white/70 border border-slate-200 px-4 py-1.5 shadow-sm">
                <span className="font-display text-[14px] font-semibold text-gold tnum">{v}</span>
                <span className="text-[12px] font-semibold text-slate-500">{k}</span>
              </span>
            ))}
          </div>
        </div>
        <div className="mt-9 h-px w-full gold-rule" />
      </header>

      <IndustrySwitch industry={industry} setIndustry={setIndustry} />
      <ViewTabs view={view} setView={setView} />

      <div className="flex-1 w-full max-w-6xl">
        {view === 'flowchart' && <FlowchartView key={`${industry}-flow`} industry={industry} industryData={industry === 'restaurant' ? restaurantData : hotelData} />}
        {view === 'demo-c' && <CEndDemoView key={`${industry}-democ`} industry={industry} />}
        {view === 'demo-b-mobile' && <BEndMobileAppView key={`${industry}-demob-m`} industry={industry} />}
        {view === 'demo-b-pc' && <BEndDashboardView key={`${industry}-demob-pc`} industry={industry} />}
      </div>

      <footer className="mt-14 text-[11px] text-slate-400 font-medium tracking-wide">
NextGen 智能营运中枢 · 演示原型 · 数据均为模拟
      </footer>
    </div>
  );
};

const IndustrySwitch = ({ industry, setIndustry }) => {
  const opts = [
    { id: 'restaurant', icon: 'utensils', label: '餐饮与酒楼', sub: 'Dining' },
    { id: 'hotel', icon: 'building-2', label: '酒店与住宿', sub: 'Lodging' }
  ];
  return (
    <div className="industry-switch flex gap-1.5 mb-9 bg-white/70 backdrop-blur-sm p-1.5 rounded-2xl border border-slate-200 shadow-sm">
      {opts.map(o => {
        const on = industry === o.id;
        return (
          <button
            key={o.id}
            onClick={() => setIndustry(o.id)}
            className={`group relative px-7 py-3 rounded-xl font-bold text-[15px] flex items-center gap-3 transition-all duration-300 cursor-pointer ${on ? 'bg-slate-900 text-slate-50 shadow-md' : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'}`}
          >
            <Icon name={o.icon} className={`w-5 h-5 ${on ? 'text-brand-300' : ''}`} />
            <span className="flex flex-col items-start leading-none">
              <span>{o.label}</span>
              <span className={`text-[10px] font-semibold tracking-widest uppercase mt-1 ${on ? 'text-slate-400' : 'text-slate-400'}`}>{o.sub}</span>
            </span>
          </button>
        );
      })}
    </div>
  );
};

const ViewTabs = ({ view, setView }) => {
  const tabs = [
    { id: 'flowchart', icon: 'git-merge', label: '架构与流转图', n: '01' },
    { id: 'demo-c', icon: 'smartphone', label: 'C端顾客首页体验', n: '02' },
    { id: 'demo-b-mobile', icon: 'tablet-smartphone', label: 'B端一线接单 PDA', n: '03' },
    { id: 'demo-b-pc', icon: 'layout-dashboard', label: 'B端管理层看板', n: '04' }
  ];
  return (
    <div className="view-tabs inline-flex items-center justify-center rounded-2xl bg-white/70 backdrop-blur-sm p-1.5 border border-slate-200 mb-10 shadow-sm w-full max-w-4xl overflow-x-auto no-scrollbar">
      {tabs.map((t, i) => {
        const on = view === t.id;
        return (
          <React.Fragment key={t.id}>
            {i > 0 && <div className="w-px h-5 bg-slate-200 mx-1 shrink-0" />}
            <button
              onClick={() => setView(t.id)}
              className={`shrink-0 inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-[13.5px] font-bold transition-all gap-2.5 cursor-pointer ${on ? 'bg-slate-900 text-slate-50 shadow-md' : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'}`}
            >
              <span className={`text-[10px] font-mono font-semibold ${on ? 'text-brand-300' : 'text-slate-300'}`}>{t.n}</span>
              <Icon name={t.icon} className="w-4 h-4" /> {t.label}
            </button>
          </React.Fragment>
        );
      })}
    </div>
  );
};