import { Link, Outlet, useLocation } from 'react-router-dom'
import {
  brand,
  contact,
  haoke,
  hero,
  images,
  partner,
  poetry,
  qingxiang,
  subsidy,
  system,
  tech,
  techDetail,
} from '../content/site'
import './MobileViews.css'

export function MobileViews() {
  const location = useLocation()
  const path = location.pathname

  switch (path) {
    case '/':
      return <MobileHomeView />
    case '/brand':
      return <MobileBrandView />
    case '/poetry':
      return <MobilePoetryView />
    case '/qingxiang':
      return <MobileQingxiangView />
    case '/haoke':
      return <MobileHaokeView />
    case '/system':
      return <MobileSystemView />
    case '/tech':
      return <MobileTechView />
    case '/subsidy':
      return <MobileSubsidyView />
    case '/partner':
      return <MobilePartnerView />
    case '/tech-detail':
      return <MobileTechDetailView />
    case '/contact':
      return <MobileContactView />
    default:
      return <Outlet />
  }
}

/* 1. Mobile Home View */
function MobileHomeView() {
  return (
    <div className="m-view-container">
      <div className="m-hero">
        <div className="m-hero-sub">{hero.subBrand} · 移动全景</div>
        <h1 className="m-hero-title">{hero.brand}</h1>
        <p style={{ fontSize: '1.05rem', color: 'var(--gold)', fontFamily: 'Noto Serif SC', margin: 0 }}>
          {hero.title}
        </p>
        <img src={images.t30} alt="酒祖杜康 T30" className="m-hero-img" />
        <p className="m-lead" style={{ textAlign: 'center' }}>
          {hero.subtitle}
        </p>
        <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
          <Link to="/brand" className="m-btn m-btn-primary">
            {hero.primaryCta.label}
          </Link>
          <Link to="/partner" className="m-btn m-btn-outline">
            {hero.secondaryCta.label}
          </Link>
        </div>
      </div>
    </div>
  )
}

/* 2. Mobile Brand View */
function MobileBrandView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{brand.eyebrow}</div>
        <h2 className="m-page-title">{brand.title}</h2>
        <p className="m-lead">{brand.lead}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {brand.cards.map((card, idx) => (
          <div key={card.title} className="m-card">
            <div style={{ fontSize: '0.8rem', color: 'var(--gold)', fontWeight: 600 }}>0{idx + 1}</div>
            <h3>{card.title}</h3>
            <p>{card.text}</p>
          </div>
        ))}
      </div>

      <div className="m-card">
        <h3>故里文明印记</h3>
        <img
          src={images.brand.manor}
          alt="杜康庄园"
          style={{ width: '100%', borderRadius: '0.3rem', marginTop: '0.3rem' }}
        />
        <div style={{ display: 'grid', gap: '0.4rem', marginTop: '0.5rem' }}>
          {brand.timeline.map((item) => (
            <div
              key={item}
              style={{
                fontSize: '0.88rem',
                color: 'var(--ink-soft)',
                display: 'flex',
                alignItems: 'center',
                gap: '0.5rem',
              }}
            >
              <span
                style={{
                  width: '6px',
                  height: '6px',
                  borderRadius: '50%',
                  background: 'var(--brand)',
                  flexShrink: 0,
                }}
              />
              <span>{item}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="m-closing">{brand.closing}</div>

      <div className="m-deep-links">
        <div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>深度阅读</div>
        {brand.deepReads.map((dp) => (
          <Link key={dp.path} to={dp.path} className="m-deep-card">
            <strong>{dp.label} ›</strong>
            <span>{dp.blurb}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}

/* 3. Mobile Poetry View */
function MobilePoetryView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{poetry.eyebrow}</div>
        <h2 className="m-page-title">{poetry.title}</h2>
        <p className="m-lead">{poetry.lead}</p>
      </div>

      <div className="m-poem-box">
        <p className="m-poem-quote">“{poetry.mainPoem.quote}”</p>
        <div className="m-poem-source">—— {poetry.mainPoem.source}</div>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {poetry.poems.map((p) => (
          <div key={p.source} className="m-card">
            <p style={{ fontFamily: 'Noto Serif SC', fontSize: '1rem', color: 'var(--ink)' }}>“{p.quote}”</p>
            <div style={{ fontSize: '0.82rem', color: 'var(--gold)', textAlign: 'right' }}>—— {p.source}</div>
          </div>
        ))}
      </div>

      <div className="m-closing">{poetry.closing}</div>

      <div className="m-deep-links">
        <div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>诗酒专题</div>
        {poetry.deepReads.map((dp) => (
          <Link key={dp.path} to={dp.path} className="m-deep-card">
            <strong>{dp.label} ›</strong>
            <span>{dp.blurb}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}

/* 4. Mobile Qingxiang View */
function MobileQingxiangView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{qingxiang.eyebrow}</div>
        <h2 className="m-page-title">{qingxiang.title}</h2>
        <p className="m-lead">{qingxiang.lead}</p>
      </div>

      <div style={{ textAlign: 'center' }}>
        <img src={images.t30} alt="酒祖杜康清香 T30" style={{ width: '9rem', margin: '0 auto' }} />
        <div className="m-rings-row">
          {qingxiang.styleWords.map((word) => (
            <div key={word} className="m-ring-item">
              {word}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {qingxiang.positions.map((pos) => (
          <div key={pos.title} className="m-card">
            <h3>{pos.title}</h3>
            <p>{pos.text}</p>
          </div>
        ))}
      </div>

      <div className="m-card">
        <h3>品鉴仪式 · 抿咂呵</h3>
        <div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.3rem' }}>
          {qingxiang.tasting.map((t) => (
            <div key={t.title} style={{ fontSize: '0.88rem' }}>
              <strong style={{ color: 'var(--brand)' }}>{t.title}：</strong>
              <span style={{ color: 'var(--ink-soft)' }}>{t.text}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="m-closing">{qingxiang.mission}</div>

      <div className="m-deep-links">
        <div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>清香宝典专题</div>
        {qingxiang.deepReads.map((dp) => (
          <Link key={dp.path} to={dp.path} className="m-deep-card">
            <strong>{dp.label} ›</strong>
            <span>{dp.blurb}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}

/* 5. Mobile Haoke View */
function MobileHaokeView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{haoke.eyebrow}</div>
        <h2 className="m-page-title">{haoke.title}</h2>
        <p className="m-lead">{haoke.lead}</p>
      </div>

      <div className="m-card" style={{ background: 'rgba(166, 28, 32, 0.08)', borderColor: 'var(--brand)' }}>
        <h3 style={{ fontSize: '1.15rem' }}>核心商业机制</h3>
        <p style={{ fontWeight: 600, color: 'var(--brand)', fontSize: '1.02rem', lineHeight: 1.5 }}>
          {haoke.oneLiner}
        </p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {haoke.points.map((pt) => (
          <div key={pt.title} className="m-card">
            <h3>{pt.title}</h3>
            <p>{pt.text}</p>
          </div>
        ))}
      </div>

      <div className="m-closing">{haoke.closing}</div>
    </div>
  )
}

/* 6. Mobile System View */
function MobileSystemView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{system.eyebrow}</div>
        <h2 className="m-page-title">{system.title}</h2>
        <p className="m-lead">{system.lead}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {system.ends.map((end) => (
          <div key={end.title} className="m-card">
            <h3>{end.title}</h3>
            <p style={{ fontWeight: 500, color: 'var(--ink)' }}>{end.role}</p>
            <div
              style={{
                fontSize: '0.82rem',
                color: 'var(--gold)',
                paddingTop: '0.4rem',
                borderTop: '1px dashed rgba(196, 163, 90, 0.3)',
              }}
            >
              核心能力：{end.caps}
            </div>
          </div>
        ))}
      </div>

      <div className="m-card" style={{ textAlign: 'center', background: 'rgba(166, 28, 32, 0.05)' }}>
        <div style={{ fontSize: '0.82rem', color: 'var(--brand)', fontWeight: 600 }}>闭环链路</div>
        <p style={{ fontWeight: 500, color: 'var(--brand)' }}>{system.loop}</p>
      </div>

      <div className="m-closing">{system.closing}</div>
    </div>
  )
}

/* 7. Mobile Tech View */
function MobileTechView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{tech.eyebrow}</div>
        <h2 className="m-page-title">{tech.title}</h2>
        <p className="m-lead">{tech.lead}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {tech.points.map((pt) => (
          <div key={pt.title} className="m-card">
            <h3>{pt.title}</h3>
            <p>{pt.text}</p>
          </div>
        ))}
      </div>

      <div className="m-closing">{tech.claim}</div>

      <div style={{ textAlign: 'center', marginTop: '0.5rem' }}>
        <Link to={tech.cta.to} className="m-btn m-btn-primary">
          {tech.cta.label}
        </Link>
      </div>
    </div>
  )
}

/* 8. Mobile Subsidy View */
function MobileSubsidyView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{subsidy.eyebrow}</div>
        <h2 className="m-page-title">{subsidy.title}</h2>
        <div style={{ fontSize: '0.92rem', color: 'var(--gold)', fontWeight: 600, marginBottom: '0.5rem' }}>
          {subsidy.subtitle}
        </div>
        <p className="m-lead">{subsidy.lead}</p>
      </div>

      <div className="m-card" style={{ textAlign: 'center', padding: '1.5rem 1rem' }}>
        <div style={{ fontSize: '0.88rem', color: 'var(--gold)', fontWeight: 600 }}>专项补贴规模</div>
        <div className="m-big-num">{subsidy.number}</div>
        <p style={{ fontSize: '0.85rem' }}>{subsidy.numberNote}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {subsidy.points.map((pt) => (
          <div key={pt.title} className="m-card">
            <h3>{pt.title}</h3>
            <p>{pt.text}</p>
          </div>
        ))}
      </div>

      <div className="m-closing">{subsidy.closing}</div>
    </div>
  )
}

/* 9. Mobile Partner View */
function MobilePartnerView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{partner.eyebrow}</div>
        <h2 className="m-page-title">{partner.title}</h2>
        <p className="m-lead">{partner.lead}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {partner.points.map((pt) => (
          <div key={pt.title} className="m-card">
            <h3>{pt.title}</h3>
            <p>{pt.text}</p>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center', marginTop: '1rem' }}>
        <Link to={partner.primaryCta.to} className="m-btn m-btn-primary">
          {partner.primaryCta.label}
        </Link>
        <Link to={partner.secondaryCta.to} className="m-btn m-btn-outline">
          {partner.secondaryCta.label}
        </Link>
      </div>
    </div>
  )
}

/* 10. Mobile Tech Detail View */
function MobileTechDetailView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{techDetail.eyebrow}</div>
        <h2 className="m-page-title">{techDetail.title}</h2>
        <p className="m-lead">{techDetail.lead}</p>
      </div>

      <div style={{ display: 'grid', gap: '0.85rem' }}>
        {techDetail.ports.map((port) => (
          <div key={port.title} className="m-card">
            <h3>{port.title}</h3>
            <p>{port.text}</p>
          </div>
        ))}
      </div>

      <div className="m-closing">{techDetail.closing}</div>
    </div>
  )
}

/* 11. Mobile Contact View */
function MobileContactView() {
  return (
    <div className="m-view-container">
      <div>
        <div className="m-eyebrow">{contact.eyebrow}</div>
        <h2 className="m-page-title">{contact.title}</h2>
        <p className="m-lead">{contact.lead}</p>
      </div>

      <div className="m-card m-qr-card">
        <div className="m-qr-img">
          <img src={images.qr} alt="微信二维码" />
        </div>
        <div>
          <h3 style={{ fontSize: '1.25rem' }}>{contact.name}</h3>
          <div style={{ fontSize: '0.88rem', color: 'var(--gold)', margin: '0.2rem 0 0.5rem' }}>
            {contact.role}
          </div>
          <a
            href={`tel:${contact.phone}`}
            style={{
              display: 'inline-block',
              fontSize: '1.3rem',
              fontWeight: 700,
              color: 'var(--brand)',
              textDecoration: 'none',
            }}
          >
            📞 {contact.phone}
          </a>
          <p style={{ fontSize: '0.8rem', color: 'var(--ink-soft)', marginTop: '0.4rem' }}>
            {contact.wechatHint}
          </p>
        </div>
      </div>
    </div>
  )
}