draletaha/DrSousan.Api/Pages/Index.cshtml

@page
@model IndexModel
@{
    var siteBaseUrl = Environment.GetEnvironmentVariable("SITE_BASE_URL")?.TrimEnd('/') ?? "https://draletaha.ir";
    var h = Model.Hero;
    var a = Model.About;
    var c = Model.Contact;
    var siteName   = h.GetValueOrDefault("name",     "دکتر سوسن آل‌طه");
    var heroImg    = h.GetValueOrDefault("image",    "");
    var badgeHidden = h.GetValueOrDefault("badge_hidden", "") == "true";
    var badgeTitle  = h.TryGetValue("badge_title",    out var _bt) && !string.IsNullOrWhiteSpace(_bt) ? _bt : "متخصص پوست و زیبایی";
    var badgeSub    = h.TryGetValue("badge_subtitle", out var _bs) && !string.IsNullOrWhiteSpace(_bs) ? _bs : "فارغ‌التحصیل دانشگاه ایران";
    var aboutImg   = a.GetValueOrDefault("image",    "");
    var yearsExp   = a.GetValueOrDefault("years_exp","۱۰+");
    var ig = c.GetValueOrDefault("instagram","");
    var wa = c.GetValueOrDefault("whatsapp","");
    var tg = c.GetValueOrDefault("telegram","");
    var phone = c.GetValueOrDefault("phone","");
    var email = c.GetValueOrDefault("email","");
    var address = c.GetValueOrDefault("address","");

    // Clean, keyword-rich meta description (trim stray whitespace/newlines from the editable subtitle)
    var rawSubtitle = (h.GetValueOrDefault("subtitle","") ?? "").Replace("\n"," ").Replace("\r"," ").Trim();
    while (rawSubtitle.Contains("  ")) rawSubtitle = rawSubtitle.Replace("  "," ");
    var metaDesc = string.IsNullOrWhiteSpace(rawSubtitle)
        ? "دکتر سوسن آل‌طه، متخصص زیبایی پوست در تهران. خدمات بوتاکس، فیلر، لیزر موهای زائد، مزوتراپی و پاکسازی پوست با تمرکز بر نتایج طبیعی. رزرو نوبت و مشاوره."
        : rawSubtitle;
    if (metaDesc.Length > 160) metaDesc = metaDesc.Substring(0, 157).TrimEnd() + "…";

    var absHero = string.IsNullOrEmpty(heroImg) ? "" : (heroImg.StartsWith("http") ? heroImg : siteBaseUrl + heroImg);

    // Aggregate rating from active testimonials (for rich results)
    var ratedReviews = Model.Testimonials.Where(t => t.Rating > 0).ToList();
    var reviewCount  = ratedReviews.Count;
    var avgRating    = reviewCount > 0 ? Math.Round(ratedReviews.Average(t => t.Rating), 1) : 0d;

    // Social profiles for schema sameAs
    var socials = new[] { ig, tg }.Where(s => !string.IsNullOrEmpty(s) && s.StartsWith("http")).ToList();
}

@section Head {
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@metaDesc" />
    <meta name="keywords" content="دکتر پوست تهران,متخصص پوست تهران,بوتاکس,لیزر موهای زائد,فیلر,مزوتراپی,پاکسازی پوست,جوانسازی پوست,دکتر سوسن آل‌طه" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1" />
    <meta name="author" content="@siteName" />
    <meta name="theme-color" content="#B8955A" />
    <link rel="canonical" href="@(siteBaseUrl + "/")" />

    <!-- Open Graph -->
    <meta property="og:type"        content="website" />
    <meta property="og:site_name"   content="@siteName" />
    <meta property="og:title"       content="@ViewData["Title"]" />
    <meta property="og:description" content="@metaDesc" />
    <meta property="og:url"         content="@(siteBaseUrl + "/")" />
    <meta property="og:locale"      content="fa_IR" />
    @if (!string.IsNullOrEmpty(absHero))
    {
        <meta property="og:image"        content="@absHero" />
        <meta property="og:image:width"  content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:image:alt"    content="@siteName" />
    }

    <!-- Twitter -->
    <meta name="twitter:card"        content="summary_large_image" />
    <meta name="twitter:title"       content="@ViewData["Title"]" />
    <meta name="twitter:description" content="@metaDesc" />
    @if (!string.IsNullOrEmpty(absHero))
    {
        <meta name="twitter:image" content="@absHero" />
    }

    <!-- Structured data: medical practice -->
    <script type="application/ld+json">
    {
      "@@context":"https://schema.org",
      "@@type":["MedicalBusiness","LocalBusiness"],
      "@@id":"@(siteBaseUrl)/#business",
      "name":"@siteName",
      "description":"@metaDesc",
      "url":"@(siteBaseUrl)",
      "telephone":"@phone",
      "priceRange":"$$",
      "image":"@(string.IsNullOrEmpty(absHero) ? siteBaseUrl : absHero)",
      "address":{"@@type":"PostalAddress","addressLocality":"تهران","addressRegion":"تهران","addressCountry":"IR","streetAddress":"@address"},
      "areaServed":{"@@type":"City","name":"تهران"},
      "openingHours":"@c.GetValueOrDefault("hours","")",
      "medicalSpecialty":"Dermatology"@(socials.Any() ? "," : "")
      @if (socials.Any())
      {
          @Html.Raw("\"sameAs\":[" + string.Join(",", socials.Select(s => "\"" + s + "\"")) + "]")
      }@(reviewCount > 0 ? "," : "")
      @if (reviewCount > 0)
      {
          @Html.Raw("\"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingValue\":\"" + avgRating + "\",\"reviewCount\":\"" + reviewCount + "\",\"bestRating\":\"5\"}")
      }
    }
    </script>

    <!-- Structured data: FAQ (rich results) -->
    @if (Model.Faqs.Any())
    {
        <script type="application/ld+json">
        {
          "@@context":"https://schema.org",
          "@@type":"FAQPage",
          "mainEntity":[
            @Html.Raw(string.Join(",", Model.Faqs.Select(f =>
                "{\"@type\":\"Question\",\"name\":" + System.Text.Json.JsonSerializer.Serialize(f.Question) +
                ",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":" + System.Text.Json.JsonSerializer.Serialize(f.Answer) + "}}")))
          ]
        }
        </script>
    }
    <style>
      /* ─── Hero ─────────────────────────────────────────────────── */
      #hero { min-height:100svh; display:flex; align-items:center; padding:100px 0 3rem; position:relative; overflow:hidden; }
      #hero::before { content:''; position:absolute; top:-120px; left:-120px; width:600px; height:600px; background:radial-gradient(circle, rgba(184,149,90,0.10) 0%, transparent 70%); pointer-events:none; }
      #hero::after  { content:''; position:absolute; bottom:-80px; right:-80px; width:500px; height:500px; background:radial-gradient(circle, rgba(184,149,90,0.07) 0%, transparent 70%); pointer-events:none; }
      .hero-inner { max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
      .hero-text { animation: fadeUp 0.9s ease both; }
      .hero-tag { display:inline-block; background:var(--gold-pale); color:var(--gold); font-size:0.78rem; font-weight:500; padding:0.35rem 1rem; border-radius:50px; margin-bottom:1.4rem; letter-spacing:0.05em; }
      .hero-name { font-size:clamp(1.6rem,3.5vw,3.2rem); font-weight:700; line-height:1.3; color:var(--dark); margin-bottom:0.6rem; white-space:nowrap; }
      .hero-name span { color:var(--gold); }
      .hero-subtitle { font-size:1.05rem; color:var(--mid); font-weight:400; margin-bottom:1.8rem; line-height:1.9; }
      .hero-stats { display:flex; gap:2.5rem; margin-bottom:2.5rem; }
      .stat-item { text-align:center; }
      .stat-number { font-size:2rem; font-weight:700; color:var(--gold); display:block; line-height:1; }
      .stat-label  { font-size:0.78rem; color:var(--light); margin-top:0.3rem; }
      .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
      .hero-image { position:relative; animation:fadeUp 0.9s 0.2s ease both; }
      .hero-image-frame { width:100%; aspect-ratio:4/5; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; background:linear-gradient(145deg, var(--gold-pale) 0%, #EFE3CC 100%); position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(184,149,90,0.2); }
      .hero-image-frame img { width:100%; height:100%; object-fit:cover; }
      .hero-image-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:var(--gold); }
      .hero-image-placeholder svg { width:80px; height:80px; opacity:0.5; }
      .hero-image-placeholder p { font-size:0.85rem; opacity:0.6; }
      .hero-badge { position:absolute; bottom:2rem; left:-2rem; background:var(--white); border-radius:16px; padding:1rem 1.4rem; box-shadow:0 10px 40px rgba(0,0,0,0.1); display:flex; align-items:center; gap:0.8rem; animation:float 3s ease-in-out infinite; }
      .badge-icon { width:42px; height:42px; background:var(--gold-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
      .badge-icon svg { width:20px; height:20px; color:var(--gold); }
      .badge-text { font-size:0.82rem; line-height:1.4; }
      .badge-text strong { color:var(--gold); display:block; font-size:0.9rem; }
      /* ─── About ─────────────────────────────────────────────────── */
      #about { background:var(--white); }
      .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
      .about-image-wrap { position:relative; }
      .about-img-box { width:100%; aspect-ratio:3/4; border-radius:20px; background:linear-gradient(160deg, var(--gold-pale) 0%, #EDE0CA 100%); overflow:hidden; position:relative; }
      .about-img-box img { width:100%; height:100%; object-fit:cover; }
      .about-img-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:var(--gold); opacity:0.5; }
      .about-img-placeholder svg { width:60px; height:60px; }
      .about-accent-box { position:absolute; bottom:-2rem; right:-2rem; background:var(--gold); color:var(--white); border-radius:16px; padding:1.5rem 2rem; text-align:center; }
      .about-accent-box .big   { font-size:2.2rem; font-weight:700; display:block; }
      .about-accent-box .small { font-size:0.82rem; opacity:0.85; }
      .credential-list { list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
      .credential-list li { display:flex; align-items:flex-start; gap:0.85rem; font-size:0.95rem; color:var(--mid); line-height:1.6; }
      .cred-icon { width:28px; height:28px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.1rem; }
      .cred-icon svg { width:13px; height:13px; color:var(--gold); }
      /* ─── Services ─────────────────────────────────────────────── */
      #services { background:var(--section-bg); }
      .services-header { text-align:center; margin-bottom:3.5rem; }
      .services-header .divider { margin:1.2rem auto 0; }
      .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
      .service-card { background:var(--white); border-radius:20px; padding:2rem; border:1px solid var(--border); transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; position:relative; overflow:hidden; }
      .service-card::before { content:''; position:absolute; top:0; right:0; width:80px; height:80px; background:radial-gradient(circle at top right, rgba(184,149,90,0.08), transparent 70%); }
      .service-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(184,149,90,0.15); border-color:var(--gold-pale); }
      .service-icon { width:56px; height:56px; background:var(--gold-pale); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; }
      .service-icon svg { width:26px; height:26px; color:var(--gold); }
      .service-title { font-size:1.05rem; font-weight:600; color:var(--dark); margin-bottom:0.6rem; }
      .service-desc  { font-size:0.88rem; color:var(--mid); line-height:1.8; }
      /* ─── Service Before/After ────────────────────────────────── */
      .svc-ba { margin-top:1.2rem; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; user-select:none; }
      .svc-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 0.45s ease; }
      .svc-ba .ba-after { opacity:0; }
      .svc-ba.show-after .ba-before { opacity:0; }
      .svc-ba.show-after .ba-after  { opacity:1; }
      .svc-ba-btns { position:absolute; bottom:0; left:0; right:0; display:flex; z-index:2; }
      .svc-ba-btn  { flex:1; padding:0.45rem 0; text-align:center; font-size:0.78rem; font-weight:700; font-family:'Vazirmatn',sans-serif; border:none; cursor:pointer; transition:all 0.25s; background:rgba(0,0,0,0.42); color:rgba(255,255,255,0.75); letter-spacing:0.03em; }
      .svc-ba-btn.active { background:var(--gold); color:#fff; }
      .svc-ba-only { margin-top:1.2rem; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3; }
      .svc-ba-only img { width:100%; height:100%; object-fit:cover; display:block; }
      .svc-ba-only .ba-solo-label { position:absolute; bottom:0; left:0; right:0; padding:0.4rem; text-align:center; font-size:0.78rem; font-weight:700; font-family:'Vazirmatn',sans-serif; background:var(--gold); color:#fff; }
      /* ─── Gallery ──────────────────────────────────────────────── */
      #gallery { background:var(--white); }
      .gallery-header { margin-bottom:3rem; }
      .gallery-tabs { display:flex; gap:0.6rem; margin-bottom:2.5rem; flex-wrap:wrap; }
      .tab-btn { background:transparent; border:1.5px solid var(--border); color:var(--mid); padding:0.45rem 1.2rem; border-radius:50px; font-family:'Vazirmatn',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.25s; }
      .tab-btn.active, .tab-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--white); }
      .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
      .gallery-item { border-radius:16px; overflow:hidden; background:var(--white); border:1px solid var(--border); cursor:pointer; display:flex; flex-direction:column; }
      .gallery-img-wrap { aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--gold-pale), #EDE0CA); flex-shrink:0; }
      .gallery-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; display:block; }
      .gallery-item:hover .gallery-img-wrap img { transform:scale(1.05); }
      .gallery-item-overlay { position:absolute; inset:0; background:rgba(184,149,90,0); transition:background 0.3s; }
      .gallery-item:hover .gallery-item-overlay { background:rgba(184,149,90,0.15); }
      .gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; color:var(--gold); opacity:0.45; }
      .gallery-placeholder svg { width:36px; height:36px; }
      .gallery-placeholder p { font-size:0.75rem; }
      /* Before/After layout */
      .gallery-item.before-after .gallery-img-wrap { display:flex; flex-direction:row; }
      .gallery-item.before-after .ba-half { flex:1; position:relative; overflow:hidden; }
      .gallery-item.before-after .ba-half img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
      .gallery-item.before-after:hover .ba-half img { transform:scale(1.05); }
      .gallery-item.before-after .ba-divider { width:2px; background:var(--border); flex-shrink:0; }
      /* Labels row — BELOW the image */
      .ba-labels { display:flex; flex-shrink:0; }
      .ba-label { flex:1; text-align:center; padding:6px 8px; font-size:0.78rem; font-weight:600; color:var(--mid); border-top:1px solid var(--border); line-height:1.3; word-break:break-word; }
      .ba-label:first-child { border-left:1px solid var(--border); }
      /* Caption row — BELOW image (or below labels for before/after) */
      .gallery-caption { padding:0.55rem 0.8rem; font-size:0.8rem; color:var(--mid); text-align:center; border-top:1px solid var(--border); line-height:1.5; word-break:break-word; }
      .gallery-item[style*="display:none"] { display:none !important; }
      /* ─── Testimonials ─────────────────────────────────────────── */
      #testimonials { background:var(--section-bg); }
      .testimonials-header { text-align:center; margin-bottom:3rem; }
      .testimonials-header .divider { margin:1rem auto 0; }
      .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
      .testimonial-card { background:var(--white); border-radius:20px; padding:2rem; border:1px solid var(--border); position:relative; }
      .testimonial-card::before { content:'"'; position:absolute; top:1rem; left:1.5rem; font-size:4rem; color:var(--gold-pale); line-height:1; font-family:Georgia,serif; }
      .testimonial-stars { display:flex; gap:3px; margin-bottom:1rem; }
      .star { color:var(--gold); font-size:1rem; }
      .testimonial-text { font-size:0.9rem; color:var(--mid); line-height:1.9; margin-bottom:1.5rem; }
      .testimonial-author { display:flex; align-items:center; gap:0.8rem; }
      .author-avatar { width:42px; height:42px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
      .author-name { font-size:0.88rem; font-weight:600; color:var(--dark); }
      .author-date { font-size:0.78rem; color:var(--light); }
      /* ─── Blog Preview ─────────────────────────────────────────── */
      #blog-preview { background:var(--white); }
      .blog-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
      .post-card-prev { background:var(--bg); border-radius:16px; border:1px solid var(--border); overflow:hidden; transition:transform 0.3s,box-shadow 0.3s; display:flex; flex-direction:column; }
      .post-card-prev:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(184,149,90,0.15); }
      .post-card-prev-img { aspect-ratio:16/9; background:linear-gradient(135deg,var(--gold-pale),#EDE0CA); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:2rem; overflow:hidden; }
      .post-card-prev-img img { width:100%; height:100%; object-fit:cover; }
      .post-card-prev-body { padding:1.3rem; flex:1; display:flex; flex-direction:column; gap:0.6rem; }
      .post-cat-label { font-size:0.72rem; font-weight:600; color:var(--gold); background:var(--gold-pale); padding:0.2rem 0.7rem; border-radius:50px; display:inline-block; }
      .post-card-prev-title { font-size:1rem; font-weight:600; color:var(--dark); line-height:1.5; }
      .post-card-prev-title:hover { color:var(--gold); }
      .post-card-prev-excerpt { font-size:0.85rem; color:var(--mid); line-height:1.7; flex:1; }
      .post-card-prev-meta { display:flex; align-items:center; justify-content:space-between; font-size:0.75rem; color:var(--light); margin-top:auto; padding-top:0.6rem; border-top:1px solid var(--border); }
      .read-more-link { color:var(--gold); font-weight:500; font-size:0.82rem; }
      .blog-preview-more { text-align:center; margin-top:2.5rem; }
      /* ─── FAQ ──────────────────────────────────────────────────── */
      #faq { background:var(--section-bg); }
      .faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem; }
      .faq-item { background:var(--white); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
      .faq-item summary { padding:1.25rem 1.5rem; cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--dark); font-size:0.95rem; }
      .faq-item summary::-webkit-details-marker { display:none; }
      .faq-item summary::after { content:"＋"; color:var(--gold); font-size:1.1rem; flex-shrink:0; margin-right:1rem; }
      .faq-item[open] summary::after { content:"－"; }
      .faq-answer { padding:0 1.5rem 1.25rem; color:var(--mid); font-size:0.92rem; line-height:1.85; border-top:1px solid var(--border); }
      /* ─── Contact ──────────────────────────────────────────────── */
      /* ─── Health Care Landing ─────────────────────────────────── */
      #health-care { background:var(--section-bg); }
      .health-header { text-align:center; margin-bottom:3rem; }
      .health-cats { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
      .health-cat-card { background:var(--white); border-radius:24px; padding:2.2rem; border:1px solid var(--border); display:flex; flex-direction:column; gap:1rem; }
      .health-cat-icon { width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; }
      .health-cat-icon svg { width:28px; height:28px; }
      .health-cat-icon.beauty { background:var(--gold-pale); color:var(--gold); }
      .health-cat-icon.health { background:#E3F2FD; color:#1565C0; }
      .health-cat-card h3 { font-size:1.15rem; font-weight:700; color:var(--dark); }
      .health-cat-card p { font-size:.88rem; color:var(--mid); line-height:1.8; }
      .health-cat-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:.45rem; flex:1; }
      .health-cat-list li { font-size:.85rem; color:var(--mid); padding-right:1.2rem; position:relative; }
      .health-cat-list li::before { content:"✓"; position:absolute; right:0; color:var(--gold); font-weight:700; }
      .health-cta-btn { background:var(--gold); color:#fff; border:none; border-radius:12px; padding:.85rem 1.5rem; font-family:'Vazirmatn',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .25s; margin-top:auto; }
      .health-cta-btn:hover { background:#a07840; }
      .health-cta-btn.health-btn { background:#1565C0; }
      .health-cta-btn.health-btn:hover { background:#0d47a1; }
      .health-form-wrap { margin-top:1rem; }
      .health-form-card { background:var(--white); border-radius:24px; padding:2.5rem; border:1px solid var(--border); max-width:680px; margin:0 auto; }
      .health-form-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
      #health-care .hidden { display:none; }
      /* ─── Contact ─────────────────────────────────────────────── */
      #contact { background:var(--white); }
      .contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
      .contact-info-list { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
      .contact-info-item { display:flex; align-items:flex-start; gap:1rem; }
      .info-icon { width:48px; height:48px; background:var(--gold-pale); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
      .info-icon svg { width:22px; height:22px; color:var(--gold); }
      .info-text strong { display:block; font-size:0.9rem; color:var(--dark); margin-bottom:0.2rem; }
      .info-text p { font-size:0.88rem; color:var(--mid); line-height:1.6; }
      .social-links { display:flex; gap:0.8rem; margin-top:2.5rem; }
      .social-link { width:44px; height:44px; border-radius:12px; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; transition:background 0.25s, transform 0.2s; }
      .social-link:hover { background:var(--gold); color:var(--white); transform:translateY(-3px); }
      .social-link svg { width:20px; height:20px; }
      .contact-form { background:var(--section-bg); border-radius:24px; padding:2.5rem; border:1px solid var(--border); }
      .form-title { font-size:1.2rem; font-weight:600; color:var(--dark); margin-bottom:0.5rem; }
      .form-sub { font-size:0.88rem; color:var(--mid); margin-bottom:2rem; }
      .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
      .form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.2rem; }
      .form-group label { font-size:0.85rem; font-weight:500; color:var(--dark); }
      .form-group input, .form-group select, .form-group textarea { background:var(--white); border:1.5px solid var(--border); border-radius:12px; padding:0.75rem 1rem; font-family:'Vazirmatn',sans-serif; font-size:0.9rem; color:var(--dark); direction:rtl; transition:border-color 0.25s, box-shadow 0.25s; outline:none; }
      .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,149,90,0.12); }
      .form-group textarea { resize:vertical; min-height:110px; }
      .form-submit { width:100%; background:var(--gold); color:var(--white); border:none; padding:0.9rem; border-radius:12px; font-family:'Vazirmatn',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.25s, transform 0.2s; }
      .form-submit:hover { background:var(--gold-light); transform:translateY(-2px); }
      /* ─── Floating contact buttons ─────────────────────────────── */
      .fab-stack { position:fixed; bottom:1.5rem; left:1.5rem; z-index:90; display:flex; flex-direction:column; gap:0.7rem; }
      .fab { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.18); color:#fff; transition:transform 0.2s, box-shadow 0.2s; position:relative; }
      .fab:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 10px 28px rgba(0,0,0,0.25); }
      .fab svg { width:26px; height:26px; }
      .fab-wa   { background:#25D366; }
      .fab-call { background:var(--gold); }
      .fab-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:0.55; animation:fabPulse 2s ease-out infinite; z-index:-1; }
      @@keyframes fabPulse { 0% { transform:scale(1); opacity:0.5; } 100% { transform:scale(1.9); opacity:0; } }
      @@media (max-width:600px) { .fab-stack { bottom:1rem; left:1rem; gap:0.6rem; } .fab { width:50px; height:50px; } }
      /* ─── Responsive ───────────────────────────────────────────── */
      @@media (max-width:900px) {
        .hero-inner { grid-template-columns:1fr; text-align:center; gap:2.5rem; }
        .hero-text  { order:1; }
        .hero-image { order:2; max-width:320px; margin:0 auto; }
        .hero-stats { justify-content:center; gap:2rem; }
        .hero-actions { justify-content:center; flex-wrap:wrap; gap:.8rem; }
        .hero-badge { left:0; right:0; margin:0 auto; width:fit-content; }
        .about-grid { grid-template-columns:1fr; gap:3rem; }
        .about-accent-box { right:0; bottom:-1rem; }
        .services-grid { grid-template-columns:repeat(2,1fr); }
        .gallery-grid  { grid-template-columns:repeat(2,1fr); }
        .testimonials-grid { grid-template-columns:1fr; }
        .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
        .blog-preview-grid { grid-template-columns:repeat(2,1fr); }
      }
      @@media (max-width:600px) {
        section { padding:3.5rem 0; }
        .container { padding:0 1.2rem; }
        .hero-name { white-space:normal; }
        .hero-inner { padding:0 1.2rem; gap:2rem; }
        .hero-image { max-width:260px; }
        .hero-stats { gap:1.5rem; }
        .hero-stats .stat-number { font-size:1.6rem; }
        .hero-badge { position:static; margin-top:1rem; width:auto; border-radius:12px; padding:.7rem 1rem; }
        .services-grid { grid-template-columns:1fr; }
        .gallery-grid  { grid-template-columns:repeat(2,1fr); gap:.8rem; }
        .blog-preview-grid { grid-template-columns:1fr; }
        .form-row { grid-template-columns:1fr; }
        .about-accent-box { position:static; border-radius:12px; margin-top:1.5rem; display:inline-block; }
        .about-image-wrap { text-align:center; }
        .testimonials-grid { grid-template-columns:1fr; }
        .section-title { font-size:1.5rem; }
        .health-cats { grid-template-columns:1fr; }
        .faq-item summary { font-size:.9rem; padding:1rem 1.2rem; }
        .faq-answer { padding:0 1.2rem 1rem; font-size:.88rem; }
      }
      @@media (max-width:380px) {
        .gallery-grid { grid-template-columns:1fr; }
        .hero-actions .btn-primary,
        .hero-actions .btn-secondary { width:100%; text-align:center; }
      }
    </style>
}

<!-- ══════ HERO ══════ -->
<section id="hero">
  <div class="hero-inner">
    <div class="hero-text">
      <span class="hero-tag">@h.GetValueOrDefault("tag","پزشک عمومی و متخصص زیبایی پوست")</span>
      <h1 class="hero-name">@h.GetValueOrDefault("name_line1","دکتر") <span>@h.GetValueOrDefault("name_line2","سوسن")</span> @h.GetValueOrDefault("name_line3","آل‌طه")</h1>
      <p class="hero-subtitle">@h.GetValueOrDefault("subtitle","با بیش از یک دهه تجربه در حوزه‌ی زیبایی و مراقبت از پوست، زیبایی واقعی شما را با علم و هنر همراه می‌کنیم.")</p>
      <div class="hero-stats">
        <div class="stat-item">
          <span class="stat-number">@h.GetValueOrDefault("stat1_num","+۱۰")</span>
          <span class="stat-label">@h.GetValueOrDefault("stat1_lbl","سال تجربه")</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">@h.GetValueOrDefault("stat2_num","+۵۰۰")</span>
          <span class="stat-label">@h.GetValueOrDefault("stat2_lbl","بیمار راضی")</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">@h.GetValueOrDefault("stat3_num","+۱۵")</span>
          <span class="stat-label">@h.GetValueOrDefault("stat3_lbl","خدمات تخصصی")</span>
        </div>
      </div>
      <div class="hero-actions">
        <a href="#contact" class="btn-primary">@h.GetValueOrDefault("cta_primary","رزرو نوبت")</a>
        <a href="#about"   class="btn-secondary">@h.GetValueOrDefault("cta_secondary","بیشتر بدانید")</a>
      </div>
    </div>

    <div class="hero-image">
      <div class="hero-image-frame">
        @if (!string.IsNullOrEmpty(heroImg))
        {
            <img src="@heroImg" alt="@siteName — متخصص زیبایی پوست در تهران" width="640" height="800" fetchpriority="high" decoding="async" />
        }
        else
        {
            <div class="hero-image-placeholder">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
              </svg>
              <p>تصویر دکتر</p>
            </div>
        }
      </div>
      @if (!badgeHidden)
      {
        <div class="hero-badge">
          <div class="badge-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
            </svg>
          </div>
          <div class="badge-text">
            <strong>@badgeTitle</strong>
            @badgeSub
          </div>
        </div>
      }
    </div>
  </div>
</section>

<!-- ══════ ABOUT ══════ -->
<section id="about">
  <div class="container">
    <div class="about-grid">
      <div class="about-image-wrap fade-in">
        <div class="about-img-box">
          @if (!string.IsNullOrEmpty(aboutImg))
          {
              <img src="@aboutImg" alt="درباره @siteName — پزشک و متخصص زیبایی پوست" width="600" height="800" loading="lazy" decoding="async" />
          }
          else
          {
              <div class="about-img-placeholder">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
          }
        </div>
        <div class="about-accent-box">
          <span class="big">@yearsExp</span>
          <span class="small">سال تجربه</span>
        </div>
      </div>

      <div class="fade-in">
        <span class="section-label">درباره من</span>
        <h2 class="section-title">@a.GetValueOrDefault("title","سلامت و زیبایی پوست<br>هدف اصلی من است")</h2>
        <div class="divider"></div>
        <p class="section-desc">@a.GetValueOrDefault("bio","دکتر سوسن آل‌طه، پزشک عمومی و متخصص زیبایی پوست با سال‌ها تجربه در ارائه خدمات پیشرفته پوست و زیبایی.")</p>
        <ul class="credential-list">
          @foreach (var key in new[] { "cred1","cred2","cred3","cred4","cred5" })
          {
              var val = a.GetValueOrDefault(key, "");
              if (!string.IsNullOrEmpty(val))
              {
                  <li>
                    <div class="cred-icon">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="20 6 9 17 4 12"/>
                      </svg>
                    </div>
                    <span>@val</span>
                  </li>
              }
          }
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- ══════ SERVICES ══════ -->
<section id="services">
  <div class="container">
    <div class="services-header fade-in">
      <span class="section-label">خدمات ما</span>
      <h2 class="section-title">طیف گسترده‌ای از خدمات<br>زیبایی و مراقبت از پوست</h2>
      <div class="divider"></div>
    </div>
    <div class="services-grid">
      @foreach (var svc in Model.Services)
      {
          var hasBefore = !string.IsNullOrEmpty(svc.BeforeImageUrl);
          var hasAfter  = !string.IsNullOrEmpty(svc.AfterImageUrl);
          <div class="service-card fade-in">
            <div class="service-icon">
              @if (!string.IsNullOrEmpty(svc.IconSvg))
              {
                  @Html.Raw(svc.IconSvg)
              }
              else
              {
                  @Html.Raw(IndexModel.ServiceIconSvg(svc.Title))
              }
            </div>
            <div class="service-title">@svc.Title</div>
            <p class="service-desc">@svc.Description</p>
            @if (hasBefore && hasAfter)
            {
                <div class="svc-ba" onclick="toggleBA(this)" title="برای مشاهده قبل/بعد کلیک کنید">
                  <img class="ba-before" src="@svc.BeforeImageUrl" alt="قبل از درمان @svc.Title" loading="lazy"/>
                  <img class="ba-after"  src="@svc.AfterImageUrl"  alt="بعد از درمان @svc.Title"  loading="lazy"/>
                  <div class="svc-ba-btns">
                    <button class="svc-ba-btn active" type="button">قبل</button>
                    <button class="svc-ba-btn"        type="button">بعد</button>
                  </div>
                </div>
            }
            else if (hasBefore)
            {
                <div class="svc-ba-only">
                  <img src="@svc.BeforeImageUrl" alt="قبل از درمان @svc.Title" loading="lazy"/>
                  <div class="ba-solo-label">قبل از درمان</div>
                </div>
            }
            else if (hasAfter)
            {
                <div class="svc-ba-only">
                  <img src="@svc.AfterImageUrl" alt="بعد از درمان @svc.Title" loading="lazy"/>
                  <div class="ba-solo-label">بعد از درمان</div>
                </div>
            }
          </div>
      }
    </div>
  </div>
</section>

<!-- ══════ GALLERY ══════ -->
<section id="gallery">
  <div class="container">
    <div class="gallery-header fade-in">
      <span class="section-label">گالری</span>
      <h2 class="section-title">نتایج قبل و بعد</h2>
      <div class="divider"></div>
      <p class="section-desc">نمونه‌ای از نتایج فوق‌العاده درمان‌های انجام‌شده توسط دکتر آل‌طه.</p>
    </div>
    <div class="gallery-grid" id="galleryGrid">
      @if (Model.Gallery.Any())
      {
          @foreach (var item in Model.Gallery)
          {
              var hasBoth = !string.IsNullOrEmpty(item.BeforeImageUrl) && !string.IsNullOrEmpty(item.AfterImageUrl);
              var hasImg  = !string.IsNullOrEmpty(item.ImageUrl);
              if (hasBoth)
              {
                  <div class="gallery-item before-after fade-in" data-cat="@item.Category">
                    <div class="gallery-img-wrap">
                      <div class="ba-half">
                        <img src="@item.BeforeImageUrl" alt="قبل از درمان" loading="lazy"/>
                      </div>
                      <div class="ba-divider"></div>
                      <div class="ba-half">
                        <img src="@item.AfterImageUrl" alt="بعد از درمان" loading="lazy"/>
                      </div>
                      <div class="gallery-item-overlay"></div>
                    </div>
                    <div class="ba-labels">
                      <span class="ba-label">قبل از درمان</span>
                      <span class="ba-label">بعد از درمان</span>
                    </div>
                    @if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> }
                  </div>
              }
              else if (hasImg)
              {
                  <div class="gallery-item fade-in" data-cat="@item.Category">
                    <div class="gallery-img-wrap">
                      <img src="@item.ImageUrl" alt="@item.Caption" loading="lazy"/>
                      <div class="gallery-item-overlay"></div>
                    </div>
                    @if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> }
                  </div>
              }
          }
      }
      else
      {
          @for (int i = 0; i < 6; i++)
          {
              <div class="gallery-item fade-in">
                <div class="gallery-placeholder">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
                    <polyline points="21 15 16 10 5 21"/>
                  </svg>
                  <p>تصویر قبل و بعد</p>
                </div>
                <div class="gallery-item-overlay"></div>
              </div>
          }
      }
    </div>
    @if (Model.GalleryTotal > 3)
    {
        <div class="fade-in" style="text-align:center;margin-top:2.5rem">
          <a href="/gallery" class="btn-primary">مشاهده گالری کامل (@Model.GalleryTotal نمونه)</a>
        </div>
    }
  </div>
</section>

<!-- ══════ TESTIMONIALS ══════ -->
<section id="testimonials">
  <div class="container">
    <div class="testimonials-header fade-in">
      <span class="section-label">نظرات بیماران</span>
      <h2 class="section-title">بیماران ما چه می‌گویند</h2>
      <div class="divider"></div>
    </div>
    <div class="testimonials-grid">
      @foreach (var t in Model.Testimonials)
      {
          <div class="testimonial-card fade-in">
            <div class="testimonial-stars">
              @for (int i = 0; i < (t.Rating > 0 ? t.Rating : 5); i++)
              {
                  <span class="star">★</span>
              }
            </div>
            <p class="testimonial-text">@t.Text</p>
            <div class="testimonial-author">
              <div class="author-avatar">@(string.IsNullOrEmpty(t.AuthorEmoji) ? "👩" : t.AuthorEmoji)</div>
              <div>
                <div class="author-name">@t.AuthorName</div>
                <div class="author-date">@t.Date</div>
              </div>
            </div>
          </div>
      }
    </div>
  </div>
</section>

<!-- ══════ BLOG PREVIEW ══════ -->
@if (Model.RecentPosts.Any())
{
    <section id="blog-preview">
      <div class="container">
        <div class="fade-in" style="margin-bottom:3.5rem;">
          <span class="section-label">وبلاگ</span>
          <h2 class="section-title">آخرین مقالات</h2>
          <div class="divider"></div>
          <p class="section-desc">دانش و تجربه در حوزه زیبایی پوست</p>
        </div>
        <div class="blog-preview-grid">
          @foreach (var post in Model.RecentPosts)
          {
              <div class="post-card-prev fade-in">
                <div class="post-card-prev-img">
                  @if (!string.IsNullOrEmpty(post.FeaturedImage))
                  {
                      <img src="@post.FeaturedImage" alt="@post.Title" loading="lazy" />
                  }
                  else { <span>📝</span> }
                </div>
                <div class="post-card-prev-body">
                  @if (post.Category != null)
                  {
                      <span class="post-cat-label">@post.Category.Name</span>
                  }
                  <a href="/blog/@post.Slug" class="post-card-prev-title">@post.Title</a>
                  <p class="post-card-prev-excerpt">@(post.Excerpt.Length > 120 ? post.Excerpt.Substring(0, 120) + "..." : post.Excerpt)</p>
                  <div class="post-card-prev-meta">
                    <span>🕐 @post.ReadingTimeMinutes دقیقه | 👁 @post.ViewCount</span>
                    <a href="/blog/@post.Slug" class="read-more-link">ادامه مطلب ←</a>
                  </div>
                </div>
              </div>
          }
        </div>
        <div class="blog-preview-more">
          <a href="/blog" class="btn-secondary">مشاهده همه مقالات</a>
        </div>
      </div>
    </section>
}

<!-- ══════ FAQ ══════ -->
<section id="faq">
  <div class="container">
    <div class="fade-in" style="margin-bottom:3rem;">
      <span class="section-label">سوالات متداول</span>
      <h2 class="section-title">پاسخ به پرسش‌های رایج</h2>
      <div class="divider"></div>
    </div>
    <div class="faq-list">
      @foreach (var faq in Model.Faqs)
      {
          <details class="faq-item">
            <summary>@faq.Question</summary>
            <div class="faq-answer">@faq.Answer</div>
          </details>
      }
    </div>
  </div>
</section>

<!-- ══════ HEALTH CARE LANDING ══════ -->
<section id="health-care" itemscope itemtype="https://schema.org/MedicalClinic">
  <div class="container">
    <div class="health-header fade-in">
      <span class="section-label">مراقبت سلامت</span>
      <h2 class="section-title" itemprop="name">خدمات پزشکی دکتر آل‌طه</h2>
      <div class="divider"></div>
      <p class="section-desc" itemprop="description">ما در دو حوزه تخصصی <strong>زیبایی پوست</strong> و <strong>سلامت عمومی</strong> در کنار شما هستیم. از مشاوره اولیه تا پیگیری درمان، تیم ما آماده پاسخگویی است.</p>
    </div>

    <!-- Category Cards -->
    <div class="health-cats fade-in">
      <div class="health-cat-card" itemprop="availableService" itemscope itemtype="https://schema.org/MedicalTherapy">
        <div class="health-cat-icon beauty">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
        </div>
        <h3 itemprop="name">زیبایی پوست</h3>
        <p itemprop="description">بوتاکس، فیلر، لیزر، مزوتراپی، پاکسازی عمیق پوست و درمان تخصصی انواع مشکلات پوستی توسط متخصص.</p>
        <ul class="health-cat-list">
          <li>تزریق بوتاکس و فیلر</li>
          <li>لیزر موهای زائد و جوانسازی</li>
          <li>مزوتراپی و PRP</li>
          <li>درمان جای جوش و لک</li>
          <li>پاکسازی عمیق پوست</li>
        </ul>
        <button class="health-cta-btn" onclick="openHealthForm('beauty')">درخواست مشاوره زیبایی</button>
      </div>

      <div class="health-cat-card" itemprop="availableService" itemscope itemtype="https://schema.org/MedicalTherapy">
        <div class="health-cat-icon health">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
        </div>
        <h3 itemprop="name">سلامت عمومی</h3>
        <p itemprop="description">معاینه، تشخیص و پیگیری بیماری‌های عمومی، مشاوره تغذیه، مدیریت وزن و برنامه‌ریزی سلامت فردی.</p>
        <ul class="health-cat-list">
          <li>معاینه و ویزیت تخصصی</li>
          <li>مشاوره و مدیریت وزن</li>
          <li>پیگیری بیماری‌های مزمن</li>
          <li>برنامه سلامت شخصی‌سازی‌شده</li>
          <li>آزمایشات تخصصی</li>
        </ul>
        <button class="health-cta-btn health-btn" onclick="openHealthForm('health')">رزرو نوبت</button>
      </div>
    </div>

  </div>
</section>

<!-- ══════ CONTACT ══════ -->
<section id="contact">
  <div class="container">
    <div class="contact-grid">
      <div class="fade-in">
        <span class="section-label">تماس با ما</span>
        <h2 class="section-title">رزرو نوبت<br>و مشاوره</h2>
        <div class="divider"></div>
        <p class="section-desc">برای رزرو نوبت یا دریافت مشاوره رایگان با ما در تماس باشید.</p>
        <div class="contact-info-list">
          @if (!string.IsNullOrEmpty(c.GetValueOrDefault("phone","")))
          {
              <div class="contact-info-item">
                <div class="info-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                  </svg>
                </div>
                <div class="info-text">
                  <strong>تلفن تماس</strong>
                  <p><a href="tel:@(new string(phone.Where(ch => char.IsDigit(ch) || ch=='+').ToArray()))" style="color:inherit">@phone</a></p>
                </div>
              </div>
          }
          @if (!string.IsNullOrEmpty(c.GetValueOrDefault("email","")))
          {
              <div class="contact-info-item">
                <div class="info-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                  </svg>
                </div>
                <div class="info-text">
                  <strong>ایمیل</strong>
                  <p><a href="mailto:@email" style="color:inherit">@email</a></p>
                </div>
              </div>
          }
          @if (!string.IsNullOrEmpty(c.GetValueOrDefault("address","")))
          {
              <div class="contact-info-item">
                <div class="info-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                    <circle cx="12" cy="10" r="3"/>
                  </svg>
                </div>
                <div class="info-text">
                  <strong>آدرس مطب</strong>
                  <p><a href="https://www.google.com/maps/search/?api=1&query=@Uri.EscapeDataString(address)" target="_blank" rel="noopener" style="color:inherit">@address</a></p>
                </div>
              </div>
          }
          @if (!string.IsNullOrEmpty(c.GetValueOrDefault("hours","")))
          {
              <div class="contact-info-item">
                <div class="info-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                  </svg>
                </div>
                <div class="info-text">
                  <strong>ساعات کاری</strong>
                  <p>@c.GetValueOrDefault("hours","")</p>
                </div>
              </div>
          }
        </div>
        <div class="social-links">
          @if (!string.IsNullOrEmpty(ig))
          {
              <a href="@ig" class="social-link" target="_blank" rel="noopener" title="اینستاگرام">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </a>
          }
          @if (!string.IsNullOrEmpty(wa))
          {
              <a href="@wa" class="social-link" target="_blank" rel="noopener" title="واتساپ">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                </svg>
              </a>
          }
          @if (!string.IsNullOrEmpty(tg))
          {
              <a href="@tg" class="social-link" target="_blank" rel="noopener" title="تلگرام">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="22" y1="2" x2="11" y2="13"/>
                  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
              </a>
          }
        </div>
      </div>

      <div class="contact-form fade-in">
        <div class="form-title">رزرو نوبت آنلاین</div>
        <p class="form-sub">فرم زیر را پر کنید، در اسرع وقت با شما تماس می‌گیریم.</p>
        <form id="bookingForm" onsubmit="handleSubmit(event)">
          <input type="hidden" id="booking-category" value="beauty"/>
          <div class="form-row">
            <div class="form-group">
              <label>نام</label>
              <input id="booking-firstname" type="text" placeholder="نام شما" required />
            </div>
            <div class="form-group">
              <label>نام خانوادگی</label>
              <input id="booking-lastname" type="text" placeholder="نام خانوادگی" required />
            </div>
          </div>
          <div class="form-group">
            <label>شماره موبایل</label>
            <input id="booking-phone" type="tel" placeholder="09XX-XXX-XXXX" required />
          </div>
          <div class="form-group">
            <label>نوع خدمت مورد نظر</label>
            <select id="booking-service" onchange="document.getElementById('booking-category').value=this.value==='سلامت عمومی'?'health':'beauty'">
              <option value="" disabled selected>انتخاب خدمت</option>
              @foreach (var svc in Model.Services)
              {
                  <option>@svc.Title</option>
              }
              <option value="سلامت عمومی">سلامت عمومی</option>
              <option>سایر</option>
            </select>
          </div>
          <div class="form-group">
            <label>توضیحات (اختیاری)</label>
            <textarea id="booking-message" placeholder="مشکل پوستی، سوال یا درخواست خود را بنویسید..."></textarea>
          </div>
          <button type="submit" class="form-submit" id="booking-submit">ارسال و رزرو نوبت</button>
        </form>
        <div id="booking-tracking" style="display:none"></div>
      </div>
    </div>
  </div>
</section>

<!-- ══════ FLOATING CONTACT BUTTONS ══════ -->
<div class="fab-stack">
  @if (!string.IsNullOrEmpty(wa))
  {
      <a href="@wa" class="fab fab-wa fab-pulse" target="_blank" rel="noopener" aria-label="تماس از طریق واتساپ" title="واتساپ">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l-.999 3.648 3.737-.961zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
      </a>
  }
  @if (!string.IsNullOrEmpty(phone))
  {
      <a href="tel:@(new string(phone.Where(ch => char.IsDigit(ch) || ch=='+').ToArray()))" class="fab fab-call" aria-label="تماس تلفنی" title="تماس تلفنی">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
      </a>
  }
</div>

@section Scripts {
<script>
  // Before/After toggle
  function toggleBA(wrap) {
    wrap.classList.toggle('show-after');
    const btns = wrap.querySelectorAll('.svc-ba-btn');
    btns[0].classList.toggle('active');
    btns[1].classList.toggle('active');
  }

  // Tab buttons — filter gallery by category
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const cat = btn.textContent.trim();
      document.querySelectorAll('#galleryGrid .gallery-item').forEach(item => {
        const match = cat === 'همه' || (item.dataset.cat || '') === cat;
        item.style.display = match ? '' : 'none';
      });
    });
  });

  // Main booking form — submits to /api/health-request
  async function handleSubmit(e) {
    e.preventDefault();
    const btn = document.getElementById('booking-submit');
    const firstName = document.getElementById('booking-firstname').value.trim();
    const lastName  = document.getElementById('booking-lastname').value.trim();
    const phone     = document.getElementById('booking-phone').value.trim();
    const service   = document.getElementById('booking-service').value;
    const message   = document.getElementById('booking-message').value.trim();
    const category  = document.getElementById('booking-category').value || 'beauty';
    btn.textContent = '...در حال ارسال';
    btn.disabled = true;
    try {
      const res = await fetch('/api/health-request', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
          fullName: firstName + ' ' + lastName,
          phoneNumber: phone,
          email: '',
          message: (service ? 'خدمت: ' + service + '\n' : '') + message,
          category: category
        })
      });
      if (!res.ok) throw new Error();
      const data = await res.json();
      const code = data.trackingCode || '';
      btn.textContent = '✓ درخواست ثبت شد';
      btn.style.background = '#2D7A4F';
      // Show tracking code to user
      const trackBox = document.getElementById('booking-tracking');
      if (trackBox && code) {
        trackBox.innerHTML = `
          <div style="background:#E8F5E9;border-radius:14px;padding:1rem 1.4rem;border-right:4px solid #388E3C;margin-top:1rem">
            <p style="font-size:.85rem;color:#2D7A4F;margin-bottom:.4rem;font-weight:600">✓ درخواست شما با موفقیت ثبت شد</p>
            <p style="font-size:.82rem;color:#555;margin-bottom:.5rem">کد رهگیری شما برای پیگیری پاسخ پزشک:</p>
            <div style="font-size:1.3rem;font-weight:700;letter-spacing:.1em;color:#1a1a1a;font-family:monospace;background:#fff;display:inline-block;padding:.3rem .8rem;border-radius:8px;border:1.5px solid #a5d6a7">${code}</div>
            <p style="font-size:.75rem;color:#777;margin-top:.5rem">این کد را نزد خود نگه دارید. در اسرع وقت با شما تماس می‌گیریم.</p>
          </div>`;
        trackBox.style.display = 'block';
      }
      setTimeout(() => {
        btn.textContent = 'ارسال و رزرو نوبت';
        btn.style.background = '';
        btn.disabled = false;
        e.target.reset();
        document.getElementById('booking-category').value = 'beauty';
        if (trackBox) { trackBox.innerHTML=''; trackBox.style.display='none'; }
      }, 8000);
    } catch {
      btn.textContent = 'خطا — دوباره تلاش کنید';
      btn.style.background = '#c62828';
      setTimeout(() => { btn.textContent='ارسال و رزرو نوبت'; btn.style.background=''; btn.disabled=false; }, 2500);
    }
  }

  // Health section buttons scroll to contact form and pre-select category
  function openHealthForm(category) {
    document.getElementById('booking-category').value = category;
    // Pre-select matching service if health
    const sel = document.getElementById('booking-service');
    if (category === 'health') sel.value = 'سلامت عمومی';
    document.getElementById('contact').scrollIntoView({behavior:'smooth', block:'start'});
  }

  // Active nav link on scroll
  const sections = document.querySelectorAll('section[id]');
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    sections.forEach(section => {
      const sectionTop = section.offsetTop - 100;
      const id = section.getAttribute('id');
      const link = document.querySelector(`header nav a[href="#${id}"]`);
      if (link && scrollY > sectionTop && scrollY <= sectionTop + section.offsetHeight) {
        document.querySelectorAll('header nav a').forEach(a => a.style.color = '');
        link.style.color = '#B8955A';
      }
    });
  });
</script>
}