import { Link } from 'react-router-dom'
import { Reveal } from '../components/Reveal'
import { brand, images } from '../content/site'
import './Brand.css'

export function BrandPage() {
  return (
    <section className="brand-page page-section">
      <div className="container">
        <Reveal variant="anim-slide-left">
          <p className="eyebrow">{brand.eyebrow}</p>
          <h1 className="page-title">{brand.title}</h1>
          <p className="lead">{brand.lead}</p>
        </Reveal>

        <div className="brand-layout">
          <div className="brand-timeline">
            <div className="brand-line" aria-hidden />
            {brand.cards.map((card, i) => (
              <Reveal key={card.title} variant="anim-slide-left" delayMs={i * 120} className="brand-item">
                <span className="brand-num serif">{String(i + 1).padStart(2, '0')}</span>
                <h2 className="brand-vtitle serif">{card.title}</h2>
                <p>{card.text}</p>
              </Reveal>
            ))}
          </div>

          <Reveal variant="anim-zoom" className="brand-aside">
            <div className="media-frame brand-photo">
              <img src={images.brand.landscape} alt="酒祖故里景致" loading="lazy" />
            </div>
            <div className="media-frame brand-photo secondary">
              <img src={images.brand.relic} alt="酒祖相关文物保护单位" loading="lazy" />
            </div>
          </Reveal>
        </div>

        <Reveal variant="anim-slide-right">
          <ol className="brand-era">
            {brand.timeline.map((item) => (
              <li key={item} className="serif">
                {item}
              </li>
            ))}
          </ol>
          <p className="closing">{brand.closing}</p>
        </Reveal>

        <div className="deep-read-rail">
          <Reveal variant="anim-rise">
            <h2 className="serif deep-read-title">深度阅读</h2>
            <p className="deep-read-lead">从典籍、故里、祠祀到酒厂，按篇章走进品牌传承全文脉络。</p>
          </Reveal>
          <div className="deep-read-grid">
            {brand.deepReads.map((item, i) => (
              <Reveal key={item.path} variant="anim-rise" delayMs={i * 50}>
                <Link to={item.path} className="deep-read-card">
                  <strong className="serif">{item.label}</strong>
                  <span>{item.blurb}</span>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}