// ============================================================
// 状态管理
// ============================================================

const FORM_UUID = 'FORM-XXX';
const APP_TYPE = 'APP_XXX';

// 报名动态数据
const REGISTRATION_NOTICES = [
  '刚刚：张总来自字节跳动完成报名',
  '1分钟前：李经理来自腾讯完成报名',
  '2分钟前：王总来自华为完成报名',
  '3分钟前：陈总来自阿里巴巴完成报名',
  '4分钟前：刘总来自百度完成报名',
  '5分钟前：赵经理来自小米完成报名',
  '刚刚：孙总来自蔚来汽车完成报名',
  '1分钟前：周总来自理想汽车完成报名',
];

const _customState = {
  // 倒计时
  countdownDays: 0,
  countdownHours: 0,
  countdownMinutes: 0,
  countdownSeconds: 0,
  // 报名动态
  currentNoticeIndex: 0,
  noticeVisible: true,
  // 报名人数
  registeredCount: 3847,
  // 表单状态
  isSubmitting: false,
  isSubmitted: false,
  submitError: '',
  // 表单字段（非受控，仅静默存储）
  formName: '',
  formCompany: '',
  formPosition: '',
  formEmail: '',
  // 进度条
  totalSeats: 5000,
};

export function getCustomState(key) {
  if (key) return _customState[key];
  return { ..._customState };
}

export function setCustomState(newState) {
  Object.keys(newState).forEach(function(key) {
    _customState[key] = newState[key];
  });
  this.forceUpdate();
}

export function forceUpdate() {
  this.setState({ timestamp: new Date().getTime() });
}

// ============================================================
// 生命周期
// ============================================================

export function didMount() {
  // 启动倒计时
  this.updateCountdown();
  _customState._countdownTimer = setInterval(function() {
    this.updateCountdown();
  }.bind(this), 1000);

  // 启动报名动态轮播
  _customState._noticeTimer = setInterval(function() {
    var nextIndex = (_customState.currentNoticeIndex + 1) % REGISTRATION_NOTICES.length;
    this.setCustomState({ currentNoticeIndex: nextIndex, noticeVisible: true });
  }.bind(this), 4000);

  // 数字跳动效果：报名人数随机小幅增加
  _customState._countTimer = setInterval(function() {
    if (Math.random() > 0.7) {
      this.setCustomState({ registeredCount: _customState.registeredCount + 1 });
    }
  }.bind(this), 8000);
}

export function didUnmount() {
  clearInterval(_customState._countdownTimer);
  clearInterval(_customState._noticeTimer);
  clearInterval(_customState._countTimer);
}

export function updateCountdown() {
  // 目标时间：2026年3月15日 14:00 GMT+8
  var targetTime = new Date('2026-03-15T14:00:00+08:00').getTime();
  var now = new Date().getTime();
  var diff = targetTime - now;

  if (diff <= 0) {
    this.setCustomState({ countdownDays: 0, countdownHours: 0, countdownMinutes: 0, countdownSeconds: 0 });
    return;
  }

  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((diff % (1000 * 60)) / 1000);

  this.setCustomState({ countdownDays: days, countdownHours: hours, countdownMinutes: minutes, countdownSeconds: seconds });
}

/**
 * 滚动到报名表单
 */
export function scrollToForm() {
  var formEl = document.getElementById('registration-form');
  if (formEl) {
    formEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

/**
 * 处理表单提交
 */
export function handleSubmit(e) {
  e.preventDefault();

  // 获取表单值
  var name = _customState.formName || '';
  var company = _customState.formCompany || '';
  var position = _customState.formPosition || '';
  var email = _customState.formEmail || '';

  // 表单验证
  if (!name.trim()) {
    this.setCustomState({ submitError: '请输入您的姓名' });
    return;
  }
  if (!company.trim()) {
    this.setCustomState({ submitError: '请输入您的公司名称' });
    return;
  }
  if (!position || position === '请选择') {
    this.setCustomState({ submitError: '请选择您的职位' });
    return;
  }
  if (!email.trim()) {
    this.setCustomState({ submitError: '请输入工作邮箱' });
    return;
  }
  // 简单邮箱格式验证
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    this.setCustomState({ submitError: '请输入有效的邮箱地址' });
    return;
  }

  // 清除错误，设置提交中状态
  this.setCustomState({ isSubmitting: true, submitError: '' });

  // 保存到宜搭表单
  var appType = window.pageConfig && window.pageConfig.appType;
  var formUuid = 'FORM-76402507C605423DA55BB8C934E2B31509D5';

  this.utils.yida.saveFormData({
    formUuid: formUuid,
    appType: appType,
    formDataJson: JSON.stringify({
      textField_8904dr89: name,
      textField_8904s2zw: company,
      textField_8904xumu: position,
      textField_8904fybo: email,
      textField_8904e54g: '未来视野2026发布会',
      dateField_8904yv3d: new Date().getTime(),
    }),
  }).then(function(res) {
    // 提交成功
    this.setCustomState({ isSubmitting: false, isSubmitted: true });
    this.utils.toast({ title: '报名成功！', type: 'success' });
    
    // 清空表单
    _customState.formName = '';
    _customState.formCompany = '';
    _customState.formPosition = '';
    _customState.formEmail = '';
    var nameInput = document.getElementById('field-name');
    var companyInput = document.getElementById('field-company');
    var positionInput = document.getElementById('field-position');
    var emailInput = document.getElementById('field-email');
    if (nameInput) nameInput.value = '';
    if (companyInput) companyInput.value = '';
    if (positionInput) positionInput.value = '请选择';
    if (emailInput) emailInput.value = '';
  }.bind(this)).catch(function(err) {
    // 提交失败
    this.setCustomState({ isSubmitting: false, submitError: err.message || '提交失败，请稍后重试' });
    this.utils.toast({ title: err.message || '提交失败', type: 'error' });
  }.bind(this));
}

// ============================================================
// 渲染
// ============================================================

export function renderJsx() {
  var state = _customState;
  var { timestamp } = this.state;

  var remainingSeats = state.totalSeats - state.registeredCount;
  var progressPercent = Math.round((state.registeredCount / state.totalSeats) * 100);

  // ---- 颜色 & 样式常量 ----
  var colors = {
    bgDeep: '#0B0F19',
    bgCard: 'rgba(255,255,255,0.05)',
    bgCardHover: 'rgba(255,255,255,0.08)',
    neonBlue: '#3B82F6',
    electricPurple: '#8B5CF6',
    cyberPink: '#EC4899',
    energyOrange: '#F59E0B',
    white: '#FFFFFF',
    whiteAlpha60: 'rgba(255,255,255,0.6)',
    whiteAlpha30: 'rgba(255,255,255,0.3)',
    glass: 'rgba(255,255,255,0.08)',
    glassBorder: 'rgba(255,255,255,0.12)',
  };

  var styles = {
    page: {
      background: colors.bgDeep,
      minHeight: '100vh',
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif",
      color: colors.white,
      overflowX: 'hidden',
      position: 'relative',
    },
    // 固定顶部栏
    topBar: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: 100,
      background: 'linear-gradient(135deg, rgba(11,15,25,0.95) 0%, rgba(124,58,237,0.15) 50%, rgba(236,72,153,0.1) 100%)',
      backdropFilter: 'blur(20px)',
      borderBottom: '1px solid ' + colors.glassBorder,
      padding: '0 24px',
      height: '64px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    topBarLogo: {
      fontSize: '18px',
      fontWeight: '700',
      background: 'linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
    },
    topBarRight: {
      display: 'flex',
      alignItems: 'center',
      gap: '16px',
    },
    countdownWrap: {
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
      fontSize: '13px',
      color: colors.whiteAlpha60,
    },
    countdownUnit: {
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '6px',
      padding: '4px 8px',
      fontFamily: "'DIN Alternate', monospace",
      fontWeight: '700',
      fontSize: '16px',
      color: colors.white,
      minWidth: '36px',
      textAlign: 'center',
    },
    topBarCta: {
      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
      border: 'none',
      borderRadius: '8px',
      padding: '8px 18px',
      color: colors.white,
      fontWeight: '600',
      fontSize: '14px',
      cursor: 'pointer',
      whiteSpace: 'nowrap',
    },
    // Hero 区
    hero: {
      paddingTop: '64px',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      position: 'relative',
      textAlign: 'center',
      padding: '120px 24px 80px',
      background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.2) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(59,130,246,0.15) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 80%, rgba(236,72,153,0.1) 0%, transparent 60%)',
    },
    heroBadge: {
      display: 'inline-block',
      background: 'rgba(139,92,246,0.2)',
      border: '1px solid rgba(139,92,246,0.4)',
      borderRadius: '20px',
      padding: '6px 16px',
      fontSize: '13px',
      color: '#A78BFA',
      marginBottom: '24px',
      letterSpacing: '0.05em',
    },
    heroTitle: {
      fontSize: '56px',
      fontWeight: '800',
      lineHeight: '1.1',
      marginBottom: '20px',
      background: 'linear-gradient(135deg, #FFFFFF 0%, #A78BFA 50%, #EC4899 100%)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
      maxWidth: '800px',
    },
    heroSubtitle: {
      fontSize: '18px',
      color: colors.whiteAlpha60,
      marginBottom: '32px',
      maxWidth: '560px',
    },
    heroInfoCard: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '24px',
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '12px',
      padding: '14px 28px',
      marginBottom: '36px',
      fontSize: '14px',
      color: colors.whiteAlpha60,
      flexWrap: 'wrap',
      justifyContent: 'center',
    },
    heroInfoItem: {
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
    },
    heroInfoDot: {
      width: '6px',
      height: '6px',
      borderRadius: '50%',
      background: '#8B5CF6',
      flexShrink: 0,
    },
    heroBtnGroup: {
      display: 'flex',
      gap: '16px',
      justifyContent: 'center',
      marginBottom: '40px',
      flexWrap: 'wrap',
    },
    btnPrimary: {
      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
      border: 'none',
      borderRadius: '12px',
      padding: '14px 32px',
      color: colors.white,
      fontWeight: '700',
      fontSize: '16px',
      cursor: 'pointer',
      boxShadow: '0 0 30px rgba(236,72,153,0.4)',
    },
    btnSecondary: {
      background: 'transparent',
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '12px',
      padding: '14px 32px',
      color: colors.white,
      fontWeight: '600',
      fontSize: '16px',
      cursor: 'pointer',
    },
    // 报名动态
    noticeBanner: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '10px',
      background: 'rgba(59,130,246,0.1)',
      border: '1px solid rgba(59,130,246,0.2)',
      borderRadius: '24px',
      padding: '8px 20px',
      fontSize: '13px',
      color: colors.whiteAlpha60,
    },
    noticeDot: {
      width: '8px',
      height: '8px',
      borderRadius: '50%',
      background: '#3B82F6',
      flexShrink: 0,
      boxShadow: '0 0 8px #3B82F6',
    },
    // 通用 section
    section: {
      padding: '80px 24px',
      maxWidth: '1100px',
      margin: '0 auto',
    },
    sectionTitle: {
      fontSize: '36px',
      fontWeight: '800',
      textAlign: 'center',
      marginBottom: '12px',
      background: 'linear-gradient(135deg, #FFFFFF, #A78BFA)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
    },
    sectionSubtitle: {
      fontSize: '16px',
      color: colors.whiteAlpha60,
      textAlign: 'center',
      marginBottom: '48px',
    },
    // 价值主张卡片
    valueGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
      gap: '20px',
    },
    valueCard: {
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '16px',
      padding: '28px 24px',
    },
    valueIcon: {
      fontSize: '32px',
      marginBottom: '16px',
    },
    valueCardTitle: {
      fontSize: '18px',
      fontWeight: '700',
      marginBottom: '8px',
      color: colors.white,
    },
    valueCardDesc: {
      fontSize: '14px',
      color: colors.whiteAlpha60,
      lineHeight: '1.6',
    },
    valueBadge: {
      display: 'inline-block',
      background: 'rgba(245,158,11,0.15)',
      border: '1px solid rgba(245,158,11,0.3)',
      borderRadius: '6px',
      padding: '2px 8px',
      fontSize: '12px',
      color: '#F59E0B',
      marginTop: '10px',
    },
    // 议程时间轴
    agendaList: {
      display: 'flex',
      flexDirection: 'column',
      gap: '0',
      position: 'relative',
    },
    agendaItem: {
      display: 'flex',
      gap: '20px',
      paddingBottom: '28px',
      position: 'relative',
    },
    agendaTimeCol: {
      width: '120px',
      flexShrink: 0,
      textAlign: 'right',
    },
    agendaTime: {
      fontSize: '13px',
      color: '#8B5CF6',
      fontFamily: 'monospace',
      fontWeight: '600',
    },
    agendaLine: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      width: '24px',
      flexShrink: 0,
    },
    agendaDot: {
      width: '12px',
      height: '12px',
      borderRadius: '50%',
      background: 'linear-gradient(135deg, #8B5CF6, #EC4899)',
      boxShadow: '0 0 12px rgba(139,92,246,0.6)',
      flexShrink: 0,
    },
    agendaConnector: {
      flex: 1,
      width: '2px',
      background: 'linear-gradient(to bottom, rgba(139,92,246,0.4), rgba(139,92,246,0.1))',
      marginTop: '4px',
    },
    agendaContent: {
      flex: 1,
      paddingBottom: '8px',
    },
    agendaTitle: {
      fontSize: '16px',
      fontWeight: '600',
      color: colors.white,
      marginBottom: '4px',
    },
    agendaDesc: {
      fontSize: '13px',
      color: colors.whiteAlpha60,
    },
    // 嘉宾
    speakerGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
      gap: '20px',
    },
    speakerCard: {
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '16px',
      padding: '24px 20px',
      textAlign: 'center',
    },
    speakerAvatar: {
      width: '72px',
      height: '72px',
      borderRadius: '50%',
      margin: '0 auto 14px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '28px',
      background: 'linear-gradient(135deg, rgba(139,92,246,0.3), rgba(236,72,153,0.3))',
      border: '2px solid rgba(139,92,246,0.4)',
    },
    speakerName: {
      fontSize: '16px',
      fontWeight: '700',
      color: colors.white,
      marginBottom: '4px',
    },
    speakerTitle: {
      fontSize: '12px',
      color: colors.whiteAlpha60,
      marginBottom: '10px',
    },
    speakerTag: {
      display: 'inline-block',
      background: 'rgba(139,92,246,0.15)',
      border: '1px solid rgba(139,92,246,0.3)',
      borderRadius: '6px',
      padding: '2px 8px',
      fontSize: '11px',
      color: '#A78BFA',
    },
    speakerMystery: {
      background: 'rgba(255,255,255,0.03)',
      border: '1px dashed rgba(255,255,255,0.15)',
    },
    // 社交证明
    logoWall: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: '16px',
      justifyContent: 'center',
      marginBottom: '48px',
    },
    logoItem: {
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '10px',
      padding: '12px 24px',
      fontSize: '15px',
      fontWeight: '600',
      color: colors.whiteAlpha60,
    },
    statsRow: {
      display: 'flex',
      justifyContent: 'center',
      gap: '48px',
      flexWrap: 'wrap',
      marginBottom: '48px',
    },
    statItem: {
      textAlign: 'center',
    },
    statNumber: {
      fontSize: '40px',
      fontWeight: '800',
      background: 'linear-gradient(135deg, #3B82F6, #8B5CF6)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
      display: 'block',
    },
    statLabel: {
      fontSize: '14px',
      color: colors.whiteAlpha60,
      marginTop: '4px',
    },
    // 报名表单区
    formSection: {
      padding: '80px 24px',
      background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(139,92,246,0.12) 0%, transparent 70%)',
    },
    formCard: {
      maxWidth: '560px',
      margin: '0 auto',
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: '24px',
      padding: '40px',
      backdropFilter: 'blur(20px)',
    },
    formHeader: {
      textAlign: 'center',
      marginBottom: '32px',
    },
    formTitle: {
      fontSize: '28px',
      fontWeight: '800',
      color: colors.white,
      marginBottom: '8px',
    },
    formSubtitle: {
      fontSize: '14px',
      color: colors.whiteAlpha60,
      marginBottom: '16px',
    },
    progressBar: {
      background: 'rgba(255,255,255,0.1)',
      borderRadius: '4px',
      height: '6px',
      overflow: 'hidden',
      marginBottom: '8px',
    },
    progressFill: {
      height: '100%',
      background: 'linear-gradient(90deg, #8B5CF6, #EC4899)',
      borderRadius: '4px',
      width: progressPercent + '%',
      transition: 'width 0.5s ease',
    },
    progressLabel: {
      fontSize: '12px',
      color: '#EC4899',
      textAlign: 'right',
    },
    formGroup: {
      marginBottom: '16px',
    },
    formLabel: {
      display: 'block',
      fontSize: '13px',
      color: colors.whiteAlpha60,
      marginBottom: '6px',
      fontWeight: '500',
    },
    formInput: {
      width: '100%',
      background: 'rgba(255,255,255,0.06)',
      border: '1px solid rgba(255,255,255,0.12)',
      borderRadius: '10px',
      padding: '12px 16px',
      color: colors.white,
      fontSize: '15px',
      outline: 'none',
      boxSizing: 'border-box',
      fontFamily: 'inherit',
    },
    formSelect: {
      width: '100%',
      background: 'rgba(20,20,35,0.9)',
      border: '1px solid rgba(255,255,255,0.12)',
      borderRadius: '10px',
      padding: '12px 16px',
      color: colors.white,
      fontSize: '15px',
      outline: 'none',
      boxSizing: 'border-box',
      fontFamily: 'inherit',
      cursor: 'pointer',
    },
    submitBtn: {
      width: '100%',
      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
      border: 'none',
      borderRadius: '12px',
      padding: '16px',
      color: colors.white,
      fontWeight: '700',
      fontSize: '16px',
      cursor: state.isSubmitting ? 'not-allowed' : 'pointer',
      marginTop: '8px',
      opacity: state.isSubmitting ? 0.7 : 1,
      boxShadow: '0 0 30px rgba(236,72,153,0.3)',
    },
    securityNote: {
      textAlign: 'center',
      fontSize: '12px',
      color: colors.whiteAlpha30,
      marginTop: '12px',
    },
    errorMsg: {
      background: 'rgba(239,68,68,0.1)',
      border: '1px solid rgba(239,68,68,0.3)',
      borderRadius: '8px',
      padding: '10px 14px',
      fontSize: '13px',
      color: '#FCA5A5',
      marginBottom: '12px',
    },
    // 成功状态
    successCard: {
      textAlign: 'center',
      padding: '20px 0',
    },
    successIcon: {
      fontSize: '64px',
      marginBottom: '16px',
      display: 'block',
    },
    successTitle: {
      fontSize: '24px',
      fontWeight: '800',
      color: colors.white,
      marginBottom: '8px',
    },
    successDesc: {
      fontSize: '14px',
      color: colors.whiteAlpha60,
      marginBottom: '24px',
      lineHeight: '1.6',
    },
    successActions: {
      display: 'flex',
      gap: '12px',
      justifyContent: 'center',
      flexWrap: 'wrap',
    },
    successBtn: {
      background: colors.glass,
      border: '1px solid ' + colors.glassBorder,
      borderRadius: '10px',
      padding: '10px 20px',
      color: colors.white,
      fontSize: '14px',
      cursor: 'pointer',
      fontWeight: '500',
    },
    // 分隔线
    divider: {
      height: '1px',
      background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
      margin: '0 24px',
    },
    // 底部
    footer: {
      textAlign: 'center',
      padding: '40px 24px',
      color: colors.whiteAlpha30,
      fontSize: '13px',
    },
  };

  var padZero = function(num) {
    return num < 10 ? '0' + num : '' + num;
  };

  var agendaItems = [
    { time: '14:00 - 14:10', title: '开场致辞', desc: '主持人开场，发布会正式启动' },
    { time: '14:10 - 14:50', title: 'AI 重构商业逻辑', desc: '深度解析 AI 如何颠覆传统商业模式，2026 年的机遇与挑战' },
    { time: '14:50 - 15:30', title: '碳中和圆桌论坛', desc: '行业领袖共话绿色科技与可持续发展路径' },
    { time: '15:30 - 15:45', title: '中场休息 & VR 抽奖', desc: '互动抽奖，赢取价值万元科技礼品' },
    { time: '15:45 - 16:30', title: '神秘新品发布', desc: '重磅产品首发，引领行业新风向' },
    { time: '16:30 - 17:00', title: '互动问答 & 资料包', desc: '与嘉宾实时互动，领取独家白皮书资料包' },
  ];

  var speakers = [
    { emoji: '👨‍💼', name: '张明远', title: 'CEO · 科技领袖', tag: 'AI战略', bio: '前谷歌中国区总裁，连续创业者' },
    { emoji: '👩‍🔬', name: '李晓雯', title: 'CTO · 技术先锋', tag: '深度学习', bio: '斯坦福AI实验室博士，10年AI研究' },
    { emoji: '🧑‍💻', name: '王浩然', title: '创始人 · 投资人', tag: '碳中和', bio: '绿色科技基金创始人，ESG专家' },
    { emoji: '👨‍🎤', name: '神秘嘉宾', title: '3月10日揭晓', tag: '敬请期待', bio: '来自全球顶尖科技公司的重磅嘉宾', mystery: true },
    { emoji: '🎭', name: '神秘嘉宾', title: '3月10日揭晓', tag: '敬请期待', bio: '颠覆性创新领域的行业引领者', mystery: true },
  ];

  var logos = ['华为', '腾讯', '阿里巴巴', '蔚来汽车', '理想汽车', '小米', '字节跳动', '百度'];

  return (
    <div style={styles.page}>
      {/* 隐藏 timestamp，触发重渲染 */}
      <div style={{ display: 'none' }}>{timestamp}</div>

      {/* ===== 固定顶部栏 ===== */}
      <div style={styles.topBar}>
        <div style={styles.topBarLogo}>未来视野 2026</div>
        <div style={styles.topBarRight}>
          <div style={styles.countdownWrap}>
            <span>距开播</span>
            <span style={styles.countdownUnit}>{padZero(state.countdownDays)}</span>
            <span>天</span>
            <span style={styles.countdownUnit}>{padZero(state.countdownHours)}</span>
            <span>时</span>
            <span style={styles.countdownUnit}>{padZero(state.countdownMinutes)}</span>
            <span>分</span>
            <span style={styles.countdownUnit}>{padZero(state.countdownSeconds)}</span>
            <span>秒</span>
          </div>
          <button style={styles.topBarCta} onClick={(e) => { this.scrollToForm(); }}>立即锁定席位</button>
        </div>
      </div>

      {/* ===== Hero 区 ===== */}
      <div style={styles.hero}>
        <div style={styles.heroBadge}>🚀 2026年度科技趋势发布会 · 线上直播</div>
        <div style={styles.heroTitle}>未来视野 2026</div>
        <div style={styles.heroSubtitle}>与全球 5000+ 创新者共同预见下一个十年</div>

        <div style={styles.heroInfoCard}>
          <div style={styles.heroInfoItem}>
            <div style={styles.heroInfoDot}></div>
            <span>📅 2026年3月15日</span>
          </div>
          <div style={styles.heroInfoItem}>
            <div style={styles.heroInfoDot}></div>
            <span>⏰ 14:00 - 17:00 GMT+8</span>
          </div>
          <div style={styles.heroInfoItem}>
            <div style={styles.heroInfoDot}></div>
            <span>💻 线上直播 + 互动问答</span>
          </div>
        </div>

        <div style={styles.heroBtnGroup}>
          <button style={styles.btnPrimary} onClick={(e) => { this.scrollToForm(); }}>🎟 免费报名</button>
          <button style={styles.btnSecondary} onClick={(e) => {
            var el = document.getElementById('agenda-section');
            if (el) el.scrollIntoView({ behavior: 'smooth' });
          }}>查看议程 →</button>
        </div>

        <div style={styles.noticeBanner}>
          <div style={styles.noticeDot}></div>
          <span>{REGISTRATION_NOTICES[state.currentNoticeIndex]}</span>
        </div>
      </div>

      <div style={styles.divider}></div>

      {/* ===== 价值主张 ===== */}
      <div style={styles.section}>
        <div style={styles.sectionTitle}>为什么要参加？</div>
        <div style={styles.sectionSubtitle}>四大核心价值，让这场发布会与众不同</div>
        <div style={styles.valueGrid}>
          <div style={styles.valueCard}>
            <div style={styles.valueIcon}>📊</div>
            <div style={styles.valueCardTitle}>趋势首发</div>
            <div style={styles.valueCardDesc}>2026年度科技趋势白皮书独家首发，深度解析未来三年的行业变革方向。</div>
            <div style={styles.valueBadge}>价值 ¥1,999</div>
          </div>
          <div style={styles.valueCard}>
            <div style={styles.valueIcon}>🎤</div>
            <div style={styles.valueCardTitle}>顶级嘉宾</div>
            <div style={styles.valueCardDesc}>3位行业领袖 + 2位神秘大咖，汇聚全球最具影响力的科技思想者。</div>
            <div style={styles.valueBadge}>3月10日揭晓</div>
          </div>
          <div style={styles.valueCard}>
            <div style={styles.valueIcon}>🌐</div>
            <div style={styles.valueCardTitle}>资源网络</div>
            <div style={styles.valueCardDesc}>加入 5000+ 创新者社群，与全球顶尖创业者、投资人建立深度连接。</div>
            <div style={styles.valueBadge}>终身会员</div>
          </div>
          <div style={styles.valueCard}>
            <div style={styles.valueIcon}>⭐</div>
            <div style={styles.valueCardTitle}>口碑保证</div>
            <div style={styles.valueCardDesc}>往届参会者 92% 满意度，平均观看时长 2.5 小时，内容价值有目共睹。</div>
            <div style={styles.valueBadge}>92% 满意度</div>
          </div>
        </div>
      </div>

      <div style={styles.divider}></div>

      {/* ===== 议程时间轴 ===== */}
      <div style={Object.assign({}, styles.section, { paddingTop: '80px' })} id="agenda-section">
        <div style={styles.sectionTitle}>发布会议程</div>
        <div style={styles.sectionSubtitle}>精心策划的3小时，每分钟都有价值</div>
        <div style={styles.agendaList}>
          {agendaItems.map(function(item, index) {
            return (
              <div key={index} style={styles.agendaItem}>
                <div style={styles.agendaTimeCol}>
                  <div style={styles.agendaTime}>{item.time}</div>
                </div>
                <div style={styles.agendaLine}>
                  <div style={styles.agendaDot}></div>
                  {index < agendaItems.length - 1 && <div style={styles.agendaConnector}></div>}
                </div>
                <div style={styles.agendaContent}>
                  <div style={styles.agendaTitle}>{item.title}</div>
                  <div style={styles.agendaDesc}>{item.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={styles.divider}></div>

      {/* ===== 嘉宾阵容 ===== */}
      <div style={styles.section}>
        <div style={styles.sectionTitle}>嘉宾阵容</div>
        <div style={styles.sectionSubtitle}>汇聚全球最具影响力的科技思想领袖</div>
        <div style={styles.speakerGrid}>
          {speakers.map(function(speaker, index) {
            return (
              <div key={index} style={Object.assign({}, styles.speakerCard, speaker.mystery ? styles.speakerMystery : {})}>
                <div style={styles.speakerAvatar}>
                  {speaker.mystery ? '❓' : speaker.emoji}
                </div>
                <div style={styles.speakerName}>{speaker.name}</div>
                <div style={styles.speakerTitle}>{speaker.title}</div>
                <div style={styles.speakerTag}>{speaker.tag}</div>
                <div style={Object.assign({}, styles.agendaDesc, { marginTop: '10px', fontSize: '12px' })}>{speaker.bio}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={styles.divider}></div>

      {/* ===== 社交证明 ===== */}
      <div style={styles.section}>
        <div style={styles.sectionTitle}>他们都在参加</div>
        <div style={styles.sectionSubtitle}>来自全球顶尖企业的创新者共同见证</div>

        <div style={styles.statsRow}>
          <div style={styles.statItem}>
            <span style={styles.statNumber}>{state.registeredCount.toLocaleString()}</span>
            <div style={styles.statLabel}>已报名人数</div>
          </div>
          <div style={styles.statItem}>
            <span style={styles.statNumber}>92%</span>
            <div style={styles.statLabel}>往届满意度</div>
          </div>
          <div style={styles.statItem}>
            <span style={styles.statNumber}>2.5h</span>
            <div style={styles.statLabel}>平均观看时长</div>
          </div>
          <div style={styles.statItem}>
            <span style={styles.statNumber}>5000+</span>
            <div style={styles.statLabel}>创新者社群</div>
          </div>
        </div>

        <div style={styles.logoWall}>
          {logos.map(function(logo, index) {
            return (
              <div key={index} style={styles.logoItem}>{logo}</div>
            );
          })}
        </div>
      </div>

      <div style={styles.divider}></div>

      {/* ===== 报名表单 ===== */}
      <div style={styles.formSection} id="registration-form">
        <div style={styles.formCard}>
          {state.isSubmitted ? (
            <div style={styles.successCard}>
              <span style={styles.successIcon}>🎉</span>
              <div style={styles.successTitle}>报名成功！</div>
              <div style={styles.successDesc}>
                确认邮件已发送至您的邮箱<br/>
                请查收并添加日历提醒
              </div>
              <div style={styles.successActions}>
                <button 
                  style={styles.successBtn}
                  onClick={(e) => { this.utils.toast({ title: '白皮书预览将在活动前发送', type: 'info' }); }}
                >
                  📄 下载白皮书预览
                </button>
                <button 
                  style={styles.successBtn}
                  onClick={(e) => { this.utils.toast({ title: '已复制分享链接', type: 'success' }); }}
                >
                  🔗 分享给好友
                </button>
              </div>
            </div>
          ) : (
            <div>
              <div style={styles.formHeader}>
                <div style={styles.formTitle}>🔒 锁定您的席位</div>
                <div style={styles.formSubtitle}>免费报名 · 仅限 5,000 人</div>
                <div style={styles.progressBar}>
                  <div style={styles.progressFill}></div>
                </div>
                <div style={styles.progressLabel}>剩余 {remainingSeats.toLocaleString()} 个席位</div>
              </div>

              {state.submitError ? (
                <div style={styles.errorMsg}>⚠️ {state.submitError}</div>
              ) : null}

              <div style={styles.formGroup}>
                <label style={styles.formLabel}>姓名 *</label>
                <input
                  id="field-name"
                  style={styles.formInput}
                  type="text"
                  placeholder="请输入您的姓名"
                  defaultValue=""
                  onChange={(e) => { _customState.formName = e.target.value; }}
                />
              </div>

              <div style={styles.formGroup}>
                <label style={styles.formLabel}>公司 *</label>
                <input
                  id="field-company"
                  style={styles.formInput}
                  type="text"
                  placeholder="请输入您的公司名称"
                  defaultValue=""
                  onChange={(e) => { _customState.formCompany = e.target.value; }}
                />
              </div>

              <div style={styles.formGroup}>
                <label style={styles.formLabel}>职位 *</label>
                <select
                  id="field-position"
                  style={styles.formSelect}
                  defaultValue="请选择"
                  onChange={(e) => { _customState.formPosition = e.target.value; }}
                >
                  <option value="请选择" disabled>请选择您的职位</option>
                  <option value="CEO/创始人">CEO / 创始人</option>
                  <option value="CTO/技术负责人">CTO / 技术负责人</option>
                  <option value="产品经理">产品经理</option>
                  <option value="市场营销">市场营销</option>
                  <option value="投资人">投资人</option>
                  <option value="其他">其他</option>
                </select>
              </div>

              <div style={styles.formGroup}>
                <label style={styles.formLabel}>工作邮箱 *</label>
                <input
                  id="field-email"
                  style={styles.formInput}
                  type="email"
                  placeholder="请输入企业邮箱"
                  defaultValue=""
                  onChange={(e) => { _customState.formEmail = e.target.value; }}
                />
              </div>

              <button
                style={styles.submitBtn}
                onClick={(e) => { this.handleSubmit(e); }}
                disabled={state.isSubmitting}
              >
                {state.isSubmitting ? '⏳ 提交中...' : '🚀 立即报名，获取专属席位'}
              </button>

              <div style={styles.securityNote}>🔐 信息严格保密，不会用于任何商业推广</div>
            </div>
          )}
        </div>
      </div>

      {/* ===== 底部 ===== */}
      <div style={styles.footer}>
        <div style={{ marginBottom: '8px', fontSize: '16px', fontWeight: '600', color: 'rgba(255,255,255,0.4)' }}>未来视野 2026</div>
        <div>© 2026 Future Vision Conference. All rights reserved.</div>
        <div style={{ marginTop: '8px' }}>2026年3月15日 14:00 - 17:00 GMT+8 · 线上直播</div>
      </div>
    </div>
  );
}