// HomePage.jsx

const HomePage = ({ navigate }) => {
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState('');

  const featured = window.LISTINGS_DATA.filter(l => l.featured);
  const recent = window.LISTINGS_DATA.slice(0, 6);

  const handleSearch = (e) => {
    e.preventDefault();
    navigate('browse', { search: searchQuery });
  };

  const handleSubscribe = (e) => {
    e.preventDefault();
    if (email) setSubscribed(true);
  };

  return (
    <div style={{ paddingTop: 68 }}>

      {/* ── HERO ── */}
      <section style={{
        position: 'relative',
        minHeight: '88vh',
        display: 'flex', alignItems: 'center',
        overflow: 'hidden',
        background: 'linear-gradient(160deg, #2C1A0E 0%, #4A2E1A 40%, #6B4A20 70%, #C8622A 100%)',
      }}>
        {/* Textured overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `
            radial-gradient(ellipse 80% 60% at 70% 50%, rgba(200,98,42,0.3) 0%, transparent 70%),
            radial-gradient(ellipse 50% 70% at 20% 80%, rgba(74,115,64,0.2) 0%, transparent 60%)
          `,
        }}/>
        {/* Decorative grain lines */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px)',
        }}/>

        {/* Large decorative text */}
        <div style={{
          position: 'absolute', right: -20, top: '50%',
          transform: 'translateY(-50%)',
          fontFamily: 'Playfair Display, serif',
          fontSize: 'clamp(140px, 22vw, 280px)',
          fontWeight: 900, fontStyle: 'italic',
          color: 'rgba(255,255,255,0.04)',
          lineHeight: 1, userSelect: 'none',
          letterSpacing: '-0.02em',
          whiteSpace: 'nowrap',
        }}>Pick</div>

        {/* Hero SVG illustration — right side */}
        <div style={{
          position: 'absolute', right: '5%', bottom: 0,
          width: 'min(480px, 45vw)', height: '85%',
          opacity: 0.18,
        }}>
          <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
            {/* Windmill */}
            <rect x="185" y="200" width="30" height="280" fill="#FDF6EC"/>
            <polygon points="200,200 160,150 200,170 240,150" fill="#FDF6EC"/>
            <polygon points="200,200 250,160 230,200 270,230" fill="#FDF6EC" opacity="0.7"/>
            <polygon points="200,200 240,250 200,230 160,250" fill="#FDF6EC"/>
            <polygon points="200,200 150,240 170,200 130,170" fill="#FDF6EC" opacity="0.7"/>
            <circle cx="200" cy="200" r="18" fill="#FDF6EC"/>
            {/* Prairie grass */}
            {Array.from({length:30},(_,i) => (
              <path key={i} d={`M${10+i*13} 480 Q${10+i*13+5} ${430+Math.sin(i)*20} ${10+i*13+2} ${390+Math.cos(i*2)*30}`}
                stroke="#FDF6EC" strokeWidth="2" fill="none"/>
            ))}
            {/* Wheat stalks */}
            {Array.from({length:20},(_,i) => (
              <g key={i}>
                <line x1={20+i*18} y1="460" x2={22+i*18} y2="300" stroke="#FDF6EC" strokeWidth="1.5"/>
                <ellipse cx={22+i*18} cy="295" rx="5" ry="18" fill="#FDF6EC" opacity="0.8"/>
              </g>
            ))}
          </svg>
        </div>

        {/* Content */}
        <div style={{
          position: 'relative', zIndex: 2,
          maxWidth: 1280, margin: '0 auto',
          padding: 'clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem)',
          width: '100%',
        }}>
          {/* Eyebrow */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 40, padding: '6px 16px',
            marginBottom: 28,
            animation: 'fadeUp 0.6s ease forwards',
          }}>
            <span style={{ fontSize: 14 }}>🌾</span>
            <span style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.7)',
            }}>Midwest Farm Directory · Sioux Falls Region</span>
          </div>

          <h1 style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 'clamp(42px, 7vw, 88px)',
            fontWeight: 900, lineHeight: 1.0,
            color: '#FDF6EC',
            marginBottom: 24,
            maxWidth: 700,
            animation: 'fadeUp 0.6s 0.1s ease both',
          }}>
            Find Your<br />
            <em style={{ color: 'var(--orange-light)', fontStyle: 'italic' }}>Perfect</em>
            <br />Prairie Farm
          </h1>

          <p style={{
            fontSize: 'clamp(16px, 2vw, 20px)',
            color: 'rgba(253,246,236,0.7)',
            maxWidth: 480,
            lineHeight: 1.65,
            marginBottom: 40,
            animation: 'fadeUp 0.6s 0.2s ease both',
            fontFamily: 'Source Serif 4, serif',
          }}>
            Pumpkin patches, apple orchards, flower farms & more — all within 3 hours of Sioux Falls, SD.
          </p>

          {/* Search bar */}
          <form onSubmit={handleSearch} style={{
            display: 'flex', gap: 8,
            maxWidth: 520,
            animation: 'fadeUp 0.6s 0.3s ease both',
          }}>
            <div style={{
              flex: 1, position: 'relative',
            }}>
              <span style={{
                position: 'absolute', left: 14, top: '50%',
                transform: 'translateY(-50%)',
                fontSize: 16, pointerEvents: 'none',
              }}>🔍</span>
              <input
                value={searchQuery}
                onChange={e => setSearchQuery(e.target.value)}
                placeholder="Search farms, cities, activities..."
                style={{
                  width: '100%',
                  padding: '14px 16px 14px 42px',
                  borderRadius: 10,
                  border: '2px solid transparent',
                  background: 'rgba(253,246,236,0.95)',
                  fontSize: 15,
                  fontFamily: 'Source Serif 4, serif',
                  color: 'var(--bark)',
                  outline: 'none',
                  transition: 'border-color 0.2s',
                  boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
                }}
                onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                onBlur={e => e.target.style.borderColor = 'transparent'}
              />
            </div>
            <button type="submit" style={{
              background: 'var(--orange)', color: '#fff',
              border: 'none', cursor: 'pointer',
              padding: '14px 24px', borderRadius: 10,
              fontSize: 15, fontFamily: 'Source Serif 4, serif', fontWeight: 600,
              whiteSpace: 'nowrap',
              boxShadow: '0 4px 16px rgba(200,98,42,0.5)',
              transition: 'all 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--orange-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--orange)'; e.currentTarget.style.transform = 'none'; }}
            >Search</button>
          </form>

          {/* Quick category pills */}
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 8,
            marginTop: 24,
            animation: 'fadeUp 0.6s 0.4s ease both',
          }}>
            {window.CATEGORIES.filter(c => c.id !== 'all').map(cat => (
              <button
                key={cat.id}
                onClick={() => navigate('browse', { category: cat.id })}
                style={{
                  background: 'rgba(255,255,255,0.1)',
                  border: '1px solid rgba(255,255,255,0.2)',
                  color: 'rgba(253,246,236,0.85)',
                  borderRadius: 40, padding: '6px 14px',
                  fontSize: 13, fontFamily: 'Source Serif 4, serif',
                  cursor: 'pointer', transition: 'all 0.2s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.18)'; e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = 'rgba(253,246,236,0.85)'; }}
              >{cat.icon} {cat.label}</button>
            ))}
          </div>

          {/* Stats row */}
          <div style={{
            display: 'flex', gap: 32, marginTop: 48,
            animation: 'fadeUp 0.6s 0.5s ease both',
          }}>
            {[
              { num: window.LISTINGS_DATA.length + '+', label: 'Farm Listings' },
              { num: '6', label: 'Categories' },
              { num: '3hr', label: 'Radius from SF' },
            ].map(stat => (
              <div key={stat.label}>
                <div style={{
                  fontFamily: 'Playfair Display, serif',
                  fontSize: 28, fontWeight: 700,
                  color: 'var(--orange-light)', lineHeight: 1,
                }}>{stat.num}</div>
                <div style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 11,
                  color: 'rgba(253,246,236,0.5)',
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  marginTop: 4,
                }}>{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom wave */}
        <div style={{ position: 'absolute', bottom: -1, left: 0, right: 0 }}>
          <svg viewBox="0 0 1440 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style={{display:'block',width:'100%',height:60}}>
            <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#FDF6EC"/>
          </svg>
        </div>
      </section>

      {/* ── CATEGORY GRID ── */}
      <section style={{
        maxWidth: 1280, margin: '0 auto',
        padding: 'clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem)',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            fontFamily: 'DM Mono, monospace', fontSize: 11,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--orange)', marginBottom: 12,
          }}>Browse by type</div>
          <h2 style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700,
            color: 'var(--bark)',
          }}>What Are You Looking For?</h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          gap: 16,
        }}>
          {window.CATEGORIES.filter(c => c.id !== 'all').map((cat, i) => {
            const colors = CATEGORY_COLORS[cat.id] || { bg: '#F5E4C0', accent: '#C4922A', text: '#6B4A00' };
            return (
              <button
                key={cat.id}
                onClick={() => navigate('browse', { category: cat.id })}
                style={{
                  background: colors.bg,
                  border: `2px solid ${colors.accent}25`,
                  borderRadius: 14, padding: '24px 16px',
                  cursor: 'pointer', textAlign: 'center',
                  transition: 'all 0.25s',
                  animation: `fadeUp 0.5s ${0.05 * i}s ease both`,
                }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 8px 24px ${colors.accent}30`; e.currentTarget.style.borderColor = colors.accent + '60'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = colors.accent + '25'; }}
              >
                <div style={{ fontSize: 36, marginBottom: 10 }}>{cat.icon}</div>
                <div style={{
                  fontFamily: 'Playfair Display, serif',
                  fontSize: 16, fontWeight: 600,
                  color: colors.text, lineHeight: 1.2, marginBottom: 6,
                }}>{cat.label}</div>
                <div style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 11,
                  color: colors.accent,
                }}>{cat.count} listings</div>
              </button>
            );
          })}
        </div>
      </section>

      <div className="section-divider" />

      {/* ── FEATURED LISTINGS ── */}
      <section style={{
        maxWidth: 1280, margin: '0 auto',
        padding: 'clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 32, flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <div style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'var(--orange)', marginBottom: 10,
            }}>Handpicked favorites</div>
            <h2 style={{
              fontFamily: 'Playfair Display, serif',
              fontSize: 'clamp(26px, 3.5vw, 40px)', fontWeight: 700,
              color: 'var(--bark)',
            }}>Featured Farms</h2>
          </div>
          <button
            onClick={() => navigate('browse')}
            style={{
              background: 'none', border: '2px solid var(--cream-mid)',
              borderRadius: 8, padding: '10px 20px',
              fontFamily: 'Source Serif 4, serif', fontSize: 14,
              color: 'var(--bark-light)', cursor: 'pointer', transition: 'all 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--orange)'; e.currentTarget.style.color = 'var(--orange)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--cream-mid)'; e.currentTarget.style.color = 'var(--bark-light)'; }}
          >View all farms →</button>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 24,
        }}>
          {featured.map((listing, i) => (
            <div key={listing.id} style={{ animation: `fadeUp 0.5s ${0.05 * i}s ease both`, opacity: 0 }}>
              <FarmCard
                listing={listing}
                featured
                onClick={() => navigate('listing', { id: listing.id })}
              />
            </div>
          ))}
        </div>
      </section>

      <div className="section-divider" />

      {/* ── SEASONAL BANNER ── */}
      <section style={{
        background: 'linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%)',
        padding: 'clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 40px)',
        }}/>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center',
            gap: 32, flexWrap: 'wrap',
          }}>
            <div>
              <div style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.15em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.55)', marginBottom: 10,
              }}>Now in season</div>
              <h2 style={{
                fontFamily: 'Playfair Display, serif',
                fontSize: 'clamp(24px, 3.5vw, 38px)', fontWeight: 700,
                color: '#FDF6EC', marginBottom: 12,
              }}>Spring Blooms Are Here</h2>
              <p style={{
                fontSize: 16, color: 'rgba(253,246,236,0.7)',
                maxWidth: 480, lineHeight: 1.65,
              }}>
                Lavender and peonies are blooming across the prairie. Flower farms are open for u-pick through August — don't miss the midsummer festivals.
              </p>
            </div>
            <button
              onClick={() => navigate('browse', { category: 'Flower Farm' })}
              style={{
                background: '#FDF6EC', color: 'var(--green-dark)',
                border: 'none', cursor: 'pointer',
                padding: '14px 28px', borderRadius: 10,
                fontSize: 15, fontFamily: 'Source Serif 4, serif', fontWeight: 600,
                whiteSpace: 'nowrap', transition: 'all 0.2s',
                boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.3)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)'; }}
            >Explore Flower Farms 🌸</button>
          </div>
        </div>
      </section>

      {/* ── ALL LISTINGS PREVIEW ── */}
      <section style={{
        maxWidth: 1280, margin: '0 auto',
        padding: 'clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 32, flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <div style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'var(--orange)', marginBottom: 10,
            }}>Explore</div>
            <h2 style={{
              fontFamily: 'Playfair Display, serif',
              fontSize: 'clamp(26px, 3.5vw, 40px)', fontWeight: 700,
              color: 'var(--bark)',
            }}>Recently Added</h2>
          </div>
          <button
            onClick={() => navigate('browse')}
            style={{
              background: 'none', border: '2px solid var(--cream-mid)',
              borderRadius: 8, padding: '10px 20px',
              fontFamily: 'Source Serif 4, serif', fontSize: 14,
              color: 'var(--bark-light)', cursor: 'pointer', transition: 'all 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--orange)'; e.currentTarget.style.color = 'var(--orange)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--cream-mid)'; e.currentTarget.style.color = 'var(--bark-light)'; }}
          >Browse all →</button>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 24,
        }}>
          {recent.map((listing, i) => (
            <div key={listing.id} style={{ animation: `fadeUp 0.5s ${0.04 * i}s ease both`, opacity: 0 }}>
              <FarmCard
                listing={listing}
                onClick={() => navigate('listing', { id: listing.id })}
              />
            </div>
          ))}
        </div>
      </section>

      <div className="section-divider" />

      {/* ── NEWSLETTER ── */}
      <section style={{
        background: 'var(--cream-dark)',
        padding: 'clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem)',
        backgroundImage: 'var(--parchment-texture)',
      }}>
        <div style={{ maxWidth: 560, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontSize: 40, marginBottom: 16 }}>📬</div>
          <h2 style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 'clamp(26px, 3.5vw, 36px)', fontWeight: 700,
            color: 'var(--bark)', marginBottom: 12,
          }}>Stay in the Loop</h2>
          <p style={{
            fontSize: 16, color: 'var(--bark-light)',
            lineHeight: 1.65, marginBottom: 28,
          }}>
            Get seasonal updates when farms open, new listings added, and can't-miss harvest festivals — delivered to your inbox.
          </p>
          {subscribed ? (
            <div style={{
              background: 'var(--green-pale)',
              border: '1px solid var(--green)',
              borderRadius: 10, padding: '16px 24px',
              color: 'var(--green-dark)',
              fontFamily: 'Source Serif 4, serif', fontSize: 15,
            }}>
              ✓ You're subscribed! Happy picking 🌾
            </div>
          ) : (
            <form onSubmit={handleSubscribe} style={{ display: 'flex', gap: 8, maxWidth: 440, margin: '0 auto' }}>
              <input
                type="email" value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="your@email.com"
                required
                style={{
                  flex: 1, padding: '12px 16px', borderRadius: 8,
                  border: '2px solid var(--cream-mid)',
                  fontSize: 15, fontFamily: 'Source Serif 4, serif',
                  color: 'var(--bark)', background: '#fff', outline: 'none',
                  transition: 'border-color 0.2s',
                }}
                onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
              />
              <button type="submit" style={{
                background: 'var(--orange)', color: '#fff',
                border: 'none', cursor: 'pointer',
                padding: '12px 20px', borderRadius: 8,
                fontSize: 14, fontFamily: 'Source Serif 4, serif', fontWeight: 600,
                transition: 'all 0.2s',
                boxShadow: '0 2px 8px rgba(200,98,42,0.3)',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--orange-light)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--orange)'}
              >Subscribe</button>
            </form>
          )}
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{
        background: 'var(--bark)',
        padding: 'clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem)',
        color: 'rgba(253,246,236,0.6)',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: 32, marginBottom: 32,
          }}>
            <div>
              <div style={{
                fontFamily: 'Playfair Display, serif',
                fontSize: 20, fontWeight: 700, color: 'var(--cream)',
                marginBottom: 8,
              }}>Prairie Pickin' Guide</div>
              <p style={{ fontSize: 14, lineHeight: 1.6 }}>
                Your guide to farms, orchards, and u-pick destinations within 3 hours of Sioux Falls, SD.
              </p>
            </div>
            <div>
              <div style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--orange)', marginBottom: 12,
              }}>Browse</div>
              {window.CATEGORIES.filter(c => c.id !== 'all').map(cat => (
                <div key={cat.id} style={{ marginBottom: 6 }}>
                  <span style={{ fontSize: 13, cursor: 'pointer', color: 'rgba(253,246,236,0.55)' }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--cream)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(253,246,236,0.55)'}
                  >{cat.icon} {cat.label}</span>
                </div>
              ))}
            </div>
            <div>
              <div style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--orange)', marginBottom: 12,
              }}>Region</div>
              <p style={{ fontSize: 13, lineHeight: 1.7 }}>
                South Dakota · Minnesota<br/>
                Iowa · Nebraska<br/>
                Within 3 hrs of Sioux Falls
              </p>
            </div>
          </div>
          <div style={{
            borderTop: '1px solid rgba(255,255,255,0.08)',
            paddingTop: 20, textAlign: 'center', fontSize: 12,
            fontFamily: 'DM Mono, monospace',
          }}>
            © 2026 Prairie Pickin' Guide · Made with ❤ for Midwest families
            {' · '}
            <span
              onClick={() => navigate('admin')}
              style={{ cursor: 'pointer', color: 'rgba(253,246,236,0.4)' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--orange)'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(253,246,236,0.4)'}
            >Admin</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, { HomePage });