import { Link } from 'react-router-dom'
import { Reveal } from '../components/Reveal'
import { hero, images, moduleEntries } from '../content/site'
import './Home.css'

export function HomePage() {
  return (
    <>
      <section className="hero">
        <div className="hero-bg" style={{ backgroundImage: `url(${images.qingxiang.interior})` }} />
        <div className="hero-mask" />
        <div className="container hero-grid">
          <div className="hero-copy">
            <p className="hero-brand serif reveal-base anim-rise is-in">{hero.brand}</p>
            <p className="hero-subbrand reveal-base anim-rise is-in" style={{ transitionDelay: '120ms' }}>
              {hero.subBrand}
            </p>
            <h1 className="hero-title serif reveal-base anim-rise is-in" style={{ transitionDelay: '220ms' }}>
              {hero.title}
            </h1>
            <p className="hero-subtitle reveal-base anim-rise is-in" style={{ transitionDelay: '320ms' }}>
              {hero.subtitle}
            </p>
            <div className="cta-row reveal-base anim-rise is-in" style={{ transitionDelay: '420ms' }}>
              <Link className="btn btn-primary" to={hero.primaryCta.to}>
                {hero.primaryCta.label}
              </Link>
              <Link className="btn btn-ghost" to={hero.secondaryCta.to}>
                {hero.secondaryCta.label}
              </Link>
            </div>
          </div>
          <div className="hero-visual hero-float reveal-base anim-zoom is-in">
            <img src={images.t30} alt="酒祖杜康清香系列 T30" />
          </div>
        </div>
      </section>

      <section className="page-section modules">
        <div className="container">
          <Reveal variant="anim-slide-left">
            <p className="eyebrow">探索杜康好客</p>
            <h2 className="page-title">十大篇章</h2>
            <p className="lead">从酒祖文脉到好客闭环，循定稿结构逐章走进。</p>
          </Reveal>
          <div className="module-rail">
            <div className="module-rail-track">
              {[0, 1].map((copy) => (
                <div key={copy} className="module-rail-copy" aria-hidden={copy === 1}>
                  {moduleEntries.map((item, index) => (
                    <Link
                      key={`${copy}-${item.to}`}
                      to={item.to}
                      className="module-rail-item"
                      tabIndex={copy === 1 ? -1 : undefined}
                      style={{ fontSize: `${1.05 + (index % 3) * 0.12}rem` }}
                    >
                      <span className="module-index">{String(index + 1).padStart(2, '0')}</span>
                      <strong className="serif">{item.label}</strong>
                      <span className="module-desc">{item.desc}</span>
                    </Link>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}