function ColorsSection() {
  return (
    <section id="colors" style={{ background: 'var(--ink-dark)', padding: 'clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 6rem)' }}>
      <SectionReveal>
        <h2 style={{
          fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 'clamp(36px, 4vw, 48px)',
          color: 'var(--paper-cream)', textAlign: 'center', marginBottom: 12,
        }}>The Six Colors</h2>
        <p style={{
          fontFamily: 'var(--font-ui)', fontSize: 16, color: 'rgba(245,240,230,0.75)',
          textAlign: 'center', maxWidth: 560, margin: '0 auto 48px', lineHeight: 1.7,
        }}>Each pigment is harvested, reduced, and poured by hand. The color you see is never the color you get.</p>
      </SectionReveal>

      <style>{`
        .colors-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 24px;
          max-width: 1000px;
          margin: 0 auto;
        }
        @media (max-width: 768px) {
          .colors-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
          }
        }
      `}</style>
      <div className="colors-grid">
        {COLORS_DATA.map((c, i) => <ColorCard key={c.name} color={c} delay={i * 80} />)}
      </div>

      <SectionReveal delay={400}>
        <p style={{
          fontFamily: 'var(--font-ui)', fontSize: 13, color: 'rgba(245,240,230,0.5)',
          textAlign: 'center', marginTop: 48, maxWidth: 600, margin: '48px auto 0',
        }}>All pigments are food-grade, petroleum-free, and sourced from Puebla's local markets.</p>
      </SectionReveal>

      {/* Lead magnet banner */}
      <LeadMagnetBanner />
    </section>
  );
}

function ColorCard({ color, delay }) {
  const [hovered, setHovered] = React.useState(false);
  const c = color;

  return (
    <>
      <style>{`
        .color-card { padding: 32px 24px; }
        .color-card-title { font-size: 22px; margin-bottom: 4px; }
        .color-card-source { font-size: 13px; margin-bottom: 14px; }
        .color-card-desc { font-size: 13px; line-height: 1.6; }
        @media (max-width: 768px) {
          .color-card { padding: 20px 12px !important; }
          .color-card-title { font-size: 18px !important; margin-bottom: 2px !important; }
          .color-card-source { font-size: 11px !important; margin-bottom: 8px !important; }
          .color-card-desc { font-size: 11px !important; line-height: 1.4 !important; }
        }
      `}</style>
      <SectionReveal delay={delay} className="color-card" style={{
        background: 'var(--ink-dark)', border: '1px solid rgba(245,240,230,0.08)',
        borderRadius: 4, textAlign: 'center',
        boxShadow: `inset 0 0 40px rgba(${parseInt(c.dry.slice(1,3),16)},${parseInt(c.dry.slice(3,5),16)},${parseInt(c.dry.slice(5,7),16)},0.1)`,
        transition: 'border-color 0.3s',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Godet dry={c.dry} wet={c.wet} size={64} revealed={hovered}
            onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} />
        </div>
        <h3 className="color-card-title" style={{
          fontFamily: 'var(--font-identity)', fontWeight: 600,
          color: 'var(--paper-cream)',
        }}>{c.name}</h3>
        <p className="color-card-source" style={{
          fontFamily: 'var(--font-ui)', color: 'var(--pigment-ochre)',
        }}>{c.source}</p>
        <p className="color-card-desc" style={{ fontFamily: 'var(--font-ui)', color: 'rgba(245,240,230,0.7)' }}>
          Dry: {c.dryDesc}<br/>Paints: {c.wetDesc}
        </p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 12 }}>
          <div style={{ width: 24, height: 10, borderRadius: 2, background: c.dry }}></div>
          <span style={{ color: 'var(--water-turquoise)', fontSize: 12 }}>→</span>
          <div style={{ width: 24, height: 10, borderRadius: 2, background: c.wet }}></div>
        </div>
      </SectionReveal>
    </>
  );
}

function LeadMagnetBanner() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [showModal, setShowModal] = React.useState(false);

  return (
    <>
      <SectionReveal delay={500}>
        <div style={{
          background: 'var(--flower-pink)', borderRadius: 4, padding: '20px 28px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16, maxWidth: 800, margin: '48px auto 0',
        }}>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--paper-cream)', flex: 1, minWidth: 240 }}>
            <strong>Free:</strong> The Xochiatl Color Reveal Guide: 6 colors, 6 recipes, one surprise.
          </p>
          {!submitted ? (
            <button onClick={() => setShowModal(true)} style={{
              fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 13,
              background: 'var(--paper-cream)', color: 'var(--flower-pink)',
              border: 'none', borderRadius: 2, padding: '10px 20px', cursor: 'pointer',
              whiteSpace: 'nowrap',
            }}>Get it free →</button>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'flex-start' }}>
              <a href={`Xochiatl-Color-Reveal-Guide.html?email=${encodeURIComponent(email)}&v=${Date.now()}`} style={{
                fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 13,
                background: 'var(--ink-dark)', color: 'var(--paper-cream)',
                textDecoration: 'none', borderRadius: 2, padding: '10px 20px', cursor: 'pointer',
                whiteSpace: 'nowrap',
              }}>View interactive version →</a>
              <a href="#" onClick={(e) => {
                e.preventDefault();
                if (window.confirm(`The guide will be sent to ${email}, do you still want to download it?`)) {
                  const a = document.createElement('a');
                  a.href = 'Xochiatl%20%E2%80%94%20The%20Color%20Reveal%20Guide.pdf';
                  a.download = 'Xochiatl - The Color Reveal Guide.pdf';
                  a.click();
                }
              }} style={{
                fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--paper-cream)',
                textDecoration: 'underline', cursor: 'pointer', opacity: 0.9,
              }}>Manually Download PDF ↓</a>
            </div>
          )}
        </div>
      </SectionReveal>

      {showModal && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 9995, background: 'rgba(34,34,51,0.7)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
        }} onClick={() => setShowModal(false)}>
          <div style={{
            background: 'var(--paper-cream)', borderRadius: 4, padding: 40,
            maxWidth: 400, width: '100%', position: 'relative',
          }} onClick={e => e.stopPropagation()}>
            {!submitted ? (
              <>
                <h3 style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 28, color: 'var(--ink-dark)', marginBottom: 8 }}>
                  The Color Reveal Guide
                </h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink-dark)', marginBottom: 24, lineHeight: 1.6 }}>
                  6 colors, 6 botanical recipes, and the science behind the surprise. Enter your email to download.
                </p>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="Your email" style={{
                    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)', marginBottom: 20, outline: 'none',
                  }} />
                <button onClick={() => { 
                  if (email) {
                    const webhookUrl = "https://hook.us2.make.com/ehmm7qo23xdgsafqrl6fmxig6bt8495a";
                    fetch(webhookUrl, {
                      method: "POST",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify({ email: email, creates: "Guide" })
                    }).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',
                }}>Send me the guide →</button>
              </>
            ) : (
              <div style={{ textAlign: 'center' }}>
                <p style={{ fontFamily: 'var(--font-identity)', fontWeight: 600, fontStyle: 'italic', fontSize: 22, color: 'var(--flower-pink)', marginBottom: 20 }}>
                  Color blooms in water.<br/>Check your inbox.
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'center' }}>
                  <a href={`Xochiatl-Color-Reveal-Guide.html?email=${encodeURIComponent(email)}&v=${Date.now()}`} style={{
                    display: 'inline-block', fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 14,
                    background: 'var(--ink-dark)', color: 'var(--paper-cream)', textDecoration: 'none',
                    borderRadius: 2, padding: '12px 24px', cursor: 'pointer',
                  }}>View interactive version →</a>
                  <a href="#" onClick={(e) => {
                    e.preventDefault();
                    if (window.confirm(`The guide will be sent to ${email}, do you still want to download it?`)) {
                      const a = document.createElement('a');
                      a.href = 'Xochiatl%20%E2%80%94%20The%20Color%20Reveal%20Guide.pdf';
                      a.download = 'Xochiatl - The Color Reveal Guide.pdf';
                      a.click();
                    }
                  }} style={{
                    fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-dark)',
                    textDecoration: 'underline', cursor: 'pointer', opacity: 0.8
                  }}>Manually Download PDF ↓</a>
                </div>
              </div>
            )}
            <button onClick={() => setShowModal(false)} style={{
              position: 'absolute', top: 12, right: 16, background: 'none', border: 'none',
              fontSize: 20, color: 'var(--ink-dark)', cursor: 'pointer', opacity: 0.5,
            }}>×</button>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { ColorsSection, LeadMagnetBanner });