function ContactSection() {
  const [submitted, setSubmitted] = React.useState(false);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [creates, setCreates] = React.useState('');
  const [showCalendar, setShowCalendar] = React.useState(false);
  const inputStyle = {
    width: '100%', fontFamily: 'var(--font-ui)', fontSize: 15, padding: '12px 0',
    border: 'none', borderBottom: '1px solid var(--ink-dark)', background: 'transparent',
    color: 'var(--ink-dark)', outline: 'none', marginBottom: 16, transition: 'border-color 0.2s',
    display: 'block',
  };

  return (
    <section id="contact" style={{ background: 'var(--paper-cream)', padding: 'clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 6rem)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 56, maxWidth: 900, margin: '0 auto',
      }}>
        {/* Left: contact info */}
        <SectionReveal>
          <h2 style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 36, color: 'var(--ink-dark)', marginBottom: 16 }}>Let's talk.</h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--ink-dark)', lineHeight: 1.7, marginBottom: 28 }}>
            We are based in Puebla de Zaragoza, México. Orders, questions, and custom requests go through WhatsApp. We respond same day.
          </p>

          <a href="https://wa.me/522941040210?text=Hello%2C%20I%27m%20interested%20in%20ordering%20a%20XOCHIATL%20palette." style={{
            display: 'inline-block', fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 15,
            background: 'var(--flower-pink)', color: 'var(--paper-cream)', borderRadius: 2,
            padding: '14px 32px', textDecoration: 'none', marginBottom: 28, transition: 'opacity 0.2s',
          }}>Order via WhatsApp</a>

          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink-dark)', lineHeight: 2.2 }}>
            <p style={{ color: 'rgba(34,34,51,0.6)' }}>Puebla de Zaragoza, México</p>
          </div>

          {/* Stylized mini-map: Puebla location */}
          <div style={{ marginTop: 28, padding: '20px 0' }}>
            <style>{`
              @keyframes mapPinPulse {
                0%, 100% { r: 4; opacity: 0.25; }
                50% { r: 10; opacity: 0; }
              }
              .map-container {
                position: relative;
                max-width: 280px;
                opacity: 0.85;
                transition: opacity 0.3s ease;
              }
              .map-container:hover { opacity: 1; }
            `}</style>
            <div className="map-container">
              <svg viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%' }}>
                {/* Puebla State Silhouette */}
                <path d="M 130 20 C 145 25, 155 45, 150 60 C 145 75, 160 90, 175 105 C 195 125, 205 150, 180 160 C 150 170, 120 180, 100 150 C 80 120, 110 110, 120 80 C 125 60, 110 30, 130 20 Z"
                  fill="rgba(34,34,51,0.06)"
                  stroke="var(--water-turquoise)"
                  strokeWidth="1.5"
                  strokeLinejoin="round"
                />

                {/* Puebla pin pulse ring */}
                <circle cx="135" cy="95" r="4" fill="none" stroke="var(--flower-pink)" strokeWidth="1.5" opacity="0.25">
                  <animate attributeName="r" values="4;12;4" dur="2.5s" repeatCount="indefinite" />
                  <animate attributeName="opacity" values="0.3;0;0.3" dur="2.5s" repeatCount="indefinite" />
                </circle>

                {/* Puebla pin dot */}
                <circle cx="135" cy="95" r="4" fill="var(--flower-pink)" />

                {/* Pin marker */}
                <path d="M135 88 C131 88 128 91 128 94.5 C128 99.5 135 106 135 106 C135 106 142 99.5 142 94.5 C142 91 139 88 135 88 Z"
                  fill="var(--flower-pink)" opacity="0.9" />
                <circle cx="135" cy="94.5" r="2" fill="var(--paper-cream)" />

                {/* Label */}
                <text x="145" y="92" fontFamily="var(--font-identity)" fontSize="11" fontWeight="600" fill="var(--ink-dark)" opacity="0.7">Puebla</text>
                <text x="145" y="104" fontFamily="var(--font-ui)" fontSize="8" fill="var(--ink-dark)" opacity="0.4">19.0414° N, 98.2063° W</text>
              </svg>
            </div>
          </div>
        </SectionReveal>

        {/* Right: lead capture */}
        <SectionReveal delay={150}>
          {!submitted ? (
            <div>
              <h3 style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 24, color: 'var(--ink-dark)', marginBottom: 8 }}>Stay close.</h3>
              <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink-dark)', marginBottom: 28, lineHeight: 1.6 }}>
                Be the first to know about new colors, workshops, and restocks. No spam, ever.
              </p>
              <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)}
                style={inputStyle}
                onFocus={e => e.target.style.borderBottomColor = 'var(--flower-pink)'}
                onBlur={e => e.target.style.borderBottomColor = 'var(--ink-dark)'} />
              <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)}
                style={inputStyle}
                onFocus={e => e.target.style.borderBottomColor = 'var(--flower-pink)'}
                onBlur={e => e.target.style.borderBottomColor = 'var(--ink-dark)'} />
              <select value={creates} onChange={e => setCreates(e.target.value)} style={{
                ...inputStyle,
                appearance: 'none', cursor: 'pointer',
                color: creates ? 'var(--ink-dark)' : 'rgba(34,34,51,0.3)',
              }}>
                <option value="" disabled>What do you create?</option>
                <option value="Illustration">Illustration</option>
                <option value="Journaling">Journaling</option>
                <option value="Watercolor">Watercolor</option>
                <option value="Other">Other</option>
              </select>
              <button onClick={() => { 
                if (email) {
                  const webhookUrl = "https://hook.us2.make.com/ehmm7qo23xdgsafqrl6fmxig6bt8495a";
                  fetch(webhookUrl, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ name, email, creates: creates || "Other" })
                  }).catch(err => console.error("Webhook error:", err));
                  setSubmitted(true); 
                }
              }} style={{
                width: '100%', fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 15,
                background: 'var(--flower-pink)', color: 'var(--paper-cream)',
                border: 'none', borderRadius: 2, padding: '14px', cursor: 'pointer', marginTop: 8,
              }}>Count me in →</button>
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 300 }}>
              <p style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontStyle: 'italic', fontSize: 22, color: 'var(--flower-pink)', textAlign: 'center', lineHeight: 1.6 }}>
                Color blooms in water.<br/>We'll be in touch.
              </p>
            </div>
          )}
        </SectionReveal>
      </div>

      <SectionReveal delay={200}>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 56 }}>
          <button onClick={() => setShowCalendar(true)} style={{
            width: '100%', maxWidth: 320, fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 15,
            background: 'var(--flower-pink)', color: 'var(--paper-cream)',
            border: 'none', borderRadius: 2, padding: '14px', cursor: 'pointer',
          }}>Book a 15-Minute Session</button>
        </div>
      </SectionReveal>

      {showCalendar && (
        <div 
          style={{
            position: 'fixed', zIndex: 10000, left: 0, top: 0, width: '100vw', height: '100vh',
            background: 'rgba(34, 34, 51, 0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
          onClick={() => setShowCalendar(false)}
        >
          <div 
            style={{
              background: 'var(--paper-cream)', width: '95%', maxWidth: 900,
              borderRadius: 2, maxHeight: '90vh', overflowY: 'auto', display: 'flex', flexDirection: 'column',
              boxShadow: '0 10px 40px rgba(0,0,0,0.3)'
            }}
            onClick={e => e.stopPropagation()}
          >
            <div style={{ padding: '24px 32px', borderBottom: '1px solid rgba(34,34,51,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h2 style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 24, color: 'var(--ink-dark)', margin: 0 }}>Book a Session</h2>
              <button onClick={() => setShowCalendar(false)} style={{ background: 'none', border: 'none', fontSize: 28, cursor: 'pointer', color: 'var(--ink-dark)', padding: 0, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>&times;</button>
            </div>
            <div style={{ padding: '16px 32px 32px', flex: 1 }}>
              <iframe src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ2y8BdWrb5gMZ0BuUlrukW1UA0gNIRk0UhNHjdXHNcoQ0ekkQa_9NvyJ4j-qSsZ6WABYGqh1GbE?gv=true" style={{ border: 0, width: '100%', height: 600, borderRadius: 2 }} frameBorder="0"></iframe>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Footer({ navigate }) {
  return (
    <>
      <style>{`
        .footer-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 40px;
          align-items: center;
        }
        .footer-left { text-align: left; }
        .footer-center { text-align: center; }
        .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
        .footer-socials { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
        
        @media (max-width: 768px) {
          .footer-wrap { padding: 48px 24px 32px !important; }
          .footer-grid {
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-items: center;
            text-align: center;
          }
          .footer-left { align-self: center; text-align: center; }
          .footer-logo-row { justify-content: center; }
          .footer-center { align-self: center; margin: 0; }
          .footer-right { align-items: center; align-self: center; gap: 16px; }
          .footer-socials { justify-content: center; }
        }
      `}</style>
      <footer className="footer-wrap" style={{
        background: 'var(--ink-dark)',
        padding: '48px clamp(1.5rem, 6vw, 6rem) 32px',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 'clamp(1.5rem, 6vw, 6rem)', right: 'clamp(1.5rem, 6vw, 6rem)',
          height: 1, background: 'linear-gradient(90deg, transparent, rgba(199,46,102,0.5), transparent)',
        }}></div>
        
        <div className="footer-grid">
          <div className="footer-left">
            <div className="footer-logo-row" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <XochiatlLogo size={32} mono={false} />
              <p style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 18, color: 'var(--paper-cream)', letterSpacing: '0.12em' }}>Xochiatl</p>
            </div>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'rgba(245,240,230,0.6)', lineHeight: 1.6 }}>Handcrafted botanical watercolors<br/>Puebla, México</p>
          </div>
          <div className="footer-center">
            <p style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontStyle: 'italic', fontSize: 24, color: 'var(--flower-pink)' }}>Color blooms in water.</p>
          </div>
          <div className="footer-right">
            <div className="footer-socials">
              <a href="https://www.instagram.com/xochiatl_" target="_blank" rel="noopener noreferrer" title="Instagram"
                style={{ color: 'rgba(245,240,230,0.8)', transition: 'color 0.2s', display: 'flex' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--flower-pink)'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,230,0.8)'}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                </svg>
              </a>
              <a href="https://www.tiktok.com/@xochiatl6" target="_blank" rel="noopener noreferrer" title="TikTok"
                style={{ color: 'rgba(245,240,230,0.8)', transition: 'color 0.2s', display: 'flex' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--flower-pink)'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,230,0.8)'}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"></path>
                </svg>
              </a>
              <a href="https://wa.me/522941040210" target="_blank" rel="noopener noreferrer" title="WhatsApp"
                style={{ color: 'rgba(245,240,230,0.8)', transition: 'color 0.2s', display: 'flex' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--flower-pink)'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,230,0.8)'}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                </svg>
              </a>
            </div>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 12, color: 'rgba(245,240,230,0.4)', display: 'flex', gap: 6, alignItems: 'center' }}>
              <span>© 2026 Xochiatl. All rights reserved.</span>
              {navigate && (
                <>
                  <span>•</span>
                  <button
                    onClick={() => {
                      navigate('help');
                      setTimeout(() => {
                        document.getElementById('policy')?.scrollIntoView({ behavior: 'smooth' });
                      }, 150);
                    }}
                    style={{
                      background: 'none',
                      border: 'none',
                      color: 'rgba(245,240,230,0.6)',
                      fontFamily: 'var(--font-ui)',
                      fontSize: 12,
                      cursor: 'pointer',
                      textDecoration: 'none',
                      padding: 0,
                      transition: 'color 0.2s'
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = 'var(--flower-pink)'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,230,0.6)'}
                  >
                    Policies
                  </button>
                </>
              )}
            </p>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { ContactSection, Footer });