// Hadid Group — contact (info + form) const { SectionLabel, Button, Icon } = window.HadidGroupDesignSystem_9f7d08; function ContactRow({ icon, label, value, href }) { const inner = ( {label} {value} ); const style = { display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none' }; return href ? {inner} :

{inner}

; } function Field({ label, type = 'text', placeholder, area = false, ...rest }) { const base = { width: '100%', boxSizing: 'border-box', marginTop: 8, background: 'var(--navy-800)', border: '1px solid var(--border-dark)', borderRadius: 'var(--radius-sm)', padding: '14px 16px', color: '#fff', fontFamily: 'var(--font-sans)', fontSize: '0.95rem', outline: 'none', transition: 'border-color var(--dur-fast), box-shadow var(--dur-fast)', }; const onFocus = (e) => { e.target.style.borderColor = 'var(--gold-500)'; e.target.style.boxShadow = 'var(--focus-ring)'; }; const onBlur = (e) => { e.target.style.borderColor = 'var(--border-dark)'; e.target.style.boxShadow = 'none'; }; return ( {label} {area ?

: <input type={type} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} style={base} {...rest} />}
    </label>
  );
}

function Contact() {
  const { useState } = React;
  const [sent, setSent] = useState(false);
  const S = window.SITE;

return (
    <section id="contact" style={{ background: 'var(--navy-950)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div className="hg-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 'clamp(40px, 6vw, 84px)', alignItems: 'start' }}>
          {/* info */}
          <div>
            <Reveal><SectionLabel rule="before">Contact</SectionLabel></Reveal>
            <Reveal delay={90} as="h2" style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: '#fff' }}>
              Let's Start a<br /><span style={{ color: 'var(--gold-500)' }}>Conversation</span>
            </Reveal>
            <Reveal delay={150} as="p" style={{ margin: '20px 0 0', maxWidth: 440, fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.7, color: 'var(--on-dark-body)' }}>
              Whether you're planning a single residence or a city-scale development, our team is ready to help.
              Reach out to the Hadid Group office in Prague.
            </Reveal>
            <Reveal delay={210} style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 38 }}>
              <ContactRow icon="phone" label="Phone" value={S.phone} href={`tel:${S.phoneRaw}`} />
              <ContactRow icon="mail" label="Email" value={S.email} href={`mailto:${S.email}`} />
              <ContactRow icon="map-pin" label="Headquarters" value={S.addressPrague} />
              <ContactRow icon="clock" label="Office Hours" value="Mon – Fri · 09:00 – 18:00 CET" />
            </Reveal>
          </div>

{/* form */}
          <Reveal delay={140}>
            <div style={{ background: 'var(--navy-900)', border: '1px solid var(--border-dark)', borderRadius: 'var(--radius-md)', padding: 'clamp(28px, 3vw, 44px)', boxShadow: 'var(--shadow-card-dark)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '40px 10px' }}>
                  <span style={{ display: 'inline-flex', width: 64, height: 64, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--gold-500)', marginBottom: 18 }}>
                    <Icon name="check" size={32} strokeWidth={2.4} color="var(--navy-950)" />
                  </span>
                  <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.8rem', color: '#fff' }}>Thank You</h3>
                  <p style={{ margin: '10px 0 0', color: 'var(--on-dark-body)', fontFamily: 'var(--font-sans)' }}>Your enquiry has been received. Our team will respond within one business day.</p>
                  <div style={{ marginTop: 24 }}><Button variant="outline" onClick={() => setSent(false)}>Send another</Button></div>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <div className="hg-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <Field label="Full name" placeholder="Your name" required />
                    <Field label="Phone" type="tel" placeholder="+420 ..." />
                  </div>
                  <Field label="Email" type="email" placeholder="you@company.com" required />
                  <Field label="Project type" placeholder="e.g. Residential development" />
                  <Field label="Message" area placeholder="Tell us about your project..." />
                  <Button variant="primary" size="lg" type="submit" icon="arrow-right" style={{ width: '100%', marginTop: 4 }}>Send enquiry</Button>
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;