const { MicroText, Composicao, IconStrip } = window.DASKINODesignSystem_5a312e;
function SiteContact() {
  return <div data-screen-label="Contato">
    <section style={{padding:"clamp(40px,5vw,72px) clamp(20px,4vw,56px)",display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(min(100%,300px),1fr))",gap:"clamp(34px,5vw,72px)",alignItems:"start"}}>
      <div style={{display:"flex",flexDirection:"column",gap:26}}>
        <MicroText size="md" tone="dim">CONTATO</MicroText>
        <p style={{margin:0,fontFamily:"var(--font-mono)",fontWeight:300,fontSize:"clamp(19px,2vw,26px)",lineHeight:1.5,maxWidth:"24ch"}}>Conte o que precisa ser contado. O formato a gente decide depois.</p>
        <IconStrip items={["globe","plumb","diamond","switchback"]} size={20}/>
      </div>
      <div style={{border:"1px solid var(--rule-strong)",padding:"clamp(24px,4vw,44px)",display:"flex",flexDirection:"column",gap:24}}>
        <MicroText size="xs" tone="dim">VAMOS CONVERSAR</MicroText>
        <a href="mailto:contato@daskino.com.br" style={{fontFamily:"var(--font-mono)",fontSize:"clamp(15px,2vw,22px)",overflowWrap:"anywhere"}}>contato@daskino.com.br</a>
        <p style={{margin:0,fontSize:15,lineHeight:1.6,maxWidth:"42ch"}}>Escreva sobre o projeto, a ideia ou a história que você quer contar.</p>
        <a href="mailto:contato@daskino.com.br?subject=Vamos%20conversar%20sobre%20um%20projeto" style={{alignSelf:"flex-start",border:"1px solid currentColor",padding:"14px 18px",fontSize:12,letterSpacing:".1em"}}>ABRIR E-MAIL</a>
        <div style={{display:"flex",gap:20,flexWrap:"wrap",fontSize:12}}>
          <a href="https://instagram.com/daskinobr" target="_blank" rel="noreferrer">INSTAGRAM</a>
          <a href="https://www.linkedin.com/company/daskinobr/" target="_blank" rel="noreferrer">LINKEDIN</a>
        </div>
      </div>
    </section>
    <section><Composicao layout="crop" title="KEIN KINO" width={1440} ratio={3.4} focus={0.5} style={{width:"100%"}}/></section>
  </div>;
}
Object.assign(window,{SiteContact});