// Contact page — focused form + direct channels.

const ContactHero = () => (
  <section style={{paddingTop:168, paddingBottom:64, background:'#fff', position:'relative', overflow:'hidden'}}>
    <div className="grid-pattern" style={{position:'absolute', inset:0, opacity:0.5}}/>
    <div className="container" style={{position:'relative'}}>
      <Chip>Request Briefing</Chip>
      <h1 className="display" style={{marginTop:22, marginBottom:24, maxWidth:1040}}>
        Start wherever you are.
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        Three ways in: a technical deep-dive, a partnership conversation, or a single fixed-scope validation engagement. Tell us which and we will come prepared.
      </p>
    </div>
  </section>
);

const ContactForm = () => {
  const [kind, setKind] = React.useState('platform');
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  const opts = [
    {id:'platform',   title:'Platform partnership',    sub:'Embed FPDS inside our product surface'},
    {id:'agency',     title:'Agency validation',       sub:'Fixed-scope engagement · 6–10 weeks'},
    {id:'technical',  title:'Technical deep-dive',     sub:'Architecture walkthrough with our team'},
    {id:'other',      title:'Something else',          sub:'Investor · press · role inquiry'},
  ];
  return (
    <Section tint>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:64, alignItems:'start'}}>
        <div>
          <div className="reveal"><Eyebrow>Direct channels</Eyebrow></div>
          <h3 className="reveal delay-1" style={{fontSize:28, fontWeight:800, margin:'16px 0 28px', letterSpacing:'-0.01em'}}>Or skip the form.</h3>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <ChannelRow icon="mail" label="Email" value="nkalosakenyon@kenosaconsulting.com"/>
            <ChannelRow icon="calendar" label="Briefing slot" value="30 min · video · calendar link on request"/>
            <ChannelRow icon="briefcase" label="Site visit" value="Flexible · DMV-based but travel is fine"/>
            <ChannelRow icon="linkedin" label="LinkedIn" value="linkedin.com/company/kenosa-consulting"/>
          </div>
          <div style={{marginTop:32, padding:'20px 22px', background:'#fff', border:'1px solid var(--slate-200)', borderRadius:12}}>
            <div className="mono-label" style={{color:'#000080', fontSize:10, marginBottom:10}}>TYPICAL RESPONSE</div>
            <div style={{fontSize:14, color:'var(--slate-700)', lineHeight:1.6}}>Within <strong>2 business days</strong> for platform and agency inquiries. Technical deep-dives scheduled within a week.</div>
          </div>
        </div>

        <form className="reveal delay-2" onSubmit={onSubmit} style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:20, padding:'36px 36px', display:'flex', flexDirection:'column', gap:24, boxShadow:'0 30px 60px -30px rgba(0,0,128,0.15)'}}>
          {sent ? (
            <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:18, padding:'48px 24px', textAlign:'center'}}>
              <div style={{width:64, height:64, borderRadius:16, background:'#DCFCE7', color:'#16A34A', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Icon name="check" size={28}/>
              </div>
              <h3 style={{fontSize:26, fontWeight:800, margin:0, letterSpacing:'-0.01em'}}>Thank you.</h3>
              <p style={{fontSize:15, color:'var(--slate-600)', margin:0, maxWidth:380, lineHeight:1.6}}>We'll be in touch within 2 business days. Expect a short email with two or three calendar slots.</p>
            </div>
          ) : (
            <>
              <div>
                <div className="mono-label" style={{marginBottom:14}}>WHAT BRINGS YOU HERE</div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
                  {opts.map(o=>(
                    <button key={o.id} type="button" onClick={()=>setKind(o.id)} style={{textAlign:'left', padding:'14px 16px', border:`1px solid ${kind===o.id ? '#000080' : 'var(--slate-200)'}`, borderRadius:10, background: kind===o.id ? 'rgba(0,0,128,0.03)' : '#fff', transition:'all 0.2s', display:'flex', flexDirection:'column', gap:4}}>
                      <span style={{fontSize:14, fontWeight:700, color: kind===o.id ? '#000080' : 'var(--slate-900)'}}>{o.title}</span>
                      <span style={{fontSize:12, color:'var(--slate-500)'}}>{o.sub}</span>
                    </button>
                  ))}
                </div>
              </div>

              <FormField label="Name" name="name" placeholder="How we should address you"/>
              <FormField label="Organization" name="org" placeholder="Platform, agency, or firm"/>
              <FormField label="Work email" name="email" type="email" placeholder="@yourdomain"/>
              <FormField label="What should we come prepared to discuss?" name="notes" multiline placeholder="A specific agency, capability, partnership structure — whatever is top of mind."/>

              <button type="submit" className="btn-primary" style={{justifyContent:'center', padding:'16px 22px'}}>
                Send · we'll reply in ≤ 2 days <Icon name="arrow" size={14}/>
              </button>
              <div style={{fontSize:11, color:'var(--slate-500)', textAlign:'center', fontFamily:'var(--font-mono)', letterSpacing:'0.08em'}}>
                By submitting you agree to be contacted about this inquiry only.
              </div>
            </>
          )}
        </form>
      </div>
    </Section>
  );
};

const ChannelRow = ({ icon, label, value }) => (
  <div style={{display:'flex', alignItems:'center', gap:14, padding:'14px 16px', background:'#fff', border:'1px solid var(--slate-200)', borderRadius:10}}>
    <div style={{width:40, height:40, borderRadius:10, background:'#EFF6FF', color:'#000080', display:'flex', alignItems:'center', justifyContent:'center', flex:'none'}}><Icon name={icon} size={18}/></div>
    <div style={{flex:1}}>
      <div className="mono-label" style={{fontSize:9, marginBottom:3}}>{label}</div>
      <div style={{fontSize:14, fontWeight:600, color:'var(--slate-900)'}}>{value}</div>
    </div>
  </div>
);

const FormField = ({ label, name, type='text', placeholder, multiline }) => (
  <label style={{display:'flex', flexDirection:'column', gap:8}}>
    <span className="mono-label" style={{fontSize:10}}>{label}</span>
    {multiline ? (
      <textarea name={name} placeholder={placeholder} rows={4} style={{padding:'12px 14px', border:'1px solid var(--slate-200)', borderRadius:10, fontFamily:'inherit', fontSize:14, color:'var(--slate-900)', resize:'vertical', outline:'none', transition:'border-color 0.2s'}}
        onFocus={e=>e.target.style.borderColor='#000080'}
        onBlur={e=>e.target.style.borderColor='var(--slate-200)'}/>
    ) : (
      <input name={name} type={type} placeholder={placeholder} style={{padding:'12px 14px', border:'1px solid var(--slate-200)', borderRadius:10, fontFamily:'inherit', fontSize:14, color:'var(--slate-900)', outline:'none', transition:'border-color 0.2s'}}
        onFocus={e=>e.target.style.borderColor='#000080'}
        onBlur={e=>e.target.style.borderColor='var(--slate-200)'}/>
    )}
  </label>
);

window.ContactHero = ContactHero;
window.ContactForm = ContactForm;