// Intro.jsx — 预约介绍 (forum introduction / landing)

const FORUM = {
  overline: '烟台自然博物馆 · 讲解预约',
  title: '烟台自然博物馆 · 仙境海岸最美博馆',
  subtitle: '精品厅馆与研学路线讲解服务预约',
  date: '淡季 09:30 — 15:30 · 旺季 09:30 — 16:30',
  weekday: '周一闭馆，节假日及研学高峰期以实际可预约场次为准',
  location: '烟台自然博物馆 · 服务前台办理讲解手续',
  duration: '60 分钟',
  cap: 50,
  intro: '烟台自然博物馆讲解服务围绕化石、黄金、矿产、生物与特色馆藏展开。讲解可选择精品厅馆路线，也可根据研学内容调整路线。每场约 60 分钟，请至少提前 10 分钟到服务前台办理讲解手续。',
  docents: [
    { name: '精品厅馆', affil: '化石厅 · 黄金一厅 · 矿产厅 · 根雕馆 · 观赏石馆', kind: 'keynote', role: '常规路线' },
    { name: '研学推荐', affil: '地球厅 · 化石厅 · 黄金一厅 · 矿产厅 · 生物厅', kind: 'external', role: '研学路线' },
    { name: '预约咨询', affil: '0535-6762521 · 9:00-16:30 接听', kind: 'internal', role: '团体预约' },
  ],
  route: [
    { stop: '01', label: '精品厅馆', title: '化石厅 · 黄金一厅 · 矿产厅 · 根雕馆 · 观赏石馆' },
    { stop: '02', label: '研学推荐', title: '地球厅 · 化石厅 · 黄金一厅 · 矿产厅 · 生物厅' },
    { stop: '03', label: '路线调整', title: '可根据研学内容与现场安排调整' },
  ],
  notes: [
    '线上预约：通过博物馆官方公众号、小程序，至少提前 1 个工作日预约讲解时段。',
    '现场预约：服务前台登记预约，仅限当日剩余名额，先约先得。',
    '团体预约：咨询电话 0535-6762521，9:00-16:30 接听，周一闭馆。',
    '讲解费用：10 人（含 10 人）以内 200 元/次；超出 10 人按 20 元/人核算，单团上限 50 人。线下收取。',
    '无线讲解耳机押金 50 元/副，设备讲解结束全额退款；人为损坏、遗失需按价赔偿。',
    '预约成功后请按预约时间到场，如需取消请提前联系服务前台。',
    '讲解员人数有限，每日可承接场次和接待名额固定；名额约满后不再新增临时讲解安排。',
  ],
};

function FactRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--border-2)' }}>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--action-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name={icon} size={14} color="var(--action)" />
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 1 }}>{label}</div>
        <div style={{ fontSize: 13, color: 'var(--fg-1)', fontWeight: 500, lineHeight: 1.35 }}>{value}</div>
      </div>
    </div>
  );
}

function IntroScreen({ onBook, onProfile }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)' }}>
      <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 18 }}>
        <div style={{ position: 'relative', padding: '22px 20px 24px', overflow: 'hidden', background: 'linear-gradient(160deg, #E4F2EF 0%, #F4FAF8 48%, #FFFFFF 100%)', borderBottom: '1px solid var(--border-1)' }}>
          <div style={{ position: 'absolute', right: -40, top: 72, width: 190, height: 190, borderRadius: '50%', background: 'radial-gradient(circle, rgba(12,113,100,.13), rgba(12,113,100,0) 68%)' }} />
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 10px 5px 5px', borderRadius: 999, background: 'rgba(255,255,255,.7)', border: '1px solid rgba(12,113,100,.14)' }}>
              <img src="logo.png" style={{ height: 20, width: 20, borderRadius: 4 }} />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--action)' }}>{FORUM.overline}</span>
            </div>
            <h1 style={{
              margin: '18px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 34, lineHeight: 1.08, color: 'var(--fg-1)', letterSpacing: '-0.02em',
            }}>{FORUM.title}</h1>
            <p style={{ margin: '12px 0 0', fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg-2)' }}>{FORUM.subtitle}</p>
            <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--fg-2)' }}>
                <Icon name="calendar" size={15} color="var(--action)" />{FORUM.date}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--fg-2)' }}>
                <Icon name="map-pin" size={15} color="var(--action)" />{FORUM.location}
              </div>
            </div>
          </div>
        </div>

        <div style={{ padding: '18px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <section style={{ background: '#fff', border: '1px solid var(--border-1)', borderRadius: 16, padding: '2px 16px' }}>
            <FactRow icon="calendar-days" label="时间段" value={`${FORUM.date} · ${FORUM.weekday}`} />
            <FactRow icon="users" label="人数" value={`单团上限 ${FORUM.cap} 人`} />
            <FactRow icon="map-pin" label="办理" value={FORUM.location} />
            <FactRow icon="clock" label="时长" value={`${FORUM.duration} · 请提前 10 分钟办理手续`} />
            <FactRow icon="ticket" label="收费" value="10 人以内 200 元/次，超出 10 人按 20 元/人核算（线下收取）" />
          </section>

          <section>
            <SectionHeader>讲解介绍</SectionHeader>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.72, color: 'var(--fg-2)', textWrap: 'pretty' }}>{FORUM.intro}</p>
          </section>

          <section>
            <SectionHeader>讲解路线</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {FORUM.route.map(a => (
                <div key={a.stop} style={{ display: 'flex', gap: 10, background: '#fff', border: '1px solid var(--border-1)', borderRadius: 14, padding: 10 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--action-soft)', color: 'var(--action)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, flex: 'none' }}>{a.stop}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 2 }}>{a.label}</div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--fg-1)', fontWeight: 500 }}>{a.title}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section>
            <SectionHeader>预约须知</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {FORUM.notes.map((n, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <Icon name="check" size={14} color="var(--moss-500)" style={{ marginTop: 2, flex: 'none' }} />
                  <span style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--fg-2)' }}>{n}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>

      <div style={{ flex: 'none', padding: '10px 16px calc(10px + env(safe-area-inset-bottom))', borderTop: '1px solid var(--border-2)', background: 'rgba(244,250,248,.92)', backdropFilter: 'blur(14px)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <span style={{ fontSize: 12, color: 'var(--fg-2)' }}>每个时段限 {FORUM.cap} 人 · 讲解时长 60 分钟</span>
        </div>
        <Button variant="primary" size="lg" iconRight="arrow-right" onClick={onBook}>立即预约</Button>
      </div>
    </div>
  );
}

Object.assign(window, { IntroScreen, FORUM });