import { useNavigate } from 'react-router-dom'
import './MemberService.css'
import logo from '../assets/logo.png'

const MemberService = () => {
  const navigate = useNavigate()

  const handlePersonalLogin = () => {
    navigate('/personal-login')
  }

  const handleCompanyLogin = () => {
    navigate('/company-login')
  }

  const handleMemberRules = () => {
    navigate('/member-rules')
  }

  return (
    <div className="member-service">
      <div className="header">
        <img src={logo} alt="金华市中医药学会" className="header-logo" />
        <h1 className="title">金华市中医药学会</h1>
      </div>

      <div className="content">
        <div className="login-card personal" onClick={handlePersonalLogin}>
          <div className="card-icon">
            <svg viewBox="0 0 1024 1024" width="64" height="64">
              <path d="M512 512c119.3 0 216-96.7 216-216S631.3 80 512 80 296 176.7 296 296s96.7 216 216 216zm0 64c-154.6 0-280 125.4-280 280h560c0-154.6-125.4-280-280-280z" fill="#8b2632"/>
            </svg>
          </div>
          <div className="card-content">
            <h2 className="card-title">个人会员登入</h2>
            <p className="card-desc">个人会员账号登录</p>
          </div>
          <div className="card-arrow">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" fill="#999"/>
            </svg>
          </div>
        </div>

        <div className="login-card company" onClick={handleCompanyLogin}>
          <div className="card-icon">
            <svg viewBox="0 0 1024 1024" width="64" height="64">
              <path d="M160 960V64h704v896H160zm64-64h576V128H224v768zm128-512h320v64H352v-64zm0 160h320v64H352v-64zm0-320h320v64H352v-64z" fill="#8b2632"/>
            </svg>
          </div>
          <div className="card-content">
            <h2 className="card-title">单位会员登入</h2>
            <p className="card-desc">单位会员账号登录</p>
          </div>
          <div className="card-arrow">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" fill="#999"/>
            </svg>
          </div>
        </div>

        {/* 会员管理办法 */}
        <div className="login-card rules" onClick={handleMemberRules}>
          <div className="card-icon">
            <svg viewBox="0 0 1024 1024" width="64" height="64">
              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-32 832H224V128h576v768zM304 320h416c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16H304c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16zm0 144h416c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16H304c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16zm0 144h232c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16H304c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16z" fill="#8b2632"/>
            </svg>
          </div>
          <div className="card-content">
            <h2 className="card-title">会员管理办法</h2>
            <p className="card-desc">查看学会会员管理详细规定</p>
          </div>
          <div className="card-arrow">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" fill="#999"/>
            </svg>
          </div>
        </div>

        {/* 学会联系方式 */}
        <div className="contact-card">
          <div className="contact-header">
            <svg viewBox="0 0 1024 1024" width="22" height="22">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm-32-588v288l224 134.4 32-52.8-192-115.2V296h-64z" fill="#8b2632"/>
            </svg>
            <span className="contact-title">学会联系方式</span>
          </div>
          <ul className="contact-list">
            <li className="contact-item">
              <span className="contact-label">学会名称</span>
              <span className="contact-value">金华市中医药学会</span>
            </li>
            <li className="contact-item">
              <span className="contact-label">联系地址</span>
              <span className="contact-value">金华市婺城区双溪西路439号</span>
            </li>
            <li className="contact-item">
              <span className="contact-label">联系电话</span>
              <a className="contact-value contact-phone" href="tel:0579-82136871">
                0579-82136871
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div className="footer">
        <p>© 2026 金华市中医药学会 版权所有</p>
      </div>
    </div>
  )
}

export default MemberService