import { Reveal } from '../components/Reveal'
import { contact, images } from '../content/site'
import './Contact.css'

export function ContactPage() {
  return (
    <section className="contact-page page-section">
      <div className="container contact-ceremony">
        <Reveal variant="anim-rise">
          <p className="eyebrow">{contact.eyebrow}</p>
          <h1 className="page-title">{contact.title}</h1>
          <p className="lead contact-lead">{contact.lead}</p>
        </Reveal>

        <div className="contact-meet">
          <Reveal variant="anim-meet-left" className="contact-info">
            <p className="role">{contact.role}</p>
            <h2 className="serif name">{contact.name}</h2>
            <a className="phone" href={`tel:${contact.phone}`}>
              {contact.phone}
            </a>
          </Reveal>

          <Reveal variant="anim-meet-right" className="qr-block">
            <img src={images.qr} alt="项目负责人微信二维码" className="qr-image" />
            <p>{contact.wechatHint}</p>
          </Reveal>
        </div>
      </div>
    </section>
  )
}