/* global React, Nav */
const { useState: useCState } = React;

/* =============================================================================
   Contact page — C5 "Aside + Card"
   Left aside: title, intro, contact rows, social pills.
   Right card: form on white card surface with subtle hairline border.
   Palette: white/cream surface, ink, #7993AC accent · Montserrat throughout.
============================================================================= */

const ACCENT = '#7993AC';
const INK = '#0a0a0b';
const HAIR = 'rgba(10,10,11,.12)';
const MUTE = 'rgba(10,10,11,.6)';
const C_MONO  = { fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif', fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase' };
const C_TITLE = { fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif', fontWeight: 700, letterSpacing: '.02em' };

function CField({ label, required, type = 'text', textarea, value, onChange }) {
  const [focus, setFocus] = useCState(false);
  const line = focus ? INK : 'rgba(10,10,11,.18)';
  const base = {
    width: '100%', boxSizing: 'border-box',
    padding: '8px 0', background: 'transparent',
    border: 'none', borderBottom: `1px solid ${line}`,
    fontFamily: '"Montserrat", Arial, sans-serif', fontWeight: 500,
    fontSize: 14, color: INK, outline: 'none',
    transition: 'border-color .2s',
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <span style={{
        ...C_MONO, fontSize: 9, color: MUTE,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>{label}</span>
        {required && <span style={{ color: ACCENT }}>Required</span>}
      </span>
      {textarea ? (
        <textarea value={value} onChange={onChange}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{ ...base, minHeight: 80, resize: 'vertical' }} />
      ) : (
        <input value={value} onChange={onChange} type={type}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={base} />
      )}
    </label>
  );
}

function CPill({ children, secondary, onClick, type = 'button', disabled }) {
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      style={{
        padding: '11px 24px', borderRadius: 999, cursor: disabled ? 'not-allowed' : 'pointer',
        ...C_TITLE, fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase',
        background: secondary ? 'transparent' : INK,
        color: secondary ? INK : '#fff',
        border: secondary ? `1px solid ${HAIR}` : 'none',
        opacity: disabled ? .45 : 1,
        transition: 'opacity .2s',
      }}>{children}</button>
  );
}

function ContactUs({ onNav }) {
  const [form, setForm] = useCState({
    name: '', email: '', company: '', budget: '', details: '',
  });
  const [sent, setSent] = useCState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const canSubmit = form.name && form.email && form.details;

  return (
    <section style={{ minHeight: '100vh', background: '#fff', color: INK, position: 'relative' }}>
      <Nav current="Contact Us" onNav={onNav} onDark={false} />

      {/* Divider beneath nav for continuity with Photo page */}
      <div style={{
        position: 'absolute', top: 112, left: 0, right: 0,
        borderBottom: `1px solid ${HAIR}`,
      }} />

      <div className="slideUp" style={{
        paddingTop: 152, paddingBottom: 80,
        paddingLeft: 64, paddingRight: 64,
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '300px 1fr', gap: 56,
        animationDelay: '0.05s',
      }}>
        {/* Aside */}
        <aside>
          <div style={{ ...C_MONO, fontSize: 10, color: ACCENT }}>— Contact</div>
          <h1 style={{
            ...C_TITLE, fontSize: 'clamp(32px, 2.6vw, 40px)',
            lineHeight: 1.05, margin: '10px 0 16px', textTransform: 'uppercase',
            color: INK,
          }}>
            Get in touch<span style={{ color: ACCENT }}>.</span>
          </h1>
          <p style={{
            fontFamily: '"Montserrat", Arial, sans-serif', fontWeight: 400,
            fontSize: 13, color: MUTE, lineHeight: 1.6, margin: '0 0 26px',
            textWrap: 'pretty', maxWidth: 280,
          }}>
            UK photo and video production — full pre- and post-production. Studio inquiries, press, and licensing. We typically reply within two working days.
          </p>
          <div style={{ display: 'grid', gap: 18 }}>
            {[
              ['Email', 'hello@robis.org'],
              ['Phone', 'Contact for details'],
              ['Studio', 'London\nMilton Keynes\nBedford'],
              ['Hours', 'Mon — Fri\n9:00 — 18:00 GMT'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{ ...C_MONO, fontSize: 9, color: ACCENT }}>{k}</div>
                <div style={{
                  fontFamily: '"Montserrat", Arial, sans-serif', fontWeight: 500,
                  fontSize: 13, marginTop: 6, lineHeight: 1.55, whiteSpace: 'pre-line',
                }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 26 }}>
            {['IG', 'VM', 'BE'].map((s) => (
              <div key={s} style={{
                ...C_TITLE, fontSize: 10, color: INK,
                width: 32, height: 32, borderRadius: '50%',
                border: `1px solid ${HAIR}`, background: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', transition: 'background .2s, color .2s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = INK; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = INK; }}
              >{s}</div>
            ))}
          </div>
        </aside>

        {/* Form card */}
        <section style={{
          background: '#fff', border: `1px solid ${HAIR}`,
          padding: '32px 36px',
          display: 'flex', flexDirection: 'column', gap: 20,
          maxWidth: 720, alignSelf: 'start',
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingBottom: 4,
          }}>
            <h2 style={{
              ...C_TITLE, fontSize: 18, margin: 0, textTransform: 'uppercase', color: INK,
            }}>Send a brief<span style={{ color: ACCENT }}>.</span></h2>
            <div style={{ ...C_MONO, fontSize: 9, color: ACCENT }}>Reply within 48h</div>
          </div>

          {sent ? (
            <div style={{ paddingTop: 8 }}>
              <div style={{ ...C_TITLE, fontSize: 28, color: INK, textTransform: 'uppercase' }}>
                Sent<span style={{ color: ACCENT }}>.</span>
              </div>
              <p style={{
                fontFamily: '"Montserrat", Arial, sans-serif', fontSize: 13,
                color: MUTE, marginTop: 10, maxWidth: 460, lineHeight: 1.6,
              }}>
                Thanks — we&apos;ll come back to you within 48 hours. For urgent press, write to <span style={{ color: INK, fontWeight: 600 }}>hello@robis.org</span>.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
                <CPill secondary onClick={() => {
                  setSent(false);
                  setForm({ name: '', email: '', company: '', budget: '', details: '' });
                }}>Send another</CPill>
              </div>
            </div>
          ) : (
            <form
              onSubmit={(e) => { e.preventDefault(); if (canSubmit) setSent(true); }}
              style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                <CField label="Name" required value={form.name} onChange={set('name')} />
                <CField label="Email" required type="email" value={form.email} onChange={set('email')} />
                <CField label="Company" value={form.company} onChange={set('company')} />
                <CField label="Budget" value={form.budget} onChange={set('budget')} />
              </div>
              <CField label="Project details" textarea required value={form.details} onChange={set('details')} />
              <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                <CPill type="submit" disabled={!canSubmit}>Send Inquiry</CPill>
                <CPill secondary>Attach files</CPill>
              </div>
            </form>
          )}
        </section>
      </div>
    </section>
  );
}

Object.assign(window, { ContactUs });