// splash-sections.jsx — Partners, Signup, Footer

// ──────────────────────────────────────────────────────────────────────────
// Partners — single dark section. Left: pitch to partners who want to draw
// people to their place. Right: lead-capture form.
// ──────────────────────────────────────────────────────────────────────────
function Partners({ onSubmit }) {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const [form, setForm] = React.useState({
    name: '', org: '', email: '', notes: '',
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const update = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setError(null);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { name, org, email } = form;
    if (!name.trim() || !org.trim()) {
      setError('Please share your name and organization.');
      return;
    }
    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setError('Please enter a valid email.');
      return;
    }
    setError(null);
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setForm({ name: '', org: '', email: '', notes: '' });
      onSubmit && onSubmit(form);
    }, 700);
  };

  // shared input style — pill, hairline white border, transparent fill
  const inputBase = {
    appearance: 'none',
    background: 'rgba(255,255,255,0.04)',
    border: `1px solid ${baux.white12}`,
    borderRadius: 12,
    padding: '14px 16px',
    color: baux.bone,
    fontFamily: baux.fontSans,
    fontSize: 15,
    width: '100%',
    outline: 'none',
    transition: 'border-color 200ms, background 200ms',
  };

  return (
    <section id="partners" style={{
      background: baux.navy,
      color: baux.bone,
      padding: isMobile ? '72px 20px' : '120px 32px',
      position: 'relative',
      overflow: 'hidden',
      borderTop: `1px solid ${baux.white12}`,
    }}>
      {/* faint gold halo on the right */}
      <div aria-hidden style={{
        position: 'absolute',
        top: '-10%', right: '-15%',
        width: isMobile ? 480 : 720, height: isMobile ? 480 : 720, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(200,169,110,0.10) 0%, rgba(200,169,110,0) 60%)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        maxWidth: 1200, margin: '0 auto', position: 'relative',
        display: 'grid',
        gridTemplateColumns: isTablet ? 'minmax(0, 1fr)' : 'minmax(0, 1.05fr) minmax(0, 0.95fr)',
        gap: isMobile ? 40 : 80,
        alignItems: 'center',
      }}>
        {/* LEFT — copy */}
        <Reveal>
          <Eyebrow>Partners</Eyebrow>
          <h2 style={{
            margin: isMobile ? '16px 0 0' : '20px 0 0',
            fontFamily: baux.fontSans,
            fontSize: isMobile ? 36 : (isTablet ? 44 : 56),
            fontWeight: 700,
            letterSpacing: '-0.022em',
            lineHeight: 1.04,
            maxWidth: 540,
          }}>
            Your destination,{' '}
            <span style={{
              fontFamily: baux.fontSerif,
              fontStyle: 'italic',
              fontWeight: 400,
              color: baux.gold,
            }}>in its own voice.</span>
          </h2>
          <p style={{
            margin: isMobile ? '20px 0 0' : '28px 0 0',
            maxWidth: 520,
            fontFamily: baux.fontSans,
            fontSize: isMobile ? 16 : 19,
            fontWeight: 400,
            color: baux.white72,
            lineHeight: 1.55,
          }}>
            Drawing people to your place is your work. Giving it a voice they
            actually want to hear is ours. BAUX turns your destination — a city,
            a campus, a stadium, a museum — into an experience visitors arrive
            curious for, stay longer in, and tell the next ones about.
          </p>
        </Reveal>

        {/* RIGHT — partner lead form */}
        <Reveal delay={120}>
          <form onSubmit={handleSubmit} style={{
            background: baux.navyRaised,
            border: `1px solid ${baux.white12}`,
            borderRadius: 20,
            padding: isMobile ? 22 : 32,
            display: 'flex', flexDirection: 'column', gap: 14,
            boxShadow: '0 24px 60px rgba(0,0,0,0.35)',
          }}>
            <div style={{ marginBottom: 4 }}>
              <Eyebrow>Talk to BAUX</Eyebrow>
            </div>
            <h3 style={{
              margin: 0,
              fontFamily: baux.fontSans, fontSize: isMobile ? 20 : 24, fontWeight: 600,
              letterSpacing: '-0.01em', lineHeight: 1.2,
              color: baux.bone,
            }}>
              Tell us about your place.
            </h3>

            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: 10,
              marginTop: 6,
            }}>
              <input
                type="text"
                placeholder="Your name"
                value={form.name}
                onChange={update('name')}
                style={inputBase}
                onFocus={(e) => (e.target.style.borderColor = baux.gold)}
                onBlur={(e) => (e.target.style.borderColor = baux.white12)}
              />
              <input
                type="text"
                placeholder="Organization"
                value={form.org}
                onChange={update('org')}
                style={inputBase}
                onFocus={(e) => (e.target.style.borderColor = baux.gold)}
                onBlur={(e) => (e.target.style.borderColor = baux.white12)}
              />
            </div>
            <input
              type="email"
              autoComplete="email"
              placeholder="Work email"
              value={form.email}
              onChange={update('email')}
              style={inputBase}
              onFocus={(e) => (e.target.style.borderColor = baux.gold)}
              onBlur={(e) => (e.target.style.borderColor = baux.white12)}
            />
            <textarea
              placeholder="What place would you like to give a voice? (optional)"
              value={form.notes}
              onChange={update('notes')}
              rows={3}
              style={{
                ...inputBase,
                resize: 'vertical',
                minHeight: 84,
                fontFamily: baux.fontSans,
                lineHeight: 1.5,
              }}
              onFocus={(e) => (e.target.style.borderColor = baux.gold)}
              onBlur={(e) => (e.target.style.borderColor = baux.white12)}
            />

            {error && (
              <div style={{
                fontFamily: baux.fontSans, fontSize: 13,
                color: '#F4A89C',
                marginTop: -4,
              }}>{error}</div>
            )}

            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 16, marginTop: 6, flexWrap: 'wrap',
            }}>
              <span style={{
                fontFamily: baux.fontSans, fontSize: 12,
                color: baux.white48,
                lineHeight: 1.45,
                whiteSpace: isMobile ? 'normal' : 'nowrap',
              }}>
                We'll reach back within two business days.
              </span>
              <Button
                tone="accent"
                type="submit"
                onClick={handleSubmit}
                style={{
                  padding: '13px 22px',
                  opacity: submitting ? 0.7 : 1,
                  pointerEvents: submitting ? 'none' : 'auto',
                }}>
                {submitting ? 'Sending…' : 'Request a conversation'}
              </Button>
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Signup — dark CTA panel, big email field, toast
// ──────────────────────────────────────────────────────────────────────────
function Signup({ signupRef, onSubmit }) {
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);

  React.useImperativeHandle(signupRef, () => ({
    focus: () => inputRef.current && inputRef.current.focus(),
  }), []);

  const handleSubmit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!v || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
      setError('Please enter a valid email.');
      return;
    }
    setError(null);
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setEmail('');
      onSubmit && onSubmit(v);
    }, 600);
  };

  return (
    <section id="signup" style={{
      background: baux.navy,
      color: baux.bone,
      padding: isMobile ? '72px 20px' : '120px 32px',
      position: 'relative',
      overflow: 'hidden',
      borderTop: `1px solid ${baux.white12}`,
    }}>
      {/* halo */}
      <div aria-hidden style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(200,169,110,0.10) 0%, rgba(200,169,110,0) 60%)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        maxWidth: 720, margin: '0 auto', position: 'relative',
        textAlign: 'center',
      }}>
        <Reveal>
          <Eyebrow style={{ justifyContent: 'center' }}>
            <Sparkle size={11}/> Private BETA · invitations rolling
          </Eyebrow>
          <h2 style={{
            margin: '20px auto 0',
            fontFamily: baux.fontSans,
            fontSize: isMobile ? 40 : 56, fontWeight: 700,
            letterSpacing: '-0.022em', lineHeight: 1.04,
            maxWidth: 620,
          }}>
            Get on{' '}
            <span style={{ fontFamily: baux.fontSerif, fontStyle: 'italic',
                           fontWeight: 400, color: baux.gold }}>the list.</span>
          </h2>

          <form onSubmit={handleSubmit} style={{
            display: isMobile ? 'block' : 'flex',
            alignItems: 'center', gap: 6,
            background: isMobile ? 'transparent' : 'rgba(255,255,255,0.06)',
            border: isMobile ? 'none' : `1px solid ${baux.white24}`,
            borderRadius: 9999,
            padding: isMobile ? 0 : 6,
            maxWidth: 520, margin: '40px auto 0',
            backdropFilter: isMobile ? 'none' : 'blur(12px)',
            WebkitBackdropFilter: isMobile ? 'none' : 'blur(12px)',
            transition: 'border-color 200ms',
          }}>
            {isMobile ? (
              <input
                ref={inputRef}
                type="email"
                autoComplete="email"
                placeholder="you@somewhere.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); setError(null); }}
                style={{
                  width: '100%',
                  display: 'block',
                  appearance: 'none',
                  background: 'rgba(255,255,255,0.06)',
                  border: `1px solid ${baux.white24}`,
                  borderRadius: 9999,
                  outline: 'none',
                  color: baux.bone,
                  fontFamily: baux.fontSans,
                  fontSize: 16,
                  padding: '14px 18px',
                  textAlign: 'left',
                }}
              />
            ) : (
              <input
                ref={inputRef}
                type="email"
                autoComplete="email"
                placeholder="you@somewhere.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); setError(null); }}
                className="baux-email"
                style={{ color: baux.bone, textAlign: 'left' }}
              />
            )}
            <Button
              tone="accent"
              type="submit"
              onClick={handleSubmit}
              style={{
                padding: isMobile ? '14px 22px' : '13px 22px',
                marginTop: isMobile ? 10 : 0,
                width: isMobile ? '100%' : 'auto',
                display: isMobile ? 'flex' : 'inline-flex',
                justifyContent: 'center',
                opacity: submitting ? 0.7 : 1,
                pointerEvents: submitting ? 'none' : 'auto',
              }}>
              {submitting ? 'Sending…' : 'Join the BETA'}
            </Button>
          </form>

          {error && (
            <div style={{
              marginTop: 16,
              fontFamily: baux.fontSans, fontSize: 14,
              color: '#F4A89C',
            }}>{error}</div>
          )}

          <div style={{
            marginTop: 28,
            fontFamily: baux.fontSans, fontSize: 13,
            color: baux.white48,
          }}>
            No spam. One email when BAUX goes live.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Footer — minimal
// ──────────────────────────────────────────────────────────────────────────
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: baux.navy,
      color: baux.bone,
      padding: isMobile ? '32px 20px 40px' : '40px 32px 56px',
      borderTop: `1px solid ${baux.white12}`,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Wordmark size={20} color={baux.bone}/>
          <span style={{
            color: baux.white48,
            fontFamily: baux.fontSans, fontSize: 13,
          }}>
            The voice to the places you'll love. © 2026
          </span>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 24,
          fontFamily: baux.fontSans, fontSize: 13,
          color: baux.white72,
        }}>
          <a href="#partners" style={{ color: 'inherit', textDecoration: 'none' }}>Partners</a>
          <a href="#signup" style={{ color: 'inherit', textDecoration: 'none' }}>Join the BETA</a>
          <a href="mailto:hello@hibaux.ai" style={{ color: 'inherit', textDecoration: 'none' }}>hello@hibaux.ai</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Partners, Signup, Footer });