// Contact Section — Terminal-style form + calendar card

function ContactSection() {
  const [ref, vis] = useReveal();
  const [formState, setFormState] = useState({ name:'', email:'', company:'', need:'automation', msg:'' });
  const [submitted, setSubmitted] = useState(false);

  const needs = [
    { id:'automation', label:'AI Automation', color:'#00B4FF' },
    { id:'video',      label:'AI Video',      color:'#9B6CFF' },
    { id:'content',    label:'Content Engine',color:'#00E5A0' },
    { id:'fullstack',  label:'Full-Stack',    color:'#F59E0B' },
  ];

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="contact" className="section-full" style={{ background:'var(--bg)', position:'relative', overflow:'hidden' }}>
      <Aurora opacity={0.6} />
      <div className="section" style={{ padding:'0 var(--section-px)', position:'relative' }}>
        <SectionHeader
          eyebrow="Start a Project"
          title={<>Got a system that should <span style={{ fontStyle:'italic', color:'var(--accent)' }}>be running itself?</span></>}
          sub="Free 48hr audit. I'll tell you exactly what to automate, what to drop, and what to build."
        />

        <div ref={ref} style={{
          display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:'var(--gap)', maxWidth:1100, margin:'0 auto',
          opacity: vis?1:0, transform: vis?'translateY(0)':'translateY(24px)',
          transition:'all .8s ease',
        }} className="contact-grid">

          {/* Terminal form */}
          <div className="glass-card" style={{ padding:0, overflow:'hidden' }}>
            {/* Terminal chrome */}
            <div style={{
              display:'flex', alignItems:'center', gap:8,
              padding:'11px 14px', background:'rgba(2,11,24,0.7)',
              borderBottom:'1px solid var(--border)',
            }}>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#FF5F57' }}/>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#FEBC2E' }}/>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#28C840' }}/>
              <span className="mono" style={{ flex:1, textAlign:'center', fontSize:11, color:'var(--muted)', letterSpacing:'0.08em' }}>
                shinabaze@dfv:~/intake $
              </span>
              <span className="mono" style={{ fontSize:10, color:'#00E5A0', letterSpacing:'0.1em' }}>● LIVE</span>
            </div>

            <form onSubmit={onSubmit} style={{ padding:'24px 26px 26px' }}>
              {submitted ? (
                <div style={{ padding:'32px 12px', textAlign:'center' }}>
                  <div style={{
                    width:56, height:56, borderRadius:'50%',
                    background:'rgba(0,229,160,0.15)', border:'1px solid rgba(0,229,160,0.4)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    margin:'0 auto 18px',
                    boxShadow:'0 0 calc(24px * var(--glow)) rgba(0,229,160,0.3)',
                  }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#00E5A0" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <div className="serif" style={{ fontSize:22, fontWeight:700, color:'var(--text)', marginBottom:8, letterSpacing:'-0.01em' }}>
                    Intake received.
                  </div>
                  <div className="mono" style={{ fontSize:12, color:'#00E5A0', letterSpacing:'0.1em', marginBottom:14 }}>
                    $ audit_pipeline.start() — OK
                  </div>
                  <p style={{ fontSize:13, color:'var(--muted-strong)', lineHeight:1.7, maxWidth:380, margin:'0 auto' }}>
                    Your audit lands in your inbox within 48 hours. Written by the same pipeline I'd build for you.
                  </p>
                  <button
                    type="button"
                    onClick={() => { setSubmitted(false); setFormState({ name:'', email:'', company:'', need:'automation', msg:'' }); }}
                    style={{ marginTop:24, background:'transparent', border:'1px solid var(--border-strong)', color:'var(--muted-strong)', padding:'8px 18px', borderRadius:8, fontSize:11.5, cursor:'pointer', fontFamily:'var(--font-mono)', letterSpacing:'0.08em' }}
                  >$ new_intake</button>
                </div>
              ) : (
                <>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14 }} className="contact-row">
                    <TField label="name" value={formState.name} onChange={v=>setFormState(s=>({...s,name:v}))} placeholder="Jane Doe"/>
                    <TField label="email" value={formState.email} onChange={v=>setFormState(s=>({...s,email:v}))} placeholder="jane@company.com" type="email"/>
                  </div>
                  <TField label="company" value={formState.company} onChange={v=>setFormState(s=>({...s,company:v}))} placeholder="Acme Inc. · (optional)" />

                  <div style={{ marginTop:16 }}>
                    <label className="mono" style={{ fontSize:10, color:'var(--muted)', letterSpacing:'0.14em', textTransform:'uppercase' }}>
                      &gt; what_do_you_need
                    </label>
                    <div style={{
                      display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(120px, 1fr))', gap:6, marginTop:8,
                    }}>
                      {needs.map(n => {
                        const active = formState.need === n.id;
                        return (
                          <button
                            type="button"
                            key={n.id}
                            onClick={()=>setFormState(s=>({...s, need:n.id}))}
                            style={{
                              padding:'10px 12px', borderRadius:8,
                              background: active ? `${n.color}1f` : 'rgba(2,11,24,0.6)',
                              border: `1px solid ${active ? n.color+'66' : 'var(--border)'}`,
                              color: active ? n.color : 'var(--muted-strong)',
                              fontSize:11.5, fontWeight:600, cursor:'pointer',
                              fontFamily:'var(--font-body)', letterSpacing:'0.02em',
                              transition:'all .2s',
                              display:'flex', alignItems:'center', gap:7, justifyContent:'center',
                            }}
                          >
                            <span style={{ width:6, height:6, borderRadius:'50%', background:n.color }}/>
                            {n.label}
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  <div style={{ marginTop:16 }}>
                    <label className="mono" style={{ fontSize:10, color:'var(--muted)', letterSpacing:'0.14em', textTransform:'uppercase' }}>
                      &gt; brief
                    </label>
                    <textarea
                      value={formState.msg}
                      onChange={e=>setFormState(s=>({...s, msg:e.target.value}))}
                      placeholder="What's broken, what's slow, what you wish ran itself…"
                      rows={4}
                      style={{
                        width:'100%', marginTop:8, padding:'12px 14px',
                        background:'rgba(2,11,24,0.6)', border:'1px solid var(--border)',
                        borderRadius:8, color:'var(--text)', fontSize:13,
                        fontFamily:'var(--font-body)', resize:'vertical', outline:'none',
                        lineHeight:1.6,
                      }}
                      onFocus={e=>e.currentTarget.style.borderColor='rgba(var(--accent-rgb),0.5)'}
                      onBlur={e=>e.currentTarget.style.borderColor='var(--border)'}
                    />
                  </div>

                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:20, gap:12, flexWrap:'wrap' }}>
                    <span className="mono" style={{ fontSize:10.5, color:'var(--muted)', letterSpacing:'0.08em' }}>
                      Takes ~40 seconds · zero spam
                    </span>
                    <button type="submit" className="btn-primary" style={{ padding:'12px 22px', fontSize:13 }}>
                      Send Intake
                      <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </button>
                  </div>
                </>
              )}
            </form>
          </div>

          {/* Side info card */}
          <div style={{ display:'flex', flexDirection:'column', gap:'var(--gap)' }}>
            <div className="glass-card" style={{ padding:24 }}>
              <div className="mono" style={{ fontSize:10, color:'var(--muted)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:12 }}>
                // What Happens Next
              </div>
              {[
                { t:'Under 24h', d:'I read your brief and reply personally' },
                { t:'Within 48h', d:'Your free audit lands in your inbox' },
                { t:'Day 3–5',   d:"If we're a fit, scoping call booked" },
              ].map((s,i)=>(
                <div key={i} style={{ display:'flex', gap:14, marginBottom: i < 2 ? 14 : 0, alignItems:'flex-start' }}>
                  <div style={{
                    flexShrink:0, width:28, height:28, borderRadius:'50%',
                    background:'rgba(var(--accent-rgb),0.14)', border:'1px solid rgba(var(--accent-rgb),0.35)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)', fontWeight:600,
                  }}>{i+1}</div>
                  <div>
                    <div className="mono" style={{ fontSize:11, color:'var(--accent)', letterSpacing:'0.08em', marginBottom:2 }}>{s.t}</div>
                    <div style={{ fontSize:13, color:'var(--muted-strong)', lineHeight:1.55 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="glass-card" style={{ padding:24 }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
                <span style={{ width:7, height:7, borderRadius:'50%', background:'#00E5A0', boxShadow:'0 0 8px #00E5A0', animation:'pulseDot 2s infinite' }}/>
                <span className="mono" style={{ fontSize:11, color:'#00E5A0', letterSpacing:'0.1em', textTransform:'uppercase' }}>Available · Q2 booking</span>
              </div>
              <div className="serif" style={{ fontSize:18, fontWeight:700, color:'var(--text)', marginBottom:10, letterSpacing:'-0.01em' }}>
                Or reach out directly.
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                <a href="mailto:shinabaze@dreamfoxverse.com" style={{ display:'flex', alignItems:'center', gap:10, color:'var(--muted-strong)', fontSize:13.5, fontFamily:'var(--font-mono)' }}>
                  <span style={{ color:'var(--accent)' }}>→</span> shinabaze@dreamfoxverse.com
                </a>
                <a href="https://dreamfoxverse.com" target="_blank" rel="noopener noreferrer" style={{ display:'flex', alignItems:'center', gap:10, color:'var(--muted-strong)', fontSize:13.5, fontFamily:'var(--font-mono)' }}>
                  <span style={{ color:'var(--accent)' }}>↗</span> dreamfoxverse.com
                </a>
                <div style={{ display:'flex', alignItems:'center', gap:10, color:'var(--muted-strong)', fontSize:13.5, fontFamily:'var(--font-mono)' }}>
                  <span style={{ color:'var(--accent)' }}>◉</span> Lagos · GMT+1
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .contact-grid{ grid-template-columns: 1fr !important; }
          .contact-row{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function TField({ label, value, onChange, placeholder, type='text' }) {
  return (
    <div>
      <label className="mono" style={{ fontSize:10, color:'var(--muted)', letterSpacing:'0.14em', textTransform:'uppercase' }}>
        &gt; {label}
      </label>
      <input
        type={type}
        value={value}
        onChange={e=>onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width:'100%', marginTop:7, padding:'12px 14px',
          background:'rgba(2,11,24,0.6)', border:'1px solid var(--border)',
          borderRadius:8, color:'var(--text)', fontSize:13.5,
          fontFamily:'var(--font-body)', outline:'none',
        }}
        onFocus={e=>e.currentTarget.style.borderColor='rgba(var(--accent-rgb),0.5)'}
        onBlur={e=>e.currentTarget.style.borderColor='var(--border)'}
      />
    </div>
  );
}

function Footer() {
  return (
    <footer style={{
      borderTop:'1px solid var(--border)', background:'var(--bg)',
      padding:'40px var(--section-px) 32px', position:'relative',
    }}>
      <div style={{
        maxWidth:1240, margin:'0 auto',
        display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:24,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:14 }}>
          <div style={{
            width:36, height:36, borderRadius:9,
            background:'rgba(var(--accent-rgb),0.14)',
            border:'1px solid rgba(var(--accent-rgb),0.34)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--font-mono)', color:'var(--accent)', fontSize:12, fontWeight:700,
          }}>SA</div>
          <div>
            <div className="serif" style={{ fontSize:15, fontWeight:700 }}>Shinabaze Ajiya</div>
            <div className="mono" style={{ fontSize:10.5, color:'var(--muted)', letterSpacing:'0.12em', marginTop:2, textTransform:'uppercase' }}>
              Founder · DreamFoxVerse
            </div>
          </div>
        </div>

        <div style={{ display:'flex', gap:22, fontSize:12.5, color:'var(--muted-strong)', flexWrap:'wrap' }}>
          <a href="#work">Work</a>
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
          <a href="https://dreamfoxverse.com" target="_blank" rel="noopener noreferrer" style={{ color:'var(--accent)' }}>DFV Agency ↗</a>
        </div>
      </div>

      <div style={{
        maxWidth:1240, margin:'22px auto 0', paddingTop:18, borderTop:'1px solid var(--border)',
        display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:12,
        fontSize:11, color:'var(--muted)', fontFamily:'var(--font-mono)', letterSpacing:'0.06em',
      }}>
        <span>© 2026 Shinabaze Ajiya · All systems running.</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap:8 }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:'#00E5A0', boxShadow:'0 0 6px #00E5A0' }}/>
          Built with AI · Deployed by AI · Operated by AI
        </span>
      </div>
    </footer>
  );
}

window.ContactSection = ContactSection;
window.Footer = Footer;