import React, { useState } from 'react';
import { ChevronRight, ChevronDown, Phone, Shield, DollarSign, AlertTriangle, Target, BookOpen, Zap, MessageCircle } from 'lucide-react';

const sections = [
  {
    id: 'opening',
    title: '开场白',
    icon: <Phone size={14} />,
    content: [
      {
        q: '客户打来电话，第一句怎么说？',
        a: '"你好，您是在平台上咨询我们牌照的事情是吧？"——确认来源后，先听客户说。客户主动打来的，一般愿意先讲自己的情况。你根据他说的再回应。'
      },
      {
        q: '客户说完情况后，怎么切入介绍？',
        a: '"这个牌照是XX钱，帮你做什么东西，然后你就可以上牌了。怎么做出来的呢——我们是自有的员工，根据上海政策要求，交六个人社保可以赠送一张牌照。我们需要投入的成本是16,500，剩下的由我们来补贴，因为本来这些员工就要交社保，我们是降低公司整体运营成本才做这个事情。已经服务了很多客户了。"'
      },
      {
        q: '怎么制造紧迫感？',
        a: '"这个政策是短暂的，曾经注册公司就能送牌照，但政策一直在变——可能明年就不送了，也可能要20个人社保才能送。您获得牌照的成本只会越来越高。所以您现在选择是非常明智的。"'
      }
    ]
  },
  {
    id: 'pricing',
    title: '报价策略',
    icon: <DollarSign size={14} />,
    content: [
      {
        q: '正常报价怎么报？',
        a: '全套（注册公司+6人社保+牌照申请）：9000元。如果客户自己有公司且有员工，按人头减：9000÷6=1500/人。例如客户自己有1个人，只需付9000-1500=7500。'
      },
      {
        q: '客户自己有公司，只要人头怎么收？',
        a: '"9000块钱。比方说你公司自己一个人，还差五个人——那你只需要支付9000-1500=7500。一个人是1500，我帮你补贴1200，社保是2700。"'
      },
      {
        q: '打价格战时怎么说？',
        a: '"6000块钱来就行了。你随便去问，问一圈，我们也能搞定。我们家是一手资源，不用解释这么多。他们都是来找我拿货的。任何比我们低的，我比他还低——你告诉我他多少钱，我都能收下来。"'
      },
      {
        q: '客户砍价要便宜点？',
        a: '"做生意大家都是当面谈，你来看看我们公司的实力和真实情况，见面聊一下。优惠不会特别大，但肯定给你稍微优惠一点。"——把人约到线下。'
      },
      {
        q: '客户问能不能去掉代账费自己做账？',
        a: '"没问题，这不是我们靠这个挣钱的。但要告诉你规则——你不能不做账，不做会异常，到时候影响地址让你迁走，跟我们无关了。因为我们跟园区是长期合作，还有这么多客户用这些地址。"'
      }
    ]
  },
  {
    id: 'objections',
    title: '异议处理',
    icon: <Shield size={14} />,
    content: [
      {
        q: '客户说"家里人说不靠谱，再等等"',
        a: '"你再等也是这种方法，没有别的办法。你可以问任何一家做同样事情的公司。你要么交满三年社保，要么交满一年社保去拍一个10万的大牌，要么就是选择这种方便且成本低的方式。这是上海政府政策明确写的——六个人社保赠送一张牌照，我们按合法合规的政策去申请。你也可以打上海经信委电话去询问。唯一的风险是人员入职离职，这个风险我们公司帮你承担，合同里会体现。如果你自己去做，随便找外面的人，出现任何问题都需要你自己负责——这就是你为什么要找我们的原因。"'
      },
      {
        q: '客户问"合同合法吗？这不是代缴吗？"',
        a: '"首先这不是代缴，这是我们自有的员工。这是我们可以把控的事情。外面去买人家的人头、人力资源那种是不靠谱的，他们的员工都不是自己的。我们是自有的员工。"'
      },
      {
        q: '客户说"4S店说他们也能办，还送保养"',
        a: '"他们的货就是从我们这边拿的，只是想赚中间差价。你也可以选择找他们拿，因为所有流量最终都会流向我们。哪怕你不直接找我们，我们可以给你看各个品牌跟我们合作的数据——不能拍照，但你可以来现场看。请问你买的是什么品牌？"——直接拿回主导权。'
      },
      {
        q: '客户说"朋友说挂在别人公司就行，不用自己注册"',
        a: '"挂在别人公司，那车子不属于你，公司也不属于你，这不太现实。可能是你理解错他的意思了。最终公司肯定是法人过到你名下的，才属于你的资产。就像我们的现货就是这种情况——先在我们亲戚名下，然后过户给你。"'
      },
      {
        q: '客户问"公司注册在外地，员工出事我要承担责任吗？"',
        a: '"绝对不需要。我们的员工是我们自有的员工，我们只是为了降低公司成本而已。"——简短坚定，不多解释。'
      },
      {
        q: '客户说"网上查了这种方式绿牌会被退回"',
        a: '"目前我们已经累计服务了3000多家客户，有聊天记录有数据，最早可以追溯到16年，目前没有遇到过您说的这个情况。"——如果客户追问"万一以后遇到呢？"直接说："万一遇到了你再来找我，我给你退款，把你车买下来，全部给你搞定。"——堵死他。'
      },
      {
        q: '客户问"别人报8000你们凭什么报10000？"（我们比别人贵）',
        a: '"正规公司和不正规公司的区别。就像您说的怕人跑掉——他没有利润生存不了，做着做着就不做了。我们保持正常利润，才能持续给你售后服务。正规公司一定会跟你签合同，非正规公司不会签——你可以外面去问。"'
      },
      {
        q: '客户问"别人报10000你们怎么才报8000？"（我们比别人便宜）',
        a: '"可能您说的是那种一年纳税的公司，税务上可能有问题。我们这种社保做出来的成本本来就高一些。您自己选择——如果一定要便宜的纳税的，我也能帮你搞，但连续买纳税会不会有税务风险我们保证不了。从我们这拿社保的，百分百没问题。"——主推社保方案。'
      },
      {
        q: '客户说"万一你们跑了咋办？"（关于代账）',
        a: '"第一年肯定帮你做好，第二年收费800一年。你觉得我们会跑？第一我们有利润可以生存。就算没利润，你这个记账你可以找任何一个财务公司帮你做，不存在这个问题。"'
      },
      {
        q: '客户问"有没有违约条款/退款？"',
        a: '"你确定买车的，因贷款没通过是您的原因。如果我给你的资格不能让你上牌照，是我的原因，可以退款。有效期三个月。哪怕你用不了要退掉，我们按当时市场价回收，普遍亏2000左右——别人家不会给你售后，我们家有。"'
      },
      {
        q: '客户一直纠结重复问同一个问题（绕来绕去）',
        a: '直接卡死："您自身是没有条件的，不管用什么方法，除非拍大牌——拍大牌你也需要一年社保。"不要被他绕进去，不要给他太多选择，不要太热心肠告诉他其他办法。只给两条路：要么你自己满足条件，要么找我们。'
      },
      {
        q: '客户问"个人收款不走公司账会不会被查？"',
        a: '"没人举报你不会查，流水和利润是两回事。同行都用微信收款。而且这个公司最后法人是你，理论上正规流程是钱转到公司名下再付服务费——但操作很麻烦，目前没遇到这种要求。你要走公司账也可以走。"'
      }
    ]
  },
  {
    id: 'closing',
    title: '逼单催单',
    icon: <Target size={14} />,
    content: [
      {
        q: '客户说"我再想想/考虑一下"',
        a: '不要当场逼太紧。挂完之后第二天跟进，不能跟得太紧。电话里先问清楚："您计划什么时候提车？车子什么时候上牌？"——备注好时间节点，后续跟进有理由。'
      },
      {
        q: '怎么制造紧迫感催单？',
        a: '"这个牌照政策可能会有变动，上海如果觉得拥堵会直接暂停——就像当初国补一样，说好发到年底，最后说额度没了就不发了。您可以提前把牌照弄好，有效期三个月。"'
      },
      {
        q: '怎么判断客户是随便问还是真想办？',
        a: '没办法判断，只能正常回答。一个电话五六分钟，一天20个客户打完，看转化率。目前成交最快的是"外地转上海"的客户。关键问清：计划提车时间+已经定了什么品牌。'
      },
      {
        q: '收定金还是全款？',
        a: '"我们不太愿意收定金，团队很有效率——您确定要做，我们直接全款收进来帮你做好。如果你担心，可以留1000-2000尾款，在随申办APP签字之前收到全款就行。因为签完字就到你名下了。有任何问题来公司找我们，有实体店的。"'
      },
      {
        q: '客户问"多久能办好？"',
        a: '"三天出电子营业执照，五天出原件，从你签字那天开始算，误差一个工作日。"——一定要跟客户讲明白时间。'
      },
      {
        q: '客户问"需要提供什么资料？"',
        a: '"只需要身份证正反面和手机号。但我建议你来公司，当面看看我说的真实性。如果你相信我网上办也可以，但建议来公司签合同、看看我们整体实力。"'
      },
      {
        q: '客户问"流程是什么？"',
        a: '"你提供信息，我们通过手机上的随申办进行网签——确认签字新法人确认书就可以了。"如果客户已有公司："每月20号前把公司信息给我们，您的财务跟我们对接，次月1号帮您做出牌照。申请不出来全额退款。"'
      }
    ]
  },
  {
    id: 'cardeals',
    title: '4S店/购车优惠',
    icon: <Zap size={14} />,
    content: [
      {
        q: '怎么介绍购车优惠？',
        a: '"您不管买任何车，我们可以拿到最低价——因为我们卖车的量比较大，4S店认为我们是批发商。车还是4S店的，但销售自己的提成会给到我们，我们再给到你。会明确告诉你这个车能帮你省多少钱，你只需要告诉我具体品牌车型。"'
      },
      {
        q: '前提条件是什么？',
        a: '"前提是你没有去留号码、没有下定金。"——一定要提前说清楚。'
      },
      {
        q: '我们主要对接的群体是谁？（用来塑造专业形象）',
        a: '"主要是二手车商，一个月拿50-100张。还有4S店，每个品牌都有合作。你可以理解为——就像装修去源头工厂，肯定比找小装修公司强。我们是源头。"'
      },
      {
        q: '新车还是二手车先弄牌照？',
        a: '"不管新车还是二手车，都应该先把资格弄好。资格到你名下后法人是你，随时可以上车。不然我们这个流程肯定耽误你上车时间。提前把牌照弄好，有效期三个月。"'
      }
    ]
  },
  {
    id: 'tax',
    title: '抵税问题',
    icon: <BookOpen size={14} />,
    content: [
      {
        q: '客户问"公司能抵税吗？"',
        a: '"可以，但首先你要有正规业务，还要有专业的财务。我们也可以帮你做，但只能控制在合法合规之内。具体怎么开票、合同怎么弄，要专业财务老师跟你沟通——不是你想开多少票就开多少，想抵多少税就抵多少，这个要听财务的。"'
      },
      {
        q: '要不要主动提抵税？',
        a: '不主动提。一般问这个问题的客户自己都懂、自己有财务。可以作为附加卖点提一句，但不深入展开——避免给自己挖坑。'
      }
    ]
  },
  {
    id: 'emergency',
    title: '应急话术',
    icon: <AlertTriangle size={14} />,
    content: [
      {
        q: '客户问的问题你不知道怎么回答？',
        a: '方法一："不好意思，这边来了一个客户需要接待，我回头再给您回电话，您这个问题我一会儿慢慢耐心回答您。"\n方法二："您这个问题稍等，我帮您再确认一下，然后回答您。您还有别的需要咨询的吗？"\n——找借口挂电话，问清楚答案后再回。态度一定要客气。'
      },
      {
        q: '客户问"你们公司怎么才几个人？"',
        a: '"我还有个餐饮公司，要不要我带你去看？外面10个销售在跑，家里只要文员就可以了。"——把话题带过去，聊到后面客户就忘了。因为你越专业，客户越信任你，就不会纠结这种问题。'
      },
      {
        q: '客户问"你们员工每个月换公司不太好吧？"',
        a: '"这个跟您就无关了，合同里面会写好我们的责任。如果你有需要，你自有员工我来帮你操作也可以。"——一下子卡死，不要进入自证环节，要主导客户。'
      }
    ]
  },
  {
    id: 'principles',
    title: '核心原则',
    icon: <MessageCircle size={14} />,
    content: [
      {
        q: '最重要的销售心态',
        a: '① 不给客户太多选择——只给两三条路\n② 不要太热心肠——有些办法可以不告诉他\n③ 态度一定要好、要客气——但气场要压住\n④ 把自己和公司抬高——"几千块钱对于我们整个月营业额很小的"\n⑤ 要主导对话——不要被客户带节奏进入自证循环\n⑥ 正规公司签合同这个点可以每次都提——作为信任切入'
      },
      {
        q: '价格战的底层逻辑',
        a: '有价格优势时不用解释太多："6000块钱来就行了，你去问一圈，他们都是来我这拿货的，我是源头。任何比我低的，我比他还低。"——直接霸气。没价格优势时强调：正规、售后、合同、不会跑。'
      },
      {
        q: '成交关键判断',
        a: '问清三个信息：①什么品牌 ②什么时候提车/上牌 ③车定了没有。时间越近越容易成交。外地转上海的成交最快。纯线上来的客户会到处比价——价格优势很重要。'
      },
      {
        q: '跟进节奏',
        a: '挂完电话不要马上追，第二天再跟进。记录好客户说的提车时间，到时间点了再打。不要太紧，但也不能不跟。'
      },
      {
        q: '信任塑造方法',
        a: '① 邀请来公司看（实体店）\n② 给客户看合作数据/流水（不能拍照，现场看）\n③ 提"正规公司签合同，非正规不签"\n④ 聊自己的经历、在上海有房等——证明正经做事不是骗子\n⑤ 已服务3000+客户，追溯到16年'
      }
    ]
  }
];

export default function SalesScript() {
  const [openSection, setOpenSection] = useState(null);
  const [openItem, setOpenItem] = useState(null);

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 p-2">
      <div className="max-w-lg mx-auto">
        <div className="bg-gray-900 rounded-lg p-3 mb-3 border border-gray-800">
          <h1 className="text-sm font-bold text-amber-400 text-center">🎯 车牌销售话术手册</h1>
          <p className="text-xs text-gray-500 text-center mt-1">点击分类展开 → 点击问题查看话术</p>
        </div>

        <div className="space-y-1.5">
          {sections.map((section) => (
            <div key={section.id} className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
              <button
                onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
                className="w-full flex items-center justify-between p-2.5 text-left hover:bg-gray-800 transition-colors"
              >
                <div className="flex items-center gap-2">
                  <span className="text-amber-400">{section.icon}</span>
                  <span className="text-xs font-semibold text-gray-200">{section.title}</span>
                  <span className="text-xs text-gray-600">({section.content.length})</span>
                </div>
                {openSection === section.id ? (
                  <ChevronDown size={14} className="text-amber-400" />
                ) : (
                  <ChevronRight size={14} className="text-gray-500" />
                )}
              </button>

              {openSection === section.id && (
                <div className="border-t border-gray-800">
                  {section.content.map((item, idx) => (
                    <div key={idx} className="border-b border-gray-800 last:border-b-0">
                      <button
                        onClick={() => setOpenItem(openItem === `${section.id}-${idx}` ? null : `${section.id}-${idx}`)}
                        className="w-full flex items-start gap-2 p-2 text-left hover:bg-gray-800 transition-colors"
                      >
                        {openItem === `${section.id}-${idx}` ? (
                          <ChevronDown size={12} className="text-amber-400 mt-0.5 flex-shrink-0" />
                        ) : (
                          <ChevronRight size={12} className="text-gray-500 mt-0.5 flex-shrink-0" />
                        )}
                        <span className="text-xs text-gray-300 leading-relaxed">{item.q}</span>
                      </button>

                      {openItem === `${section.id}-${idx}` && (
                        <div className="px-3 pb-2.5 ml-4">
                          <div className="bg-gray-800 rounded p-2.5 border-l-2 border-amber-500">
                            <p className="text-xs text-gray-200 leading-relaxed whitespace-pre-line">{item.a}</p>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>

        <div className="bg-gray-900 rounded-lg p-3 mt-3 border border-red-900">
          <p className="text-xs font-bold text-red-400 mb-1">⚠️ 红线提醒</p>
          <p className="text-xs text-gray-400 leading-relaxed">• 不要给客户太多选择/太多办法</p>
          <p className="text-xs text-gray-400 leading-relaxed">• 不要被客户绕进去自证——你要主导</p>
          <p className="text-xs text-gray-400 leading-relaxed">• 不知道的问题找借口挂电话再回</p>
          <p className="text-xs text-gray-400 leading-relaxed">• 态度客气但气场要稳，把自己抬高</p>
        </div>
      </div>
    </div>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>