mip-website/pages/landing.js

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import {
  FiActivity,
  FiArrowLeft,
  FiBriefcase,
  FiCamera,
  FiCheckCircle,
  FiClock,
  FiFileText,
  FiHeart,
  FiMapPin,
  FiPhone,
  FiPlay,
  FiShield
} from 'react-icons/fi'
import AppContainer from './appContainer'

const departments = [
  {
    title: 'اورژانس',
    description: 'پاسخ‌گویی سریع و فضای مجهز برای مراقبت‌های فوری',
    icon: '/resource/icons/hospital-c.png'
  },
  {
    title: 'درمانگاه تخصصی',
    description: 'دسترسی به خدمات تخصصی در محیطی آرام و استاندارد',
    icon: '/resource/icons/hospital.png'
  },
  {
    title: 'اتاق عمل',
    description: 'فضاهای جراحی طراحی‌شده براساس نیازهای روز درمان',
    icon: '/resource/icons/operating-room.png'
  },
  {
    title: 'مراقبت‌های ویژه',
    description: 'بخش‌های ICU، CCU و NICU با تجهیزات پایش تخصصی',
    icon: '/resource/icons/ICU.png'
  },
  {
    title: 'تصویربرداری',
    description: 'خدمات تصویربرداری و سونوگرافی در مجموعه بیمارستان',
    icon: '/resource/icons/x-rays.png'
  },
  {
    title: 'آزمایشگاه',
    description: 'فضای تخصصی آزمایشگاه و خدمات سلامت‌سنجی',
    icon: '/resource/icons/test-tubes.png'
  }
]

const quickLinks = [
  {
    title: 'تماس با بیمارستان',
    caption: 'پاسخ‌گویی و راهنمایی',
    href: 'tel:02153457000',
    icon: FiPhone,
    external: true
  },
  {
    title: 'بخش‌های درمانی',
    caption: 'آشنایی با خدمات',
    href: '/components/service',
    icon: FiActivity
  },
  {
    title: 'گالری بیمارستان',
    caption: 'مشاهده فضای مجموعه',
    href: '/Gallery',
    icon: FiCamera
  },
  {
    title: 'موقعیت و مسیر',
    caption: 'آدرس و راه‌های ارتباطی',
    href: '/page/contact-us',
    icon: FiMapPin
  }
]

const galleryImages = [
  {
    src: '/resource/images/gallery/IMG-20260910-WA0040.jpg',
    alt: 'فضای بستری بیمارستان مهر پرند',
    className: 'gallery-large'
  },
  {
    src: '/resource/images/gallery/IMG-20260910-WA0059.jpg',
    alt: 'راهروی درمانگاه بیمارستان مهر پرند',
    className: ''
  },
  {
    src: '/resource/images/gallery/IMG-20260910-WA0000.jpg',
    alt: 'ایستگاه پرستاری بیمارستان مهر پرند',
    className: ''
  }
]

const Landing = () => {
  const videoRef = React.useRef(null)
  const [videoStarted, setVideoStarted] = React.useState(false)

  const handlePlayVideo = async () => {
    if (!videoRef.current) return

    try {
      await videoRef.current.play()
      setVideoStarted(true)
    } catch {
      setVideoStarted(false)
    }
  }

  return (
    <AppContainer title='بیمارستان مهر پرند | همراه سلامت شما'>
      <style jsx>{`
        .landing {
          direction: rtl;
          overflow: hidden;
          color: #15323a;
          background: #f8fbfb;
        }

        .container {
          width: calc(100% - 2rem);
          max-width: 1180px;
          margin: 0 auto;
          min-width: 0;
        }

        .hero-content,
        .quick-link,
        .about-visual,
        .about-copy,
        .stat,
        .department-card,
        .value,
        .recruitment-intro,
        .recruitment-links,
        .contact-copy,
        .contact-actions {
          min-width: 0;
        }

        .hero {
          position: relative;
          min-height: 680px;
          display: flex;
          align-items: center;
          isolation: isolate;
          background: #0b3c45;
        }

        .hero-image,
        .hero-overlay {
          position: absolute;
          inset: 0;
        }

        .hero-image {
          z-index: -2;
        }

        .hero-image :global(img) {
          object-position: center;
        }

        .hero-overlay {
          z-index: -1;
          background:
            linear-gradient(90deg, rgba(7, 37, 44, 0.18) 0%, rgba(7, 37, 44, 0.5) 48%, rgba(7, 37, 44, 0.94) 100%),
            linear-gradient(0deg, rgba(7, 37, 44, 0.28), transparent 45%);
        }

        .hero-layout {
          display: grid;
          grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
          align-items: center;
          gap: clamp(2rem, 5vw, 4rem);
        }

        .hero-content {
          max-width: 650px;
          padding: 6rem 0 8rem;
          color: #fff;
        }

        .hero-video {
          min-width: 0;
          padding: 0.6rem;
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 1.4rem;
          background: rgba(255, 255, 255, 0.12);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
          backdrop-filter: blur(12px);
        }

        .hero-video-media {
          position: relative;
        }

        .hero-video video {
          display: block;
          width: 100%;
          aspect-ratio: 8 / 9;
          border-radius: 0.95rem;
          background: #092e35;
          object-fit: cover;
          object-position: center top;
        }

        .hero-video-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.8rem;
          width: 100%;
          padding: 1rem;
          border: 0;
          border-radius: 0.95rem;
          color: #fff;
          background: rgba(5, 35, 41, 0.48);
          font: inherit;
          cursor: pointer;
          transition: background 180ms ease;
        }

        .hero-video-overlay:hover {
          background: rgba(5, 35, 41, 0.36);
        }

        .hero-video-overlay:focus-visible {
          outline: 3px solid #8fe4dc;
          outline-offset: 3px;
        }

        .hero-play-icon {
          width: 76px;
          height: 76px;
          display: grid;
          place-items: center;
          border: 2px solid rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.18);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
          font-size: 2rem;
          backdrop-filter: blur(8px);
        }

        .hero-play-text {
          font-size: 0.95rem;
          font-weight: 700;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          margin-bottom: 1.25rem;
          padding: 0.5rem 0.85rem;
          border: 1px solid rgba(255, 255, 255, 0.28);
          border-radius: 999px;
          color: #d9ffff;
          background: rgba(255, 255, 255, 0.1);
          font-size: 0.82rem;
          backdrop-filter: blur(8px);
        }

        .eyebrow-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #69d2c9;
          box-shadow: 0 0 0 5px rgba(105, 210, 201, 0.17);
        }

        .hero h1 {
          max-width: 620px;
          margin: 0;
          font-size: clamp(2.2rem, 5vw, 4.35rem);
          font-weight: 800;
          line-height: 1.28;
          letter-spacing: -0.04em;
          text-shadow: 0 7px 28px rgba(0, 0, 0, 0.2);
        }

        .hero h1 span {
          color: #8fe4dc;
        }

        .hero-description {
          max-width: 580px;
          margin: 1.5rem 0 0;
          color: rgba(255, 255, 255, 0.84);
          font-size: 1.03rem;
          line-height: 2;
        }

        .hero-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 0.8rem;
          margin-top: 2rem;
        }

        .button {
          min-height: 52px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.65rem;
          padding: 0.75rem 1.2rem;
          border: 1px solid transparent;
          border-radius: 0.8rem;
          font-size: 0.92rem;
          font-weight: 700;
          transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
        }

        .button:hover {
          transform: translateY(-2px);
          text-decoration: none;
        }

        .button-primary {
          color: #07383d;
          background: #8fe4dc;
        }

        .button-primary:hover {
          color: #07383d;
          background: #b2f1eb;
        }

        .button-secondary {
          border-color: rgba(255, 255, 255, 0.32);
          color: #fff;
          background: rgba(255, 255, 255, 0.09);
          backdrop-filter: blur(8px);
        }

        .button-secondary:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.16);
        }

        .quick-access-wrap {
          position: relative;
          z-index: 2;
          margin-top: -74px;
        }

        .quick-access {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          overflow: hidden;
          border: 1px solid rgba(23, 113, 113, 0.1);
          border-radius: 1.15rem;
          background: #fff;
          box-shadow: 0 22px 60px rgba(28, 73, 78, 0.14);
        }

        .quick-link {
          display: flex;
          align-items: center;
          gap: 0.9rem;
          min-height: 145px;
          padding: 1.25rem;
          color: #15323a;
          border-left: 1px solid #e7eeee;
          transition: color 180ms ease, background 180ms ease;
        }

        .quick-link:last-child {
          border-left: 0;
        }

        .quick-link:hover {
          color: #126f70;
          text-decoration: none;
          background: #f0fbfa;
        }

        .quick-icon {
          width: 50px;
          height: 50px;
          flex: 0 0 50px;
          display: grid;
          place-items: center;
          border-radius: 0.85rem;
          color: #167a7b;
          background: #e2f6f4;
          font-size: 1.3rem;
        }

        .quick-copy strong,
        .quick-copy span {
          display: block;
        }

        .quick-copy {
          min-width: 0;
        }

        .quick-copy strong {
          margin-bottom: 0.3rem;
          font-size: 0.95rem;
        }

        .quick-copy span {
          color: #718387;
          font-size: 0.76rem;
        }

        .section {
          padding: 7rem 0;
        }

        .section-white {
          background: #fff;
        }

        .section-heading {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 2rem;
          margin-bottom: 2.5rem;
        }

        .section-label {
          display: block;
          margin-bottom: 0.65rem;
          color: #168182;
          font-size: 0.8rem;
          font-weight: 800;
        }

        .section-title {
          margin: 0;
          color: #14363c;
          font-size: clamp(1.65rem, 3vw, 2.55rem);
          font-weight: 800;
          line-height: 1.5;
        }

        .text-link {
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          flex: 0 0 auto;
          color: #167a7b;
          font-size: 0.88rem;
          font-weight: 700;
        }

        .text-link:hover {
          color: #0d5556;
          text-decoration: none;
        }

        .about-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
          align-items: center;
          gap: clamp(2rem, 6vw, 5.5rem);
        }

        .about-visual {
          position: relative;
          min-height: 520px;
        }

        .about-image {
          position: absolute;
          inset: 0 0 2.2rem 2.2rem;
          overflow: hidden;
          border-radius: 1.5rem;
          box-shadow: 0 22px 55px rgba(23, 75, 80, 0.16);
        }

        .about-image :global(img) {
          object-position: center;
        }

        .about-badge {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 180px;
          min-height: 155px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 1.35rem;
          border: 8px solid #fff;
          border-radius: 1.25rem;
          color: #fff;
          background: #147778;
          box-shadow: 0 16px 38px rgba(20, 119, 120, 0.24);
        }

        .about-badge strong {
          font-size: 2rem;
          line-height: 1.2;
        }

        .about-badge span {
          margin-top: 0.4rem;
          font-size: 0.8rem;
          line-height: 1.7;
        }

        .about-copy p {
          margin: 1.3rem 0 1.8rem;
          color: #64777b;
          font-size: 0.94rem;
          line-height: 2.15;
        }

        .about-points {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0.9rem;
          margin-bottom: 2rem;
        }

        .about-point {
          display: flex;
          align-items: center;
          gap: 0.55rem;
          color: #38555a;
          font-size: 0.84rem;
          font-weight: 700;
        }

        .about-point :global(svg) {
          flex: 0 0 auto;
          color: #21a196;
        }

        .stats {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 1rem;
          margin-top: 5rem;
        }

        .stat {
          padding: 1.55rem;
          border: 1px solid #e3eeee;
          border-radius: 1rem;
          background: #f8fbfb;
          text-align: center;
        }

        .stat strong,
        .stat span {
          display: block;
        }

        .stat strong {
          color: #147778;
          font-size: clamp(1.55rem, 3vw, 2.25rem);
          font-weight: 800;
        }

        .stat span {
          margin-top: 0.3rem;
          color: #6d8185;
          font-size: 0.78rem;
        }

        .departments-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1rem;
        }

        .department-card {
          min-height: 230px;
          padding: 1.65rem;
          border: 1px solid #e3eeee;
          border-radius: 1.1rem;
          background: #fff;
          transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
        }

        .department-card:hover {
          transform: translateY(-5px);
          border-color: #bfe7e3;
          box-shadow: 0 18px 38px rgba(25, 82, 87, 0.1);
        }

        .department-icon {
          width: 60px;
          height: 60px;
          display: grid;
          place-items: center;
          margin-bottom: 1.25rem;
          border-radius: 1rem;
          background: #eaf8f6;
        }

        .department-icon img {
          width: 34px;
          height: 34px;
          object-fit: contain;
        }

        .department-card h3 {
          margin: 0 0 0.65rem;
          color: #183b41;
          font-size: 1.02rem;
          font-weight: 800;
        }

        .department-card p {
          margin: 0;
          color: #76878a;
          font-size: 0.82rem;
          line-height: 1.9;
        }

        .gallery-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
          grid-template-rows: repeat(2, 220px);
          gap: 1rem;
        }

        .gallery-item {
          position: relative;
          overflow: hidden;
          border-radius: 1.15rem;
          background: #dce7e7;
        }

        .gallery-large {
          grid-row: 1 / 3;
        }

        .gallery-item :global(img) {
          transition: transform 350ms ease;
        }

        .gallery-item:hover :global(img) {
          transform: scale(1.035);
        }

        .values {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1rem;
          margin-top: 1rem;
        }

        .value {
          display: flex;
          gap: 1rem;
          padding: 1.45rem;
          border-radius: 1rem;
          color: #dceeed;
          background: #103f47;
        }

        .value-icon {
          width: 44px;
          height: 44px;
          flex: 0 0 44px;
          display: grid;
          place-items: center;
          border-radius: 0.8rem;
          color: #8fe4dc;
          background: rgba(143, 228, 220, 0.1);
          font-size: 1.25rem;
        }

        .value h3 {
          margin: 0 0 0.35rem;
          color: #fff;
          font-size: 0.92rem;
          font-weight: 800;
        }

        .value p {
          margin: 0;
          color: #b6cecf;
          font-size: 0.75rem;
          line-height: 1.8;
        }

        .recruitment-panel {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          align-items: center;
          gap: clamp(2rem, 5vw, 4rem);
          padding: clamp(1.75rem, 5vw, 3.5rem);
          border: 1px solid #dcebea;
          border-radius: 1.5rem;
          background: linear-gradient(125deg, #fff, #f1faf9);
          box-shadow: 0 18px 45px rgba(18, 87, 90, 0.07);
        }

        .recruitment-intro p {
          max-width: 520px;
          margin: 1rem 0 0;
          color: #64777b;
          font-size: 0.94rem;
          line-height: 2;
        }

        .recruitment-links {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 0.9rem;
        }

        .recruitment-link {
          display: flex;
          align-items: center;
          gap: 1rem;
          min-width: 0;
          min-height: 96px;
          padding: 1rem 1.2rem;
          border: 1px solid #e0eeec;
          border-radius: 1rem;
          color: #15323a;
          background: #fff;
          transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
        }

        .recruitment-link:hover {
          border-color: #9fdcd5;
          color: #15323a;
          box-shadow: 0 10px 28px rgba(18, 87, 90, 0.1);
          text-decoration: none;
          transform: translateY(-2px);
        }

        .recruitment-icon {
          width: 52px;
          height: 52px;
          flex: 0 0 52px;
          display: grid;
          place-items: center;
          border-radius: 0.85rem;
          color: #147778;
          background: #e6f7f4;
          font-size: 1.4rem;
        }

        .recruitment-copy strong,
        .recruitment-copy span {
          display: block;
        }

        .recruitment-copy {
          min-width: 0;
        }

        .recruitment-copy strong {
          margin-bottom: 0.25rem;
          font-size: 0.95rem;
        }

        .recruitment-copy span {
          color: #718387;
          font-size: 0.78rem;
          line-height: 1.7;
        }

        .recruitment-arrow {
          flex: 0 0 auto;
          margin-right: auto;
          color: #147778;
        }

        .contact-card {
          position: relative;
          display: grid;
          grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
          align-items: center;
          gap: 2rem;
          overflow: hidden;
          padding: clamp(2rem, 6vw, 4.5rem);
          border-radius: 1.5rem;
          color: #fff;
          background: #147778;
        }

        .contact-card::before,
        .contact-card::after {
          content: '';
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.06);
        }

        .contact-card::before {
          width: 280px;
          height: 280px;
          top: -150px;
          right: -90px;
        }

        .contact-card::after {
          width: 200px;
          height: 200px;
          bottom: -120px;
          left: 15%;
        }

        .contact-copy,
        .contact-actions {
          position: relative;
          z-index: 1;
        }

        .contact-card h2 {
          margin: 0;
          font-size: clamp(1.5rem, 3vw, 2.35rem);
          font-weight: 800;
          line-height: 1.55;
        }

        .contact-card p {
          max-width: 650px;
          margin: 0.8rem 0 0;
          color: rgba(255, 255, 255, 0.78);
          font-size: 0.88rem;
          line-height: 2;
        }

        .contact-actions {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }

        .contact-actions .button {
          width: 100%;
        }

        @media (max-width: 992px) {
          .hero {
            min-height: auto;
          }

          .hero-layout {
            grid-template-columns: minmax(0, 1fr);
            gap: 2rem;
          }

          .hero-content {
            padding: 4.5rem 0 0;
          }

          .hero-video {
            width: 100%;
            max-width: 520px;
            justify-self: center;
            margin-bottom: 5rem;
          }

          .quick-access {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .quick-link:nth-child(2) {
            border-left: 0;
          }

          .quick-link:nth-child(-n + 2) {
            border-bottom: 1px solid #e7eeee;
          }

          .about-grid {
            grid-template-columns: minmax(0, 1fr);
          }

          .recruitment-panel {
            grid-template-columns: minmax(0, 1fr);
          }

          .about-visual {
            min-height: 480px;
          }

          .departments-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .contact-card {
            grid-template-columns: minmax(0, 1fr);
          }

          .contact-actions {
            max-width: 330px;
          }
        }

        @media (max-width: 700px) {
          .container {
            width: calc(100% - 1.25rem);
          }

          .hero {
            align-items: flex-end;
          }

          .hero-overlay {
            background: linear-gradient(0deg, rgba(7, 37, 44, 0.98) 8%, rgba(7, 37, 44, 0.76) 58%, rgba(7, 37, 44, 0.18) 100%);
          }

          .hero-content {
            padding: 4.5rem 0 0;
          }

          .hero-video {
            max-width: 440px;
            margin-bottom: 4.5rem;
          }

          .hero-video video {
            aspect-ratio: 1 / 1;
          }

          .hero-play-icon {
            width: 64px;
            height: 64px;
          }

          .eyebrow {
            max-width: 100%;
            font-size: 0.75rem;
            line-height: 1.6;
          }

          .hero h1 {
            font-size: clamp(1.85rem, 8vw, 2.35rem);
          }

          .hero-description {
            font-size: 0.9rem;
          }

          .hero-actions,
          .hero-actions .button {
            width: 100%;
          }

          .hero-actions {
            margin-top: 1.5rem;
          }

          .quick-access-wrap {
            margin-top: -45px;
          }

          .quick-access {
            grid-template-columns: minmax(0, 1fr);
          }

          .quick-link {
            min-height: 92px;
            padding: 1rem;
            border-left: 0;
            border-bottom: 1px solid #e7eeee;
          }

          .quick-link:last-child {
            border-bottom: 0;
          }

          .section {
            padding: 3.5rem 0;
          }

          .section-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.8rem;
            margin-bottom: 1.75rem;
          }

          .about-visual {
            min-height: 320px;
          }

          .about-image {
            inset: 0 0 1.2rem 0.8rem;
          }

          .about-badge {
            width: 135px;
            min-height: 110px;
            padding: 0.85rem;
            border-width: 6px;
          }

          .about-badge strong {
            font-size: 1.25rem;
          }

          .about-badge span {
            font-size: 0.7rem;
          }

          .about-points,
          .departments-grid,
          .values {
            grid-template-columns: minmax(0, 1fr);
          }

          .stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.7rem;
            margin-top: 2.5rem;
          }

          .stat {
            padding: 1rem 0.5rem;
          }

          .stat strong {
            font-size: clamp(1.2rem, 6vw, 1.65rem);
          }

          .gallery-grid {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: repeat(3, 230px);
          }

          .gallery-large {
            grid-row: auto;
          }

          .contact-card {
            border-radius: 1rem;
          }

          .recruitment-panel {
            padding: 1.25rem;
            border-radius: 1rem;
          }

          .recruitment-link {
            gap: 0.7rem;
            padding: 0.85rem;
          }

          .recruitment-icon {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
          }

          .contact-card {
            padding: 1.5rem;
          }

          .contact-actions {
            max-width: none;
          }
        }
      `}</style>

      <main className='landing'>
        <section className='hero'>
          <div className='hero-image'>
            <Image
              src='/resource/images/gallery/IMG-20260910-WA0040.jpg'
              alt='بخش بستری بیمارستان مهر پرند'
              layout='fill'
              objectFit='cover'
              priority
            />
          </div>
          <div className='hero-overlay' />
          <div className='container'>
            <div className='hero-layout'>
              <div className='hero-content'>
                <div className='eyebrow'>
                  <span className='eyebrow-dot' />
                  بیمارستان تخصصی در قلب شهر پرند
                </div>
                <h1>
                  همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
                </h1>
                <p className='hero-description'>
                  بیمارستان مهر پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
                  آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
                </p>
                <div className='hero-actions'>
                  <a className='button button-primary' href='tel:02153457000'>
                    <FiPhone /> تماس با بیمارستان
                  </a>
                  <Link href='/page/about'>
                    <a className='button button-secondary'>
                      درباره بیمارستان <FiArrowLeft />
                    </a>
                  </Link>
                </div>
              </div>
              <div className='hero-video'>
                <div className='hero-video-media'>
                  <video
                    ref={videoRef}
                    controls
                    preload='metadata'
                    playsInline
                    aria-label='ویدیوی بیمارستان مهر پرند'
                    onPlay={() => setVideoStarted(true)}
                  >
                    <source src='/resource/video/Video-7535.mp4' type='video/mp4' />
                    مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
                  </video>
                  {!videoStarted && (
                    <button className='hero-video-overlay' type='button' onClick={handlePlayVideo}>
                      <span className='hero-play-icon' aria-hidden='true'><FiPlay /></span>
                      <span className='hero-play-text'>پخش ویدیو</span>
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className='quick-access-wrap'>
          <div className='container'>
            <nav className='quick-access' aria-label='دسترسی سریع'>
              {quickLinks.map(item => {
                const Icon = item.icon
                const content = (
                  <>
                    <span className='quick-icon'>
                      <Icon />
                    </span>
                    <span className='quick-copy'>
                      <strong>{item.title}</strong>
                      <span>{item.caption}</span>
                    </span>
                  </>
                )

                return item.external ? (
                  <a className='quick-link' href={item.href} key={item.title}>
                    {content}
                  </a>
                ) : (
                  <Link href={item.href} key={item.title}>
                    <a className='quick-link'>{content}</a>
                  </Link>
                )
              })}
            </nav>
          </div>
        </div>

        <section className='section section-white'>
          <div className='container'>
            <div className='about-grid'>
              <div className='about-visual'>
                <div className='about-image'>
                  <Image
                    src='/resource/images/gallery/IMG-20260910-WA0000.jpg'
                    alt='فضای داخلی بیمارستان مهر پرند'
                    layout='fill'
                    objectFit='cover'
                  />
                </div>
                <div className='about-badge'>
                  <strong>۱۵۰  تخت</strong>
                  <span>ظرفیت فاز نخست بیمارستان</span>
                </div>
              </div>

              <div className='about-copy'>
                <span className='section-label'>درباره مهر ایرانیان</span>
                <h2 className='section-title'>زیرساختی مدرن برای پاسخ به نیاز درمانی منطقه</h2>
                <p>
                  بیمارستان تخصصی مهر ایرانیان در یکی از بهترین موقعیت‌های شهر پرند و در مجاورت بزرگ‌ترین فرودگاه
                  کشور قرار دارد. این مجموعه با فضای درمانی گسترده، بخش‌های تخصصی و فوق‌تخصصی و دسترسی مناسب، برای
                  خدمت‌رسانی به ساکنان پرند، رباط‌کریم، نسیم‌شهر و شهرهای پیرامون طراحی شده است.
                </p>
                <div className='about-points'>
                  <div className='about-point'>
                    <FiCheckCircle /> طراحی بیمارمحور
                  </div>
                  <div className='about-point'>
                    <FiCheckCircle /> تجهیزات تخصصی
                  </div>
                  <div className='about-point'>
                    <FiCheckCircle /> دسترسی شهری مناسب
                  </div>
                  <div className='about-point'>
                    <FiCheckCircle /> پوشش خدمات متنوع
                  </div>
                </div>
                <Link href='/page/about'>
                  <a className='text-link'>
                    داستان بیمارستان را بخوانید <FiArrowLeft />
                  </a>
                </Link>
              </div>
            </div>

            <div className='stats'>
              <div className='stat'>
                <strong>۲۱,۰۰۰</strong>
                <span>مترمربع فضای درمانی</span>
              </div>
              <div className='stat'>
                <strong>۴,۰۰۰</strong>
                <span>مترمربع پارکینگ طبقاتی</span>
              </div>
              <div className='stat'>
                <strong>۹۶</strong>
                <span>تخت در فاز نخست</span>
              </div>
              <div className='stat'>
                <strong>۱۴+</strong>
                <span>بخش درمانی و تخصصی</span>
              </div>
            </div>
          </div>
        </section>

        <section className='section'>
          <div className='container'>
            <div className='section-heading'>
              <div>
                <span className='section-label'>خدمات درمانی</span>
                <h2 className='section-title'>مراقبت تخصصی، در یک مجموعه یکپارچه</h2>
              </div>
              <Link href='/components/service'>
                <a className='text-link'>
                  مشاهده همه بخش‌ها <FiArrowLeft />
                </a>
              </Link>
            </div>

            <div className='departments-grid'>
              {departments.map(department => (
                <article className='department-card' key={department.title}>
                  <div className='department-icon'>
                    <img src={department.icon} alt='' aria-hidden='true' />
                  </div>
                  <h3>{department.title}</h3>
                  <p>{department.description}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className='section section-white'>
          <div className='container'>
            <div className='section-heading'>
              <div>
                <span className='section-label'>فضای بیمارستان</span>
                <h2 className='section-title'>محیطی آرام، روشن و مجهز برای درمان</h2>
              </div>
              <Link href='/Gallery'>
                <a className='text-link'>
                  مشاهده گالری کامل <FiArrowLeft />
                </a>
              </Link>
            </div>

            <div className='gallery-grid'>
              {galleryImages.map(image => (
                <div className={`gallery-item ${image.className}`} key={image.src}>
                  <Image src={image.src} alt={image.alt} layout='fill' objectFit='cover' />
                </div>
              ))}
            </div>

            <div className='values'>
              <div className='value'>
                <span className='value-icon'>
                  <FiHeart />
                </span>
                <div>
                  <h3>مراقبت بیمارمحور</h3>
                  <p>طراحی مسیر درمان با توجه به آرامش و نیازهای بیمار و همراهان</p>
                </div>
              </div>
              <div className='value'>
                <span className='value-icon'>
                  <FiShield />
                </span>
                <div>
                  <h3>کیفیت و ایمنی</h3>
                  <p>زیرساخت‌های درمانی مدرن برای ارائه خدمات ایمن و قابل‌اعتماد</p>
                </div>
              </div>
              <div className='value'>
                <span className='value-icon'>
                  <FiClock />
                </span>
                <div>
                  <h3>دسترسی بهتر</h3>
                  <p>موقعیت مناسب در پرند و دسترسی آسان برای شهرهای جنوب‌غرب تهران</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className='section' aria-labelledby='recruitment-title'>
          <div className='container'>
            <div className='recruitment-panel'>
              <div className='recruitment-intro'>
                <span className='section-label'>استخدام و همکاری</span>
                <h2 className='section-title' id='recruitment-title'>به تیم بیمارستان مهر پرند بپیوندید</h2>
                <p>فرصت‌های شغلی بیمارستان را ببینید، درخواست همکاری ثبت کنید و وضعیت درخواست خود را پیگیری کنید.</p>
              </div>
              <div className='recruitment-links'>
                <Link href='/recruitment'>
                  <a className='recruitment-link'>
                    <span className='recruitment-icon'><FiBriefcase /></span>
                    <span className='recruitment-copy'>
                      <strong>فرصت‌های شغلی</strong>
                      <span>مشاهده موقعیت‌ها و ثبت درخواست</span>
                    </span>
                    <span className='recruitment-arrow'><FiArrowLeft /></span>
                  </a>
                </Link>
                <Link href='/recruitment/inquiry'>
                  <a className='recruitment-link'>
                    <span className='recruitment-icon'><FiFileText /></span>
                    <span className='recruitment-copy'>
                      <strong>پیگیری درخواست</strong>
                      <span>استعلام وضعیت درخواست ثبت‌شده</span>
                    </span>
                    <span className='recruitment-arrow'><FiArrowLeft /></span>
                  </a>
                </Link>
              </div>
            </div>
          </div>
        </section>

        <section className='section'>
          <div className='container'>
            <div className='contact-card'>
              <div className='contact-copy'>
                <h2>برای راهنمایی و ارتباط با بیمارستان کنار شما هستیم</h2>
                <p>
                  تهران، شهر جدید پرند، بلوار شهید قاسم سلیمانی، انتهای فاز ۵، نبش بلوار رسول اکرم (ص)
                </p>
              </div>
              <div className='contact-actions'>
                <a className='button button-primary' href='tel:02153457000'>
                  <FiPhone /> ۰۲۱-۵۳۴۵۷۰۰۰
                </a>
                <Link href='/page/contact-us'>
                  <a className='button button-secondary'>
                    <FiMapPin /> مشاهده اطلاعات تماس
                  </a>
                </Link>
              </div>
            </div>
          </div>
        </section>
      </main>
    </AppContainer>
  )
}

export default Landing