import { Button } from '@tarojs/components';

import { useCallback } from 'react';

import { openCustomerServiceChat } from '@/utils/common';
import './index.less';

const PREFIX = 'partner-intro';
export default function PartnerIntro() {
  const handleOpenService = useCallback(() => {
    openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
  }, []);
  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__banner`}>
        邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
      </div>
      <div className={`${PREFIX}__main`}>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__h1`}>收益一</div>
            <div className={`${PREFIX}__body`}>
              直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
            </div>
            <div className={`${PREFIX}__h1`}>收益二</div>
            <div className={`${PREFIX}__body`}>
              邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
              <span className={`${PREFIX}__highlight`}>50%</span>
            </div>
            <div className={`${PREFIX}__h1`}>收益三</div>
            <div className={`${PREFIX}__body`}>
              邀请朋友加入合伙人，可额外获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
            </div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>群主特别通道</div>
          <div className={`${PREFIX}__card  ${PREFIX}__special`}>
            <div className={`${PREFIX}__body`}>如果您是主播群群主，请务必添加播络小伙计</div>
            <div className={`${PREFIX}__body`}>我们会为您提供专属服务，让您的收益最大化</div>
            <Button className={`${PREFIX}__service`} onClick={handleOpenService}>
              点击添加播络伙计
            </Button>
          </div>
          <div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
        </div>
      </div>
    </div>
  );
}

export function PartnerIntroFooter() {
  return (
    <div className={`${PREFIX}__footer`}>
      <Button className={`${PREFIX}__download-button`}>下载海报</Button>
      <Button className={`${PREFIX}__share-button`} openType="share">
        分享邀请
      </Button>
    </div>
  );
}
