/* Page 5 — CTA + Footer (black) */

const fieldStyle = { background:'transparent', border:'none', borderBottom:'1px solid rgba(245,241,232,.3)', padding:'14px 2px', fontFamily:'var(--f-body)', fontSize:16, color:'var(--cream)', outline:'none', width:'100%' };

function Page5() {
  return (
    <>
      <section id="contact" className="cream-on-black" style={{ padding:'140px 0 100px' }}>
        <div className="wrap">
          <div className="page-chapter" style={{ borderColor:'var(--line-cream)' }}><span>(05 / 05) — Let's talk</span><span>Contact</span></div>

          <Reveal>
            <h2 className="display display-xl" style={{ marginTop:64, maxWidth:'14ch' }}>
              Tell us<br/>about{' '}<span style={{ display:'inline-block', background:'var(--yellow)', color:'var(--black)', padding:'0 18px 6px' }}>the task.</span>
            </h2>
          </Reveal>
          <Reveal delay={120} className="body-lg text-wrap-pretty" style={{ marginTop:36, maxWidth:560, color:'var(--muted-cream)' }}>
            We'll walk through the process, show the working modules already running in the ecosystem, and decide what to roll in immediately and what to build around you.
          </Reveal>

          <Reveal delay={200} className="p5-actions">
            <a href="mailto:hello@avasolutions.com" className="btn btn--yellow"><span>hello@avasolutions.com</span></a>
            <a href="https://t.me/avasolutions" className="btn" style={{ border:'1px solid var(--cream)', color:'var(--cream)' }}><span>@avasolutions · Telegram</span></a>
          </Reveal>

          <div className="p5-contact">
            <div>
              <div className="h-label" style={{ color:'var(--muted-cream)' }}>Or drop a note</div>
              <div className="display display-md" style={{ marginTop:12, fontSize:'clamp(22px,2.4vw,36px)', color:'var(--cream)' }}>What do you do, and what is slipping between the cracks?</div>
              <div className="mono" style={{ marginTop:24, opacity:.55, color:'var(--cream)' }}>First reply within one business day.</div>
            </div>
            <form onSubmit={(e)=>{e.preventDefault(); alert("Thanks — we'll be in touch within one business day.")}} style={{ display:'flex', flexDirection:'column', gap:18 }}>
              <div className="p5-form-row">
                <input required placeholder="Name" style={fieldStyle} />
                <input required type="email" placeholder="Email" style={fieldStyle} />
              </div>
              <input placeholder="Company · role" style={fieldStyle} />
              <textarea required placeholder="The task, in one or two sentences" rows={4} style={{...fieldStyle, resize:'vertical', paddingTop:16}} />
              <button type="submit" className="btn btn--yellow" style={{ alignSelf:'flex-start', marginTop:8 }}>
                <span>Send to the team</span>
              </button>
            </form>
          </div>
        </div>
      </section>

      <footer className="cream-on-black" style={{ padding:'0 0 48px' }}>
        <div className="wrap">
          <div className="footer-grid">
            <div>
              <Logo onDark size={48} />
              <div className="body" style={{ marginTop:14, opacity:.6, maxWidth:280 }}>Hospitality-first ecosystem &amp; automation studio.</div>
              <div className="mono" style={{ marginTop:22, opacity:.5 }}>© 2026 · Ava Solutions</div>
            </div>
            <div>
              <div className="mono" style={{ opacity:.5, marginBottom:12 }}>Products</div>
              <ul style={{ listStyle:'none', display:'flex', flexDirection:'column', gap:6, fontSize:14 }}>
                {['AvaPro CRM','AvaPro ERP','TeamHub','AvaBase','Mission Control','Koshiko'].map(p=><li key={p}>{p}</li>)}
              </ul>
            </div>
            <div>
              <div className="mono" style={{ opacity:.5, marginBottom:12 }}>Custom</div>
              <ul style={{ listStyle:'none', display:'flex', flexDirection:'column', gap:6, fontSize:14 }}>
                {['SoloTrack','AvaTrack','OpenClaw'].map(p=><li key={p}>{p}</li>)}
              </ul>
            </div>
            <div>
              <div className="mono" style={{ opacity:.5, marginBottom:12 }}>Contact</div>
              <ul style={{ listStyle:'none', display:'flex', flexDirection:'column', gap:6, fontSize:14 }}>
                <li>hello@avasolutions.com</li>
                <li>@avasolutions</li>
                <li style={{ opacity:.6 }}>Dubai · Kyiv · Remote</li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

window.Page5 = Page5;