// ZIADFILMING — Page: Contact

const cs = {
  wrap: { padding:'160px 0' },
  inner: { maxWidth:960, margin:'0 auto', padding:'0 48px' },
  h1: { fontFamily:'var(--font-display)', fontWeight:700,
        fontSize:'clamp(64px,10vw,144px)', color:'#fff', textTransform:'uppercase',
        letterSpacing:'-0.04em', lineHeight:0.9, margin:'0 0 64px' },
  grid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:96, marginBottom:96 },
  eyebrow: { color:'#52525b', textTransform:'uppercase', letterSpacing:'0.1em',
             fontSize:12, marginBottom:32 },
  lead: { fontSize:24, color:'#d4d4d8', fontWeight:300, lineHeight:1.5, marginBottom:48 },
  row: { display:'flex', alignItems:'center', gap:24, marginBottom:32 },
  circle: { width:48, height:48, borderRadius:9999, background:'#18181b',
            display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', flexShrink:0 },
  rowKey: { color:'#71717a', fontSize:11, textTransform:'uppercase', marginBottom:4 },
  rowVal: { color:'#fff', fontSize:18, overflowWrap:'anywhere' },
  ctaCol: { display:'flex', flexDirection:'column', gap:24 },
  card: (white) => ({
    position:'relative', overflow:'hidden', padding:40, borderRadius:16,
    height:256, display:'flex', flexDirection:'column', justifyContent:'space-between',
    background: white ? '#fff' : '#18181b',
    color: white ? '#000' : '#fff',
    border: white ? 'none' : '1px solid #27272a',
    cursor:'pointer', transition:'all 250ms var(--ease-standard)',
    textDecoration:'none',
  }),
  cardTop: { display:'flex', justifyContent:'space-between', alignItems:'flex-start' },
  cardTag: { fontSize:10, textTransform:'uppercase', letterSpacing:'0.15em', fontWeight:700 },
  cardTitle: { fontFamily:'var(--font-display)', fontWeight:700, fontSize:30,
               textTransform:'uppercase', letterSpacing:'-0.02em', margin:0 },
  cardSub: (white) => ({ marginTop:8, color: white ? '#52525b' : '#71717a', fontSize:15 }),
  outro: { paddingTop:96, borderTop:'1px solid #18181b', textAlign:'center' },
  outroKicker: { color:'#52525b', fontSize:11, textTransform:'uppercase', letterSpacing:'0.5em', marginBottom:16 },
  outroText: { fontFamily:'var(--font-display)', fontWeight:800,
               fontSize:'clamp(40px,8vw,112px)', color:'#fff', textTransform:'uppercase',
               letterSpacing:'-0.04em', cursor:'pointer', transition:'color 200ms',
               display:'inline-block', textDecoration:'none' },
};

function Contact() {
  const [press, setPress] = React.useState(null);
  const [outroHover, setOutroHover] = React.useState(false);
  return (
    <div style={cs.wrap} className="zf-contact-wrap">
      <div style={cs.inner} className="zf-section-inner">
        <h1 style={cs.h1} className="zf-reveal zf-contact-h1">Contact</h1>

        <div style={cs.grid} className="zf-contact-grid">
          <div className="zf-reveal zf-reveal-delay-1">
            <h2 style={cs.eyebrow}>Get in Touch</h2>
            <p style={cs.lead} className="zf-contact-lead">Available for collaborations, commissions, and visual storytelling projects globally.</p>
            <div style={cs.row}>
              <div style={cs.circle}><Icon.Mail size={20}/></div>
              <div style={{ minWidth:0 }}>
                <div style={cs.rowKey}>Email</div>
                <a href={'mailto:' + window.SITE.email} style={{ ...cs.rowVal, fontSize:'clamp(14px, 2vw, 18px)' }}>{window.SITE.email}</a>
              </div>
            </div>
            <div style={cs.row}>
              <div style={cs.circle}><Icon.MapPin size={20}/></div>
              <div>
                <div style={cs.rowKey}>Location</div>
                <div style={cs.rowVal}>{window.SITE.location}</div>
              </div>
            </div>
          </div>
          <div style={cs.ctaCol} className="zf-reveal zf-reveal-delay-2">
            <a href={window.SITE.whatsappUrl} target="_blank" rel="noopener noreferrer"
               className="zf-contact-card"
               style={{ ...cs.card(true), transform: press==='wa'?'scale(0.96)':'scale(1)' }}
               onMouseDown={()=>setPress('wa')} onMouseUp={()=>setPress(null)} onMouseLeave={()=>setPress(null)}>
              <div style={cs.cardTop}>
                <Icon.Message size={32}/>
                <span style={cs.cardTag}>Quick Contact</span>
              </div>
              <div>
                <h3 style={cs.cardTitle}>WhatsApp</h3>
                <p style={cs.cardSub(true)}>+974 7730 8972</p>
              </div>
            </a>
            <a href={window.SITE.instagramUrl} target="_blank" rel="noopener noreferrer"
               className="zf-contact-card"
               style={{ ...cs.card(false), transform: press==='ig'?'scale(0.96)':'scale(1)' }}
               onMouseDown={()=>setPress('ig')} onMouseUp={()=>setPress(null)} onMouseLeave={()=>setPress(null)}>
              <div style={cs.cardTop}>
                <Icon.Instagram size={32}/>
                <span style={cs.cardTag}>Follow the Work</span>
              </div>
              <div>
                <h3 style={cs.cardTitle}>Instagram</h3>
                <p style={cs.cardSub(false)}>@ziadfilming</p>
              </div>
            </a>
          </div>
        </div>

        <div style={cs.outro} className="zf-reveal zf-contact-outro">
          <p style={cs.outroKicker}>Start a conversation</p>
          <a href={'mailto:' + window.SITE.email}
             style={{ ...cs.outroText, color: outroHover ? '#a1a1aa' : '#fff' }}
             onMouseEnter={() => setOutroHover(true)} onMouseLeave={() => setOutroHover(false)}>
            Let's Talk
          </a>
        </div>
      </div>
    </div>
  );
}

window.Contact = Contact;