const { useState, useEffect } = React;

// Navbar
const Navbar = () => {
    const [scrolled, setScrolled] = useState(false);
    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 50);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);
    return (
        <nav className={`navbar ${scrolled ? 'scrolled' : ''}`}>
            <div className="container">
                <a href="#" className="logo">
                    <img src="./images/logo.JPG" alt="Wifaq" className="logo-icon" />
                    <span className="logo-text">مکتب وفاق</span>
                </a>
                <ul className="nav-menu">
                    {/* <li><a href="https://wifaqschool.com/admissions/" className="nav-link">لایحه فیس</a></li> */}
                    <li><a href="https://wifaqschool.com/4D/4D-intro.html" className="nav-link">۴بُعدی</a></li>
                    <li><a href="https://wifaqschool.com/careers/" className="nav-link">با ما کار کنید</a></li>
                    <li><a href="https://wifaqschool.com/games/" className="nav-link">بازی های آموزشی</a></li>
                    <li><a href="#contact" className="nav-link">تماس</a></li>
                </ul>
                <div className="nav-cta">
                    <a href="#" className="btn btn-outline">پورتال</a>
                    <a href="https://wifaqschool.com/apply" className="btn btn-primary">ثبت نام</a>
                </div>
            </div>
        </nav>
    );
};

// Hero
const Hero = () => (
    <section className="hero" id="home">
        <div className="hero-bg">
            {/* Replace with: <video autoPlay muted loop playsInline src="./videos/hero.mp4"></video> */}
            {/* Or: <img src="./images/hero.jpg" alt="Hero" /> */}
            <div style={{ width: '100%', height: '100%', background: 'linear-gradient(135deg, #0d7377 0%, #14919b 100%)' }}></div>
        </div>
        <div className="hero-overlay"></div>
        <div className="hero-pattern"></div>
        <div className="hero-content">
            <div className="hero-badge"><span className="hero-badge-dot"></span>سیستم رشد ۴بُعدی عبارت است از: </div>
            <h1 className="hero-title">
                <span className="hero-title-main">انسان سازی</span>
                <span className="hero-title-sub">نه فقط درس خوانی</span>
            </h1>
            <p className="hero-desc">در مکتب وفاق، هر طفل یک استعداد منحصر به فرد است. ما با رویکرد ۴بُعدی، فکر، اخلاق، مهارت‌های اجتماعی و توانایی‌های عملی را همزمان انکشاف می‌دهیم.</p>
            <div className="hero-cta">
                <a href="https://wifaqschool.com/apply" className="btn btn-primary btn-lg">ثبت نام کنید</a>
                <a href="#approach" className="btn btn-outline btn-lg">رویکرد ما</a>
            </div>
        </div>
        <div className="hero-scroll" onClick={() => document.getElementById('stats').scrollIntoView({ behavior: 'smooth' })}>
            <span>بیشتر بدانید</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12l7 7 7-7" /></svg>
        </div>
    </section>
);

// Stats with animated counter
const Stats = () => {
    const [visible, setVisible] = useState(false);
    const [counts, setCounts] = useState([0, 0, 0, 0]);
    const targets = [250, 30, 5, 2];
    const labels = ['شاگرد', 'کدر تعلیمی', 'زبان تدریس', 'تایم'];

    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting && !visible) {
                setVisible(true);
                targets.forEach((target, i) => {
                    let start = 0;
                    const duration = 2000;
                    const step = target / (duration / 16);
                    const timer = setInterval(() => {
                        start += step;
                        if (start >= target) {
                            start = target;
                            clearInterval(timer);
                        }
                        setCounts(prev => {
                            const newCounts = [...prev];
                            newCounts[i] = Math.floor(start);
                            return newCounts;
                        });
                    }, 16);
                });
            }
        }, { threshold: 0.5 });
        const el = document.getElementById('stats');
        if (el) observer.observe(el);
        return () => observer.disconnect();
    }, [visible]);

    return (
        <section className="stats" id="stats">
            <div className="container">
                <div className="stats-grid">
                    {counts.map((c, i) => (
                        <div key={i} className="stat-item">
                            <div className="stat-number">{i < 2 ? '+' : ''}{c}</div>
                            <div className="stat-label">{labels[i]}</div>
                        </div>
                    ))}
                </div>
                <p style={{ textAlign: 'center', fontSize: '0.8rem', color: '#999', marginTop: '1rem' }}>projections for 1405</p>
            </div>
        </section>
    );
};

// Philosophy 4D
const Philosophy = () => (
    <section className="section alt" id="approach">
        <div className="container">
            <div className="section-header">
                <span className="section-tag">چرا متفاوت هستیم؟</span>
                <h2 className="section-title">سیستم رشد <span className="rainbow-text">۴بُعدی</span> انسان</h2>
                <p className="section-desc">یک انسان کامل فقط با نمره خوب ساخته نمی‌شود</p>
            </div>
            <div className="dimensions-grid">
                {[
                    { dim: 'intellectual', icon: '🧠', title: 'بُعد فکری', desc: 'تفکر انتقادی، حل مسئله و کنجکاوی علمی', pts: ['تفکر تحلیلی', 'خلاقیت', 'سواد علمی'] },
                    { dim: 'character', icon: '⭐', title: 'بُعد اخلاقی-معنوی', desc: 'ارزش‌های اسلامی، صداقت و رشد معنوی', pts: ['تقوا و ایمان', 'اخلاق نیکو', 'خودشناسی'] },
                    { dim: 'social', icon: '🤝', title: 'بُعد اجتماعی', desc: 'همکاری، رهبری و ارتباطات مؤثر', pts: ['کار تیمی', 'رهبری', 'همدلی'] },
                    { dim: 'practical', icon: '⚡', title: 'بُعد عملی', desc: 'مهارت‌های زندگی و توانایی تطبیق دانش', pts: ['مهارت‌های عملی', 'کارآفرینی', 'خودکفایی'] }
                ].map((d, i) => (
                    <div key={i} className="dimension-card" data-dim={d.dim}>
                        <div className="dimension-icon">{d.icon}</div>
                        <h3 className="dimension-title">{d.title}</h3>
                        <p className="dimension-desc">{d.desc}</p>
                        <ul className="dimension-points">{d.pts.map((p, j) => <li key={j}>{p}</li>)}</ul>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

// Difference
const Difference = () => (
    <section className="section">
        <div className="container">
            <div className="difference-grid">
                <div className="difference-content">
                    <span className="section-tag">تفاوت کلیدی</span>
                    <h3>بدون فرهنگ مقایسه</h3>
                    <p>در مکتب وفاق، هر شاگرد فقط با استعداد خودش مقایسه می‌شود. ما پیشرفت فردی را می‌سنجیم، نه نمره در صنف.</p>
                    <div className="difference-points">
                        {[{ t: 'ارزیابی رشد فردی', s: 'هر شاگرد با خودش مقایسه می‌شود' }, { t: 'کشف استعداد', s: 'سیستم شناسایی استعدادهای منحصر به فرد' }, { t: 'بازخورد سازنده', s: 'کارت‌های چهار رنگ به جای نمرات عددی' }].map((d, i) => (
                            <div key={i} className="diff-point"><div className="diff-icon">✓</div><div className="diff-text"><strong>{d.t}</strong><span>{d.s}</span></div></div>
                        ))}
                    </div>
                </div>
                <div className="difference-visual">
                    <div className="comparison-box traditional"><h4>مکاتب عادی</h4><ul><li>تمرکز بر نمره</li><li>رقابت و مقایسه</li><li>یک معیار برای همه</li><li>فقط بُعد فکری</li></ul></div>
                    <span className="comparison-arrow">←</span>
                    <div className="comparison-box wifaq"><h4>مکتب وفاق</h4><ul><li>تمرکز بر رشد</li><li>کشف استعداد</li><li>مسیر فردی</li><li>۴ بُعد انسانی</li></ul></div>
                </div>
            </div>
        </div>
    </section>
);

// Programs
const Programs = () => (
    <section className="section alt" id="programs">
        <div className="container">
            <div className="section-header">
                <span className="section-tag">برنامه‌های ما</span>
                <h2 className="section-title">برنامه‌های تعلیمی</h2>
                <p className="section-desc">مسیرهای تعلیمی متنوع برای هر سن و هر نیاز</p>
            </div>
            <div className="programs-grid">
                {[
                    { icon: '🌱', title: 'کودکستان', desc: 'پایه‌گذاری مهارت‌های اساسی برای ۴-۶ ساله‌ها', badge: 'سنین ۴-۶' },
                    { icon: '📚', title: 'دوره ابتدایی', desc: 'صنف‌های اول تا ششم با نصاب <span class="rainbow-text">۴بُعدی</span>', badge: 'صنف ۱-۶' },
                    { icon: '🎓', title: 'دوره متوسطه', desc: 'صنف‌های هفتم تا نهم', badge: 'تازه آغاز می شود', coming: true },
                    { icon: '❄️', title: 'برنامه‌های زمستانی', desc: 'دوره‌های فشرده تقویت مهارت‌ها', badge: 'ویژه' },
                    { icon: '🌍', title: 'مکتب زبان وفاق', desc: 'آموزش انگلیسی، عربی و سایر زبان‌ها', badge: 'WLS' },
                    { icon: '📖', title: ' مَعْهَدُ وِفَاق', desc: 'آموزش تخصصی زبان عربی و علوم اسلامی', badge: 'WISAL' }
                ].map((p, i) => (
                    <div key={i} className="program-card">
                        <div className="program-icon">{p.icon}</div>
                        <h3 className="program-title">{p.title}</h3>
                        <p className="program-desc" dangerouslySetInnerHTML={{ __html: p.desc }}></p>
                        <span className={`program-badge ${p.coming ? 'coming' : ''}`}>{p.badge}</span>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

// Testimonials
const Testimonials = () => (
    <section className="section" id="testimonials">
        <div className="container">
            <div className="section-header">
                <span className="section-tag"> وفاق از نزدیک</span>
                <h2 className="section-title">تجربه والدین و شاگردان</h2>
            </div>
            <div className="testimonials-grid">
                {[
                    { q: 'در مکتب‌های قبلی نتوانستم یک استعدادم را پیشرفت بدهم، اما امسال در مکتب وفاق سخنرانی و ترانه‌خوانی من بسیار خوب شد.', a: 'عرفان ر.', r: 'شاگرد', video: 'https://www.youtube.com/embed/xLitAys5EzM' },
                    { q: 'شخصیت من بسیار تغییر کرد... با همه حالا با مهربانی صحبت می‌کنم.', a: 'بنیامین ع.', r: 'شاگرد', video: 'https://www.youtube.com/embed/ECZAT3Ds-20' },
                    { q: 'اولادهای ما وفاق را خانۀ دوم خود حس کردند... روزهای جمعه کوشش می‌کردند زودتر پس بیایند.', a: 'روح الله ص.', r: 'والدین شاگرد', video: 'https://www.youtube.com/embed/kR-f5gN-txg' },
                    { q: 'مکتب وفاق شاگرد را از چهار بُعد تربیه می‌کند... تغییراتی که در طفل‌های خود دیدیم، بسیار خوش هستم.', a: 'ناجیه ص.', r: 'والدین شاگرد', video: 'https://www.youtube.com/embed/TaakpeI3lmQ' },
                    { q: 'زما زوی وفاق مکتب ته ډیر په شوق او علاقه ځی، ځکه په دې مکتب کی ځان خوندی او آرامه احساسوي.', a: ' پیروز ا.', r: 'والدین شاگرد', video: 'https://www.youtube.com/embed/Wv_5-lvRe7U' }
                ].map((t, i) => (
                    <div key={i} className="testimonial-card">
                        <div className="testimonial-video">
                            <iframe src={t.video} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                        </div>
                        <div className="testimonial-content">
                            <p className="testimonial-quote">{t.q}</p>
                            <div className="testimonial-author"><strong>{t.a}</strong><span>{t.r}</span></div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

// News
const News = () => (
    <section className="section alt" id="news">
        <div className="container">
            <div className="section-header">
                <span className="section-tag">آخرین خبرها</span>
                <h2 className="section-title">اخبار و رویدادها</h2>
            </div>
            <div className="news-grid">
                {[
                    { date: '۱۴۰۴', cat: 'رویداد', title: 'ضیافت وفاق در ماه ضیافت الهی', excerpt: 'مکتب وفاق محفل افطاری باشکوهی را با حضور والدین، استادان و شخصیت‌های فرهنگی برگزار کرد.', img: './images/news-1.jpg', link: 'https://www.facebook.com/share/p/1CM2iNcuph/?mibextid=wwXIfr' },
                    { date: '۱۴۰۴', cat: 'اعلان', title: 'استخدام برای سال تعلیمی ۱۴۰۵', excerpt: 'شبکه تعلیمی وفاق برای سال ۱۴۰۵ استخدام می‌کند. فرصت طلایی برای پیوستن به تیم متعهد به پرورش نسل طلایی.', img: './images/news-2.jpg', link: 'https://www.facebook.com/permalink.php?story_fbid=pfbid02mXmGKgE6RqPva9UEsGNNJsikCMV7a3GCBCrNFMnRCQVbrtJ16gSoNfKxGZyWXQDol&id=100064316277071' },
                    { date: '۱۴۰۴', cat: 'بلاگ', title: 'On The Craft of Human Building', excerpt: 'ما مهندس خانه‌مان را با دقت انتخاب می‌کنیم. آیا معمار شخصیت فرزندمان را هم با همین دقت انتخاب می‌کنیم؟', img: './images/news-3.jpg', link: 'https://wifaqschool.com/blog/choose-your-childrens-architects-wisely.html' }
                ].map((n, i) => (
                    <article key={i} className="news-card">
                        <div className="news-image">
                            <img src={n.img} alt={n.title} />
                            <span className="news-date">{n.date}</span>
                        </div>
                        <div className="news-content">
                            <span className="news-category">{n.cat}</span>
                            <h3 className="news-title">{n.title}</h3>
                            <p className="news-excerpt">{n.excerpt}</p>
                            <a href={n.link} target="_blank" rel="noopener noreferrer" className="news-link">ادامه مطلب ←</a>
                        </div>
                    </article>
                ))}
            </div>
        </div>
    </section>
);

// CTA
const CTA = () => (
    <section className="cta-section" id="admission">
        <div className="container">
            <div className="cta-content">
                <h2>آیا آماده‌اید فرزند شما متفاوت رشد کند؟</h2>
                <p>فورم درخواست شمولیت را آنلاین خانه‌پری کنید.</p>
                <div className="cta-buttons">
                    <a href="https://wifaqschool.com/apply" className="btn btn-primary btn-lg">📝 درخواست آنلاین</a>
                    <a href="https://wa.me/93745329195" className="btn btn-outline btn-lg">💬 واتساپ</a>
                </div>
            </div>
        </div>
    </section>
);

// Footer
const Footer = () => (
    <footer className="footer" id="contact">
        <div className="container">
            <div className="footer-grid">
                <div className="footer-contact order-1">
                    <h4>تماس با ما</h4>
                    <p>📍 کوچه حفیظ الله امین، خوشحال خان، کابل</p>
                    <p>📞 <a href="tel:0202562004" style={{ direction: 'ltr', unicodeBidi: 'embed' }}>0202562004</a></p>
                    <p>💬 <a href="https://wa.me/93745329195">واتساپ</a></p>
                    <p>✉️ <a href="mailto:info@wifaqschool.com">info@wifaqschool.com</a></p>
                </div>
                <div className="order-2">
                    <h4>دسترسی سریع</h4>
                    <ul className="footer-links">
                        {/* <li><a href="https://wifaqschool.com/admissions/">لایحه فیس</a></li> */}
                        <li><a href="https://wifaqschool.com/4D/4D-intro.html">سیستم ۴بُعدی</a></li>
                        <li><a href="https://wifaqschool.com/careers/">با ما کار کنید</a></li>
                        <li><a href="https://wifaqschool.com/games/">بازی های آموزشی beta</a></li>
                        <li><a href="#admission">ثبت نام</a></li>
                    </ul>
                </div>
                <div className="order-3"><h4>مؤسسات وفاق</h4><ul className="footer-links"><li><a href="#">مکتب زبان وفاق (WLS)</a></li><li><a href="#">وِصَال (مَعْهَدُ وِفَاقٍ لِأُصُولِ الدِّینِ وَاللُّغَةِ الْعَرَبِيَّةِ)</a></li></ul></div>
                <div className="footer-brand order-4">
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '.75rem' }}>
                        <img src="./images/logo.JPG" alt="Wifaq" className="logo-icon" style={{ width: '45px', height: '45px' }} />
                        <span style={{ fontSize: '1.3rem', fontWeight: '700', color: '#fff' }}>مکتب وفاق</span>
                    </div>
                    <p>شبکه تعلیمی وفاق - سیستم رشد <span className="rainbow-text">۴بُعدی</span> انسان</p>
                    <div className="footer-social"><a href="#">📘</a><a href="#">📸</a><a href="#">📺</a><a href="#">💬</a></div>
                </div>
            </div>
            <div className="footer-bottom"><p>© ۱۴۰۴ مکتب وفاق - تمام حقوق محفوظ است</p></div>
        </div>
    </footer>
);

const SocialFloat = () => (
    <div className="social-float">
        <a href="https://wa.me/93745329195" className="whatsapp" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
        </a>
        <a href="https://www.facebook.com/p/Wifaq-School-100064316277071/" className="facebook" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="white"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
        </a>
        <a href="https://www.youtube.com/@Wifaqschool" className="youtube" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="white"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /></svg>
        </a>
    </div>
);

// ── WIFAQ CHATBOT WIDGET ────────────────────────────────────
const WifaqChat = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [hasGreeted, setHasGreeted] = useState(false);
  const messagesEndRef = React.useRef(null);
  const inputRef = React.useRef(null);

  // ── REPLACE WITH YOUR DEPLOYED GAS WEB APP URL ──
  const API_URL = 'https://script.google.com/macros/s/AKfycbyYyFpDViNHm2dr2YjADw9xPdymtC9YJtNptohe6lyfJCOhRte0a3WFZ2mS0Oyje-1u/exec';

  // Generate a unique session ID per chat session
  const [sessionId] = useState(() => 'ses_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6));

  // Auto-scroll to bottom
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // Focus input when chat opens
  useEffect(() => {
    if (isOpen && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isOpen]);

  // Welcome message on first open
  useEffect(() => {
    if (isOpen && !hasGreeted) {
      setHasGreeted(true);
      setMessages([{
        role: 'assistant',
        content: 'سلام! 👋 من وفاق‌یار هستم — دستیار هوشمند مکتب وفاق.\n\nدر مورد ثبت نام، فیس، برنامه‌ها یا هر سوال دیگر کمک‌تان کرده می‌توانم. بفرمایید! 😊',
      }]);
    }
  }, [isOpen, hasGreeted]);

  // Helper: call GAS backend (handles CORS/redirect properly)
  const callAPI = async (message, history) => {
    const payload = JSON.stringify({ message, history, sessionId });
    const res = await fetch(API_URL, {
      method: 'POST',
      body: payload,
      headers: { 'Content-Type': 'text/plain' },
    });
    return await res.json();
  };

  const sendMessage = async () => {
    const text = input.trim();
    if (!text || isLoading) return;

    const userMsg = { role: 'user', content: text };
    const updatedMessages = [...messages, userMsg];
    setMessages(updatedMessages);
    setInput('');
    setIsLoading(true);

    try {
      const history = updatedMessages
        .filter((_, i) => i > 0)
        .map(m => ({ role: m.role, content: m.content }));

      const data = await callAPI(text, history.slice(0, -1));

      if (data.reply) {
        setMessages(prev => [...prev, { role: 'assistant', content: data.reply }]);
      } else {
        setMessages(prev => [...prev, { role: 'assistant', content: 'ببخشید، مشکلی پیش آمد. لطفاً دوباره تلاش کنید.' }]);
      }
    } catch (err) {
      setMessages(prev => [...prev, { role: 'assistant', content: 'ارتباط قطع شد. لطفاً انترنت خود را بررسی کنید.' }]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  const getDir = (text) => {
    const rtlChars = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
    return rtlChars.test(text) ? 'rtl' : 'ltr';
  };

  const formatMessage = (text) => {
    return text.split('\n').map((line, i) => {
      const parts = line.split(/(https?:\/\/[^\s]+)/g);
      return (
        <React.Fragment key={i}>
          {i > 0 && <br />}
          {parts.map((part, j) =>
            /^https?:\/\//.test(part)
              ? <a key={j} href={part} target="_blank" rel="noopener noreferrer" style={{ color: '#14919b', textDecoration: 'underline', wordBreak: 'break-all' }}>{part}</a>
              : part
          )}
        </React.Fragment>
      );
    });
  };

  const handleQuickAction = (q) => {
    setInput('');
    const userMsg = { role: 'user', content: q };
    setMessages(prev => [...prev, userMsg]);
    setIsLoading(true);

    callAPI(q, [])
      .then(data => {
        setMessages(prev => [...prev, { role: 'assistant', content: data.reply || 'ببخشید، مشکلی پیش آمد.' }]);
      })
      .catch(() => {
        setMessages(prev => [...prev, { role: 'assistant', content: 'ارتباط قطع شد.' }]);
      })
      .finally(() => setIsLoading(false));
  };

  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

        .wfq-chat-toggle {
          position: fixed;
          bottom: 100px;
          right: 24px;
          z-index: 9999;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: none;
          cursor: pointer;
          background: linear-gradient(135deg, #0d7377, #14919b);
          box-shadow: 0 4px 20px rgba(13, 115, 119, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          animation: wfq-pulse 2s infinite;
        }
        .wfq-chat-toggle:hover {
          transform: scale(1.08);
          box-shadow: 0 6px 28px rgba(13, 115, 119, 0.55);
        }
        .wfq-chat-toggle.open {
          animation: none;
          background: #374151;
        }
        @keyframes wfq-pulse {
          0%, 100% { box-shadow: 0 4px 20px rgba(13, 115, 119, 0.4); }
          50% { box-shadow: 0 4px 30px rgba(13, 115, 119, 0.7); }
        }

        .wfq-chat-window {
          position: fixed;
          bottom: 172px;
          right: 24px;
          z-index: 9998;
          width: 380px;
          max-width: calc(100vw - 48px);
          height: 520px;
          max-height: calc(100vh - 200px);
          border-radius: 20px;
          overflow: hidden;
          background: #fff;
          box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
          display: flex;
          flex-direction: column;
          font-family: 'Vazirmatn', system-ui, sans-serif;
          animation: wfq-slideUp 0.3s ease;
        }
        @keyframes wfq-slideUp {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .wfq-chat-header {
          background: linear-gradient(135deg, #0d7377, #14919b);
          padding: 16px 20px;
          display: flex;
          align-items: center;
          gap: 12px;
          direction: rtl;
        }
        .wfq-chat-avatar {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255,255,255,0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.3rem;
          flex-shrink: 0;
        }
        .wfq-chat-header-info h3 {
          margin: 0;
          color: #fff;
          font-size: 0.95rem;
          font-weight: 600;
        }
        .wfq-chat-header-info p {
          margin: 2px 0 0;
          color: rgba(255,255,255,0.75);
          font-size: 0.72rem;
        }

        .wfq-chat-messages {
          flex: 1;
          overflow-y: auto;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          background: #f8fafb;
        }
        .wfq-chat-messages::-webkit-scrollbar { width: 5px; }
        .wfq-chat-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

        .wfq-msg {
          max-width: 85%;
          padding: 10px 14px;
          border-radius: 16px;
          font-size: 0.85rem;
          line-height: 1.65;
          word-wrap: break-word;
        }
        .wfq-msg.user {
          align-self: flex-start;
          background: linear-gradient(135deg, #0d7377, #14919b);
          color: #fff;
          border-bottom-left-radius: 4px;
        }
        .wfq-msg.assistant {
          align-self: flex-end;
          background: #fff;
          color: #1f2937;
          border: 1px solid #e5e7eb;
          border-bottom-right-radius: 4px;
        }

        .wfq-typing {
          align-self: flex-end;
          display: flex;
          gap: 5px;
          padding: 12px 18px;
          background: #fff;
          border-radius: 16px;
          border: 1px solid #e5e7eb;
        }
        .wfq-typing span {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #14919b;
          animation: wfq-bounce 1.2s infinite;
        }
        .wfq-typing span:nth-child(2) { animation-delay: 0.2s; }
        .wfq-typing span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes wfq-bounce {
          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
          30% { transform: translateY(-6px); opacity: 1; }
        }

        .wfq-chat-input-area {
          padding: 12px 16px;
          border-top: 1px solid #e5e7eb;
          background: #fff;
          display: flex;
          gap: 8px;
          align-items: flex-end;
          direction: rtl;
        }
        .wfq-chat-input-area textarea {
          flex: 1;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          padding: 10px 14px;
          font-family: 'Vazirmatn', system-ui, sans-serif;
          font-size: 0.85rem;
          resize: none;
          outline: none;
          direction: rtl;
          min-height: 42px;
          max-height: 100px;
          line-height: 1.5;
          transition: border-color 0.2s;
        }
        .wfq-chat-input-area textarea:focus {
          border-color: #14919b;
        }
        .wfq-chat-input-area textarea::placeholder {
          color: #9ca3af;
        }
        .wfq-send-btn {
          width: 42px;
          height: 42px;
          border: none;
          border-radius: 12px;
          background: linear-gradient(135deg, #0d7377, #14919b);
          color: #fff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: all 0.2s;
        }
        .wfq-send-btn:hover:not(:disabled) {
          transform: scale(1.05);
          box-shadow: 0 2px 12px rgba(13,115,119,0.3);
        }
        .wfq-send-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .wfq-quick-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 0 16px 12px;
          background: #f8fafb;
          direction: rtl;
        }
        .wfq-quick-btn {
          padding: 5px 12px;
          border: 1px solid #d1d5db;
          border-radius: 20px;
          background: #fff;
          font-family: 'Vazirmatn', system-ui, sans-serif;
          font-size: 0.72rem;
          color: #374151;
          cursor: pointer;
          transition: all 0.2s;
          white-space: nowrap;
        }
        .wfq-quick-btn:hover {
          background: #0d7377;
          color: #fff;
          border-color: #0d7377;
        }

        @media (max-width: 480px) {
          .wfq-chat-window {
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
          }
          .wfq-chat-toggle {
            bottom: 90px;
            right: 16px;
          }
        }
      `}</style>

      <button
        className={`wfq-chat-toggle ${isOpen ? 'open' : ''}`}
        onClick={() => setIsOpen(!isOpen)}
        aria-label="Chat"
      >
        {isOpen ? (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        ) : (
          <svg width="38" height="38" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="42" cy="18" r="6" fill="white"/>
            <circle cx="42" cy="18" r="3" fill="#052528">
              <animate attributeName="cx" values="41;44;40;42;44;41" dur="3s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="18;17;19;18;17;18" dur="2.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx="58" cy="18" r="6" fill="white"/>
            <circle cx="58" cy="18" r="3" fill="#052528">
              <animate attributeName="cx" values="57;60;56;58;60;57" dur="3s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="18;17;19;18;17;18" dur="2.5s" repeatCount="indefinite"/>
            </circle>
            <rect x="35" y="12" width="14" height="12" rx="6" fill="#0d7377" opacity="0">
              <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;0;0;0;0;0;0;0;0;0;0" dur="4s" repeatCount="indefinite"/>
            </rect>
            <rect x="51" y="12" width="14" height="12" rx="6" fill="#0d7377" opacity="0">
              <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;0;0;0;0;0;0;0;0;0;0" dur="4s" repeatCount="indefinite"/>
            </rect>
            <path d="M 60 35 C 78 35, 82 48, 82 58 C 82 72, 72 84, 52 84 C 38 84, 22 76, 18 62 C 16 54, 20 48, 28 48 C 36 48, 40 54, 36 62"
                  fill="none" stroke="white" strokeWidth="5" strokeLinecap="round"/>
          </svg>
        )}
      </button>

      {isOpen && (
        <div className="wfq-chat-window">
          <div className="wfq-chat-header">
            <div className="wfq-chat-avatar">
              <svg width="30" height="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="42" cy="18" r="6" fill="white"/>
                <circle cx="42" cy="18" r="3" fill="#0d7377">
                  <animate attributeName="cx" values="41;44;40;42;44;41" dur="3s" repeatCount="indefinite"/>
                  <animate attributeName="cy" values="18;17;19;18;17;18" dur="2.5s" repeatCount="indefinite"/>
                </circle>
                <circle cx="58" cy="18" r="6" fill="white"/>
                <circle cx="58" cy="18" r="3" fill="#0d7377">
                  <animate attributeName="cx" values="57;60;56;58;60;57" dur="3s" repeatCount="indefinite"/>
                  <animate attributeName="cy" values="18;17;19;18;17;18" dur="2.5s" repeatCount="indefinite"/>
                </circle>
                <rect x="35" y="12" width="14" height="12" rx="6" fill="rgba(255,255,255,0.15)" opacity="0">
                  <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;0;0;0;0;0;0;0;0;0;0" dur="4s" repeatCount="indefinite"/>
                </rect>
                <rect x="51" y="12" width="14" height="12" rx="6" fill="rgba(255,255,255,0.15)" opacity="0">
                  <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;0;0;0;0;0;0;0;0;0;0" dur="4s" repeatCount="indefinite"/>
                </rect>
                <path d="M 60 35 C 78 35, 82 48, 82 58 C 82 72, 72 84, 52 84 C 38 84, 22 76, 18 62 C 16 54, 20 48, 28 48 C 36 48, 40 54, 36 62"
                      fill="none" stroke="white" strokeWidth="5" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="wfq-chat-header-info">
              <h3>وفاق‌یار</h3>
              <p>دستیار هوشمند شبکۀ تعلیمی وفاق</p>
            </div>
          </div>

          <div className="wfq-chat-messages">
            {messages.map((msg, i) => (
              <div
                key={i}
                className={`wfq-msg ${msg.role}`}
                dir={getDir(msg.content)}
              >
                {formatMessage(msg.content)}
              </div>
            ))}
            {isLoading && (
              <div className="wfq-typing">
                <span></span><span></span><span></span>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

          {messages.length <= 1 && !isLoading && (
            <div className="wfq-quick-actions">
              {[
                'ثبت نام چطور می‌شود؟',
                'لایحۀ فیس',
                'سیستم ۴بُعدی چیست؟',
                'برنامه‌های تعلیمی',
                'تماس با مکتب',
              ].map((q, i) => (
                <button key={i} className="wfq-quick-btn" onClick={() => handleQuickAction(q)}>
                  {q}
                </button>
              ))}
            </div>
          )}

          <div className="wfq-chat-input-area">
            <textarea
              ref={inputRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="سوال خود را بنویسید..."
              rows={1}
              disabled={isLoading}
            />
            <button
              className="wfq-send-btn"
              onClick={sendMessage}
              disabled={!input.trim() || isLoading}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" style={{ transform: 'rotate(180deg)' }}>
                <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
              </svg>
            </button>
          </div>
        </div>
      )}
    </>
  );
};

// App
const App = () => (
    <>
        <Navbar />
        <Hero />
        <Stats />
        <Philosophy />
        <Difference />
        <Programs />
        <Testimonials />
        <News />
        <CTA />
        <Footer />
        <SocialFloat />
        <WifaqChat />
    </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<App />);