// ContactPage.jsx — Minerva contact page, upgraded to the 2.2 design language.
// Structure mirrors the live minervakrm.com/contact layout (hero → intro + form + get-in-touch → closing),
// but the contact intake is reframed as "Start Diagnostic" and the right-hand panel
// uses the dark-style design cue (navy surface, one accent + glow, spectrum top-rule, italic-serif accent word).

// hex accent → soft glow rgba (~27% alpha), matching the brief's "<accent>46" shadow
function contactGlow(hex) {
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return `rgba(${r},${g},${b},0.27)`;
}

// ---- HERO ----
function ContactHero() {
  return (
    <section data-screen-label="Contact hero" style={{background:'var(--paper)', padding:'56px 24px 8px'}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div className="eyebrow" style={{fontSize:14, letterSpacing:'0.18em', marginBottom:18}}>Start a diagnostic</div>
        <h1 style={{fontSize:52, fontWeight:900, lineHeight:1.08, letterSpacing:'-0.02em', margin:'0 0 22px', color:'var(--minerva-blue)', maxWidth:760, textWrap:'pretty'}}>
          Let's work together to achieve your goals
        </h1>
        <div style={{height:4, width:80, background:'var(--minerva-gold)', borderRadius:2, marginBottom:24}}></div>
        <p style={{fontSize:19, lineHeight:1.6, color:'var(--fg-muted)', margin:0, maxWidth:680, textWrap:'pretty'}}>
          Tell us where your knowledge, risk, and context break down today. We'll map it, scope a path forward,
          and show you what compliant, executable knowledge looks like for your teams — Humans, AI Agents, and Robots.
        </p>
      </div>
    </section>
  );
}

// ---- FORM FIELD ----
function Field({label, type='text', required, full, area, value, onChange, placeholder}) {
  const [focus, setFocus] = React.useState(false);
  const base = {
    width:'100%', boxSizing:'border-box', fontFamily:'inherit', fontSize:15, color:'var(--fg)',
    background:'#fff', border:'1px solid var(--border)', borderRadius:8, padding:'12px 14px',
    outline:'none', transition:'border-color .15s cubic-bezier(0.2,0.8,0.2,1), box-shadow .15s cubic-bezier(0.2,0.8,0.2,1)',
    ...(focus ? {borderColor:'var(--minerva-blue)', boxShadow:'0 0 0 3px rgba(28,77,161,0.18)'} : {}),
  };
  return (
    <label style={{display:'block', gridColumn: full ? '1 / -1' : 'auto'}}>
      <span style={{display:'block', fontSize:13, fontWeight:700, color:'var(--fg)', marginBottom:7}}>
        {label}{required && <span style={{color:'var(--minerva-red)', marginLeft:3}}>*</span>}
      </span>
      {area ? (
        <textarea rows={5} value={value} onChange={onChange} placeholder={placeholder}
          onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} style={{...base, resize:'vertical', minHeight:120}}></textarea>
      ) : (
        <input type={type} value={value} onChange={onChange} placeholder={placeholder}
          onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} style={base}/>
      )}
    </label>
  );
}

// ---- FORM + GET-IN-TOUCH ----
function ContactBody({t}) {
  const accent = t.panelAccent || '#3FB1E5';
  const [form, setForm] = React.useState({name:'', company:'', email:'', phone:'', message:''});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="contact" data-screen-label="Contact form" style={{background:'var(--ink-050)', padding:'56px 24px 80px'}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div className="contact-grid">
          {/* FORM CARD (light) */}
          <div className="mk-card" style={{padding:'40px', display:'flex', flexDirection:'column'}}>
            <div className="eyebrow" style={{marginBottom:12}}>Your diagnostic intake</div>
            <h2 style={{fontSize:26, fontWeight:900, letterSpacing:'-0.01em', lineHeight:1.25, margin:'0 0 10px', textWrap:'pretty'}}>
              In research, development, and commercialization, Minerva helps you achieve faster, smarter, safer results
            </h2>
            <p style={{fontSize:15, lineHeight:1.6, color:'var(--fg-muted)', margin:'0 0 28px', textWrap:'pretty'}}>
              Share a few details and what you're trying to solve. We'll follow up to schedule your diagnostic.
            </p>

            {sent ? (
              <div role="status" style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-start', gap:10, padding:'24px 0'}}>
                <div style={{width:48, height:48, borderRadius:999, background:'var(--accent-soft)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--minerva-blue)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <h3 style={{fontSize:20, fontWeight:700, margin:0}}>Thanks — your request is in.</h3>
                <p style={{fontSize:15, color:'var(--fg-muted)', margin:0, maxWidth:380, textWrap:'pretty'}}>
                  A member of the Minerva team will reach out shortly to scope your diagnostic and next steps.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
                <Field label="Name" required value={form.name} onChange={set('name')}></Field>
                <Field label="Company" value={form.company} onChange={set('company')}></Field>
                <Field label="Email" type="email" required value={form.email} onChange={set('email')}></Field>
                <Field label="Phone" type="tel" value={form.phone} onChange={set('phone')}></Field>
                <Field label="How can we help you?" area full value={form.message} onChange={set('message')}
                       placeholder="Where do knowledge, risk, or context break down today?"></Field>
                <div style={{gridColumn:'1 / -1', display:'flex', alignItems:'center', gap:16, flexWrap:'wrap', marginTop:4}}>
                  <button type="submit" className="mk-btn-gold">Start Diagnostic →</button>
                  <span style={{fontSize:13, color:'var(--fg-subtle)'}}>We typically respond within one business day.</span>
                </div>
              </form>
            )}
          </div>

          {/* GET IN TOUCH (navy, dark-style cue) */}
          <aside className="gi-card contact-aside" style={{padding:'40px 36px', display:'flex', flexDirection:'column', '--gi-accent':accent, '--gi-accent-glow':contactGlow(accent)}}>
            <div className="gi-spectrum" style={{position:'absolute', top:0, left:0, right:0, height:3}}></div>
            <div className="eyebrow" style={{color:accent, marginBottom:14}}>Get in touch</div>
            <p style={{fontSize:17, lineHeight:1.65, color:'rgba(231,239,250,0.88)', margin:'0 0 28px', textWrap:'pretty'}}>
              Let's partner and innovate together to keep patients'{' '}
              <span className="gi-serif" style={{color:accent, fontSize:'1.12em'}}>hope</span> alive — turning complex
              technical, quality, and operational data into knowledge your people and your AI can trust.
            </p>

            <div style={{display:'flex', flexDirection:'column', gap:22}}>
              <ContactRow accent={accent} label="Corporate office">
                5901 West Century Blvd, Suite 750<br/>Los Angeles, CA 90045
              </ContactRow>
              <ContactRow accent={accent} label="Email">
                <a href="mailto:info@minervakrm.com" style={{color:'#fff', fontWeight:700, textDecoration:'none'}}>info@minervakrm.com</a>
              </ContactRow>
              <ContactRow accent={accent} label="Connect">
                <a href="https://www.linkedin.com/company/3794187" style={{color:'#fff', fontWeight:700, textDecoration:'none'}}>LinkedIn</a>
                <span style={{color:'rgba(231,239,250,0.42)', margin:'0 8px'}}>·</span>
                <a href="https://www.youtube.com/channel/UCymP2v1Q6_NAotsfSEPB_nA" style={{color:'#fff', fontWeight:700, textDecoration:'none'}}>YouTube</a>
              </ContactRow>
            </div>

            <div style={{marginTop:'auto', paddingTop:28}}>
              <div style={{fontSize:13.5, fontWeight:700, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--minerva-gold)'}}>Faster Smarter Safer</div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function ContactRow({label, accent, children}) {
  return (
    <div>
      <div style={{fontSize:12, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:accent, marginBottom:6}}>{label}</div>
      <div style={{fontSize:15.5, lineHeight:1.6, color:'rgba(231,239,250,0.92)'}}>{children}</div>
    </div>
  );
}

// ---- CLOSING ----
function ContactClosing() {
  return (
    <section data-screen-label="Closing" style={{background:'#fff', padding:'72px 24px'}}>
      <div style={{maxWidth:820, margin:'0 auto', textAlign:'center'}}>
        <h2 style={{fontSize:34, fontWeight:900, letterSpacing:'-0.02em', margin:'0 0 14px', textWrap:'pretty'}}>
          Let's do great things together for the benefit of patients
        </h2>
        <p style={{fontSize:18, lineHeight:1.6, color:'var(--fg-muted)', margin:0, textWrap:'pretty'}}>
          Delivering faster, smarter, and safer results for clients, doctors, and patients through a knowledge and
          risk-based approach — the Minerva way.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { ContactHero, Field, ContactBody, ContactRow, ContactClosing });