import { useState, useEffect, useRef } from "react";
import { Helmet } from "react-helmet-async";
import Layout from "@/components/Layout";
import { trackCalculatorUsage, trackCalculatorDetail, trackParshaClick } from "@/lib/trackEvent";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CalendarIcon, Star, BookOpen, Users, Share2, Sparkles } from "lucide-react";
import { NavLink } from "@/components/NavLink";
import RelatedTools from "@/components/RelatedTools";
import { useHebrewDate, getDaysInMonth } from "@/hooks/useHebrewDate";
import { parshiotData } from "@/lib/parshiotData";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const months = [
  { value: 1, label: "ינואר" },
  { value: 2, label: "פברואר" },
  { value: 3, label: "מרץ" },
  { value: 4, label: "אפריל" },
  { value: 5, label: "מאי" },
  { value: 6, label: "יוני" },
  { value: 7, label: "יולי" },
  { value: 8, label: "אוגוסט" },
  { value: 9, label: "ספטמבר" },
  { value: 10, label: "אוקטובר" },
  { value: 11, label: "נובמבר" },
  { value: 12, label: "דצמבר" },
];

const BarMitzvahDate = () => {
  const today = new Date();
  const [year, setYear] = useState<number>(today.getFullYear() - 13);
  const [month, setMonth] = useState<number>(today.getMonth() + 1);
  const [day, setDay] = useState<number>(today.getDate());
  const [afterSunset, setAfterSunset] = useState<string>("before");
  const [gender, setGender] = useState<string>("male");

  const initialRender = useRef(true);
  const { hebrewDate, barMitzvahInfo } = useHebrewDate(year, month, day, afterSunset === "after", gender === "male");

  useEffect(() => {
    if (initialRender.current) { initialRender.current = false; return; }
    trackCalculatorUsage("bar_mitzvah");
  }, [year, month, day]);

  const detailTrackedRef = useRef<string>("");
  useEffect(() => {
    if (initialRender.current) return;
    if (!hebrewDate) return;
    const key = `${year}-${month}-${day}-${afterSunset}-${gender}`;
    if (detailTrackedRef.current === key) return;
    detailTrackedRef.current = key;
    const inputDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    trackCalculatorDetail({
      calculatorName: "bar_mitzvah",
      inputDate,
      afterSunset: afterSunset === "after",
      gender,
      hebrewDate,
      parshaName: barMitzvahInfo.parsha || undefined,
    });
  }, [year, month, day, afterSunset, gender, hebrewDate, barMitzvahInfo.parsha]);

  const currentYear = new Date().getFullYear();
  const years = Array.from({ length: 100 }, (_, i) => currentYear - 80 + i);
  const days = Array.from({ length: getDaysInMonth(year, month) }, (_, i) => i + 1);

  useEffect(() => {
    const daysInMonth = getDaysInMonth(year, month);
    if (day > daysInMonth) {
      setDay(daysInMonth);
    }
  }, [year, month, day]);

  // Find matching parsha data for link
  const parshaData = (() => {
    if (!barMitzvahInfo.parsha || barMitzvahInfo.parsha === "לא נמצאה פרשה") return null;
    const removeNikud = (str: string) => str.replace(/[\u0591-\u05C7]/g, '');
    const cleanParshaName = removeNikud(barMitzvahInfo.parsha).replace(/^פרשת\s+/i, '').replace(/^פ׳\s+/i, '').trim();
    return parshiotData.find((p) => {
      const cleanHebrewName = removeNikud(p.hebrewName);
      return cleanHebrewName === cleanParshaName || cleanParshaName.includes(cleanHebrewName) || cleanHebrewName.includes(cleanParshaName);
    });
  })();

  const shareToWhatsApp = () => {
    const eventType = gender === "male" ? "בר מצווה" : "בת מצווה";
    const text = `פרשת ה${eventType} שלי: ${barMitzvahInfo.parsha}\nתאריך: ${barMitzvahInfo.date}\n\nגלו את הפרשה שלכם: https://myhebrewdate.co.il/bar-mitzvah-hebrew-date`;
    window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
  };

  const webPageSchema = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "@id": "https://myhebrewdate.co.il/bar-mitzvah-hebrew-date",
    "url": "https://myhebrewdate.co.il/bar-mitzvah-hebrew-date",
    "name": "מה הפרשה שלי לבר מצווה? – חישוב תאריך בר מצווה",
    "description": "גלה מה הפרשה שלך לבר מצווה! מחשבון תאריך בר מצווה מדויק - הזן תאריך לידה וקבל את התאריך העברי ופרשת השבוע.",
    "isPartOf": { "@id": "https://myhebrewdate.co.il/#website" },
    "inLanguage": "he-IL"
  };

  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "@id": "https://myhebrewdate.co.il/bar-mitzvah-hebrew-date#faq",
    "name": "שאלות נפוצות על תאריך בר מצווה ופרשת הבר מצווה",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "מה הפרשה שלי לבר מצווה?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "כדי לגלות מה הפרשה שלך לבר מצווה, הזן את תאריך הלידה הלועזי במחשבון שלנו. המערכת תחשב את התאריך העברי, תוסיף 13 שנה, ותמצא את פרשת השבוע שנקראת בשבת הראשונה לאחר תאריך הבר מצווה שלך."
        }
      },
      {
        "@type": "Question",
        "name": "איך מחשבים תאריך בר מצווה?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "תאריך הבר מצווה מחושב על פי התאריך העברי של הלידה + 13 שנה לבן או 12 שנה לבת. הפרשה נקראת בשבת הראשונה לאחר תאריך הבר/בת מצווה."
        }
      },
      {
        "@type": "Question",
        "name": "למה חשוב לדעת את הפרשה של הבר מצווה?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "על פי המסורת היהודית, יש קשר מיוחד בין האדם לפרשה שבה נכנס לעול המצוות. רבים רואים בפרשה זו מקור להשראה וחיבור רוחני לאורך החיים."
        }
      },
      {
        "@type": "Question",
        "name": "האם אפשר לעלות לתורה בפרשה שלי מדי שנה?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "בהחלט! זהו מנהג יפה ועתיק. כאשר קוראים את הפרשה שלך בכל שנה, אתה יכול לבקש לעלות לתורה בבית הכנסת ולהתחבר מחדש לפרשה האישית שלך."
        }
      },
      {
        "@type": "Question",
        "name": "מה ההבדל בין בר מצווה לבת מצווה?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "בר מצווה מתקיים בגיל 13 לבנים, ובת מצווה בגיל 12 לבנות. ההבדל נובע מההלכה היהודית שקובעת גילאי הגעה לבגרות שונים."
        }
      },
      {
        "@type": "Question",
        "name": "מה קורה אם נולדתי בחודש אדר בשנה מעוברת?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "אם נולדת באדר בשנה מעוברת (שיש בה אדר א' ואדר ב'), תאריך הבר מצווה שלך מחושב לפי אותו אדר. אם נולדת באדר בשנה רגילה והבר מצווה בשנה מעוברת – לפי הפוסקים הרבים, הבר מצווה באדר ב'."
        }
      },
      {
        "@type": "Question",
        "name": "איך יודעים באיזה בית כנסת קוראים את הפרשה שלי?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "כל בתי הכנסת בארץ ישראל קוראים את אותה פרשה באותה שבת. בחו\"ל, לעיתים יש הבדל של שבוע אחד עקב יום טוב שני של גלויות. המחשבון שלנו מציג את הפרשה לפי מנהג ארץ ישראל."
        }
      },
      {
        "@type": "Question",
        "name": "האם אפשר לחגוג בר מצווה בתאריך אחר?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "מבחינה הלכתית, הבן נכנס לעול מצוות בתאריך העברי המדויק ללא קשר לחגיגה. את האירוע עצמו אפשר לחגוג בכל שבת, אך רבים מעדיפים לחגוג בשבת שבה נקראת 'הפרשה שלך' – הפרשה הראשונה לאחר תאריך הבר מצווה."
        }
      }
    ]
  };

  const howToSchema = {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "איך לגלות מה הפרשה שלי לבר מצווה",
    "description": "מדריך פשוט לחישוב תאריך בר/בת מצווה ומציאת פרשת השבוע",
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "הזינו תאריך לידה",
        "text": "בחרו את השנה, החודש והיום הלועזיים של הלידה"
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "בחרו מגדר",
        "text": "בחרו בן או בת - זה משפיע על גיל הבר/בת מצווה (13 לבנים, 12 לבנות)"
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "ציינו זמן ביחס לשקיעה",
        "text": "האם הלידה הייתה לפני או אחרי השקיעה? היום העברי מתחיל בשקיעה"
      },
      {
        "@type": "HowToStep",
        "position": 4,
        "name": "קבלו את הפרשה",
        "text": "המערכת תציג את תאריך הבר/בת מצווה ואת פרשת השבוע שתיקרא באותה שבת"
      }
    ],
    "totalTime": "PT1M"
  };



  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "דף הבית", "item": "https://myhebrewdate.co.il/" },
      { "@type": "ListItem", "position": 2, "name": "תאריך בר מצווה", "item": "https://myhebrewdate.co.il/bar-mitzvah-hebrew-date" }
    ]
  };

  return (
    <Layout>
      <Helmet>
        <title>מה הפרשה שלי לבר מצווה? | חישוב תאריך בר מצווה והפרשה</title>
        <meta name="description" content="גלה מה הפרשה שלך לבר מצווה! מחשבון תאריך בר מצווה מדויק - הזן תאריך לידה וקבל את התאריך העברי ופרשת השבוע. חינם וללא הרשמה." />
        <meta name="keywords" content="מה הפרשה שלי לבר מצווה, תאריך בר מצווה, פרשת בר מצווה, חישוב בר מצווה, בר מצווה לפי תאריך לידה" />
        <link rel="canonical" href="https://myhebrewdate.co.il/bar-mitzvah-hebrew-date" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="מחשבון תאריך עברי" />
        <meta property="og:locale" content="he_IL" />
        <meta property="og:title" content="מה הפרשה שלי לבר מצווה? | חישוב תאריך בר מצווה" />
        <meta property="og:description" content="גלה מה הפרשה שלך לבר מצווה! מחשבון מדויק לתאריך בר/בת מצווה ופרשת השבוע." />
        <meta property="og:url" content="https://myhebrewdate.co.il/bar-mitzvah-hebrew-date" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="מה הפרשה שלי לבר מצווה? | חישוב תאריך בר מצווה" />
        <meta name="twitter:description" content="גלה מה הפרשה שלך לבר מצווה ומתי יחול תאריך הבר מצווה." />
        <script key="bar-mitzvah-webpage" id="bar-mitzvah-webpage" type="application/ld+json">{JSON.stringify(webPageSchema)}</script>
        <script key="bar-mitzvah-faq" id="bar-mitzvah-faq" type="application/ld+json">{JSON.stringify(faqSchema)}</script>
        <script key="bar-mitzvah-howto" id="bar-mitzvah-howto" type="application/ld+json">{JSON.stringify(howToSchema)}</script>
        <script key="bar-mitzvah-breadcrumb" id="bar-mitzvah-breadcrumb" type="application/ld+json">{JSON.stringify(breadcrumbSchema)}</script>
      </Helmet>

      <div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* Breadcrumb */}
        <Breadcrumb className="mb-6">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild><NavLink to="/">דף הבית</NavLink></BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>תאריך בר מצווה</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        {/* Hero */}
        <header className="text-center mb-10">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-accent mb-4">
            <Star className="w-8 h-8 text-accent-foreground" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            מה הפרשה שלי לבר מצווה? – חישוב תאריך בר מצווה
          </h1>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            גלה מה הפרשה שלך לבר מצווה! הזן את תאריך הלידה וקבל את תאריך בר המצווה המדויק ואת פרשת השבוע
          </p>
        </header>

        {/* Calculator Card */}
        <section aria-label="מחשבון בר מצווה">
          <Card className="p-6 mb-8">
            <div className="space-y-6">
              {/* Date Selectors */}
              <div className="space-y-4">
                <div className="flex items-center gap-2">
                  <CalendarIcon className="w-5 h-5 text-primary" />
                  <label className="text-base font-semibold text-foreground">
                    תאריך לידה (לועזי)
                  </label>
                </div>
                <div className="grid grid-cols-3 gap-3">
                  <div className="space-y-2">
                    <label className="text-xs text-muted-foreground">שנה</label>
                    <Select value={year.toString()} onValueChange={(v) => setYear(parseInt(v))}>
                      <SelectTrigger className="bg-background">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="max-h-60">
                        {years.map((y) => (
                          <SelectItem key={y} value={y.toString()}>{y}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs text-muted-foreground">חודש</label>
                    <Select value={month.toString()} onValueChange={(v) => setMonth(parseInt(v))}>
                      <SelectTrigger className="bg-background">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {months.map((m) => (
                          <SelectItem key={m.value} value={m.value.toString()}>{m.label}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs text-muted-foreground">יום</label>
                    <Select value={day.toString()} onValueChange={(v) => setDay(parseInt(v))}>
                      <SelectTrigger className="bg-background">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {days.map((d) => (
                          <SelectItem key={d} value={d.toString()}>{d}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Gender Selection */}
              <div className="space-y-3 p-4 rounded-xl bg-muted/30 border border-border/50">
                <div className="flex items-center gap-2">
                  <Users className="w-4 h-4 text-primary" />
                  <label className="text-sm font-medium text-foreground">בן או בת?</label>
                </div>
                <RadioGroup value={gender} onValueChange={setGender} className="flex flex-row-reverse justify-end gap-6">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="male-bar" className="cursor-pointer font-medium">בן (בר מצווה - גיל 13)</Label>
                    <RadioGroupItem value="male" id="male-bar" />
                  </div>
                  <div className="flex items-center gap-2">
                    <Label htmlFor="female-bar" className="cursor-pointer font-medium">בת (בת מצווה - גיל 12)</Label>
                    <RadioGroupItem value="female" id="female-bar" />
                  </div>
                </RadioGroup>
              </div>

              {/* Sunset Selection */}
              <div className="space-y-3 p-4 rounded-xl bg-muted/30 border border-border/50">
                <div className="flex items-center gap-2">
                  <CalendarIcon className="w-4 h-4 text-accent" />
                  <label className="text-sm font-medium text-foreground">לפני או אחרי השקיעה?</label>
                </div>
                <p className="text-xs text-muted-foreground">
                  בלוח העברי היום מתחיל בשקיעה. אם נולד/ה אחרי השקיעה, התאריך העברי הוא למעשה היום הבא.
                </p>
                <RadioGroup value={afterSunset} onValueChange={setAfterSunset} className="flex flex-row-reverse justify-end gap-6">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="before-bar" className="cursor-pointer font-medium">לפני השקיעה</Label>
                    <RadioGroupItem value="before" id="before-bar" />
                  </div>
                  <div className="flex items-center gap-2">
                    <Label htmlFor="after-bar" className="cursor-pointer font-medium">אחרי השקיעה</Label>
                    <RadioGroupItem value="after" id="after-bar" />
                  </div>
                </RadioGroup>
              </div>

              {/* Results */}
              <div className="space-y-4">
                {/* Hebrew Date */}
                <div className="p-5 rounded-xl bg-gradient-primary text-primary-foreground text-center">
                  <p className="text-sm opacity-90 mb-2">התאריך העברי של הלידה</p>
                  <p className="text-2xl font-bold">{hebrewDate}</p>
                </div>

                {/* Bar Mitzvah Parsha */}
                <div className="p-6 rounded-2xl bg-gradient-accent text-accent-foreground text-center">
                  <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/25 text-sm font-medium mb-3">
                    <Star className="w-4 h-4 fill-current" />
                    פרשת ה{gender === "male" ? "בר מצווה" : "בת מצווה"}
                  </div>
                  <p className="text-3xl md:text-4xl font-bold mb-2">{barMitzvahInfo.parsha}</p>
                  <p className="text-sm opacity-90 flex items-center justify-center gap-2">
                    <CalendarIcon className="w-4 h-4" />
                    {barMitzvahInfo.date}
                  </p>
                </div>

                {/* Share Button */}
                <Button onClick={shareToWhatsApp} className="w-full gap-2 bg-green-500 hover:bg-green-600 text-white">
                  <Share2 className="w-5 h-5" />
                  שתף בוואטסאפ
                </Button>

                {/* Link to Parsha Page */}
                {parshaData && (
                  <NavLink to={`/parsha/${parshaData.name.toLowerCase().replace(/ /g, '-')}`} onClick={() => trackParshaClick()}>
                    <Button variant="outline" className="w-full gap-2">
                      <BookOpen className="w-5 h-5" />
                      לכל המידע על פרשת {parshaData.hebrewName}
                    </Button>
                  </NavLink>
                )}
              </div>
            </div>
          </Card>
        </section>

        {/* Explanation */}
        <section aria-label="איך מחשבים בר מצווה" className="mb-10">
          <Card className="p-6">
            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
              <BookOpen className="w-5 h-5 text-primary" />
              איך מחשבים תאריך בר/בת מצווה?
            </h2>
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                <strong className="text-foreground">בר מצווה</strong> לבן מתקיים בגיל 13 שנה עברית מיום הלידה. 
                <strong className="text-foreground"> בת מצווה</strong> לבת מתקיימת בגיל 12 שנה עברית – לחישוב מדויק לבנות השתמשו ב<NavLink to="/bat-mitzvah-hebrew-date" className="text-primary hover:underline font-medium">מחשבון בת מצווה</NavLink>.
                לא יודעים את התאריך העברי? השתמשו ב<NavLink to="/convert-gregorian-to-hebrew" className="text-primary hover:underline font-medium">המרת תאריך לועזי לעברי</NavLink>.
              </p>

              <p>
                החישוב מתבצע לפי{' '}
                <NavLink to="/hebrew-calendar-guide" className="text-primary hover:underline font-medium">הלוח העברי</NavLink>: 
                מוסיפים 13 (או 12) שנים לתאריך העברי של הלידה. 
                הפרשה נקראת בשבת הראשונה לאחר תאריך הבר/בת מצווה. 
                לרשימת כל הפרשות, בקרו בדף{' '}
                <NavLink to="/parshiot" className="text-primary hover:underline font-medium">פרשות השבוע</NavLink>.
              </p>
              <p>
                <strong className="text-foreground">המשמעות הרוחנית:</strong> על פי המסורת, יש קשר עמוק 
                בין האדם לפרשה שבה נכנס לעול המצוות. רבים מוצאים בפרשה זו מקור להשראה וחיבור רוחני לאורך חייהם.
                למידע נוסף על{' '}
                <NavLink to="/calculate-hebrew-date" className="text-primary hover:underline font-medium">איך מחשבים תאריך עברי</NavLink>.
              </p>
            </div>
          </Card>
        </section>

        {/* FAQ Section */}
        <section aria-label="שאלות נפוצות על תאריך בר מצווה והפרשה" className="mb-10">
          <h2 className="text-xl font-bold mb-4">שאלות נפוצות על תאריך בר מצווה והפרשה</h2>
          <Card className="p-5 space-y-4 divide-y divide-border">
            <div className="space-y-2 pb-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                מה הפרשה שלי לבר מצווה?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                כדי לגלות מה הפרשה שלך, הזן את תאריך הלידה הלועזי למעלה. 
                לא יודע את התאריך העברי? השתמש ב<NavLink to="/convert-gregorian-to-hebrew" className="text-primary hover:underline">המרת תאריך לועזי לעברי</NavLink>. 
                המערכת תחשב ותמצא את הפרשה שנקראת בשבת הראשונה אחרי הבר מצווה.
              </p>
            </div>
            <div className="space-y-2 py-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                איך מחשבים תאריך בר מצווה לפי תאריך לידה?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                מוסיפים 13 שנים לתאריך העברי של הלידה. הפרשה היא זו שנקראת בשבת הראשונה לאחר תאריך הבר מצווה.
              </p>
            </div>
            <div className="space-y-2 py-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                מה ההבדל בין בר מצווה לבת מצווה?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                בר מצווה (לבנים) בגיל 13, בת מצווה (לבנות) בגיל 12. ההבדל מבוסס על ההלכה היהודית.
              </p>
            </div>
            <div className="space-y-2 py-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                האם אפשר לעלות לתורה בפרשה שלי כל שנה?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                בהחלט! זהו מנהג יפה ועתיק. בדקו{' '}
                <NavLink to="/weekly-torah-portion" className="text-primary hover:underline">מתי נקראת הפרשה השבוע</NavLink>{' '}
                כדי להתחבר לפרשה האישית מדי שנה.
              </p>
            </div>
            <div className="space-y-2 pt-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                מה אם הבר מצווה נופל בחג?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                כאשר הבר מצווה נופל בחג, קוראים קריאה מיוחדת לחג. המערכת מציגה גם את הפרשה הרגילה הבאה.
              </p>
            </div>
            <div className="space-y-2 pt-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                מה קורה אם נולדתי בחודש אדר בשנה מעוברת?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                אם נולדת באדר בשנה מעוברת, תאריך הבר מצווה מחושב לפי אותו אדר. אם נולדת באדר בשנה רגילה והבר מצווה בשנה מעוברת – לפי רוב הפוסקים, הבר מצווה באדר ב'.
              </p>
            </div>
            <div className="space-y-2 pt-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                באיזה בית כנסת קוראים את הפרשה שלי?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                כל בתי הכנסת בארץ ישראל קוראים את אותה פרשה באותה שבת. בחו"ל לעיתים יש הבדל של שבוע עקב יום טוב שני של גלויות. המחשבון מציג לפי מנהג ארץ ישראל.
              </p>
            </div>
            <div className="space-y-2 pt-4">
              <h3 className="font-semibold text-foreground flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary text-sm">?</span>
                האם אפשר לחגוג בר מצווה בתאריך אחר?
              </h3>
              <p className="text-sm text-muted-foreground pr-8">
                מבחינה הלכתית, הבן נכנס לעול מצוות בתאריך העברי המדויק. את האירוע אפשר לחגוג בכל שבת, אך רבים מעדיפים לחגוג בשבת שבה נקראת הפרשה הראשונה לאחר תאריך הבר מצווה.
              </p>
            </div>
          </Card>
        </section>

        {/* CTA */}
        <section aria-label="קישורים נוספים" className="text-center">
          <Card className="p-6 bg-muted/30">
            <h2 className="text-xl font-bold mb-3">גלו עוד</h2>
            <div className="flex flex-col sm:flex-row gap-3 justify-center flex-wrap">
              <NavLink to="/bat-mitzvah-hebrew-date">
                <Button variant="outline" className="gap-2 w-full">
                  <Sparkles className="w-5 h-5" />
                  מחשבון בת מצווה (גיל 12)
                </Button>
              </NavLink>
              <NavLink to="/parshiot">
                <Button variant="outline" className="gap-2 w-full">
                  <BookOpen className="w-5 h-5" />
                  כל פרשות השבוע
                </Button>
              </NavLink>
              <NavLink to="/">
                <Button className="bg-gradient-primary text-primary-foreground gap-2 w-full">
                  <CalendarIcon className="w-5 h-5" />
                  למחשבון המלא
                </Button>
              </NavLink>
            </div>
          </Card>
        </section>


        <RelatedTools currentPath="/bar-mitzvah-hebrew-date" maxItems={4} />
      </div>
    </Layout>
  );
};

export default BarMitzvahDate;