// AboutPage.jsx — About & Contact page

const AboutPage = ({ navigate }) => {
  const [formData, setFormData] = React.useState({ name: '', email: '', farmName: '', category: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const updateField = (field) => (e) => setFormData(prev => ({ ...prev, [field]: e.target.value }));

  const inputStyle = {
    width: '100%', padding: '12px 14px',
    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',
    marginBottom: 16,
  };

  return (
    <div style={{ paddingTop: 68, minHeight: '100vh' }}>

      {/* ── HEADER ── */}
      <div style={{
        background: 'linear-gradient(160deg, #2C1A0E 0%, var(--green-dark) 100%)',
        padding: 'clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px)',
        }}/>
        <div style={{ maxWidth: 760, margin: '0 auto', position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <div style={{ fontSize: 40, marginBottom: 16 }}>🌾</div>
          <div style={{
            fontFamily: 'DM Mono, monospace', fontSize: 11,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--orange)', marginBottom: 14,
          }}>Our Story</div>
          <h1 style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 'clamp(32px, 5vw, 56px)', fontWeight: 700,
            color: 'var(--cream)', lineHeight: 1.1, marginBottom: 20,
          }}>About Prairie<br/>Pickin' Guide</h1>
          <p style={{
            fontSize: 18, color: 'rgba(253,246,236,0.72)',
            lineHeight: 1.75, maxWidth: 580, margin: '0 auto',
          }}>
            A community directory connecting Midwest families with the farms, orchards, and u-pick destinations that make the seasons worth celebrating.
          </p>
        </div>
        <div style={{ position: 'absolute', bottom: -1, left: 0, right: 0 }}>
          <svg viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style={{display:'block',width:'100%',height:40}}>
            <path d="M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z" fill="#FDF6EC"/>
          </svg>
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: 'clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem)' }}>

        {/* ── MISSION ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 40, marginBottom: 64,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'var(--orange)', marginBottom: 12,
            }}>Why We Exist</div>
            <h2 style={{
              fontFamily: 'Playfair Display, serif',
              fontSize: 'clamp(26px, 3.5vw, 38px)', fontWeight: 700,
              color: 'var(--bark)', marginBottom: 18, lineHeight: 1.2,
            }}>Connecting Families<br/>to the Prairie</h2>
            <p style={{ fontSize: 16, color: 'var(--bark-mid)', lineHeight: 1.8, marginBottom: 16 }}>
              The Midwest is home to hundreds of incredible farms, orchards, and u-pick destinations — but finding them shouldn't require a dozen Google searches and outdated listings.
            </p>
            <p style={{ fontSize: 16, color: 'var(--bark-mid)', lineHeight: 1.8 }}>
              Prairie Pickin' Guide was born out of a simple idea: a trusted, curated directory of the best farm experiences within reach of Sioux Falls. We verify every listing, update hours each season, and only feature farms we'd take our own families to.
            </p>
          </div>
          <div style={{
            background: 'var(--cream-dark)', borderRadius: 16,
            padding: 32, border: '1px solid var(--cream-mid)',
            backgroundImage: 'var(--parchment-texture)',
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
            }}>
              {[
                { num: window.LISTINGS_DATA.length + '+', label: 'Verified Listings', icon: '✓' },
                { num: '4', label: 'States Covered', icon: '🗺' },
                { num: '~3hr', label: 'Max Drive Time', icon: '🚗' },
                { num: 'Free', label: 'Always Free to Browse', icon: '🌾' },
              ].map(stat => (
                <div key={stat.label} style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 24, marginBottom: 8 }}>{stat.icon}</div>
                  <div style={{
                    fontFamily: 'Playfair Display, serif',
                    fontSize: 28, fontWeight: 700,
                    color: 'var(--orange)', lineHeight: 1,
                  }}>{stat.num}</div>
                  <div style={{
                    fontFamily: 'DM Mono, monospace', fontSize: 10,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    color: 'var(--bark-light)', marginTop: 4,
                  }}>{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="section-divider" style={{ marginBottom: 56 }} />

        {/* ── HOW IT WORKS ── */}
        <div style={{ marginBottom: 64, textAlign: 'center' }}>
          <div style={{
            fontFamily: 'DM Mono, monospace', fontSize: 11,
            letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'var(--orange)', marginBottom: 12,
          }}>Simple by design</div>
          <h2 style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 'clamp(26px, 3.5vw, 38px)', fontWeight: 700,
            color: 'var(--bark)', marginBottom: 40,
          }}>How It Works</h2>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: 24,
          }}>
            {[
              { step: '01', icon: '🔍', title: 'Search & Filter', desc: 'Browse by category, activity, season, or distance from Sioux Falls.' },
              { step: '02', icon: '📍', title: 'Find Your Farm', desc: 'Read descriptions, hours, activities, and real visitor reviews.' },
              { step: '03', icon: '🚗', title: 'Go Explore', desc: 'Get directions, call ahead, and head out for a memorable day.' },
              { step: '04', icon: '⭐', title: 'Leave a Review', desc: 'Share your experience to help other families discover great spots.' },
            ].map((item, i) => (
              <div key={item.step} style={{
                background: '#fff',
                border: '1px solid var(--cream-mid)',
                borderRadius: 14, padding: '28px 20px',
                textAlign: 'center',
                animation: `fadeUp 0.5s ${i * 0.08}s ease both`,
              }}>
                <div style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 11,
                  color: 'var(--orange)', letterSpacing: '0.1em',
                  marginBottom: 12,
                }}>{item.step}</div>
                <div style={{ fontSize: 32, marginBottom: 12 }}>{item.icon}</div>
                <h3 style={{
                  fontFamily: 'Playfair Display, serif', fontSize: 18, fontWeight: 600,
                  color: 'var(--bark)', marginBottom: 8,
                }}>{item.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--bark-light)', lineHeight: 1.65 }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="section-divider" style={{ marginBottom: 56 }} />

        {/* ── SUBMIT LISTING FORM ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 48, alignItems: 'start',
        }}>
          <div>
            <div style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'var(--orange)', marginBottom: 12,
            }}>For farm owners</div>
            <h2 style={{
              fontFamily: 'Playfair Display, serif',
              fontSize: 'clamp(26px, 3.5vw, 36px)', fontWeight: 700,
              color: 'var(--bark)', marginBottom: 16, lineHeight: 1.2,
            }}>List Your Farm<br/>for Free</h2>
            <p style={{ fontSize: 16, color: 'var(--bark-mid)', lineHeight: 1.8, marginBottom: 24 }}>
              Prairie Pickin' Guide is free for farm owners and visitors alike. Submit your listing and we'll review it within 2–3 business days.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { icon: '✓', text: 'Free basic listing — always' },
                { icon: '✓', text: 'Appear in search and category filters' },
                { icon: '✓', text: 'Collect visitor reviews' },
                { icon: '⭐', text: 'Featured placement available for farms that want extra visibility' },
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{
                    color: item.icon === '⭐' ? 'var(--gold)' : 'var(--green)',
                    fontSize: 16, marginTop: 2, flexShrink: 0,
                  }}>{item.icon}</span>
                  <span style={{ fontSize: 15, color: 'var(--bark-mid)', lineHeight: 1.5 }}>{item.text}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Form */}
          <div style={{
            background: 'var(--cream-dark)',
            border: '1px solid var(--cream-mid)',
            borderRadius: 16, padding: 'clamp(1.5rem, 3vw, 2rem)',
            backgroundImage: 'var(--parchment-texture)',
          }}>
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '32px 16px' }}>
                <div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
                <h3 style={{
                  fontFamily: 'Playfair Display, serif', fontSize: 24, fontWeight: 700,
                  color: 'var(--bark)', marginBottom: 10,
                }}>Submission Received!</h3>
                <p style={{ fontSize: 15, color: 'var(--bark-light)', lineHeight: 1.65 }}>
                  Thanks for submitting your farm. We'll review your listing and be in touch within 2–3 business days.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <h3 style={{
                  fontFamily: 'Playfair Display, serif', fontSize: 20, fontWeight: 700,
                  color: 'var(--bark)', marginBottom: 20,
                }}>Submit Your Listing</h3>

                <label style={{ display: 'block', fontSize: 12, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bark-light)', marginBottom: 6 }}>Your Name *</label>
                <input value={formData.name} onChange={updateField('name')} placeholder="Jane Smith" required style={inputStyle}
                  onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                  onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
                />

                <label style={{ display: 'block', fontSize: 12, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bark-light)', marginBottom: 6 }}>Email *</label>
                <input type="email" value={formData.email} onChange={updateField('email')} placeholder="you@yourfarm.com" required style={inputStyle}
                  onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                  onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
                />

                <label style={{ display: 'block', fontSize: 12, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bark-light)', marginBottom: 6 }}>Farm Name *</label>
                <input value={formData.farmName} onChange={updateField('farmName')} placeholder="Sunrise Apple Orchard" required style={inputStyle}
                  onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                  onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
                />

                <label style={{ display: 'block', fontSize: 12, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bark-light)', marginBottom: 6 }}>Category *</label>
                <select value={formData.category} onChange={updateField('category')} required
                  style={{ ...inputStyle, cursor: 'pointer' }}
                  onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                  onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
                >
                  <option value="">Select a category...</option>
                  {window.CATEGORIES.filter(c => c.id !== 'all').map(cat => (
                    <option key={cat.id} value={cat.id}>{cat.icon} {cat.label}</option>
                  ))}
                </select>

                <label style={{ display: 'block', fontSize: 12, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bark-light)', marginBottom: 6 }}>Tell us about your farm</label>
                <textarea value={formData.message} onChange={updateField('message')}
                  placeholder="Location, what you offer, hours, website, and anything else you'd like us to know..."
                  rows={4}
                  style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.6 }}
                  onFocus={e => e.target.style.borderColor = 'var(--orange)'}
                  onBlur={e => e.target.style.borderColor = 'var(--cream-mid)'}
                />

                <button type="submit" style={{
                  width: '100%',
                  background: 'var(--orange)', color: '#fff',
                  border: 'none', borderRadius: 8, padding: '14px',
                  fontSize: 15, fontFamily: 'Source Serif 4, serif', fontWeight: 600,
                  cursor: 'pointer', 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'; }}
                >Submit My Farm →</button>
              </form>
            )}
          </div>
        </div>
      </div>

      {/* ── FOOTER ── */}
      <footer style={{
        background: 'var(--bark)',
        padding: 'clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem)',
        marginTop: 60,
        color: 'rgba(253,246,236,0.6)',
      }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            fontFamily: 'Playfair Display, serif',
            fontSize: 20, fontWeight: 700, color: 'var(--cream)',
            marginBottom: 8,
          }}>Prairie Pickin' Guide</div>
          <p style={{ fontSize: 14, marginBottom: 20 }}>Sioux Falls Region · SD · MN · IA · NE</p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap', marginBottom: 24 }}>
            {['Home', 'Browse Farms', 'About', 'Submit a Listing'].map(link => (
              <span key={link} style={{ fontSize: 13, cursor: 'pointer', transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--cream)'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(253,246,236,0.6)'}
              >{link}</span>
            ))}
          </div>
          <div style={{
            borderTop: '1px solid rgba(255,255,255,0.08)',
            paddingTop: 20, fontSize: 12,
            fontFamily: 'DM Mono, monospace',
          }}>
            © 2026 Prairie Pickin' Guide · Made with ❤ for Midwest families
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, { AboutPage });