import React, { useState, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { ArrowRight, Eye, MessageCircle, Brain, Menu, X, ChevronDown, Mail, Instagram, Facebook, ExternalLink, Lock, Plus, Trash2, LogOut, Users, Sparkles, Pencil, ChevronLeft, ChevronRight } from 'lucide-react';

// Firebase SDK Imports
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, updateDoc, getDocs, deleteDoc, doc, query, orderBy, serverTimestamp } from 'firebase/firestore';


const firebaseConfig = {
    apiKey: "AIzaSyC3h73Qau62NrIKS00XtNr54OPh5GmDno0",
    authDomain: "art-yurutto.firebaseapp.com",
    projectId: "art-yurutto",
    storageBucket: "art-yurutto.firebasestorage.app",
    messagingSenderId: "935887896154",
    appId: "1:935887896154:web:741eaf3d16bf7c8113e263"
};

// Firebase初期化判定
const isFirebaseReady = firebaseConfig.apiKey !== "" && firebaseConfig.apiKey !== "YOUR_API_KEY";
let auth, db;

if (isFirebaseReady) {
    const app = initializeApp(firebaseConfig);
    auth = getAuth(app);
    db = getFirestore(app);
} else {
    console.warn("⚠️ Firebase未設定モード: データの保存・削除は機能しません。");
}

// 初期データ
const INITIAL_POSTS = [];

// --- Components ---

const FadeInSection = ({ children, delay = 0, className = "" }) => {
    const [isVisible, setVisible] = useState(false);
    const domRef = useRef();

    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => setVisible(entry.isIntersecting));
        });
        const { current } = domRef;
        if (current) observer.observe(current);
        return () => { if (current) observer.unobserve(current); };
    }, []);

    return (
        <div
            ref={domRef}
            className={`transition-all duration-1000 transform ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} ${className}`}
            style={{ transitionDelay: `${delay}ms` }}
        >
            {children}
        </div>
    );
};

const InteractiveCanvas = () => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        let width, height;
        let particles = [];
        const colors = [
            'rgba(45, 212, 191, 0.4)', // Teal
            'rgba(96, 165, 250, 0.4)', // Blue
            'rgba(251, 146, 60, 0.4)', // Orange
            'rgba(244, 114, 182, 0.4)', // Pink
            'rgba(167, 139, 250, 0.4)'  // Purple
        ];

        const particleCount = 25; 

        const resize = () => {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
        };

        class Particle {
            constructor() {
                this.init();
            }

            init() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 0.3;
                this.vy = (Math.random() - 0.5) * 0.3;
                this.size = Math.random() * 80 + 40;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.angle = Math.random() * Math.PI * 2;
                this.spinSpeed = (Math.random() - 0.5) * 0.002;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.angle += this.spinSpeed;

                this.x += Math.sin(this.angle) * 0.2;
                this.y += Math.cos(this.angle) * 0.2;

                if (this.x < -this.size * 2) this.x = width + this.size;
                if (this.x > width + this.size * 2) this.x = -this.size;
                if (this.y < -this.size * 2) this.y = height + this.size;
                if (this.y > height + this.size * 2) this.y = -this.size;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        const init = () => {
            resize();
            particles = [];
            for (let i = 0; i < particleCount; i++) particles.push(new Particle());
        };

        const animate = () => {
            ctx.clearRect(0, 0, width, height);
            ctx.globalCompositeOperation = 'multiply'; 

            particles.forEach(p => {
                p.update();
                p.draw();
            });

            ctx.globalCompositeOperation = 'source-over'; 
            requestAnimationFrame(animate);
        };

        window.addEventListener('resize', resize);
        init();
        animate();

        return () => window.removeEventListener('resize', resize);
    }, []);

    return <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full z-0 pointer-events-none opacity-60" />;
};

const LoginModal = ({ isOpen, onClose, onLogin }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    if (!isOpen) return null;

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');
        try {
            if (!isFirebaseReady) throw new Error("Firebase設定が完了していません。HTMLファイル内のfirebaseConfigを編集してください。");
            await signInWithEmailAndPassword(auth, email, password);
            onLogin();
            onClose();
        } catch (err) {
            setError('ログイン失敗: ' + err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4 animate-[fadeIn_0.2s_ease-out]">
            <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl">
                <h3 className="text-2xl font-serif font-bold mb-6 text-slate-900 flex items-center gap-2">
                    <Lock className="w-6 h-6 text-teal-500" /> 管理者ログイン
                </h3>
                {error && <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm font-medium">{error}</div>}
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label className="block text-sm font-bold text-slate-600 mb-1">メールアドレス</label>
                        <input type="email" required value={email} onChange={e => setEmail(e.target.value)} className="w-full border border-slate-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all" placeholder="admin@example.com" />
                    </div>
                    <div>
                        <label className="block text-sm font-bold text-slate-600 mb-1">パスワード</label>
                        <input type="password" required value={password} onChange={e => setPassword(e.target.value)} className="w-full border border-slate-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all" />
                    </div>
                    <div className="flex justify-end gap-3 mt-6">
                        <button type="button" onClick={onClose} className="px-4 py-2 text-slate-500 hover:text-slate-800 font-medium">キャンセル</button>
                        <button type="submit" disabled={loading} className="bg-teal-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-teal-600 disabled:opacity-50 transition-colors shadow-md">
                            {loading ? '認証中...' : 'ログイン'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const PostModal = ({ isOpen, onClose, onSuccess, postToEdit = null }) => {
    const [formData, setFormData] = useState({ title: '', url: '', imageUrl: '', category: 'Report', summary: '', date: '' });
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (isOpen) {
            if (postToEdit) {
                setFormData({
                    title: postToEdit.title,
                    url: postToEdit.url,
                    imageUrl: postToEdit.imageUrl,
                    category: postToEdit.category,
                    summary: postToEdit.summary,
                    date: postToEdit.date
                });
            } else {
                const d = new Date();
                setFormData({
                    title: '', url: '', imageUrl: '', category: 'Report', summary: '',
                    date: `${d.getFullYear()}.${d.getMonth() + 1}.${d.getDate()}`
                });
            }
        }
    }, [isOpen, postToEdit]);

    if (!isOpen) return null;

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        try {
            if (postToEdit) {
                await updateDoc(doc(db, "posts", postToEdit.id), {
                    ...formData,
                    updatedAt: serverTimestamp() 
                });
            } else {
                await addDoc(collection(db, "posts"), {
                    ...formData,
                    createdAt: serverTimestamp()
                });
            }
            onSuccess();
            onClose();
        } catch (err) {
            alert('エラー: ' + err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4 animate-[fadeIn_0.2s_ease-out]">
            <div className="bg-white rounded-2xl p-8 max-w-lg w-full shadow-2xl max-h-[90vh] overflow-y-auto">
                <h3 className="text-xl font-serif font-bold mb-6 text-slate-900 flex items-center gap-2">
                    {postToEdit ? <Pencil className="w-6 h-6 text-teal-500" /> : <Plus className="w-6 h-6 text-teal-500" />}
                    {postToEdit ? '記事を編集' : '新規記事を追加'}
                </h3>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-bold text-slate-500 mb-1">日付</label>
                            <input type="text" required value={formData.date} onChange={e => setFormData({ ...formData, date: e.target.value })} className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none" placeholder="2025.10.23" />
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-slate-500 mb-1">カテゴリ</label>
                            <select value={formData.category} onChange={e => setFormData({ ...formData, category: e.target.value })} className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none bg-white">
                                <option value="Report">Report</option>
                                <option value="Workshop">Workshop</option>
                                <option value="Seminar">Seminar</option>
                                <option value="Tech & Art">Tech & Art</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1">タイトル</label>
                        <input type="text" required value={formData.title} onChange={e => setFormData({ ...formData, title: e.target.value })} className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none" placeholder="記事のタイトル" />
                    </div>
                    <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1">リンクURL (note等)</label>
                        <input type="url" required value={formData.url} onChange={e => setFormData({ ...formData, url: e.target.value })} className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none" placeholder="https://note.com/..." />
                    </div>
                    <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1">サムネイル画像URL</label>
                        <input type="url" required value={formData.imageUrl} onChange={e => setFormData({ ...formData, imageUrl: e.target.value })} className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none" placeholder="https://..." />
                    </div>
                    <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1">概要</label>
                        <textarea required value={formData.summary} onChange={e => setFormData({ ...formData, summary: e.target.value })} className="w-full border p-2 rounded-lg h-24 focus:ring-2 focus:ring-teal-500 outline-none resize-none"></textarea>
                    </div>
                    <div className="flex justify-end gap-3 mt-6">
                        <button type="button" onClick={onClose} className="px-4 py-2 text-slate-500 hover:text-slate-800 font-medium">キャンセル</button>
                        <button type="submit" disabled={loading} className="bg-teal-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-teal-600 shadow-md transition-colors">
                            {loading ? '保存中...' : (postToEdit ? '更新する' : '公開する')}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

// --- Main App ---

function App() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [scrolled, setScrolled] = useState(false);

    // CMS State
    const [user, setUser] = useState(null);
    // Media State
    const [posts, setPosts] = useState(INITIAL_POSTS);
    const [editingPost, setEditingPost] = useState(null);
    const [showAllPosts, setShowAllPosts] = useState(false);

    // Slideshow State
    const [currentSlide, setCurrentSlide] = useState(0);
    const workshopImages = [
        "./assets/images/workshop1.jpg",
        "./assets/images/workshop2.jpg",
        "./assets/images/workshop3.jpg"
    ];

    const teamMembers = [
        {
            name: "よしこ",
            bio: "静岡市在住、アルゆるのnote担当。ゲッターズ飯田の占いでは、金のインディアン座。趣味は森カフェ&温泉&旅先の食品スーパー巡り。",
            image: "./assets/images/member_nakano.png"
        },
        {
            name: "いー",
            bio: "基本ものぐさ体質。駅のエスカレーターを使わずに階段を使ったり、レンチン！待ちの間にジャンプするのがマイブーム。美術館巡りのために体力をつけています。横浜市在住",
            image: "./assets/images/member_ee.png"
        },
        {
            name: "まー",
            bio: "のんびり、のんきに過ごしていたいのに、なぜかいつもフルスロットル。好物は旅先アートに「目からウロコ」と、採れたてピーマン。Duolingoのイタリア語を日課に、渋谷区の片隅に生息。",
            image: "./assets/images/member_maa.png"
        },
        {
            name: "ししょー",
            bio: "昨年、家族に迎えた保護猫(むぎ)のお世話が日課。いつか、むぎを肩に乗せて美術館巡りをするのが夢。お気に入りの美術館は横浜美術館。静岡出身。",
            image: "./assets/images/member_shisho.png"
        }
    ];

    const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % workshopImages.length);
    const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + workshopImages.length) % workshopImages.length);

    useEffect(() => {
        const timer = setInterval(nextSlide, 5000);
        return () => clearInterval(timer);
    }, []);

    const [isLoginOpen, setLoginOpen] = useState(false);
    const [isPostOpen, setPostOpen] = useState(false);

    // Admin Logic
    const [isAdminLinkVisible, setIsAdminLinkVisible] = useState(false);
    const [inputSequence, setInputSequence] = useState('');

    // Contact Form State
    const [contactForm, setContactForm] = useState({ name: '', email: '', message: '' });
    const [isContactLoading, setIsContactLoading] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const recaptchaRef = useRef(null);

    useEffect(() => {
        const renderRecaptcha = () => {
            if (window.grecaptcha && recaptchaRef.current && !submitted) {
                try {
                    window.grecaptcha.render(recaptchaRef.current, {
                        'sitekey': '6Ldy30AsAAAAANh1kNOoJIEkWcvW9trYovFdJ9g0'
                    });
                } catch (e) {
                    console.log("reCAPTCHA already rendered");
                }
            }
        };

        if (window.grecaptcha && window.grecaptcha.render) {
            renderRecaptcha();
        } else {
            const timer = setInterval(() => {
                if (window.grecaptcha && window.grecaptcha.render) {
                    renderRecaptcha();
                    clearInterval(timer);
                }
            }, 500);
            return () => clearInterval(timer);
        }
    }, [submitted]);

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 50);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    useEffect(() => {
        if (isFirebaseReady && auth) {
            const unsubscribe = onAuthStateChanged(auth, (u) => setUser(u));
            return () => unsubscribe();
        }
    }, []);

    const fetchPosts = async () => {
        if (!isFirebaseReady || !db) return;
        try {
            const q = query(collection(db, "posts"), orderBy("createdAt", "desc"));
            const snapshot = await getDocs(q);
            const fetched = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            if (fetched.length > 0) setPosts(fetched);
        } catch (e) {
            console.error("Fetch Error:", e);
        }
    };

    useEffect(() => {
        fetchPosts();
    }, []);

    useEffect(() => {
        const handleKeyDown = (e) => {
            const nextSequence = (inputSequence + e.key).slice(-7);
            setInputSequence(nextSequence);

            if (nextSequence.toLowerCase() === 'yurutto') {
                setIsAdminLinkVisible(true);
                console.log("Admin gate unlocked.");
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [inputSequence]);

    const deletePost = async (id) => {
        if (!confirm("本当にこの記事を削除しますか？")) return;
        try {
            await deleteDoc(doc(db, "posts", id));
            fetchPosts();
        } catch (e) {
            alert("削除失敗: " + e.message);
        }
    };

    const handleContactSubmit = async (e) => {
        e.preventDefault();
        setIsContactLoading(true);

        try {
            const recaptchaResponse = grecaptcha.getResponse();
            if (!recaptchaResponse) {
                alert("reCAPTCHAのチェックをお願いします。");
                setIsContactLoading(false);
                return;
            }

            const formData = new FormData();
            formData.append('お名前', contactForm.name);
            formData.append('メールアドレス', contactForm.email);
            formData.append('お問い合わせ内容', contactForm.message);
            formData.append('g-recaptcha-response', recaptchaResponse); 

            await fetch("https://ssgform.com/s/AMBdjFTKSywm", {
                method: "POST",
                body: formData,
                mode: "no-cors" 
            });

            setSubmitted(true);
            setContactForm({ name: '', email: '', message: '' });
        } catch (err) {
            console.error("Submission Error:", err);
            alert("送信時にエラーが発生しました。お手数ですが、info@art-yurutto.jp まで直接ご連絡いただくか、時間をおいて再度お試しください。");
        } finally {
            setIsContactLoading(false);
        }
    };

    const scrollToSection = (id) => {
        setIsMenuOpen(false);
        document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    };

    return (
        <div className="min-h-screen bg-slate-50 text-slate-900 font-sans overflow-x-hidden selection:bg-teal-500 selection:text-white">

            {/* ナビゲーション（お知らせバナー追加版） */}
            <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/90 backdrop-blur-md shadow-sm border-b border-slate-200' : 'bg-transparent'}`}>
                
                {/* ▼ ヘッダー上部のお知らせバナー ▼ */}
                <div 
                    className="bg-teal-600 text-white text-xs md:text-sm font-bold text-center py-2 px-4 cursor-pointer hover:bg-teal-700 transition-colors flex items-center justify-center gap-2" 
                    onClick={() => scrollToSection('event')}
                >
                    <Sparkles className="w-4 h-4 text-yellow-300 shrink-0" />
                    <span className="truncate">【沼津市・中学生向け】秋からの部活動に向けた体験会を開催します！詳細・チラシはこちら</span>
                    <ArrowRight className="w-4 h-4 shrink-0" />
                </div>
                {/* ▲ 追加ここまで ▲ */}

                <div className={`container mx-auto px-6 flex flex-col items-center relative ${scrolled ? 'py-2' : 'py-4'}`}>
                    <div className="flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
                        <img src="./assets/images/logo.png" alt="アール・ゆるっと" className={`w-auto transition-all duration-300 ${scrolled ? 'h-10' : 'h-16 md:h-20'} mr-6 md:mr-10`} />
                    </div>

                    {/* メニュー */}
                    <div className={`hidden md:flex items-center text-slate-700 transition-all duration-300 ${scrolled ? 'mt-2 gap-6' : 'mt-6 gap-8'}`}>
                        {['Event', 'Concept', 'Programs', 'Voices', 'Media', 'About', 'Members'].map((item) => (
                            <button key={item} onClick={() => scrollToSection(item.toLowerCase())} className="text-sm tracking-widest hover:text-teal-600 transition-colors relative group font-medium">
                                {item}
                                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-teal-600 transition-all group-hover:w-full"></span>
                            </button>
                        ))}
                        <button onClick={() => scrollToSection('contact')} className={`bg-teal-500 text-white rounded-full font-bold hover:bg-teal-600 transition-all transform hover:scale-105 shadow-md hover:shadow-lg ${scrolled ? 'px-4 py-1.5 text-xs' : 'px-6 py-2 text-sm'}`}>
                            お問い合わせ
                        </button>
                    </div>

                    <button className="md:hidden text-slate-900 p-2 absolute right-6 top-1/2 -translate-y-1/2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
                        {isMenuOpen ? <X /> : <Menu />}
                    </button>
                </div>

                {/* モバイル用メニュー */}
                {isMenuOpen && (
                    <div className="absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl border-b border-slate-200 p-6 flex flex-col space-y-4 md:hidden shadow-lg animate-[fadeIn_0.2s]">
                        {['Event', 'Concept', 'Programs', 'Voices', 'Media', 'About', 'Members', 'Contact'].map((item) => (
                            <button key={item} onClick={() => scrollToSection(item.toLowerCase())} className="text-left text-lg py-3 border-b border-slate-100 text-slate-700 hover:text-teal-600">
                                {item}
                            </button>
                        ))}
                    </div>
                )}

                {/* Admin Toolbar */}
                {user && (
                    <div className="absolute top-full right-0 m-4 bg-slate-800 text-white px-4 py-2 rounded-lg shadow-xl flex items-center gap-4 text-xs font-bold animate-[slideIn_0.3s]">
                        <span className="text-teal-400">● Admin Mode</span>
                        <button onClick={() => signOut(auth)} className="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition-colors flex items-center gap-1">
                            <LogOut size={12} /> ログアウト
                        </button>
                    </div>
                )}
            </nav>

            {/* Hero Section */}
            <header className="relative h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-slate-50 to-white pt-16">
                <InteractiveCanvas />
                <div className="relative z-10 container mx-auto px-6 text-center">
                    <FadeInSection>
                        <p className="text-teal-600 tracking-[0.3em] mb-6 text-sm md:text-base uppercase font-bold mt-20 md:mt-0">New Perspective for Life</p>
                        <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl font-bold leading-normal tracking-wider mb-8 text-slate-900 drop-shadow-sm">
                            答えのない問いに<br />
                            対話を
                        </h1>
                        <p className="max-w-xl mx-auto text-slate-700 leading-loose text-base md:text-lg mb-12">
                            アート作品を「見る」だけではなく、「感じ、考え、話し、聴く」。<br className="hidden md:block" />
                            対話による美術鑑賞を通じて、固定観念をほどき、<br className="hidden md:block" />
                            多様な価値観が出会う場を創造します。
                        </p>
                        <div className="flex flex-col md:flex-row justify-center gap-4">
                            <button onClick={() => scrollToSection('programs')} className="group border-2 border-teal-500 text-teal-600 px-8 py-3 rounded-full hover:bg-teal-500 hover:text-white transition-all duration-300 flex items-center justify-center gap-2 font-bold bg-white/50 backdrop-blur-sm">
                                プログラムを見る
                                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                            </button>
                        </div>
                    </FadeInSection>
                </div>
                <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce text-teal-500">
                    <ChevronDown />
                </div>
            </header>

            {/* Event Section (修正版) */}
            <section id="event" className="py-24 bg-teal-50/30 relative overflow-hidden">
                <div className="container mx-auto px-6 max-w-5xl">
                    <FadeInSection>
                        <div className="text-center mb-16">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">News & Event</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">お知らせ・イベント</h2>
                        </div>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="bg-white rounded-3xl p-8 md:p-12 shadow-xl shadow-teal-900/5 border border-teal-100 flex flex-col md:flex-row gap-10 items-center relative overflow-hidden">
                            {/* 背景の装飾 */}
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-teal-50 rounded-full blur-3xl pointer-events-none"></div>
                            <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-yellow-50 rounded-full blur-3xl pointer-events-none"></div>

                            <div className="w-full md:w-1/2 relative z-10">
                                {/* チラシ画像エリア */}
                                <div className="aspect-[1/1.414] bg-slate-50 rounded-xl border border-slate-200 flex items-center justify-center overflow-hidden relative shadow-md">
                                    <img 
                                        src="./assets/images/flyer.png" 
                                        alt="体験会チラシ" 
                                        className="w-full h-full object-cover transition-transform duration-500 hover:scale-105" 
                                        onError={(e) => { 
                                            e.target.onerror = null; 
                                            e.target.style.display = 'none'; 
                                            e.target.nextElementSibling.style.display = 'flex'; 
                                        }} 
                                    />
                                    {/* 画像エラー時のプレースホルダー */}
                                    <div className="absolute inset-0 hidden flex-col items-center justify-center text-slate-400 p-6 text-center bg-slate-50">
                                        <Eye className="w-10 h-10 mb-3 opacity-30" />
                                        <p className="font-bold text-sm">ここにチラシ画像が表示されます</p>
                                        <p className="text-xs mt-1">./assets/images/flyer.png</p>
                                    </div>
                                </div>
                            </div>
                            <div className="w-full md:w-1/2 space-y-6 relative z-10">
                                <div className="inline-block bg-teal-100 text-teal-800 text-xs font-bold px-3 py-1 rounded-full">
                                    沼津市 中学生向け
                                </div>
                                <h3 className="text-2xl md:text-3xl font-serif font-bold text-slate-900 leading-snug">
                                    秋から始まる部活動に向けた<br />対話型鑑賞 体験会
                                </h3>
                                <p className="text-slate-600 leading-relaxed">
                                    沼津市の中学生を対象とした、新しい形のアート体験プログラムがスタートします。「正解のない問い」に向き合い、自分の感じたことを言葉にする楽しさを一緒に体験してみませんか？
                                </p>
                                
                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-100 space-y-3 text-sm">
                                    <div className="flex gap-4">
                                        <span className="font-bold text-teal-600 w-12 shrink-0">対象</span>
                                        <span className="text-slate-900 font-medium">
                                            沼津市内の中学生<span className="text-xs text-slate-600 ml-2 block sm:inline">※保護者の同伴も可能です</span>
                                        </span>
                                    </div>
                                    <div className="flex gap-4">
                                        <span className="font-bold text-teal-600 w-12 shrink-0">日時</span>
                                        <span className="text-slate-900">2026年8月8日（土）13:00 - 16:00</span>
                                    </div>
                                    <div className="flex gap-4">
                                        <span className="font-bold text-teal-600 w-12 shrink-0">会場</span>
                                        <span className="text-slate-900">サンウェルぬまづ2階 中会議室</span>
                                    </div>
                                </div>

                                <div className="pt-2 flex flex-col sm:flex-row gap-4">
                                    <a href="./assets/flyer.pdf" target="_blank" rel="noopener noreferrer" className="flex-1 bg-slate-800 text-white text-center py-3 rounded-full font-bold hover:bg-slate-700 transition-colors shadow-md flex items-center justify-center gap-2 text-sm">
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                                        チラシ (PDF)
                                    </a>
                                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSeaE-HnfvtZaGYBI-KZfUtW7DHsSuS4bK9MQYuUVW5UA8Zy6A/viewform?usp=dialog" target="_blank" rel="noopener noreferrer" className="flex-1 border-2 border-teal-500 text-teal-600 text-center py-3 rounded-full font-bold hover:bg-teal-50 transition-colors flex items-center justify-center gap-2 text-sm">
                                        お申し込みはこちら
                                    </a>
                                </div>
                            </div>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* Concept Section */}
            <section id="concept" className="py-24 md:py-32 bg-white relative overflow-hidden">
                <div className="container mx-auto px-6">
                    <div className="flex flex-col md:flex-row items-center gap-16">
                        <div className="w-full md:w-1/2">
                            <FadeInSection>
                                <div className="relative w-full max-w-md mx-auto group">
                                    <div className="absolute -top-4 -left-4 w-24 h-24 bg-teal-100 rounded-full blur-xl opacity-60 group-hover:scale-110 transition-transform"></div>
                                    <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-purple-100 rounded-full blur-xl opacity-60 group-hover:scale-110 transition-transform"></div>

                                    <div className="relative rounded-2xl overflow-hidden shadow-2xl transform rotate-2 group-hover:rotate-0 transition-transform duration-500 bg-slate-200">
                                        {/* Slideshow Container */}
                                        <div className="relative h-[400px] w-full">
                                            {workshopImages.map((img, index) => (
                                                <div
                                                    key={index}
                                                    className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100' : 'opacity-0'}`}
                                                >
                                                    <img
                                                        src={img}
                                                        alt={`対話型鑑賞の様子 ${index + 1}`}
                                                        className="w-full h-full object-cover"
                                                    />
                                                </div>
                                            ))}

                                            {/* Controls */}
                                            <button
                                                onClick={(e) => { e.preventDefault(); prevSlide(); }}
                                                className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100"
                                            >
                                                <ChevronLeft size={24} />
                                            </button>
                                            <button
                                                onClick={(e) => { e.preventDefault(); nextSlide(); }}
                                                className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100"
                                            >
                                                <ChevronRight size={24} />
                                            </button>

                                            {/* Indicators */}
                                            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
                                                {workshopImages.map((_, index) => (
                                                    <button
                                                        key={index}
                                                        onClick={() => setCurrentSlide(index)}
                                                        className={`w-2 h-2 rounded-full transition-all ${index === currentSlide ? 'bg-white w-4' : 'bg-white/50'}`}
                                                    />
                                                ))}
                                            </div>
                                        </div>

                                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6 pt-12 pointer-events-none">
                                            <div className="flex items-center gap-2 text-teal-300 mb-1">
                                                <MessageCircle className="w-4 h-4" />
                                                <span className="text-xs font-bold tracking-widest uppercase">Dialogue</span>
                                            </div>
                                            <p className="text-white font-serif text-lg">「気づき」を言葉にする瞬間</p>
                                        </div>
                                    </div>
                                </div>
                            </FadeInSection>
                        </div>
                        <div className="w-full md:w-1/2">
                            <FadeInSection delay={200}>
                                <h2 className="text-2xl md:text-3xl font-serif font-bold mb-8 text-slate-900 leading-normal">
                                    「絵の見方」を教わる場ではありません。<br />
                                    「あなたの見方」を発見する場です。
                                </h2>
                                <div className="space-y-6 text-slate-700 leading-relaxed mb-8">
                                    <p>
                                        美術館に行っても「きれいだな」で終わってしまう。自分の考えを言葉にするのが苦手。最近、頭が凝り固まっている気がする…。
                                    </p>
                                    <p>
                                        そんな方にこそ体験してほしいのが、このワークショップです。<br />
                                        美術の知識は一切不要。必要なのは、あなたの「目」と「素直な感覚」だけ。<br />
                                        ファシリテーターが丁寧に問いかけ、あなたの思考や感性の言語化をサポートします。
                                    </p>
                                </div>

                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-100">
                                    <h3 className="font-bold text-slate-900 mb-4 border-b border-slate-200 pb-2 flex items-center gap-2">
                                        <span className="text-teal-500">◆</span> このワークショップで得られるもの
                                    </h3>
                                    <ul className="grid gap-4 sm:grid-cols-2">
                                        <li className="flex items-start gap-3">
                                            <div className="bg-white p-2 text-teal-500 rounded-lg shadow-sm shrink-0">
                                                <Eye className="w-5 h-5" />
                                            </div>
                                            <div>
                                                <span className="font-bold text-slate-900 block text-sm">観察力</span>
                                                <span className="text-xs text-slate-600 block mt-1">一つの物事を深く、多角的に見る力が養われます。</span>
                                            </div>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <div className="bg-white p-2 text-teal-500 rounded-lg shadow-sm shrink-0">
                                                <MessageCircle className="w-5 h-5" />
                                            </div>
                                            <div>
                                                <span className="font-bold text-slate-900 block text-sm">言語化力</span>
                                                <span className="text-xs text-slate-600 block mt-1">モヤモヤした感覚を言葉にするトレーニングになります。</span>
                                            </div>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <div className="bg-white p-2 text-teal-500 rounded-lg shadow-sm shrink-0">
                                                <Users className="w-5 h-5" />
                                            </div>
                                            <div>
                                                <span className="font-bold text-slate-900 block text-sm">多様性</span>
                                                <span className="text-xs text-slate-600 block mt-1">「他の人はそんなふうに見るのか！」という驚きが、視野を広げます。</span>
                                            </div>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <div className="bg-white p-2 text-teal-500 rounded-lg shadow-sm shrink-0">
                                                <Sparkles className="w-5 h-5" />
                                            </div>
                                            <div>
                                                <span className="font-bold text-slate-900 block text-sm">リフレッシュ</span>
                                                <span className="text-xs text-slate-600 block mt-1">普段使わない知覚や感性を使い、心地よい疲労感と爽快感が得られます。</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </FadeInSection>
                        </div>
                    </div>
                </div>
            </section>

            {/* Programs Section */}
            <section id="programs" className="py-24 bg-slate-50">
                <div className="container mx-auto px-6">
                    <FadeInSection>
                        <div className="text-center mb-16">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">Our Workshops</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">提供プログラム</h2>
                        </div>
                    </FadeInSection>

                    <div className="grid md:grid-cols-3 gap-8">
                        {[
                            {
                                title: "Public Events",
                                sub: "美術館・一般向け",
                                desc: "週末に美術館やオンラインなどで開催されるオープンなワークショップ。初めての方でも気軽に参加できます。",
                                color: "from-purple-100 to-pink-100",
                                hoverColor: "group-hover:from-purple-200 group-hover:to-pink-200",
                                textColor: "text-purple-800"
                            },
                            {
                                title: "For School",
                                sub: "学校・教育機関向け",
                                desc: "「何を話しても大丈夫」な安心安全な場で、子どもたちの言語化能力と主体的な学びの姿勢を引き出します。",
                                color: "from-teal-100 to-green-100",
                                hoverColor: "group-hover:from-teal-200 group-hover:to-green-200",
                                textColor: "text-teal-800"
                            },
                            {
                                title: "For Business",
                                sub: "企業向け研修",
                                desc: "正解のない現代ビジネスにおいて必要な「問いを立てる力」と「チームビルディング」を、アートを通じて醸成します。",
                                color: "from-blue-100 to-cyan-100",
                                hoverColor: "group-hover:from-blue-200 group-hover:to-cyan-200",
                                textColor: "text-blue-800"
                            }
                        ].map((program, index) => (
                            <FadeInSection key={index} delay={index * 100}>
                                <div className="group relative h-full p-8 rounded-2xl border border-slate-200 bg-white hover:border-teal-300 transition-all duration-500 overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1">
                                    <div className={`absolute inset-0 bg-gradient-to-br ${program.color} opacity-30 ${program.hoverColor} transition-all duration-500`}></div>
                                    <div className="relative z-10">
                                        <h3 className={`text-2xl font-serif font-bold mb-2 ${program.textColor}`}>{program.title}</h3>
                                        <p className="text-teal-700 text-sm font-bold mb-4 bg-white/50 inline-block px-2 py-1 rounded">{program.sub}</p>
                                        <p className="text-slate-700 leading-relaxed mb-8 text-sm">{program.desc}</p>
                                        <a href="#contact" className="inline-flex items-center text-sm font-bold text-teal-600 group-hover:text-teal-800 transition-colors">
                                            お問い合わせ <ArrowRight className="w-4 h-4 ml-2" />
                                        </a>
                                    </div>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* Voices Section */}
            <section id="voices" className="py-24 bg-white">
                <div className="container mx-auto px-6">
                    <FadeInSection>
                        <div className="text-center mb-16">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">Participants' Voices</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">参加者の声</h2>
                        </div>
                    </FadeInSection>

                    <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
                        <FadeInSection delay={0} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tl-3xl rounded-br-3xl border-l-4 border-blue-500 shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "普段の会議では出ないような意見が飛び交い、チームメンバーの意外な一面を知ることができました。アートがビジネスの潤滑油になるとは驚きです。"
                                </p>
                                <div>
                                    <p className="font-bold text-slate-900">IT企業 マネージャー</p>
                                    <p className="text-xs font-bold mt-1 bg-blue-100 text-blue-800 inline-block px-2 py-0.5 rounded-full">企業向け研修</p>
                                </div>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={200} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tr-3xl rounded-bl-3xl border-r-4 border-teal-500 text-right md:text-left shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "正解を探さなくていい、と言われた瞬間に肩の力が抜けました。自分自身の感じたことを言葉にする楽しさを、久しぶりに味わいました。"
                                </p>
                                <div className="text-right md:text-left">
                                    <p className="font-bold text-slate-900">小学校教員</p>
                                    <p className="text-xs font-bold mt-1 bg-teal-100 text-teal-800 inline-block px-2 py-0.5 rounded-full">学校・教育機関向け</p>
                                </div>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={300} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tl-3xl rounded-br-3xl border-l-4 border-purple-500 shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "日本画が好きで参加しましたが、思っていた鑑賞会と全然違いました。こんなに一つの作品をじっくり見ることはなかったです。一緒に参加した高校生の男の子の意見には驚きでした！楽しかったです。今度は、娘と一緒に参加したいです。"
                                </p>
                                <div>
                                    <p className="font-bold text-slate-900">会社員（二児の母）</p>
                                    <p className="text-xs font-bold mt-1 bg-purple-100 text-purple-800 inline-block px-2 py-0.5 rounded-full">美術館・一般向け</p>
                                </div>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={400} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tr-3xl rounded-bl-3xl border-r-4 border-blue-500 text-right md:text-left shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "普段、絵画を見る機会がほとんどなくて、今日も自分の発言が変じゃないか、心配でした。でも、同じ作品を見ていても、感じ方は人それぞれで、それでいいんだと少し安心しました。"
                                </p>
                                <div className="text-right md:text-left">
                                    <p className="font-bold text-slate-900">会社員</p>
                                    <p className="text-xs font-bold mt-1 bg-blue-100 text-blue-800 inline-block px-2 py-0.5 rounded-full">企業向け研修</p>
                                </div>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={500} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tl-3xl rounded-br-3xl border-l-4 border-purple-500 shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "大きな車が細い路地で身動きできなくなった様子を描いた作品が、面白かったです。車の前で座り込んだ犬、周りの人の表情など、生き生きとしていて。もっと色々な作品を見てみたいです。"
                                </p>
                                <div>
                                    <p className="font-bold text-slate-900">経営者</p>
                                    <p className="text-xs font-bold mt-1 bg-purple-100 text-purple-800 inline-block px-2 py-0.5 rounded-full">美術館・一般向け</p>
                                </div>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={600} className="h-full">
                            <div className="bg-slate-50 p-8 rounded-tr-3xl rounded-bl-3xl border-r-4 border-teal-500 text-right md:text-left shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
                                <p className="text-lg text-slate-700 italic mb-6 leading-relaxed">
                                    "普段はあまり話さない息子が、絵を前に、自分の意見を言うのに驚きました。こんなに豊かな語彙を持っていたとは。目を輝かせる姿に感動しました。"
                                </p>
                                <div className="text-right md:text-left">
                                    <p className="font-bold text-slate-900">会社員（一児の父）</p>
                                    <p className="text-xs font-bold mt-1 bg-teal-100 text-teal-800 inline-block px-2 py-0.5 rounded-full">学校・教育機関向け</p>
                                </div>
                            </div>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* Media / Blog Section (Dynamic CMS) */}
            <section id="media" className="py-24 bg-slate-50 border-t border-slate-200">
                <div className="container mx-auto px-6">
                    <FadeInSection>
                        <div className="text-center mb-16 relative">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">Media & Blog</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">情報発信</h2>
                            <p className="text-slate-600 mt-4 max-w-2xl mx-auto">
                                アール・ゆるっとの活動報告や、アートとビジネス、教育に関する気づきをnoteで発信しています。
                            </p>

                            {/* Admin Action: Add Post */}
                            {user && (
                                <div className="mt-8 animate-[bounce_1s_infinite]">
                                    <button onClick={() => { setEditingPost(null); setPostOpen(true); }} className="inline-flex items-center bg-teal-600 text-white px-8 py-3 rounded-full hover:bg-teal-700 transition-all shadow-lg hover:shadow-teal-500/30 transform hover:scale-105 font-bold">
                                        <Plus className="w-5 h-5 mr-2" /> 記事を追加する
                                    </button>
                                </div>
                            )}
                        </div>
                    </FadeInSection>

                    <div className="grid md:grid-cols-3 gap-8">
                        {posts.slice(0, showAllPosts ? undefined : 6).map((post, index) => (
                            <FadeInSection key={post.id} delay={index * 100}>
                                <div className="block h-full group relative">
                                    <a href={post.url} target="_blank" rel="noopener noreferrer" className="block h-full">
                                        <div className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 group-hover:border-teal-200 h-full flex flex-col group-hover:-translate-y-1">
                                            <div className="relative h-56 overflow-hidden bg-slate-200">
                                                <img
                                                    src={post.imageUrl}
                                                    alt={post.title}
                                                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                                    onError={(e) => e.target.src = 'https://placehold.co/800x400/e2e8f0/64748b?text=No+Image'}
                                                />
                                                <div className="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-slate-800 shadow-sm">
                                                    note
                                                </div>
                                            </div>
                                            <div className="p-6 flex-1 flex flex-col">
                                                <div className="flex items-center text-xs text-slate-500 mb-3 gap-2">
                                                    <span className="bg-teal-50 text-teal-700 px-2 py-1 rounded font-bold border border-teal-100">{post.category}</span>
                                                    <span className="text-slate-400">{post.date}</span>
                                                </div>
                                                <h3 className="font-serif font-bold text-lg mb-3 text-slate-900 group-hover:text-teal-600 transition-colors line-clamp-2 leading-snug">
                                                    {post.title}
                                                </h3>
                                                <p className="text-slate-600 text-sm line-clamp-3 mb-4 flex-1 leading-relaxed">
                                                    {post.summary}
                                                </p>
                                                <div className="flex items-center text-teal-600 text-sm font-bold mt-auto group-hover:translate-x-1 transition-transform">
                                                    記事を読む <ExternalLink className="w-3 h-3 ml-1" />
                                                </div>
                                            </div>
                                        </div>
                                    </a>

                                    {/* Admin Action: Edit & Delete Post */}
                                    {user && (
                                        <div className="absolute top-2 left-2 flex gap-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
                                            <button
                                                onClick={(e) => { e.preventDefault(); setEditingPost(post); setPostOpen(true); }}
                                                className="bg-white/90 text-teal-600 p-2 rounded-full shadow-md hover:bg-teal-600 hover:text-white transition-all"
                                                title="編集する"
                                            >
                                                <Pencil size={18} />
                                            </button>
                                            <button
                                                onClick={(e) => { e.preventDefault(); deletePost(post.id); }}
                                                className="bg-white/90 text-red-500 p-2 rounded-full shadow-md hover:bg-red-500 hover:text-white transition-all"
                                                title="削除する"
                                            >
                                                <Trash2 size={18} />
                                            </button>
                                        </div>
                                    )}
                                </div>
                            </FadeInSection>
                        ))}
                    </div>

                    {/* もっと見るボタン */}
                    {!showAllPosts && posts.length > 6 && (
                        <FadeInSection delay={200}>
                            <div className="text-center mt-12">
                                <button
                                    onClick={() => setShowAllPosts(true)}
                                    className="group inline-flex items-center gap-2 border-2 border-teal-500 text-teal-600 px-10 py-3 rounded-full hover:bg-teal-500 hover:text-white transition-all duration-300 font-bold shadow-sm hover:shadow-lg"
                                >
                                    もっと見る
                                    <ChevronDown className="w-4 h-4 group-hover:translate-y-1 transition-transform" />
                                </button>
                            </div>
                        </FadeInSection>
                    )}

                </div>
            </section>


            {/* Organization Overview Section */}
            <section id="about" className="py-24 bg-white relative overflow-hidden">
                <div className="container mx-auto px-6 max-w-4xl">
                    <FadeInSection>
                        <div className="text-center mb-16">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">About Us</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">団体概要</h2>
                        </div>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="bg-slate-50 border border-slate-100 rounded-2xl p-8 md:p-12 shadow-sm">
                            <dl className="grid md:grid-cols-[160px_1fr] gap-x-8 gap-y-6">
                                <dt className="font-bold text-slate-500 md:py-2">団体名</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2">アール・ゆるっと</dd>

                                <dt className="font-bold text-slate-500 md:py-2">代表者</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2">中野 佳子</dd>

                                <dt className="font-bold text-slate-500 md:py-2">設立</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2">2026年2月1日</dd>

                                <dt className="font-bold text-slate-500 md:py-2">所在地</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2">
                                    静岡県静岡市<br />
                                    <span className="text-xs text-slate-500 mt-1 block">※請求書送付等での詳細住所は別途開示いたします。</span>
                                </dd>

                                <dt className="font-bold text-slate-500 md:py-2">活動地域</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2">静岡、東京、神奈川ほか全国</dd>

                                <dt className="font-bold text-slate-500 md:py-2">事業内容</dt>
                                <dd className="font-medium text-slate-900 border-b border-slate-200 md:py-2 space-y-1">
                                    <div>1. 対話鑑賞ワークショップの企画・運営</div>
                                    <div>2. アートを活用した教育・研修プログラムの開発</div>
                                    <div>3. 美術館・文化施設の利用促進支援</div>
                                </dd>
                            </dl>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* Members Section */}
            <section id="members" className="py-24 bg-slate-50 relative overflow-hidden">
                <div className="container mx-auto px-6">
                    <FadeInSection>
                        <div className="text-center mb-16">
                            <span className="text-teal-600 text-sm tracking-widest uppercase font-bold">Our Team</span>
                            <h2 className="text-3xl md:text-5xl font-serif font-bold mt-2 text-slate-900">チームメンバー</h2>
                        </div>
                    </FadeInSection>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
                        {teamMembers.map((member, index) => (
                            <FadeInSection key={index} delay={index * 150}>
                                <div className="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 group text-center h-full">
                                    <div className="relative w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-4 border-slate-50 shadow-inner group-hover:scale-105 transition-transform duration-500">
                                        <img
                                            src={member.image}
                                            alt={member.name}
                                            className="w-full h-full object-cover"
                                            onError={(e) => e.target.src = 'https://placehold.co/400x400/e2e8f0/64748b?text=Member'}
                                        />
                                    </div>
                                    <h3 className="text-xl font-serif font-bold text-slate-900 mb-2 group-hover:text-teal-600 transition-colors">
                                        {member.name}
                                    </h3>
                                    <p className="text-teal-600 text-xs font-bold tracking-wider uppercase mb-4">
                                        {member.role}
                                    </p>
                                    <p className="text-slate-600 text-sm leading-relaxed text-justify px-2">
                                        {member.bio}
                                    </p>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* Contact Section */}
            <section id="contact" className="py-24 bg-gradient-to-b from-slate-50 to-white border-t border-slate-100">
                <div className="container mx-auto px-6 max-w-3xl text-center">
                    <FadeInSection>
                        <h2 className="text-3xl md:text-5xl font-serif font-bold mb-6 text-slate-900">視点を変える旅を<br />ここから</h2>
                        <p className="text-slate-600 mb-12 leading-relaxed">
                            ワークショップのご依頼、取材、その他お問い合わせはこちらから。<br />
                            まずは気軽にご相談ください。
                        </p>
                        {submitted ? (
                            <div className="bg-teal-50 border border-teal-200 p-12 rounded-2xl text-center animate-[fadeIn_0.5s_ease-out]">
                                <div className="w-16 h-16 bg-teal-500 text-white rounded-full flex items-center justify-center mx-auto mb-6">
                                    <Mail className="w-8 h-8" />
                                </div>
                                <h3 className="text-2xl font-serif font-bold text-slate-900 mb-4">お問い合わせありがとうございます</h3>
                                <p className="text-slate-600 leading-relaxed">
                                    メッセージを承りました。内容を確認の上、<br />
                                    担当者より折り返しご連絡させていただきます。
                                </p>
                                <button onClick={() => setSubmitted(false)} className="mt-8 text-teal-600 font-bold hover:underline">
                                    フォームに戻る
                                </button>
                            </div>
                        ) : (
                            <form onSubmit={handleContactSubmit} className="text-left space-y-4 bg-white p-8 md:p-12 rounded-2xl border border-slate-200 shadow-xl shadow-slate-200/50 mb-12">
                                <div className="grid md:grid-cols-2 gap-6">
                                    <div>
                                        <label className="block text-sm font-bold text-slate-600 mb-2">お名前 <span className="text-red-500">*</span></label>
                                        <input
                                            type="text"
                                            name="お名前"
                                            required
                                            value={contactForm.name}
                                            onChange={e => setContactForm({ ...contactForm, name: e.target.value })}
                                            className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500 text-slate-900 transition-all"
                                            placeholder="山田 太郎"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-bold text-slate-600 mb-2">メールアドレス <span className="text-red-500">*</span></label>
                                        <input
                                            type="email"
                                            name="メールアドレス"
                                            required
                                            value={contactForm.email}
                                            onChange={e => setContactForm({ ...contactForm, email: e.target.value })}
                                            className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500 text-slate-900 transition-all"
                                            placeholder="email@example.com"
                                        />
                                    </div>
                                </div>
                                <div>
                                    <label className="block text-sm font-bold text-slate-600 mb-2">お問い合わせ内容 <span className="text-red-500">*</span></label>
                                    <textarea
                                        rows="4"
                                        name="お問い合わせ内容"
                                        required
                                        value={contactForm.message}
                                        onChange={e => setContactForm({ ...contactForm, message: e.target.value })}
                                        className="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500 text-slate-900 transition-all"
                                        placeholder="ご用件をご記入ください"
                                    ></textarea>
                                </div>

                                {/* reCAPTCHA Widget Container */}
                                <div className="flex justify-center mb-6">
                                    <div ref={recaptchaRef}></div>
                                </div>

                                <button
                                    type="submit"
                                    disabled={isContactLoading}
                                    className="w-full bg-gradient-to-r from-teal-500 to-emerald-500 text-white font-bold py-4 rounded-lg hover:opacity-90 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5 disabled:opacity-50"
                                >
                                    {isContactLoading ? '送信中...' : '送信する'}
                                </button>
                            </form>
                        )}

                        <div className="flex flex-wrap justify-center gap-6 text-slate-500">
                            <a href="#" className="hover:text-teal-600 transition-colors flex items-center gap-2 font-medium opacity-60 cursor-not-allowed" title="準備中"><Instagram className="w-5 h-5" /> Instagram</a>
                            <a href="https://note.com/art_yurutto" target="_blank" rel="noopener noreferrer" className="hover:text-teal-600 transition-colors flex items-center gap-2 font-medium">
                                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.956 0c-4.14 0-7.399 1.139-9.78 3.418-2.381 2.278-3.57 5.488-3.57 9.63l.067 10.952h9.245V13.1c0-1.28.324-2.28.972-2.99.648-.71 1.583-1.07 2.805-1.07 1.053 0 1.83.275 2.333.82.502.55.754 1.25.754 2.11v12.03h9.245V12.18c0-3.95-1.077-7.01-3.23-9.18C18.677 1.01 15.717 0 11.956 0z" /></svg>
                                note
                            </a>
                            <a href="mailto:art.yurutto@gmail.com" className="hover:text-teal-600 transition-colors flex items-center gap-2 font-medium"><Mail className="w-5 h-5" /> art.yurutto@gmail.com</a>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* Footer */}
            <footer className="bg-slate-50 py-12 border-t border-slate-200 text-sm text-slate-600 relative">
                <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
                    <div className="text-center md:text-left">
                        <span className="font-serif text-lg text-slate-900 font-bold block mb-1">アール・ゆるっと</span>
                        <span className="text-xs text-slate-400">ART Yurutto - Dialogue & Perspective</span>
                    </div>
                    <div className="flex gap-6">
                        <a href="#about" className="hover:text-teal-600 transition-colors">About</a>
                        <a href="#programs" className="hover:text-teal-600 transition-colors">Programs</a>
                        <a href="#members" className="hover:text-teal-600 transition-colors">Members</a>
                        <a href="#" className="hover:text-teal-600 transition-colors">Privacy Policy</a>
                    </div>
                    <div>
                        &copy; {new Date().getFullYear()} ART Yurutto. All rights reserved.
                    </div>
                </div>

                {/* Admin Login Trigger (Hidden: Type 'yurutto' on keyboard to show) */}
                {!user && isAdminLinkVisible && (
                    <button onClick={() => setLoginOpen(true)} className="absolute bottom-4 right-4 text-slate-300 hover:text-slate-500 transition-colors flex items-center gap-1 text-[10px]" title="管理者ログイン">
                        <Lock size={10} /> Admin
                    </button>
                )}
            </footer>

            {/* Modals */}
            <LoginModal isOpen={isLoginOpen} onClose={() => setLoginOpen(false)} onLogin={() => setLoginOpen(false)} />
            <PostModal isOpen={isPostOpen} postToEdit={editingPost} onClose={() => setPostOpen(false)} onSuccess={() => { fetchPosts(); setPostOpen(false); }} />
        </div>
    );
}

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