import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import {
getAuth,
signInAnonymously,
signInWithCustomToken,
onAuthStateChanged
} from 'firebase/auth';
import {
getFirestore,
collection,
query,
onSnapshot
} from 'firebase/firestore';
import {
Sun, Battery, Zap, ChevronRight, Calendar, Share2,
ArrowLeft, Clock, Layout, Star, Menu, X, ChevronDown,
Instagram, Facebook, Mail, ArrowRight, Phone, MapPin
} from 'lucide-react';
/**
* E3 SOLAR MASTER BLOG PORTAL
* Uniform with Home Page Header/Footer
*/
// --- CONFIGURATION ---
const firebaseConfig = JSON.parse(__firebase_config || '{}');
const appId = typeof __app_id !== 'undefined' ? __app_id : 'e3-solar-app';
const LOGO_URL = "https://storage.googleapis.com/msgsndr/vFn4B7Zvayw0KPYrFH13/media/6920def6f8fa3be77a323253.png";
export default function App() {
const [blogs, setBlogs] = useState([]);
const [filteredBlogs, setFilteredBlogs] = useState([]);
const [selectedBlog, setSelectedBlog] = useState(null);
const [activeCategory, setActiveCategory] = useState('all');
const [loading, setLoading] = useState(true);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [db, setDb] = useState(null);
const [userId, setUserId] = useState(null);
const [isAuthReady, setIsAuthReady] = useState(false);
// --- PHASE 1: FIREBASE & AUTH ---
useEffect(() => {
try {
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
const auth = getAuth(app);
setDb(firestore);
const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
if (user) {
setUserId(user.uid);
} else {
setUserId(null);
}
setIsAuthReady(true);
});
const handleSignIn = async () => {
try {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(auth, __initial_auth_token);
} else {
await signInAnonymously(auth);
}
} catch (err) {
console.error("Auth System Error:", err);
setIsAuthReady(true); // Allow sync attempt even if auth is shaky
}
};
handleSignIn();
return () => unsubscribeAuth();
} catch (e) {
console.error("Firebase Init Failed:", e);
}
}, []);
// --- PHASE 2: CONTENT SYNC ---
useEffect(() => {
if (!isAuthReady || !db || !userId) return;
const blogsCollection = collection(db, 'artifacts', appId, 'public', 'data', 'blogs');
const unsubscribeBlogs = onSnapshot(query(blogsCollection), (snapshot) => {
const list = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
})).sort((a, b) => {
const dateA = a.date ? new Date(a.date) : new Date(0);
const dateB = b.date ? new Date(b.date) : new Date(0);
return dateB - dateA;
});
setBlogs(list);
setFilteredBlogs(list);
setLoading(false);
}, (error) => {
console.error("Firestore Permission Check:", error);
setLoading(false);
});
return () => unsubscribeBlogs();
}, [isAuthReady, db, userId]);
// --- PHASE 3: CATEGORY FILTERING ---
useEffect(() => {
if (activeCategory === 'all') {
setFilteredBlogs(blogs);
} else {
setFilteredBlogs(blogs.filter(b => b.category?.toLowerCase() === activeCategory.toLowerCase()));
}
}, [activeCategory, blogs]);
if (loading) {
return (
Initializing E3 Solar Engine
);
}
const featured = blogs[0];
const gridPosts = filteredBlogs.slice(activeCategory === 'all' ? 1 : 0);
return (
{/* 🔴 INJECTED CSS OVERRIDES FROM HOME PAGE */}
{/* 🟢 NAVIGATION: EXACT HOME PAGE MATCH */}
{/* Mobile Menu */}
{isMenuOpen && (
)}
{/* 🔵 CONTENT AREA */}
{selectedBlog ? (
/* Detailed Report View */
) : (
/* Archive Grid View */
<>
Engineering Authority
SOLAR INSIGHTS.
Technical Yield Analysis for Alberta & BC
{featured && activeCategory === 'all' && (
setSelectedBlog(featured)}
className="group relative rounded-[50px] overflow-hidden aspect-video md:aspect-[21/9] border border-white/10 cursor-pointer shadow-2xl"
>
Latest Analysis
{featured.title}
{['all', 'alberta', 'bc', 'tech'].map(cat => (
))}
{gridPosts.length > 0 ? gridPosts.map((blog) => (
setSelectedBlog(blog)}
className="group bg-[#0d0d0d] rounded-[40px] p-12 border border-white/5 hover:border-[#FFD700]/40 transition-all duration-500 cursor-pointer flex flex-col hover:-translate-y-4 shadow-2xl"
>
{blog.title}
{blog.meta_description}
Access Report
)) : (
)}
{/* 🔴 FOOTER: EXACT HOME PAGE MATCH */}
);
}