// Contact page
window.ContactPage=function ContactPage({lang}){
  const t=useT(lang);
  const fr=lang==="fr";
  const items=[
    {ico:<Icon.wa/>,h:t.wa_label,v:WA_NUMBER,sub:fr?"Réponse en moins de 5 min":"Reply under 5 min"},
    {ico:<Icon.phone/>,h:t.phone_l,v:WA_NUMBER,sub:fr?"Lun-Dim · 7h–22h":"Mon-Sun · 7am-10pm"},
    {ico:<Icon.mail/>,h:"Email",v:"hello@dynastydream.mu",sub:fr?"Devis sous 2h":"Quote in 2h"},
    {ico:<Icon.pin/>,h:t.addr_l,v:t.addr_v,sub:fr?"Sur RDV à La Gaulette":"By appt. at La Gaulette"}
  ];
  return (
    <>
      <PageHero eb={t.ctc_eb} title={t.ctc_t} sub={t.ctc_s} hue="coral" img={IMG.pages.contact} label={fr?"À l'écoute, 7j/7":"Listening, 7/7"}/>
      <section className="section" style={{paddingTop:0}}>
        <div className="container contact-grid">
          <aside className="contact-card">
            <div>
              <div className="eyebrow eb-line" style={{color:"var(--gold)"}}>{fr?"Coordonnées":"Get in touch"}</div>
              <h3 style={{marginTop:10}}>{fr?"Un humain, vraiment, à l'autre bout du fil.":"A real human, on the other side."}</h3>
            </div>
            {items.map((x,i)=>(
              <div className="contact-item" key={i}>
                <div className="ico">{x.ico}</div>
                <div>
                  <h5>{x.h}</h5>
                  <p>{x.v}</p>
                  <p style={{color:"#7B8B92",fontSize:12,marginTop:2}}>{x.sub}</p>
                </div>
              </div>
            ))}
          </aside>
          <div>
            <ContactForm lang={lang}/>
          </div>
        </div>
      </section>
    </>
  );
};