/* ============================================================
   PRAVI — CONTACT PAGE
   ============================================================ */

const { useState, useEffect, useRef } = React;
const P = window.PRAVI;
const ChevronMark = window.PraviChevronMark;
const HomeNav     = window.PraviHomeNav;
const HomeFooter  = window.PraviHomeFooter;
const PageHero    = window.PraviPageHero;
const useReveal   = window.praviUseReveal;
const useHashScroll = window.praviUseHashScroll;

const cInput = {
  width: '100%', padding: '13px 15px', fontFamily: 'DM Sans', fontSize: 16,
  background: 'var(--white)', border: '1px solid var(--rule)', color: 'var(--ink)',
  outline: 'none', borderRadius: 0, transition: 'border-color .15s',
};
const fOn = e => e.target.style.borderColor = 'var(--pravi-blue)';
const fOff = e => e.target.style.borderColor = 'var(--rule)';

function Detail({ label, value, href }) {
  const inner = (
    <>
      <div style={{ fontFamily: 'DM Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pravi-orange)', marginBottom: 8 }}>{label}</div>
      <div style={{ fontFamily: 'DM Serif Display', fontSize: 'clamp(20px, 1.8vw, 26px)', color: 'var(--ink)', lineHeight: 1.25 }}>{value}</div>
    </>
  );
  return (
    <div style={{ padding: '26px 28px', borderBottom: '1px solid var(--rule)' }}>
      {href ? <a href={href} style={{ display: 'block' }}>{inner}</a> : inner}
    </div>
  );
}

function ContactInfo() {
  return (
    <div className="reveal-l" style={{ border: '1px solid var(--ink)', background: 'var(--paper)' }}>
      <Detail label="Email" value={P.brand.email} href={`mailto:${P.brand.email}`} />
      {/* <Detail label="Phone" value={P.brand.phone} href={`tel:${P.brand.phone.replace(/\s+/g, '')}`} /> */}
      <Detail label="Studio" value={P.brand.address} />
      <div style={{ padding: '26px 28px' }}>
        <a href="https://www.linkedin.com/company/pravi-research" target="_blank" rel="noopener noreferrer" className="btn" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          Follow us on LinkedIn <ChevronMark size={12} color="var(--paper)" />
        </a>
      </div>
    </div>
  );
}

function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', org: '', message: '' });
  const [sent, setSent] = useState(false);
  const up = (k, v) => setForm(f => ({ ...f, [k]: v }));
  function submit(e) { e.preventDefault(); setSent(true); }

  if (sent) {
    return (
      <div className="reveal" style={{ border: '1px solid var(--ink)', background: 'var(--paper-deep)', padding: '54px 44px', minHeight: 420, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ width: 72, height: 72, border: '2px solid var(--pravi-orange)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--pravi-orange)', fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 42 }}>✓</div>
        <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(30px, 3.2vw, 46px)', letterSpacing: '-0.02em', margin: '24px 0 0', lineHeight: 1 }}>Message <em className="italic" style={{ color: 'var(--pravi-orange)' }}>sent.</em></h3>
        <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 460 }}>
          Thank you, {form.name.split(' ')[0] || 'friend'}. We've received your note and will reply at {form.email || 'your email'} within two working days.
        </p>
        <a className="btn" href="home.html#top" style={{ marginTop: 28, alignSelf: 'flex-start' }}>Back to home <ChevronMark size={12} color="var(--paper)" /></a>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="reveal" style={{ border: '1px solid var(--ink)', background: 'var(--paper)', padding: '40px 40px 44px' }}>
      <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(28px, 3vw, 44px)', letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
        Send us a <em className="italic" style={{ color: 'var(--pravi-orange)' }}>note.</em>
      </h3>
      <div className="r-form-2" style={{ marginTop: 26, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <label style={{ display: 'block' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 13, fontWeight: 600, marginBottom: 7 }}>Full name</div>
          <input style={cInput} value={form.name} required onChange={e => up('name', e.target.value)} onFocus={fOn} onBlur={fOff} />
        </label>
        <label style={{ display: 'block' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 13, fontWeight: 600, marginBottom: 7 }}>Email</div>
          <input style={cInput} type="email" value={form.email} required onChange={e => up('email', e.target.value)} onFocus={fOn} onBlur={fOff} />
        </label>
        <label style={{ display: 'block', gridColumn: 'span 2' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 13, fontWeight: 600, marginBottom: 7 }}>Organization</div>
          <input style={cInput} value={form.org} onChange={e => up('org', e.target.value)} onFocus={fOn} onBlur={fOff} placeholder="Optional" />
        </label>
        <label style={{ display: 'block', gridColumn: 'span 2' }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 13, fontWeight: 600, marginBottom: 7 }}>How can we help?</div>
          <textarea style={{ ...cInput, resize: 'vertical', lineHeight: 1.55 }} rows={5} value={form.message} required onChange={e => up('message', e.target.value)} onFocus={fOn} onBlur={fOff} placeholder="Tell us about the problem worth solving." />
        </label>
      </div>
      <button type="submit" className="btn" style={{ marginTop: 24 }}>Send message <ChevronMark size={12} color="var(--paper)" /></button>
    </form>
  );
}

function Contact() {
  const stageRef = useRef(null);
  useReveal(stageRef);
  useHashScroll();
  return (
    <div className="dir-editorial" ref={stageRef}>
      <div className="page">
        <HomeNav active="Contact" />
        <PageHero
          headline={<>Let's start a<br/><em>conversation.</em></>}
          lead="Whether it's a policy brief, a transformation program, or a problem you can't quite name yet, we'd like to hear about it. Reach us directly, or send a note below."
          buttons={<>
            <a className="btn" href="#form">Write to us <ChevronMark size={12} color="currentColor" /></a>
            <a className="btn ghost" href={`mailto:${P.brand.email}`}>Email directly</a>
          </>}
        />
        <section className="section" id="form" style={{ borderBottom: '1px solid var(--rule)' }}>
          <div className="container">
            <div className="r-stack-md" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'start' }}>
              <ContactInfo />
              <ContactForm />
            </div>
          </div>
        </section>
        <HomeFooter />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Contact />);