// 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={{position:'relative', overflow:'hidden', background:'var(--paper)', padding:'56px 24px', minHeight:360, display:'flex', alignItems:'center'}}>
      <style>{`
        @media (max-width:900px){ .sd-hero-img { display:none !important; } .sd-hero-copy { max-width:none !important; } }
      `}</style>
      <img className="sd-hero-img" src="assets/diagnostic-hero.png" alt="" aria-hidden="true"
        style={{position:'absolute', top:0, right:0, bottom:0, height:'100%', width:'52%', objectFit:'cover', objectPosition:'center 30%', transform:'scale(1.18)', transformOrigin:'center 30%',
          zIndex:0, pointerEvents:'none', userSelect:'none',
          WebkitMaskImage:'linear-gradient(to right, transparent 0, #000 42%)', maskImage:'linear-gradient(to right, transparent 0, #000 42%)'}} />
      <div style={{maxWidth:1200, margin:'0 auto', width:'100%', position:'relative', zIndex:1}}>
        <div className="sd-hero-copy" style={{maxWidth:600}}>
        <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)', textWrap:'pretty'}}>
          Knowledge you can trust, for the people who count on it.
        </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, textWrap:'pretty'}}>
          Tell us what you're up against. We'll map where your knowledge, risk, and context live, execute one working slice on your own work,
          and scope the path forward, so you see compliant, executable knowledge running across your teams, AI agents, and robots.
        </p>
        </div>
      </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:'28px 24px 40px'}}>
      <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 turns your knowledge into results you can prove.
            </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 working on.<br />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="What are you working on, and where do you want compliant-AI to help?" 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 build together to keep patients'{' '}
              <span className="gi-serif" style={{color:accent, fontSize:'1.12em', fontStyle:'normal'}}>hope</span> alive, turning your
              technical, quality, and operational knowledge into a governed foundation your teams 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>
              </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, Better,<br /><span style={{letterSpacing:'2.97px'}}>and Trusted solutions</span></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:'36px 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, display:'inline-block', textAlign:'left', maxWidth:720, textWrap:'pretty'}}>
          Turning your knowledge into results you can prove, for the teams who make therapies and
          the patients who receive them. That is the Minerva Way.
        </p>
      </div>
    </section>
  );
}

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