```jsx
import React, { useState, useEffect } from "react";

// Custom SVG Icons
const IconUser = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
  </svg>
);

const IconLock = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
  </svg>
);

const IconHome = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>
);

const IconStore = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
  </svg>
);

const IconInfo = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

const IconGallery = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
  </svg>
);

const IconForum = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
  </svg>
);

const IconResearch = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
  </svg>
);

const App = () => {
  const [currentPage, setCurrentPage] = useState("home");
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState("");

  // Mock studies data
  const studies = [
    {
      title: "Cannabis and Chronic Pain Management",
      summary:
        "This study explores the efficacy of cannabis in managing chronic pain conditions such as arthritis and fibromyalgia.",
      source: "Journal of Medical Research, 2023",
      link: "#",
    },
    {
      title: "Long-Term Cognitive Effects of Cannabis Use",
      summary:
        "A longitudinal study analyzing the impact of long-term cannabis use on cognitive function and memory retention.",
      source: "Neurological Review, 2022",
      link: "#",
    },
  ];

  // Mock forum threads
  const initialThreads = [
    {
      id: 1,
      author: "GreenThumb1980",
      title: "Best Indoor Grow Setup for Beginners",
      replies: 12,
      lastUpdated: "2 hours ago",
    },
    {
      id: 2,
      author: "HerbalistJane",
      title: "CBD vs THC: Which is Right for Me?",
      replies: 8,
      lastUpdated: "4 hours ago",
    },
  ];

  const [threads, setThreads] = useState(initialThreads);
  const [newThreadTitle, setNewThreadTitle] = useState("");
  const [newThreadContent, setNewThreadContent] = useState("");

  // Product cards mock data
  const products = [
    { id: 1, name: "Sativa Blend", price: "$45", image: "https://picsum.photos/id/10/300/300" },
    { id: 2, name: "Indica Kush", price: "$50", image: "https://picsum.photos/id/20/300/300" },
    { id: 3, name: "CBD Oil Premium", price: "$60", image: "https://picsum.photos/id/30/300/300" },
    { id: 4, name: "Hybrid Mix", price: "$40", image: "https://picsum.photos/id/40/300/300" },
  ];

  // Handle login
  const handleLogin = (e) => {
    e.preventDefault();
    const user = e.target.username.value;
    if (user.trim() !== "") {
      setIsLoggedIn(true);
      setUsername(user);
    }
  };

  // Handle new thread submission
  const handleCreateThread = (e) => {
    e.preventDefault();
    if (!newThreadTitle || !newThreadContent) return;

    const newThread = {
      id: threads.length + 1,
      author: username,
      title: newThreadTitle,
      replies: 0,
      lastUpdated: "Just now",
    };

    setThreads([newThread, ...threads]);
    setNewThreadTitle("");
    setNewThreadContent("");
  };

  // Navigation menu
  const navItems = [
    { name: "Home", page: "home", icon: <IconHome /> },
    { name: "Store", page: "store", icon: <IconStore /> },
    { name: "About Us", page: "about", icon: <IconInfo /> },
    { name: "Gallery", page: "gallery", icon: <IconGallery /> },
    { name: "Forum", page: "forum", icon: <IconForum /> },
    { name: "Research & Studies", page: "research", icon: <IconResearch /> },
  ];

  // Render pages
  const renderPage = () => {
    switch (currentPage) {
      case "home":
        return (
          <section className="relative bg-off-white overflow-hidden">
            <div className="relative w-full h-[60vh] md:h-[80vh] bg-gradient-to-r from-gray-100 to-gray-50 flex items-center justify-center">
              <img src="https://picsum.photos/id/1018/1200/600" alt="Banner" className="absolute inset-0 w-full h-full object-cover opacity-80" />
              <div className="relative z-10 text-center px-4">
                <h1 className="text-4xl md:text-6xl font-serif text-charcoal mb-4">Welcome to JolliGreen</h1>
                <p className="text-xl md:text-2xl text-gray-700 max-w-2xl mx-auto">Discover premium cannabis experiences curated with elegance and care.</p>
              </div>
            </div>
          </section>
        );
      case "store":
        if (!isLoggedIn) return <RedirectToLogin />;
        return (
          <section className="py-12 bg-off-white">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-serif text-charcoal mb-8">Our Premium Products</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {products.map((product) => (
                  <div key={product.id} className="bg-beige rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105 duration-300">
                    <img src={product.image} alt={product.name} className="w-full h-48 object-cover" />
                    <div className="p-4">
                      <h3 className="font-medium text-charcoal">{product.name}</h3>
                      <p className="text-green-700 font-semibold">{product.price}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      case "about":
        return (
          <section className="py-12 bg-off-white">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-serif text-charcoal mb-6">About JolliGreen</h2>
              <div className="max-w-3xl mx-auto text-gray-700 leading-relaxed">
                <p className="mb-4">
                  At JolliGreen, we believe in elevating the cannabis experience through quality, education, and refinement. Our mission is to provide discerning consumers with premium products rooted in tradition and backed by science.
                </p>
                <p>
                  We are committed to sustainability, ethical sourcing, and fostering a community that values mindful consumption and respect for nature’s gifts.
                </p>
              </div>
            </div>
          </section>
        );
      case "gallery":
        return (
          <section className="py-12 bg-off-white">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-serif text-charcoal mb-8">JolliGreen Gallery</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                {[...Array(6)].map((_, i) => (
                  <div key={i} className="rounded-lg overflow-hidden shadow-md">
                    <img src={`https://picsum.photos/id/${i * 10}/600/400`} alt={`Gallery ${i}`} className="w-full h-auto" />
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      case "forum":
        if (!isLoggedIn) return <RedirectToLogin />;
        return (
          <section className="py-12 bg-off-white">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-serif text-charcoal mb-6">Community Forum</h2>
              <form onSubmit={handleCreateThread} className="mb-8 p-4 border border-gray-200 rounded-lg bg-white shadow-sm">
                <h3 className="text-xl font-medium mb-4">Start a New Discussion</h3>
                <input
                  type="text"
                  placeholder="Thread Title"
                  value={newThreadTitle}
                  onChange={(e) => setNewThreadTitle(e.target.value)}
                  required
                  className="w-full p-2 border border-gray-300 rounded mb-4"
                />
                <textarea
                  placeholder="Your message..."
                  value={newThreadContent}
                  onChange={(e) => setNewThreadContent(e.target.value)}
                  required
                  rows="4"
                  className="w-full p-2 border border-gray-300 rounded mb-4"
                ></textarea>
                <button type="submit" className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
                  Post Thread
                </button>
              </form>

              <div className="space-y-4">
                {threads.map((thread) => (
                  <div key={thread.id} className="p-4 border border-gray-200 rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow">
                    <h3 className="text-lg font-semibold text-charcoal">{thread.title}</h3>
                    <p className="text-sm text-gray-600">By {thread.author}</p>
                    <div className="mt-2 text-xs text-gray-500">
                      <span>{thread.replies} replies</span> • <span>Last updated: {thread.lastUpdated}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      case "research":
        return (
          <section className="py-12 bg-off-white">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-serif text-charcoal mb-8">Scientific Research & Studies</h2>
              <div className="space-y-8">
                {studies.map((study, index) => (
                  <div key={index} className="border-l-4 border-green-600 pl-4 py-2">
                    <h3 className="text-xl font-medium text-charcoal">{study.title}</h3>
                    <p className="mt-2 text-gray-700">{study.summary}</p>
                    <p className="mt-2 text-sm text-gray-500 italic">{study.source}</p>
                    <a href={study.link} className="inline-block mt-2 text-green-600 hover:underline">
                      Read full study →
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      default:
        return <></>;
    }
  };

  const RedirectToLogin = () => (
    <section className="py-16 bg-off-white flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-serif text-charcoal mb-4">Authentication Required</h2>
        <p className="text-gray-600 mb-6">Please log in to access this section.</p>
        <button
          onClick={() => setCurrentPage("login")}
          className="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
        >
          Log In
        </button>
      </div>
    </section>
  );

  return (
    <div className="min-h-screen bg-off-white text-charcoal font-sans antialiased">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-serif text-charcoal">JolliGreen</h1>
          <nav className="hidden md:flex space-x-6">
            {navItems.map((item) => (
              <button
                key={item.page}
                onClick={() => setCurrentPage(item.page)}
                className={`flex items-center space-x-1 text-gray-700 hover:text-green-600 transition-colors ${
                  currentPage === item.page ? "text-green-600" : ""
                }`}
              >
                {item.icon}
                <span>{item.name}</span>
              </button>
            ))}
            {!isLoggedIn && (
              <button
                onClick={() => setCurrentPage("login")}
                className="flex items-center space-x-1 text-gray-700 hover:text-green-600 transition-colors"
              >
                <IconUser />
                <span>Login</span>
              </button>
            )}
            {isLoggedIn && (
              <span className="text-sm text-gray-600">Hello, {username}</span>
            )}
          </nav>
          <button className="md:hidden text-gray-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </header>

      {/* Mobile Nav */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-10">
        <div className="flex justify-around py-2">
          {navItems.map((item) => (
            <button
              key={item.page}
              onClick={() => setCurrentPage(item.page)}
              className={`flex flex-col items-center text-xs ${
                currentPage === item.page ? "text-green-600" : "text-gray-600"
              }`}
            >
              {item.icon}
              <span>{item.name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Main Content */}
      <main>
        {currentPage === "login" ? (
          <section className="py-16 bg-off-white flex items-center justify-center min-h-screen">
            <div className="w-full max-w-md p-8 bg-white shadow-lg rounded-lg">
              <h2 className="text-2xl font-serif text-charcoal mb-6">Member Login</h2>
              <form onSubmit={handleLogin}>
                <div className="mb-4">
                  <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
                    Username
                  </label>
                  <input
                    type="text"
                    id="username"
                    className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-green-500"
                    required
                  />
                </div>
                <div className="mb-6">
                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
                    Password
                  </label>
                  <input
                    type="password"
                    id="password"
                    className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-green-500"
                    required
                  />
                </div>
                <button
                  type="submit"
                  className="w-full bg-green-600 text-white py-2 px-4 rounded hover:bg-green-700 transition-colors flex items-center justify-center"
                >
                  <IconLock />
                  <span className="ml-2">Log In</span>
                </button>
              </form>
              <p className="mt-4 text-sm text-gray-600">
                Don't have an account?{" "}
                <button onClick={() => alert("Registration feature coming soon.")} className="text-green-600 hover:underline">
                  Sign up
                </button>
              </p>
            </div>
          </section>
        ) : (
          renderPage()
        )}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 py-8">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-600">&copy; 2025 JolliGreen. All rights reserved.</p>
            <div className="mt-4 md:mt-0 flex space-x-4">
              <a href="#" className="text-gray-500 hover:text-green-600">
                Privacy Policy
              </a>
              <a href="#" className="text-gray-500 hover:text-green-600">
                Terms of Service
              </a>
              <a href="#" className="text-gray-500 hover:text-green-600">
                Contact
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
```