import { useCallback, useEffect, useMemo, useState, type CSSProperties } from 'react'
import './App.css'

const sections = [
  { id: 'hero', label: 'LP-H 首屏', title: '你请客，我买单', summary: '杜康好客：你请客，我买单。买酒送等价好客权益，到合作门店抵餐。' },
  { id: 'brand', label: 'LP-01 品牌传承', title: '品牌传承', summary: '杜康被尊为秫酒酒宗、酒祖与酒神，是华夏酿造文明的精神图腾。' },
  { id: 'poetry', label: 'LP-02 诗酒文化', title: '诗酒文化', summary: '何以解忧，唯有杜康。曹操《短歌行》主诗签，苏轼、白居易、辛弃疾辅诗签。' },
  { id: 'qingxiang', label: 'LP-03 清香宝典', title: '清香', summary: '千年杜康，醉美清香。绵·净·雅，杏花村同源同脉，一清到底。' },
  { id: 'haoke', label: 'LP-04 好客模式', title: '好客模式', summary: '买酒送等价好客权益；到合作门店按面额抵餐。酒餐同赴，线上线下一体。' },
  { id: 'system', label: 'LP-05 三端协同', title: '三端协同', summary: '城市合伙人拓店 → 用户购酒得权益 → 门店核销结算 → 再反哺城市运营。' },
  { id: 'tech', label: 'LP-06 科技驱动', title: '科技驱动', summary: '四端一体、全链路闭环、宴请场景数字化、城市运营中台。' },
  { id: 'subsidy', label: 'LP-07 酒厂实力', title: '酒厂实力', summary: '十亿级支持，与餐饮共度寒冬。支持细则以合作政策为准。' },
  { id: 'partner', label: 'LP-08 城市合伙人', title: '城市合伙人', summary: '携酒祖入城，共建一座城的好客。了解合作方式，不承诺收益。' },
  { id: 'tech-detail', label: 'LP-09 科技板块', title: '科技板块', summary: '可运营、可结算、可规模化的好客系统：用户端、门店核销端、合伙人端、总部管控。' },
  { id: 'contact', label: 'LP-10 联系我们', title: '联系我们', summary: '扫码咨询项目负责人吕丹，电话 13073729990。无留资表单。' },
]

const navItems = [
  { href: '#brand', label: '品牌传承' },
  { href: '#poetry', label: '诗酒文化' },
  { href: '#qingxiang', label: '清香' },
  { href: '#haoke', label: '好客模式' },
  { href: '#system', label: '三端协同' },
  { href: '#tech', label: '科技驱动' },
  { href: '#subsidy', label: '酒厂实力' },
  { href: '#partner', label: '城市合伙人' },
  { href: '#tech-detail', label: '科技板块' },
  { href: '#contact', label: '联系我们' },
]

const heritageCards = [
  {
    title: '导语',
    text: '杜康，被尊为秫酒「酒宗」「酒祖」，更被世人敬奉为「酒神」。从典籍到诗篇，从故里到祠祀，杜康不只是一杯酒的名字——它是华夏酿造文明的精神图腾。',
  },
  {
    title: '典籍立祖',
    text: '《世本》载「杜康作秫酒」；《说文解字》谓「少康，杜康也」。酒之所兴，肇自上皇——杜康造酒，写入中华文明的源头叙事。',
  },
  {
    title: '故里承源',
    text: '杜康村、杜康泉、空桑涧……酒祖故里的山水与作坊，延续着「以秫为骨、以曲为魂」的古老智慧，让技进乎道，香传千年。',
  },
  {
    title: '酒以成礼',
    text: '从封坛祭祖到「饮惟祀」的酒德观念，杜康文化把粮食之精，升华为礼乐之器——国之大事，在祀在戎，酒以成礼。',
  },
]

const timeline = [
  '先秦典籍立名',
  '魏晋诗性转化',
  '杜康祠祀千年',
  '当代酒祖品牌复兴',
]

const qingxiangPositions = [
  { title: '企业定位', text: '承千年清韵，铸清香白酒标杆企业。' },
  { title: '品质定位', text: '守古法清酿，酿纯粹绵柔清雅好酒。' },
  { title: '品牌定位', text: '传酒祖清魂，塑高端清香文化名酒。' },
  { title: '营销定位', text: '拓清香赛道，引全民清雅饮酒新风尚。' },
]

const tastingSteps = [
  { title: '抿', text: '微启触香，品粮香本味' },
  { title: '咂', text: '舌卷含香，品绵柔入喉' },
  { title: '呵', text: '缓缓呵气，品回甘生津' },
]

const systemEnds = [
  {
    title: '城市合伙人',
    role: '开城运营者：拓店、组仓配、带团队，让品牌在一座城真正落地。',
    caps: '门店拓展与入驻协同 · 推广与代下单 · 佣金与经营数据可见',
  },
  {
    title: '合作门店',
    role: '好客权益核销端：把用户带回餐桌，用核销结算反哺门店经营。',
    caps: '手机号/核销码核销 · 核销记录可查 · 结算路径清晰',
  },
  {
    title: '用户',
    role: '购酒与权益的享受者：小程序下单，酒到席、权益到店。',
    caps: '清香选购 · 1:1 好客权益 · 同城配送/现场提货',
  },
]

const techPoints = [
  {
    title: '四端一体',
    text: '用户小程序、门店核销、城市合伙人、总部管控——权限分离、数据同源，开城可复制。',
  },
  {
    title: '全链路闭环',
    text: '下单履约、好客权益发放、门店核销、结算回款可视可追，减少「口头承诺、纸面对账」。',
  },
  {
    title: '宴请场景数字化',
    text: '面向商务宴请高频人群：酒到席、权益到店，把一次消费同时服务「喝」与「吃」。',
  },
  {
    title: '城市运营中台',
    text: '拓店、推广归因、经营数据与热力洞察，服务合伙人把一座城「盘清楚、推得动」。',
  },
]

const techPorts = [
  {
    title: '用户端',
    text: '清香选购与展示 · 下单履约（同城配送/现场提货） · 好客权益领取与使用 · 售后工单与发票入口',
  },
  {
    title: '门店核销端',
    text: '手机号/核销码核销 · 核销记录可查 · 结算与提现协同（细则以政策为准）',
  },
  {
    title: '城市合伙人端',
    text: '门店资料与入驻协同 · 推广/代下单 · 佣金与经营数据可见 · 子账号与权限管理',
  },
  {
    title: '总部管控与数据',
    text: '城市开通与审核 · 全链路订单/核销洞察 · 热力与经营分析 · 结算打款协同',
  },
]

function App() {
  const isStageMode = useMemo(() => new URLSearchParams(window.location.search).get('mode') === 'stage', [])
  const [activeIndex, setActiveIndex] = useState(0)
  const [autoPlay, setAutoPlay] = useState(false)
  const [panelOpen, setPanelOpen] = useState(true)
  const activeSection = sections[activeIndex] ?? sections[0]

  useEffect(() => {
    document.body.classList.toggle('stage-mode', isStageMode)
    return () => document.body.classList.remove('stage-mode')
  }, [isStageMode])

  useEffect(() => {
    if (!isStageMode) return
    const hashIndex = sections.findIndex((section) => `#${section.id}` === window.location.hash)
    if (hashIndex >= 0) setActiveIndex(hashIndex)
  }, [isStageMode])

  useEffect(() => {
    if (isStageMode) return
    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
        if (visible?.target.id) {
          const nextIndex = sections.findIndex((section) => section.id === visible.target.id)
          if (nextIndex >= 0) setActiveIndex(nextIndex)
        }
      },
      { threshold: [0.35, 0.6, 0.8] },
    )
    sections.forEach((section) => {
      const node = document.getElementById(section.id)
      if (node) observer.observe(node)
    })
    return () => observer.disconnect()
  }, [isStageMode])

  const goToSection = useCallback((index: number) => {
    const safeIndex = Math.max(0, Math.min(index, sections.length - 1))
    setActiveIndex(safeIndex)
    if (isStageMode) {
      window.history.replaceState(null, '', `?mode=stage#${sections[safeIndex].id}`)
      return
    }
    document.getElementById(sections[safeIndex].id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }, [isStageMode])

  useEffect(() => {
    if (!isStageMode) return

    const root = document.getElementById('root')
    root?.setAttribute('tabindex', '-1')
    root?.focus({ preventScroll: true })

    const handleKeyDown = (event: KeyboardEvent) => {
      const key = event.key
      const code = event.code
      const isNext = key === 'ArrowRight' || code === 'ArrowRight' || key === 'ArrowDown' || code === 'ArrowDown' || key === 'PageDown' || code === 'PageDown' || key === ' '
      const isPrev = key === 'ArrowLeft' || code === 'ArrowLeft' || key === 'ArrowUp' || code === 'ArrowUp' || key === 'PageUp' || code === 'PageUp'
      const isHome = key === 'Home' || code === 'Home'
      const isEnd = key === 'End' || code === 'End'

      if (!isNext && !isPrev && !isHome && !isEnd) return

      event.preventDefault()
      event.stopPropagation()

      setActiveIndex((current) => {
        let next = current
        if (isNext) next = Math.min(current + 1, sections.length - 1)
        if (isPrev) next = Math.max(current - 1, 0)
        if (isHome) next = 0
        if (isEnd) next = sections.length - 1
        window.history.replaceState(null, '', `?mode=stage#${sections[next].id}`)
        return next
      })
    }

    window.addEventListener('keydown', handleKeyDown, true)
    return () => {
      window.removeEventListener('keydown', handleKeyDown, true)
      root?.removeAttribute('tabindex')
    }
  }, [isStageMode])

  useEffect(() => {
    if (!isStageMode || !autoPlay) return
    const timer = window.setInterval(() => {
      setActiveIndex((current) => {
        const next = current >= sections.length - 1 ? 0 : current + 1
        window.history.replaceState(null, '', `?mode=stage#${sections[next].id}`)
        return next
      })
    }, 8000)
    return () => window.clearInterval(timer)
  }, [autoPlay, isStageMode])

  const progress = ((activeIndex + 1) / sections.length) * 100

  return (
    <div className={isStageMode ? 'site is-stage' : 'site'}>
      <header className="topbar">
        <a className="brand-lockup" href="#hero" onClick={() => goToSection(0)}>
          <img className="haoke-logo-img" src="/assets/haoke-logo.png" alt="杜康好客" />
          <span>
            <strong>杜康好客</strong>
            <small>酒祖清香</small>
          </span>
        </a>
        <nav className="nav-links" aria-label="主导航">
          {navItems.map((item) => (
            <a href={item.href} key={item.href}>{item.label}</a>
          ))}
        </nav>
        <a className="nav-cta" href="#contact">扫码咨询</a>
      </header>

      <main
        className={isStageMode ? 'stage-track' : undefined}
        style={isStageMode ? { transform: `translate3d(-${activeIndex * 100}vw, 0, 0)` } : undefined}
      >
        <section className="page-section hero-section poetic-section reveal-section" id="hero">
          <div className="ink-cloud ink-cloud-one" />
          <div className="hero-copy">
            <p className="brand-main">杜康好客</p>
            <p className="brand-sub">酒祖清香 · 清香系列</p>
            <h1>你请客，我买单</h1>
            <p className="hero-text">买酒送等价好客权益，到合作门店抵餐——让酒与席，同赴一场清雅之约。</p>
            <div className="hero-actions">
              <a className="primary-button" href="#haoke">了解好客模式</a>
              <a className="secondary-button" href="#partner">了解城市合伙人</a>
            </div>
          </div>
          <div className="hero-visual" aria-label="杜康好客清香系列 T30 产品视觉">
            <img className="hero-bottle" src="/assets/t30-hero-bottle.png" alt="杜康好客清香系列 T30" />
          </div>
        </section>

        <section className={`page-section poetic-section brand-section${activeIndex === 1 ? ' is-entered' : ''}`} id="brand">
          <div className="section-heading">
            <img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
            <span className="eyebrow">品牌传承</span>
            <h2>酒祖杜康：中国酒文化的精神原点</h2>
          </div>
          <div className="brand-layout">
            <div className="heritage-grid">
              {heritageCards.map((card, index) => (
                <article className="paper-card" key={card.title} style={{ '--slide-i': index } as CSSProperties}>
                  <span>{card.title}</span>
                  <p>{card.text}</p>
                </article>
              ))}
            </div>
            <figure className="heritage-figure">
              <img src="/assets/heritage-scene.png" alt="酒祖杜康祠堂造像" />
              <figcaption>酒祖承源 · 杜康留香</figcaption>
            </figure>
          </div>
          <div className="timeline" aria-label="品牌传承时间线">
            {timeline.map((item, index) => (
              <div className="timeline-item" key={item} style={{ '--slide-i': index } as CSSProperties}>{item}</div>
            ))}
          </div>
          <p className="closing-line">站在今日回望，杜康如一坛陈年佳酿——愈久愈醇，愈传愈清。</p>
        </section>

        <section className={`page-section poetic-section poetry-section${activeIndex === 2 ? ' is-entered' : ''}`} id="poetry">
          <div className="poetry-main-card reveal-card">
            <img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
            <span className="eyebrow">诗酒文化</span>
            <h2>何以解忧，唯有杜康</h2>
            <p className="lead">「诗酒」二字，是中国人心里最动人的共鸣。千载光阴里，曹操、杜甫、白居易、苏轼、辛弃疾……无数名家以杜康为意象，把一抹醇香写进东方美学。</p>
            <blockquote>
              <span>对酒当歌，人生几何？</span>
              <strong>何以解忧，唯有杜康。</strong>
              <cite>——东汉 · 曹操《短歌行》</cite>
            </blockquote>
            <p>从魏武的感喟，到唐人的开眉，再到宋人的神思——杜康完成了从「酒祖」到「诗心密码」的转化，成为文人精神世界的通行意象。</p>
            <p className="closing-inline">斟半盏清醑，展卷轻吟：让酒香携着古人的魂魄，穿越千年与我们共醉。</p>
          </div>
          <div className="poetry-tags">
            <article style={{ '--slide-i': 0 } as CSSProperties}>
              <b>苏轼</b>
              <span>「他年血食汝，当配杜康神。」</span>
              <small>——宋 · 苏轼</small>
            </article>
            <article style={{ '--slide-i': 1 } as CSSProperties}>
              <b>白居易</b>
              <span>「不似杜康神用速，十分一盏便开眉。」</span>
              <small>——唐 · 白居易</small>
            </article>
            <article style={{ '--slide-i': 2 } as CSSProperties}>
              <b>辛弃疾</b>
              <span>「杜康初筮，正得云雷。」</span>
              <small>——宋 · 辛弃疾</small>
            </article>
          </div>
        </section>

        <section className="page-section poetic-section qingxiang-section" id="qingxiang">
          <div className="section-heading">
            <img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
            <span className="eyebrow">清香宝典</span>
            <h2>千年杜康，醉美清香</h2>
            <p>浓香内卷、酱香回落的时代，清香正成为确定性更强的黄金赛道。酒祖杜康扎根山西杏花村——千年酒都，与清香名酒同源同脉，一清到底。</p>
          </div>
          <div className="data-band">
            <div>
              <strong>约1000亿元</strong>
              <span>2024年中国清香白酒销售收入，同比增长约13%；利润约350亿元</span>
              <small>来源：黑格咨询《2025中国清香白酒产业发展报告》</small>
            </div>
            <div>
              <strong>45.6%</strong>
              <span>2025年消费者白酒香型偏好中清香型约45.6%（酱香约43.04%，浓香约41.76%）</span>
              <small>来源：艾媒咨询</small>
            </div>
          </div>
          <div className="feature-layout">
            <div className="position-grid">
              {qingxiangPositions.map((item) => (
                <article key={item.title}>
                  <h3>{item.title}</h3>
                  <p>{item.text}</p>
                </article>
              ))}
            </div>
            <div className="craft-card">
              <h3>绵 · 净 · 雅</h3>
              <p>粮香纯正无杂味，清香干净通透；入口绵柔顺滑，落口爽利干脆；杂醇含量低，不口干、不上头，醒酒快——适配小酌与宴席多场景。</p>
              <p className="craft-extra">大麦、豌豆、高粱三种原料；清香「7321」工艺，讲究「清蒸二次清」「一清到底」，味道更醇厚。产地：扎根杏花村千年酿酒圣地，同源同脉，品质有据。</p>
              <div className="tasting-detail">
                {tastingSteps.map((step) => (
                  <div key={step.title}>
                    <strong>{step.title}</strong>
                    <p>{step.text}</p>
                  </div>
                ))}
              </div>
              <p className="mission-line">坚守纯粹品质，悦享清逸人生。</p>
              <p className="product-tag">产品露出：杜康好客 · 清香系列 T30</p>
            </div>
          </div>
          <figure className="store-figure">
            <img src="/assets/store-preview.png" alt="杜康清香酒文馆效果示意" />
            <figcaption>杜康清香 · 沉浸式酒文馆示意</figcaption>
          </figure>
          <p className="footnote">行业数据引自公开研究报告，仅供参考；具体以权威发布为准。</p>
        </section>

        <section className="page-section poetic-section haoke-section" id="haoke">
          <div className="section-heading centered">
            <span className="eyebrow">杜康好客</span>
            <h2>你请客，我买单</h2>
            <p>杜康好客，是酒祖杜康面向宴请场景的供应链与权益平台：总部供酒，城市合伙人推广，门店核销好客权益，用户一次购买，同时覆盖「酒 + 餐」。</p>
            <p className="mode-line">买酒，送等价好客权益；到合作门店，按面额抵餐。</p>
          </div>
          <div className="three-columns">
            <article>
              <span>01</span>
              <h3>酒餐同赴</h3>
              <p>商务宴请不必再「酒一套、餐一套」分开算。买多少酒，送多少面额的好客权益，让席间更从容。</p>
            </article>
            <article>
              <span>02</span>
              <h3>线上线下一体</h3>
              <p>小程序购酒、同城送达或现场提货；好客权益到合作门店核销——品牌、履约与核销，同一条链路。</p>
            </article>
            <article>
              <span>03</span>
              <h3>与餐饮共度时艰</h3>
              <p>把酒厂资源与门店客流重新连上：用户得实惠，门店得核销结算，合伙人得城市运营空间——让清香美酒，成为餐桌上的暖流。</p>
            </article>
          </div>
          <p className="closing-line">千年酒祖的清香，遇见一套可落地的好客机制。</p>
          <div className="section-cta">
            <a className="primary-button" href="#system">了解三端协同</a>
          </div>
        </section>

        <section className="page-section poetic-section system-section" id="system">
          <div className="section-heading">
            <span className="eyebrow">三端协同</span>
            <h2>城市合伙人 · 门店 · 用户，一城一盘棋</h2>
            <p>杜康好客用一套系统，把「推得动、核得清、买得爽」连成闭环——每一端各司其职，全城一起把清香与好客做起来。</p>
          </div>
          <div className="system-grid">
            {systemEnds.map((item) => (
              <article key={item.title}>
                <h3>{item.title}</h3>
                <p>{item.role}</p>
                <small>{item.caps}</small>
              </article>
            ))}
          </div>
          <p className="loop-line">闭环示意：合伙人拓店 → 用户购酒得权益 → 门店核销结算 → 再反哺城市运营</p>
          <p className="closing-line">三端同屏，好客才成立；系统在线，信任才可复制。</p>
          <div className="section-cta">
            <a className="primary-button" href="#tech">进入科技驱动</a>
          </div>
        </section>

        <section className="page-section tech-section tech-drive-section" id="tech">
          <div className="tech-orbit" />
          <div className="section-heading dark-heading">
            <span className="eyebrow">科技驱动</span>
            <h2>让白酒行业，跑在可运营的数字轨道上</h2>
            <p>传统白酒拼品牌、拼渠道；杜康好客把「购酒—权益—核销—结算」做成在线闭环，让酒厂资源、城市运营与餐饮门店，第一次用同一套系统对话。</p>
          </div>
          <div className="tech-grid">
            {techPoints.map((item) => (
              <article key={item.title}>
                <span>{item.title}</span>
                <p>{item.text}</p>
              </article>
            ))}
          </div>
          <p className="industry-claim">科技不是白酒的装饰，而是穿越周期的基础设施——帮酒厂更精准触达，帮餐饮更快回血，帮合伙人更可控地开城。</p>
          <div className="section-cta">
            <a className="primary-button tech-button" href="#tech-detail">查看科技板块详情</a>
          </div>
        </section>

        <section className="page-section tech-section subsidy-section" id="subsidy">
          <div className="section-heading dark-heading centered">
            <span className="eyebrow">酒厂实力</span>
            <h2>十亿级支持，与餐饮共度寒冬</h2>
            <p className="sub-title">酒祖杜康清香 · 真资源入场，真补贴到位</p>
            <p>当餐饮遭遇客流与成本的双重压力，杜康好客选择站到餐桌这一边：以酒厂之力，把补贴与流量送进合作门店，把清香美酒变成可核销、可回血的经营助力。</p>
          </div>
          <div className="subsidy-number reveal-number">十亿</div>
          <p className="number-desc">酒厂专项支持规模：十亿级资源投入，用于权益让利、门店激励与城市拓展——不是口号，是可落地的好客供给。</p>
          <div className="subsidy-points">
            <article>
              <h3>品牌硬实力</h3>
              <p>酒祖杜康清香背书，杏花村产区同源同脉；宴请场景有故事、有品质、有辨识度。</p>
            </article>
            <article>
              <h3>补贴真机制</h3>
              <p>用户购酒即获等价好客权益，到店抵餐；门店核销有结算路径，让「请吃饭」变成双方都愿意持续的生意。</p>
            </article>
            <article>
              <h3>共度周期</h3>
              <p>寒冬里最缺的不是又一张海报，而是把客流、酒水与结算打通的系统——杜康好客，为此而来。</p>
            </article>
          </div>
          <p className="closing-line dark-closing">酒厂出资源，科技出闭环，门店与用户同受益。</p>
          <p className="footnote dark-footnote">支持细则以合作政策为准。</p>
        </section>

        <section className="page-section tech-section partner-section" id="partner">
          <div className="section-heading dark-heading">
            <span className="eyebrow">城市合伙人</span>
            <h2>携酒祖入城，共建一座城的好客</h2>
            <p>若你认同酒祖杜康的清香价值，也看好「酒 + 餐」的数字化机会——欢迎了解城市合伙人：用系统化能力，把品牌、门店与用户在一座城运营起来。</p>
          </div>
          <div className="partner-detail-grid">
            <article><h3>杜康实力</h3><p>酒祖品牌 + 清香产品矩阵 + 十亿级支持背书</p></article>
            <article><h3>科技底座</h3><p>三端协同、全链路可追踪，开城不靠口头账</p></article>
            <article><h3>定制风格</h3><p>城市策略、拓店节奏与运营支持，按城匹配</p></article>
            <article><h3>适合谁</h3><p>有本地餐饮/渠道资源 · 认同长期运营 · 愿意用系统做管理的城市操盘手</p></article>
            <article className="span-2"><h3>我们提供</h3><p>品牌与货盘支持 · 四端系统权限 · 拓店与培训协同 · 结算与数据可见</p></article>
          </div>
          <div className="hero-actions">
            <a className="primary-button tech-button" href="#contact">了解合作方式</a>
            <a className="secondary-button tech-secondary" href="#tech-detail">查看科技板块</a>
          </div>
        </section>

        <section className="page-section tech-section tech-detail-section" id="tech-detail">
          <div className="section-heading dark-heading centered">
            <span className="eyebrow">科技板块</span>
            <h2>可运营、可结算、可规模化的好客系统</h2>
            <p>杜康好客科技板块，围绕「开城—履约—核销—结算—洞察」构建四端能力，让白酒宴请场景从经验驱动，升级为数据与流程驱动。</p>
          </div>
          <div className="ports-grid">
            {techPorts.map((port) => (
              <article key={port.title}>
                <h3>{port.title}</h3>
                <p>{port.text}</p>
              </article>
            ))}
          </div>
          <div className="tech-highlights">
            <span>一套账本贯穿购酒到核销</span>
            <span>权限分离保障多方协作</span>
            <span>开城可复制降低口头协同成本</span>
          </div>
          <p className="closing-line dark-closing">科技板块的目标很明确：让每一瓶清香、每一笔好客权益、每一次门店核销，都跑在可信的轨道上。</p>
          <p className="contact-hint">了解更多请联系杜康好客 · 项目负责人</p>
        </section>

        <section className="page-section tech-section contact-section" id="contact">
          <div className="section-heading dark-heading">
            <span className="eyebrow">联系我们</span>
            <h2>扫码咨询 · 对接项目负责人</h2>
            <p>现场如需进一步了解酒祖杜康清香、好客模式或城市合作，请扫码添加对接人，或致电联系。</p>
            <p className="contact-role">杜康好客 · 项目负责人</p>
            <div className="contact-person">
              <strong>吕丹</strong>
              <a href="tel:13073729990">13073729990</a>
            </div>
          </div>
          <div className="qr-card">
            <img src="/assets/qr-contact.svg" alt="微信二维码占位图" />
            <span>扫一扫上方二维码，添加项目负责人微信</span>
          </div>
          <footer className="footer in-section">
            <strong>杜康好客 · 酒祖清香</strong>
            <span>你请客，我买单</span>
            <span>© 杜康好客 2026</span>
            <span>晋ICP备2026004970号</span>
            <p>理性饮酒，未成年人禁止饮酒。本展示内容仅供品牌与合作了解，不构成任何收益承诺。行业数据引自公开研究报告，仅供参考。支持细则以合作政策为准。</p>
          </footer>
        </section>
      </main>

      {isStageMode && (
        <>
          <button
            aria-label="上一节"
            className="stage-click-zone stage-click-prev"
            disabled={activeIndex <= 0}
            onClick={() => goToSection(activeIndex - 1)}
            type="button"
          >
            <span>‹</span>
          </button>
          <button
            aria-label="下一节"
            className="stage-click-zone stage-click-next"
            disabled={activeIndex >= sections.length - 1}
            onClick={() => goToSection(activeIndex + 1)}
            type="button"
          >
            <span>›</span>
          </button>
          {panelOpen ? (
            <aside className="stage-panel is-open" aria-label="展控模式控制面板">
              <div className="stage-status">
                <span>好客发布会 · 展控模式</span>
                <div className="stage-status-right">
                  <b>{String(activeIndex + 1).padStart(2, '0')} / {String(sections.length).padStart(2, '0')}</b>
                  <button
                    type="button"
                    className="stage-collapse-btn"
                    onClick={() => setPanelOpen(false)}
                    aria-label="收起展控面板"
                  >
                    收起
                  </button>
                </div>
              </div>
              <p>{activeSection.summary}</p>
              <div className="autoplay-row">
                <button
                  type="button"
                  className={autoPlay ? 'is-on' : ''}
                  onClick={() => setAutoPlay((value) => !value)}
                >
                  {autoPlay ? '自动播：开' : '自动播：关'}
                </button>
                <button type="button" onClick={() => goToSection(0)}>回首屏</button>
              </div>
              <div className="highlight-jumps">
                <button type="button" onClick={() => goToSection(2)}>诗酒</button>
                <button type="button" onClick={() => goToSection(7)}>十亿</button>
                <button type="button" onClick={() => goToSection(6)}>科技四端</button>
              </div>
              <div className="stage-qr-grid">
                <div>
                  <img src="/assets/qr-host.svg" alt="主持人控场二维码占位" />
                  <span>控场码 · 需配对</span>
                </div>
                <div>
                  <img src="/assets/qr-audience.svg" alt="观众伴读二维码占位" />
                  <span>观展码 · 同步摘要</span>
                </div>
              </div>
              <div className="stage-keys">键盘 ← 上一节 · → 下一节 · 空格下一节 · Home / End</div>
            </aside>
          ) : (
            <button
              type="button"
              className="stage-panel-toggle"
              onClick={() => setPanelOpen(true)}
              aria-label="展开展控面板"
            >
              展控
            </button>
          )}
        </>
      )}

      <div className={`progress-bar ${isStageMode ? 'with-label' : ''}`} aria-hidden={!isStageMode}>
        <div style={{ width: `${progress}%` }} />
        {isStageMode && (
          <span className="progress-label">{activeSection.label}</span>
        )}
      </div>

      {isStageMode && (
        <div className="stage-dots" aria-label="展控章节导航">
          {sections.map((section, index) => (
            <button
              aria-label={`跳转到${section.title}`}
              className={index === activeIndex ? 'active' : ''}
              key={section.id}
              onClick={() => goToSection(index)}
              type="button"
            />
          ))}
        </div>
      )}
    </div>
  )
}

export default App