// Gudjo — What's Next + Footer (v2)
// Big confident headline, inline email; 3-col footer.

function WhatsNext({ palette, serif, texture }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');
  const valid = /^\S+@\S+\.\S+$/.test(email);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setStatus('sent');
  };

  return (
    <section id="yakinda" data-screen-label="06 Next" className="g-section" style={{
      background: palette.primary, color: palette.paper,
    }}>
      <PaperTexture intensity={texture * 0.55} tone={palette.paper} />

      <div className="g-wrap g-wrap--xl">
        <div className="g-2col g-2col--asym" style={{ alignItems: 'start' }}>

          {/* LEFT: headline */}
          <div>
            <span className="g-eyebrow" style={{ color: palette.accent }}>
              Yakında · what's next
            </span>

            <h2 className="g-h2 g-h2--lg" style={{
              fontFamily: serif, color: palette.paper, marginTop: 24,
            }}>
              İlk şişeler<br/>
              <span style={{ color: palette.accent }}>yolda.</span>
            </h2>

            <p className="g-body g-body--lg" style={{
              fontFamily: serif, color: palette.paper, opacity: 0.92,
              marginTop: 32, maxWidth: 520,
            }}>
              Şu an mutfakta. Yakında elinde. Haberdar olmak ister misin?
              Spam yok — sadece ilk şişeler.
            </p>
            <p className="g-en" style={{
              color: palette.paper, marginTop: 12, maxWidth: 500,
            }}>
              Right now, in the kitchen. Soon, in your hand. Want a quiet note when it's ready?
            </p>
          </div>

          {/* RIGHT: email form */}
          <div>
            {status === 'idle' ? (
              <form onSubmit={onSubmit} className="g-email-form" style={{ marginTop: 0 }}>
                <label className="g-email-label" style={{ color: palette.paper }}>
                  e-posta · email
                </label>
                <div className="g-email-field" style={{
                  color: palette.paper, borderBottomColor: palette.paper,
                }}>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="merhaba@..."
                    className="g-email-input"
                    style={{ fontFamily: serif, color: palette.paper }}
                  />
                  <button
                    type="submit"
                    disabled={!valid}
                    className="g-email-submit"
                    style={{ color: palette.paper }}
                  >
                    beni listeye al →
                  </button>
                </div>
                <p style={{
                  marginTop: 16, color: palette.paper, opacity: 0.7,
                  fontSize: 11, letterSpacing: '0.04em', lineHeight: 1.5,
                  fontFamily: SANS,
                }}>
                  Söz veriyoruz: spam yok, sadece ilk şişeler.
                  <span style={{ opacity: 0.8, fontStyle: 'italic' }}>
                    {' '}No spam — only first bottles.
                  </span>
                </p>
              </form>
            ) : (
              <div style={{
                padding: '28px 26px',
                background: `rgba(${hex2rgb(palette.paper)},0.08)`,
                border: `0.5px solid rgba(${hex2rgb(palette.paper)},0.25)`,
                borderRadius: 4,
                display: 'flex', alignItems: 'center', gap: 16,
              }}>
                <PawMark color={palette.paper} size={28} opacity={0.95} />
                <div>
                  <div style={{
                    fontFamily: serif, fontStyle: 'italic',
                    fontSize: 'clamp(20px, 2vw, 26px)',
                    color: palette.paper, lineHeight: 1.2,
                  }}>
                    Sağ ol. Haberleşiriz.
                  </div>
                  <div style={{
                    marginTop: 6,
                    fontSize: 'clamp(11px, 1vw, 13px)',
                    color: palette.paper, opacity: 0.72,
                    fontStyle: 'italic',
                  }}>
                    Thank you — we'll be in touch.
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ palette, serif, texture }) {
  return (
    <footer data-screen-label="07 Footer" className="g-section" style={{
      background: palette.ink, color: palette.paper,
    }}>
      <PaperTexture intensity={texture * 0.5} tone={palette.paper} />

      <div className="g-wrap" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="g-footer-grid">

          {/* Col 1: brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Wordmark serif={serif} color={palette.paper} size={56} />
              <PawMark color={palette.accent} size={24} opacity={0.85} />
            </div>
            <div style={{
              marginTop: 14, fontFamily: serif, fontStyle: 'italic',
              fontSize: 'clamp(15px, 1.4vw, 19px)',
              color: palette.paper, opacity: 0.78, lineHeight: 1.4, maxWidth: 320,
            }}>
              Sevgiyle demlenen Türk kombuchası — Kartepe'den, küçük partilerde.
            </div>
            <div style={{ marginTop: 28 }}>
              <BatchStamp palette={palette} compact={false} />
            </div>
          </div>

          {/* Col 2: nav */}
          <div>
            <div className="g-eyebrow" style={{ color: palette.accent, opacity: 0.9 }}>
              Site
            </div>
            <div style={{ marginTop: 18 }}>
              {[
                { href: '#hikaye',  tr: 'Hikaye',  en: 'story' },
                { href: '#tatlar',  tr: 'Tatlar',  en: 'flavours' },
                { href: '#sabir',   tr: 'Sabır',   en: 'craft' },
                { href: '#yakinda', tr: 'Yakında', en: 'what\'s next' },
              ].map((r, i) => (
                <a key={i} href={r.href} className="g-footer-row" style={{
                  color: palette.paper,
                  borderTop: i === 0 ? `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)` : 'none',
                  borderBottom: `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)`,
                }}>
                  <span className="g-footer-row-link" style={{ fontFamily: serif }}>{r.tr}</span>
                  <span className="g-footer-row-en">{r.en}</span>
                </a>
              ))}
            </div>
          </div>

          {/* Col 3: contact */}
          <div>
            <div className="g-eyebrow" style={{ color: palette.accent, opacity: 0.9 }}>
              İletişim · contact
            </div>
            <div style={{ marginTop: 18 }}>
              {[
                { tr: 'Kartepe · Türkiye',    en: 'find us',    href: null },
                { tr: '@gudjokombucha',       en: 'instagram',  href: 'https://instagram.com/gudjokombucha' },
                { tr: 'merhaba@gudjo.co',     en: 'email',      href: 'mailto:merhaba@gudjo.co' },
              ].map((r, i) => {
                const inner = (
                  <>
                    <span className="g-footer-row-link" style={{ fontFamily: serif, color: palette.paper }}>
                      {r.tr}
                    </span>
                    <span className="g-footer-row-en" style={{ color: palette.paper }}>{r.en}</span>
                  </>
                );
                return r.href ? (
                  <a key={i} href={r.href} className="g-footer-row" style={{
                    color: palette.paper,
                    borderTop: i === 0 ? `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)` : 'none',
                    borderBottom: `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)`,
                  }}>{inner}</a>
                ) : (
                  <div key={i} className="g-footer-row" style={{
                    color: palette.paper,
                    borderTop: i === 0 ? `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)` : 'none',
                    borderBottom: `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)`,
                  }}>{inner}</div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Bottom strip */}
        <div style={{
          marginTop: 64, paddingTop: 24,
          borderTop: `0.5px solid rgba(${hex2rgb(palette.paper)},0.18)`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap',
        }}>
          <span style={{
            fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
            fontSize: 10, letterSpacing: '0.16em',
            color: palette.paper, opacity: 0.55,
          }}>
            © 2026 Gudjo · El yapımı küçük parti kombucha
          </span>
          <span style={{
            fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
            fontSize: 10, letterSpacing: '0.18em',
            color: palette.paper, opacity: 0.55,
          }}>
            Kartepe · Türkiye
          </span>
        </div>
      </div>
    </footer>
  );
}

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