// Contact / CTA + simple form
const Contact = () => {
  const [budget, setBudget] = React.useState('$10k–$25k');
  const [service, setService] = React.useState('Web build');
  const [submitted, setSubmitted] = React.useState(false);

  return (
    <Section
      id="contact"
      label="06 / Start a project"
      kicker="A real human responds inside 24h"
      title="Got something to build?"
      subtitle="Tell us the rough shape of the project. We'll come back with whether we're a fit, ballpark numbers, and the next two questions worth answering."
    >
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'stretch'}}>
        {/* Form */}
        <div className="card" style={{padding:'32px 36px'}}>
          {!submitted ? (
            <form onSubmit={(e)=>{e.preventDefault();setSubmitted(true);}}>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:20}}>
                <Field label="Your name" placeholder="Jane Cooper"/>
                <Field label="Company" placeholder="Acme Inc."/>
              </div>
              <div style={{marginBottom:20}}>
                <Field label="Email" type="email" placeholder="jane@acme.co"/>
              </div>

              <div style={{marginBottom:20}}>
                <Label>What do you need?</Label>
                <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                  {['Web build','Rebuild / rescue','SEO','AI integration','Chatbot','Commerce','Something else'].map(s => (
                    <button key={s} type="button" onClick={()=>setService(s)} style={{
                      padding:'8px 12px', borderRadius:8, fontSize:12,
                      border:'1px solid', borderColor: service===s ? 'var(--accent)' : 'var(--line)',
                      background: service===s ? 'rgba(212,255,58,0.1)' : 'transparent',
                      color: service===s ? 'var(--accent)' : 'var(--ink-2)',
                      fontFamily:'var(--mono)',letterSpacing:'0.02em', transition:'all .15s ease'
                    }}>{s}</button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom:20}}>
                <Label>Budget range</Label>
                <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                  {['< $5k','$5k–$10k','$10k–$25k','$25k–$60k','$60k+'].map(b => (
                    <button key={b} type="button" onClick={()=>setBudget(b)} style={{
                      padding:'8px 12px', borderRadius:8, fontSize:12,
                      border:'1px solid', borderColor: budget===b ? 'var(--accent)' : 'var(--line)',
                      background: budget===b ? 'rgba(212,255,58,0.1)' : 'transparent',
                      color: budget===b ? 'var(--accent)' : 'var(--ink-2)',
                      fontFamily:'var(--mono)',letterSpacing:'0.02em', transition:'all .15s ease'
                    }}>{b}</button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom:24}}>
                <Label>Tell us about the project</Label>
                <textarea placeholder="What are you building, who's it for, when do you need it?" rows="4" style={{
                  width:'100%', padding:'12px 14px', borderRadius:8, background:'var(--bg-3)',
                  border:'1px solid var(--line-2)', color:'var(--ink)', fontSize:14,
                  fontFamily:'var(--sans)', outline:'none', resize:'vertical', minHeight:100
                }}/>
              </div>

              <button type="submit" className="btn btn-primary" style={{width:'100%',justifyContent:'center'}}>
                Send brief {Icon.arrow()}
              </button>
            </form>
          ) : (
            <div style={{textAlign:'center',padding:'40px 20px'}}>
              <div style={{width:64,height:64,borderRadius:'50%',background:'rgba(212,255,58,0.12)',border:'1px solid var(--accent)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--accent)',marginBottom:20}}>
                {Icon.check({width:24,height:24})}
              </div>
              <h3 style={{fontSize:24,fontWeight:500,letterSpacing:'-0.02em',marginBottom:10}}>Brief received.</h3>
              <p style={{color:'var(--ink-2)',fontSize:14,maxWidth:360,margin:'0 auto 24px'}}>
                Hassan will reply within 24 hours — usually faster. Keep an eye on your inbox (and spam folder, just in case).
              </p>
              <button onClick={()=>setSubmitted(false)} className="btn btn-ghost">Send another</button>
            </div>
          )}
        </div>

        {/* Side info */}
        <div style={{display:'flex',flexDirection:'column',gap:16}}>
          <div className="card" style={{padding:'28px 32px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>BOOK DIRECTLY</div>
            <div style={{fontSize:18,fontWeight:500,marginBottom:8,letterSpacing:'-0.01em'}}>30-min intro call</div>
            <p style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5,marginBottom:18}}>
              Zoom or Meet. We'll talk through your project, give honest takes, and you'll leave with at least one useful idea.
            </p>
            <button className="btn btn-ghost" style={{padding:'10px 14px',fontSize:13}}>Pick a time {Icon.arrow()}</button>
          </div>

          <div className="card" style={{padding:'28px 32px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>OR WRITE TO US</div>
            <div style={{display:'grid',gap:12}}>
              {[
                ['hi@solidatoms.com','New work'],
                ['careers@solidatoms.com','Join the studio'],
                ['press@solidatoms.com','Press'],
              ].map(([e,l]) => (
                <div key={e} style={{display:'flex',justifyContent:'space-between',padding:'10px 0',borderBottom:'1px solid var(--line)'}}>
                  <span style={{fontSize:14}}>{e}</span>
                  <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{l.toUpperCase()}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{padding:'28px 32px', background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent)'}}>
            <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>● CURRENT CAPACITY</div>
            <div style={{fontSize:18,fontWeight:500,marginBottom:6,letterSpacing:'-0.01em'}}>2 of 3 slots open — June</div>
            <div style={{fontSize:13,color:'var(--ink-3)'}}>July is filling. August onward, plenty of room.</div>
            <div style={{display:'flex',gap:8,marginTop:18}}>
              {[1,2,3].map(i => (
                <div key={i} style={{flex:1,height:6,borderRadius:3,background: i<=2 ? 'var(--accent)' : 'var(--bg-3)'}}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

const Label = ({ children }) => (
  <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8,textTransform:'uppercase'}}>{children}</div>
);

const Field = ({ label, placeholder, type='text' }) => (
  <div>
    <Label>{label}</Label>
    <input type={type} placeholder={placeholder} style={{
      width:'100%', padding:'12px 14px', borderRadius:8, background:'var(--bg-3)',
      border:'1px solid var(--line-2)', color:'var(--ink)', fontSize:14,
      fontFamily:'var(--sans)', outline:'none'
    }} onFocus={e=>e.target.style.borderColor='var(--accent)'} onBlur={e=>e.target.style.borderColor='var(--line-2)'}/>
  </div>
);

window.Contact = Contact;